github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use keyed each for face bounding boxes (#26648)

Browse Source
This commit is contained in:
Min Idzelis
2026-03-02 23:16:13 -05:00
committed by GitHub
parent 20c639e52a
commit 4da3d68a67
4 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/asset-viewer/photo-viewer.svelte
+1 -2
View File
@@ -248,8 +248,7 @@
: slideshowLookCssMapping[$slideshowLook]}" : slideshowLookCssMapping[$slideshowLook]}"
draggable="false" draggable="false"
/> />
<!-- eslint-disable-next-line svelte/require-each-key --> {#each getBoundingBox($boundingBoxesArray, overlayMetrics) as boundingbox (boundingbox.id)}
{#each getBoundingBox($boundingBoxesArray, overlayMetrics) as boundingbox}
<div <div
class="absolute border-solid border-white border-3 rounded-lg" class="absolute border-solid border-white border-3 rounded-lg"
style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;" style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
web/src/lib/stores/people.store.ts
+1
View File
@@ -1,6 +1,7 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export interface Faces { export interface Faces {
id: string;
imageHeight: number; imageHeight: number;
imageWidth: number; imageWidth: number;
boundingBoxX1: number; boundingBoxX1: number;
web/src/lib/utils/people-utils.spec.ts
+6 -2
View File
@@ -3,6 +3,7 @@ import type { ContentMetrics } from '$lib/utils/container-utils';
import { getBoundingBox } from '$lib/utils/people-utils'; import { getBoundingBox } from '$lib/utils/people-utils';
const makeFace = (overrides: Partial<Faces> = {}): Faces => ({ const makeFace = (overrides: Partial<Faces> = {}): Faces => ({
id: 'face-1',
imageWidth: 4000, imageWidth: 4000,
imageHeight: 3000, imageHeight: 3000,
boundingBoxX1: 1000, boundingBoxX1: 1000,
@@ -21,6 +22,7 @@ describe('getBoundingBox', () => {
expect(boxes).toHaveLength(1); expect(boxes).toHaveLength(1);
expect(boxes[0]).toEqual({ expect(boxes[0]).toEqual({
id: 'face-1',
top: Math.round(600 * (750 / 3000)), top: Math.round(600 * (750 / 3000)),
left: Math.round(800 * (1000 / 4000)), left: Math.round(800 * (1000 / 4000)),
width: Math.round(800 * (2000 / 4000) - 800 * (1000 / 4000)), width: Math.round(800 * (2000 / 4000) - 800 * (1000 / 4000)),
@@ -42,6 +44,7 @@ describe('getBoundingBox', () => {
const boxes = getBoundingBox([face], metrics); const boxes = getBoundingBox([face], metrics);
expect(boxes[0]).toEqual({ expect(boxes[0]).toEqual({
id: 'face-1',
top: 0, top: 0,
left: 100, left: 100,
width: 600, width: 600,
@@ -68,6 +71,7 @@ describe('getBoundingBox', () => {
const boxes = getBoundingBox([face], metrics); const boxes = getBoundingBox([face], metrics);
expect(boxes[0]).toEqual({ expect(boxes[0]).toEqual({
id: 'face-1',
top: -100, top: -100,
left: -200, left: -200,
width: 800, width: 800,
@@ -82,8 +86,8 @@ describe('getBoundingBox', () => {
it('should handle multiple faces', () => { it('should handle multiple faces', () => {
const faces = [ const faces = [
makeFace({ boundingBoxX1: 0, boundingBoxY1: 0, boundingBoxX2: 1000, boundingBoxY2: 1000 }), makeFace({ id: 'face-1', boundingBoxX1: 0, boundingBoxY1: 0, boundingBoxX2: 1000, boundingBoxY2: 1000 }),
makeFace({ boundingBoxX1: 2000, boundingBoxY1: 1500, boundingBoxX2: 3000, boundingBoxY2: 2500 }), makeFace({ id: 'face-2', boundingBoxX1: 2000, boundingBoxY1: 1500, boundingBoxX2: 3000, boundingBoxY2: 2500 }),
]; ];
const metrics: ContentMetrics = { contentWidth: 800, contentHeight: 600, offsetX: 0, offsetY: 0 }; const metrics: ContentMetrics = { contentWidth: 800, contentHeight: 600, offsetX: 0, offsetY: 0 };
web/src/lib/utils/people-utils.ts
+2
View File
@@ -4,6 +4,7 @@ import type { ContentMetrics } from '$lib/utils/container-utils';
import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk'; import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
export interface BoundingBox { export interface BoundingBox {
id: string;
top: number; top: number;
left: number; left: number;
width: number; width: number;
@@ -25,6 +26,7 @@ export const getBoundingBox = (faces: Faces[], metrics: ContentMetrics): Boundin
}; };
boxes.push({ boxes.push({
id: face.id,
top: Math.round(coordinates.y1), top: Math.round(coordinates.y1),
left: Math.round(coordinates.x1), left: Math.round(coordinates.x1),
width: Math.round(coordinates.x2 - coordinates.x1), width: Math.round(coordinates.x2 - coordinates.x1),