feat(face-recognition): add face detection support and UI overlay

Models/Response/Picture/FaceResponse.cs

@@ -0,0 +1,11 @@
+namespace Foxel.Models.Response.Picture;
+
+public record FaceResponse
+{
+    public int X { get; set; }
+    public int Y { get; set; }
+    public int W { get; set; }
+    public int H { get; set; }
+    public double FaceConfidence { get; set; }
+    public string? PersonName { get; set; }
+}

Models/Response/Picture/PictureResponse.cs

@@ -27,5 +27,5 @@ public record PictureResponse
     public string? AlbumName { get; set; }
     public PermissionType Permission { get; set; } = PermissionType.Public;
     public string? StorageModeName { get; set; }
-    
+        public List<FaceResponse>? Faces { get; set; }
 }

Services/Background/Processors/FaceRecognitionTaskProcessor.cs

@@ -1,4 +1,5 @@
 using Foxel.Models.DataBase;
+using Foxel.Services.Configuration;
 using Foxel.Services.Storage;
 using Microsoft.EntityFrameworkCore;
 using System.Text.Json;
@@ -55,14 +56,15 @@ namespace Foxel.Services.Background.Processors
     {
         private readonly IDbContextFactory<MyDbContext> _contextFactory;
         private readonly IServiceProvider _serviceProvider;
+        private readonly IConfigService _configService;
         private readonly ILogger<FaceRecognitionTaskProcessor> _logger;
         private readonly HttpClient _httpClient;
-        private const string FaceApiUrl = "http://103.143.81.28:8066/represent";
+
-        private const string ApiKey = "";
 
         public FaceRecognitionTaskProcessor(
             IDbContextFactory<MyDbContext> contextFactory,
             IServiceProvider serviceProvider,
+            IConfigService configService,
             ILogger<FaceRecognitionTaskProcessor> logger,
             HttpClient httpClient)
         {
@@ -70,6 +72,7 @@ namespace Foxel.Services.Background.Processors
             _serviceProvider = serviceProvider;
             _logger = logger;
             _httpClient = httpClient;
+            _configService = configService;
         }
 
         public async Task ProcessAsync(BackgroundTask backgroundTask)
@@ -212,6 +215,8 @@ namespace Foxel.Services.Background.Processors
 
         private async Task<FaceRecognitionResponse?> CallFaceRecognitionApiAsync(string imagePath)
         {
+            string FaceApiUrl = _configService["FaceRecognition:ApiEndpoint"];
+            string ApiKey = _configService["FaceRecognition:ApiKey"];
             using var form = new MultipartFormDataContent();
             using var fileStream = new FileStream(imagePath, FileMode.Open, FileAccess.Read);
             using var fileContent = new StreamContent(fileStream);

Services/Mapping/MappingService.cs

@@ -63,7 +63,16 @@ namespace Foxel.Services.Mapping
                 AlbumName = picture.Album?.Name,
                 Permission = picture.Permission,
                 FavoriteCount = picture.Favorites?.Count ?? 0,
-                StorageModeName = picture.StorageMode?.Name
+                StorageModeName = picture.StorageMode?.Name,
+                Faces = picture.Faces?.Select(face => new FaceResponse
+                {
+                    X = face.X,
+                    Y = face.Y,
+                    W = face.W,
+                    H = face.H,
+                    FaceConfidence = face.FaceConfidence,
+                    PersonName = face.PersonName
+                }).ToList(),
             };
         }
     }

Services/Media/PictureService.cs

@@ -157,6 +157,7 @@ public class PictureService(
         // 构建基础查询
         IQueryable<Picture> query = dbContext.Pictures
             .Include(p => p.Tags)
+            .Include(p => p.Faces)
             .Include(p => p.User);
 
         // 应用文本搜索条件

Web/src/api/pictureApi.ts

@@ -24,6 +24,7 @@ export interface FilteredPicturesRequest {
 
 // 图片响应数据
 export interface PictureResponse {
+  faces: any;
   id: number;
   name: string;
   path: string;

Web/src/components/image/ImageViewer.css

@@ -375,3 +375,63 @@
 .image-loading-spinner .ant-spin-dot-item {
   background-color: white;
 }
+
+.face-detection-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1004;
+}
+
+.face-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 1;
+}
+
+.face-highlight {
+  position: absolute;
+  border: 2px solid #1890ff;
+  border-radius: 4px;
+  background-color: transparent;
+  box-shadow: 0 0 10px rgba(24, 144, 255, 0.5);
+  z-index: 2;
+  animation: faceHighlight 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes faceHighlight {
+  0% {
+    border-color: #1890ff;
+    box-shadow: 0 0 10px rgba(24, 144, 255, 0.5);
+  }
+  100% {
+    border-color: #52c41a;
+    box-shadow: 0 0 15px rgba(82, 196, 26, 0.7);
+  }
+}
+
+.face-label {
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(24, 144, 255, 0.9);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  backdrop-filter: blur(4px);
+}
+
+.face-confidence {
+  opacity: 0.8;
+  font-size: 10px;
+}

Web/src/components/image/ImageViewer.tsx

@@ -4,7 +4,7 @@ import {
   ZoomInOutlined, ZoomOutOutlined, ExpandOutlined, InfoCircleOutlined,
   CloseOutlined, LeftOutlined, RightOutlined, RotateLeftOutlined,
   RotateRightOutlined, HeartOutlined, HeartFilled, DownloadOutlined,
-  ShareAltOutlined, FolderAddOutlined
+  ShareAltOutlined, FolderAddOutlined, UserOutlined
 } from '@ant-design/icons';
 import type { PictureResponse, AlbumResponse } from '../../api';
 import { getAlbums, addPicturesToAlbum, favoritePicture, unfavoritePicture } from '../../api';
@@ -42,6 +42,15 @@ interface ZoomPanState {
   lastPositionY: number;
 }
 
+interface Face {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  faceConfidence: number;
+  personName?: string | null;
+}
+
 const ImageViewer: React.FC<ImageViewerProps> = ({
   visible,
   onClose,
@@ -65,6 +74,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
   const [currentLoading, setCurrentLoading] = useState(false);
   const [fadeTransition, setFadeTransition] = useState(false);
   const [, setActiveImage] = useState<string | null>(null);
+  const [faceDetectionMode, setFaceDetectionMode] = useState(false);
 
   const [zoomPanState, setZoomPanState] = useState<ZoomPanState>({
     scale: 1,
@@ -82,7 +92,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
   const imageCache = useRef<ImageCache>({});
   const sessionKey = useRef<string>(Date.now().toString());
   const currentLoadingUrl = useRef<string | null>(null);
-  const preloadedImagesRef = useRef<{[key: string]: HTMLImageElement}>({});
+  const preloadedImagesRef = useRef<{ [key: string]: HTMLImageElement }>({});
   const favoriteOperationsInProgress = useRef<Map<number, boolean>>(new Map());
 
   const currentImage = localImages[currentIndex];
@@ -96,6 +106,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     setRotation(0);
     setIsInfoDrawerOpen(false);
     setImageLoaded(false);
+    setFaceDetectionMode(false);
     setZoomPanState({
       scale: 1,
       positionX: 0,
@@ -211,12 +222,12 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
         for (let i = 1; i <= preloadRange; i++) {
           const nextIndex = currentIndex + i;
           if (nextIndex < localImages.length) {
-            loadImage(localImages[nextIndex].path).catch(() => {});
+            loadImage(localImages[nextIndex].path).catch(() => { });
           }
 
           const prevIndex = currentIndex - i;
           if (prevIndex >= 0) {
-            loadImage(localImages[prevIndex].path).catch(() => {});
+            loadImage(localImages[prevIndex].path).catch(() => { });
           }
         }
       }, 300);
@@ -350,6 +361,10 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     onShare ? onShare(currentImage) : setShareDialogVisible(true);
   }, [currentImage, onShare]);
 
+  const handleFaceDetectionToggle = useCallback(() => {
+    setFaceDetectionMode(prev => !prev);
+  }, []);
+
   const zoomIn = useCallback((factor = ZOOM_FACTOR) => {
     setZoomPanState(prev => ({
       ...prev,
@@ -469,6 +484,65 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     resetTransform();
   }, [resetTransform]);
 
+  const renderFaceOverlay = useCallback(() => {
+    if (!faceDetectionMode || !currentImage || !currentImage.faces || !imageRef.current) {
+      return null;
+    }
+
+    const img = imageRef.current;
+    const imgRect = img.getBoundingClientRect();
+    const containerRect = imageContainerRef.current?.getBoundingClientRect();
+
+    if (!containerRect) return null;
+
+    const naturalWidth = img.naturalWidth;
+    const naturalHeight = img.naturalHeight;
+
+    if (!naturalWidth || !naturalHeight) return null;
+
+    // 计算图片在容器中的实际显示尺寸和位置
+    const displayWidth = imgRect.width;
+    const displayHeight = imgRect.height;
+    const scaleX = displayWidth / naturalWidth;
+    const scaleY = displayHeight / naturalHeight;
+
+    // 图片相对于容器的偏移
+    const offsetX = imgRect.left - containerRect.left;
+    const offsetY = imgRect.top - containerRect.top;
+
+    return (
+      <div className="face-detection-overlay">
+        <div className="face-mask" />
+        {currentImage.faces.map((face: Face, index: number) => {
+          const faceX = offsetX + (face.x * scaleX);
+          const faceY = offsetY + (face.y * scaleY);
+          const faceWidth = face.w * scaleX;
+          const faceHeight = face.h * scaleY;
+
+          return (
+            <div
+              key={index}
+              className="face-highlight"
+              style={{
+                left: faceX,
+                top: faceY,
+                width: faceWidth,
+                height: faceHeight,
+              }}
+            >
+              <div className="face-label">
+                {face.personName || '未知人物'}
+                <div className="face-confidence">
+                  置信度: {(face.faceConfidence * 100).toFixed(1)}%
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }, [faceDetectionMode, currentImage, zoomPanState.scale, zoomPanState.positionX, zoomPanState.positionY, rotation]);
+
   useEffect(() => {
     if (visible) {
       window.addEventListener('mouseup', handleMouseUp);
@@ -521,8 +595,8 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
                   transform: `translate(${zoomPanState.positionX}px, ${zoomPanState.positionY}px) rotate(${rotation}deg) scale(${zoomPanState.scale})`,
                   opacity: imageLoaded ? 1 : 0.3,
                   transition: zoomPanState.isDragging ? 'none' :
-                             fadeTransition ? 'opacity 0.15s ease, transform 0.1s ease-out' :
+                    fadeTransition ? 'opacity 0.15s ease, transform 0.1s ease-out' :
-                             'transform 0.1s ease-out',
+                      'transform 0.1s ease-out',
                   cursor: zoomPanState.scale > 1 ? 'grab' : 'auto',
                   transformOrigin: 'center center',
                   willChange: 'opacity, transform'
@@ -533,12 +607,13 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
             )}
           </div>
 
+          {renderFaceOverlay()}
+
           {(!imageLoaded || currentLoading) && (
             <div className="image-loading-spinner">
               <Spin size="large" tip={<span className="loading-text">图片加载中...</span>} />
             </div>
           )}
-
           <div className="zoom-controls">
             <Space>
               <Button icon={<ExpandOutlined />} onClick={resetTransform} />
@@ -546,6 +621,13 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
               <Button icon={<ZoomInOutlined />} onClick={() => zoomIn()} />
               <Button icon={<RotateLeftOutlined />} onClick={() => setRotation(prev => prev - 90)} />
               <Button icon={<RotateRightOutlined />} onClick={() => setRotation(prev => prev + 90)} />
+              {currentImage && currentImage.faces && currentImage.faces.length > 0 && (
+                <Button
+                  icon={<UserOutlined />}
+                  onClick={handleFaceDetectionToggle}
+                  type={faceDetectionMode ? 'primary' : 'default'}
+                />
+              )}
             </Space>
           </div>
         </div>