GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-05-12 02:20:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
shiyu
2025-06-16 12:47:48 +08:00
parent 18ad7a3a53
commit 00dbaff8b2
8 changed files with 227 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
Models/Response/Picture/FaceResponse.cs Normal file
View File

@@ -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; }
}

2
Models/Response/Picture/PictureResponse.cs
View File

@@ -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; }
}

29
Services/Background/Processors/FaceRecognitionTaskProcessor.cs
View File

@@ -1,4 +1,5 @@
using Foxel.Models.DataBase;
using Foxel.Services.Configuration;
using Foxel.Services.Storage;
using Microsoft.EntityFrameworkCore;
using System.Text.Json;
@@ -16,10 +17,10 @@ namespace Foxel.Services.Background.Processors
{
[JsonPropertyName("detector_backend")]
public string DetectorBackend { get; set; } = string.Empty;
[JsonPropertyName("recognition_model")]
public string RecognitionModel { get; set; } = string.Empty;
[JsonPropertyName("result")]
public List<FaceResult> Result { get; set; } = new();
}
@@ -28,10 +29,10 @@ namespace Foxel.Services.Background.Processors
{
[JsonPropertyName("embedding")]
public float[] Embedding { get; set; } = Array.Empty<float>();
[JsonPropertyName("facial_area")]
public FacialAreaResponse FacialArea { get; set; } = new();
[JsonPropertyName("face_confidence")]
public double FaceConfidence { get; set; }
}
@@ -40,13 +41,13 @@ namespace Foxel.Services.Background.Processors
{
[JsonPropertyName("x")]
public int X { get; set; }
[JsonPropertyName("y")]
public int Y { get; set; }
[JsonPropertyName("w")]
public int W { get; set; }
[JsonPropertyName("h")]
public int H { get; set; }
}
@@ -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)
@@ -188,7 +191,7 @@ namespace Foxel.Services.Background.Processors
}
catch (Exception ex)
{
_logger.LogError(ex, "人脸识别任务失败: TaskId={TaskId}, PictureId={PictureId}",
_logger.LogError(ex, "人脸识别任务失败: TaskId={TaskId}, PictureId={PictureId}",
currentBackgroundTaskState.Id, pictureId);
await UpdateTaskStatusInDb(currentBackgroundTaskState.Id, TaskExecutionStatus.Failed,
currentBackgroundTaskState.Progress, ex.Message,
@@ -212,10 +215,12 @@ 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);
fileContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/jpeg");
form.Add(fileContent, "file", Path.GetFileName(imagePath));
@@ -224,7 +229,7 @@ namespace Foxel.Services.Background.Processors
request.Content = form;
var response = await _httpClient.SendAsync(request);
if (!response.IsSuccessStatusCode)
{
var errorContent = await response.Content.ReadAsStringAsync();

15
Services/Mapping/MappingService.cs
View File

@@ -17,12 +17,12 @@ namespace Foxel.Services.Mapping
{
coverPath = storageService.ExecuteAsync(album.CoverPicture.StorageModeId,
provider => Task.FromResult(provider.GetUrl(album.CoverPicture.Id, album.CoverPicture.Path)))
.Result;
.Result;
if (!string.IsNullOrEmpty(album.CoverPicture.ThumbnailPath))
{
coverThumbnailPath = storageService.ExecuteAsync(album.CoverPicture.StorageModeId,
provider => Task.FromResult(provider.GetUrl(album.CoverPicture.Id,
album.CoverPicture.ThumbnailPath))).Result;
album.CoverPicture.ThumbnailPath))).Result;
}
}
@@ -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(),
};
}
}

1
Services/Media/PictureService.cs
View File

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

1
Web/src/api/pictureApi.ts
View File

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

60
Web/src/components/image/ImageViewer.css
View File

@@ -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;
}

166
Web/src/components/image/ImageViewer.tsx
View File

@@ -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,7 +74,8 @@ 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,
positionX: 0,
@@ -76,18 +86,18 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
lastPositionX: 0,
lastPositionY: 0,
});
const imageContainerRef = useRef<HTMLDivElement>(null);
const imageRef = useRef<HTMLImageElement>(null);
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];
const preloadRange = 2;
const MIN_SCALE = 0.1;
const MAX_SCALE = 8;
const ZOOM_FACTOR = 0.2;
@@ -96,6 +106,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
setRotation(0);
setIsInfoDrawerOpen(false);
setImageLoaded(false);
setFaceDetectionMode(false);
setZoomPanState({
scale: 1,
positionX: 0,
@@ -124,15 +135,15 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
loaded: true,
img
};
preloadedImagesRef.current[imageUrl] = img;
if (imageUrl === currentLoadingUrl.current) {
setImageLoaded(true);
setCurrentLoading(false);
setActiveImage(imageUrl);
}
resolve(img);
};
img.onerror = () => {
@@ -141,7 +152,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
}
reject(new Error(`Failed to load image: ${imageUrl}`));
};
img.src = `${imageUrl}${imageUrl.includes('?') ? '&' : '?'}_s=${sessionKey.current}`;
});
}, [currentImage]);
@@ -150,15 +161,15 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
setImageLoaded(false);
setCurrentLoading(true);
setFadeTransition(true);
if (currentImage && imageCache.current[currentImage.path]?.loaded) {
setActiveImage(currentImage.path);
setImageLoaded(true);
setCurrentLoading(false);
setTimeout(() => setFadeTransition(false), 100);
}
setZoomPanState(prev => ({
...prev,
scale: 1,
@@ -177,7 +188,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
}
wasVisible.current = visible;
}, [visible, resetViewerState]);
useEffect(() => {
if (visible && initialIndex >= 0 && initialIndex < images.length) {
setCurrentIndex(initialIndex);
@@ -189,14 +200,14 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
currentLoadingUrl.current = currentImage.path;
setCurrentLoading(true);
loadImage(currentImage.path)
.then(() => {
if (currentLoadingUrl.current === currentImage.path) {
setImageLoaded(true);
setCurrentLoading(false);
setActiveImage(currentImage.path);
setTimeout(() => setFadeTransition(false), 100);
}
})
@@ -205,18 +216,18 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
message.error('图片加载失败，请重试');
setCurrentLoading(false);
});
if (localImages.length > 1) {
setTimeout(() => {
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);
@@ -259,28 +270,28 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
const handleFavoriteClick = useCallback(async () => {
if (!currentImage) return;
if (favoriteOperationsInProgress.current.get(currentImage.id)) {
return;
}
try {
favoriteOperationsInProgress.current.set(currentImage.id, true);
if (onFavorite) {
onFavorite(currentImage);
return;
}
const isFavorited = currentImage.isFavorited;
const result = isFavorited
const result = isFavorited
? await unfavoritePicture(currentImage.id)
: await favoritePicture(currentImage.id);
if (result.success) {
message.success(isFavorited ? '已取消收藏' : '已添加到收藏');
const updatedImage = {
...currentImage,
isFavorited: !isFavorited,
@@ -288,7 +299,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
? Math.max(0, (currentImage.favoriteCount || 0) - 1)
: (currentImage.favoriteCount || 0) + 1
};
setLocalImages(prevImages =>
prevImages.map(img =>
img.id === currentImage.id ? updatedImage : img
@@ -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,
@@ -384,17 +399,17 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
setZoomPanState(prev => {
const newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, prev.scale * scaleFactor));
const rect = imageContainerRef.current?.getBoundingClientRect();
if (!rect) return { ...prev, scale: newScale };
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
const containerCenterX = rect.width / 2;
const containerCenterY = rect.height / 2;
const dx = (mouseX - containerCenterX - prev.positionX) * (scaleFactor - 1);
const dy = (mouseY - containerCenterY - prev.positionY) * (scaleFactor - 1);
return {
...prev,
scale: newScale,
@@ -434,7 +449,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
if (zoomPanState.isDragging) {
const dx = e.clientX - zoomPanState.dragStartX;
const dy = e.clientY - zoomPanState.dragStartY;
setZoomPanState(prev => ({
...prev,
positionX: prev.lastPositionX + dx,
@@ -448,7 +463,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
const touch = e.touches[0];
const dx = touch.clientX - zoomPanState.dragStartX;
const dy = touch.clientY - zoomPanState.dragStartY;
setZoomPanState(prev => ({
...prev,
positionX: prev.lastPositionX + dx,
@@ -469,13 +484,72 @@ 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);
window.addEventListener('mouseleave', handleMouseUp);
window.addEventListener('touchend', handleTouchEnd);
window.addEventListener('touchcancel', handleTouchEnd);
return () => {
window.removeEventListener('mouseup', handleMouseUp);
window.removeEventListener('mouseleave', handleMouseUp);
@@ -501,8 +575,8 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
<div className="viewer-overlay" onClick={onClose}></div>
<div className="viewer-content">
<div
className="image-container"
<div
className="image-container"
ref={imageContainerRef}
onWheel={handleWheel}
onMouseDown={handleMouseDown}
@@ -520,9 +594,9 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
style={{
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',
transition: zoomPanState.isDragging ? 'none' :
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>
@@ -608,7 +690,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
<span>{currentImage.favoriteCount}</span>
)}
</Button>
<Dropdown menu={{ items: albumItems }} disabled={loadingAlbums || albums.length === 0}>
<Button
type="text"