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

2026-09-09 01:27:24 +08:00 · 2025-06-16 12:47:48 +08:00
parent 18ad7a3a53
commit 00dbaff8b2
8 changed files with 227 additions and 58 deletions
@@ -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; }
+}
@@ -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; }
 }
@@ -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);
@@ -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(),
            };
        }
    }
@@ -157,6 +157,7 @@ public class PictureService(
        // 构建基础查询
        IQueryable<Picture> query = dbContext.Pictures
            .Include(p => p.Tags)
+            .Include(p => p.Faces)
            .Include(p => p.User);

        // 应用文本搜索条件
@@ -24,6 +24,7 @@ export interface FilteredPicturesRequest {

 // 图片响应数据
 export interface PictureResponse {
+  faces: any;
  id: number;
  name: string;
  path: string;
@@ -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;
+}
@@ -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' :
-                             'transform 0.1s ease-out',
+                    fadeTransition ? 'opacity 0.15s ease, 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>