mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): manual face tagging and deletion (#16062)
This commit is contained in:
Alex
GitHub
parent
94c0e8253a
commit
007eaaceb9
35 changed files with 2054 additions and 106 deletions
|
|
@ -0,0 +1,310 @@
|
|||
<script lang="ts">
|
||||
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
|
||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||
import { notificationController } from '$lib/components/shared-components/notification/notification';
|
||||
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
|
||||
import { getPeopleThumbnailUrl } from '$lib/utils';
|
||||
import { getAllPeople, createFace, type PersonResponseDto } from '@immich/sdk';
|
||||
import { Button } from '@immich/ui';
|
||||
import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
|
||||
import { onMount } from 'svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
|
||||
interface Props {
|
||||
imgElement: HTMLImageElement;
|
||||
containerWidth: number;
|
||||
containerHeight: number;
|
||||
assetId: string;
|
||||
}
|
||||
|
||||
let { imgElement, containerWidth, containerHeight, assetId }: Props = $props();
|
||||
|
||||
let canvasEl: HTMLCanvasElement | undefined = $state();
|
||||
let canvas: Canvas | undefined = $state();
|
||||
let faceRect: Rect | undefined = $state();
|
||||
let faceSelectorEl: HTMLDivElement | undefined = $state();
|
||||
|
||||
const configureControlStyle = () => {
|
||||
InteractiveFabricObject.ownDefaults = {
|
||||
...InteractiveFabricObject.ownDefaults,
|
||||
cornerStyle: 'circle',
|
||||
cornerColor: 'rgb(153,166,251)',
|
||||
cornerSize: 10,
|
||||
padding: 8,
|
||||
transparentCorners: false,
|
||||
lockRotation: true,
|
||||
hasBorders: true,
|
||||
};
|
||||
};
|
||||
|
||||
const setupCanvas = () => {
|
||||
if (!canvasEl || !imgElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
canvas = new Canvas(canvasEl);
|
||||
configureControlStyle();
|
||||
|
||||
faceRect = new Rect({
|
||||
fill: 'rgba(66,80,175,0.25)',
|
||||
stroke: 'rgb(66,80,175)',
|
||||
strokeWidth: 2,
|
||||
strokeUniform: true,
|
||||
width: 112,
|
||||
height: 112,
|
||||
objectCaching: true,
|
||||
rx: 8,
|
||||
ry: 8,
|
||||
});
|
||||
|
||||
canvas.add(faceRect);
|
||||
canvas.setActiveObject(faceRect);
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
setupCanvas();
|
||||
await getPeople();
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const { actualWidth, actualHeight } = getContainedSize(imgElement);
|
||||
const offsetArea = {
|
||||
width: (containerWidth - actualWidth) / 2,
|
||||
height: (containerHeight - actualHeight) / 2,
|
||||
};
|
||||
|
||||
const imageBoundingBox = {
|
||||
top: offsetArea.height,
|
||||
left: offsetArea.width,
|
||||
width: containerWidth - offsetArea.width * 2,
|
||||
height: containerHeight - offsetArea.height * 2,
|
||||
};
|
||||
|
||||
if (!canvas) {
|
||||
return;
|
||||
}
|
||||
|
||||
canvas.setDimensions({
|
||||
width: containerWidth,
|
||||
height: containerHeight,
|
||||
});
|
||||
|
||||
if (!faceRect) {
|
||||
return;
|
||||
}
|
||||
|
||||
faceRect.set({
|
||||
top: imageBoundingBox.top + 200,
|
||||
left: imageBoundingBox.left + 200,
|
||||
});
|
||||
|
||||
faceRect.setCoords();
|
||||
positionFaceSelector();
|
||||
});
|
||||
|
||||
const getContainedSize = (img: HTMLImageElement): { actualWidth: number; actualHeight: number } => {
|
||||
const ratio = img.naturalWidth / img.naturalHeight;
|
||||
let actualWidth = img.height * ratio;
|
||||
let actualHeight = img.height;
|
||||
if (actualWidth > img.width) {
|
||||
actualWidth = img.width;
|
||||
actualHeight = img.width / ratio;
|
||||
}
|
||||
return { actualWidth, actualHeight };
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
isFaceEditMode.value = false;
|
||||
};
|
||||
|
||||
let page = $state(1);
|
||||
let candidates = $state<PersonResponseDto[]>([]);
|
||||
|
||||
const getPeople = async () => {
|
||||
const { hasNextPage, people, total } = await getAllPeople({ page, size: 250, withHidden: false });
|
||||
|
||||
if (candidates.length === total) {
|
||||
return;
|
||||
}
|
||||
|
||||
candidates = [...candidates, ...people];
|
||||
|
||||
if (hasNextPage) {
|
||||
page++;
|
||||
}
|
||||
};
|
||||
|
||||
const positionFaceSelector = () => {
|
||||
if (!faceRect || !faceSelectorEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = faceRect.getBoundingRect();
|
||||
const selectorWidth = faceSelectorEl.offsetWidth;
|
||||
const selectorHeight = faceSelectorEl.offsetHeight;
|
||||
|
||||
const spaceAbove = rect.top;
|
||||
const spaceBelow = containerHeight - (rect.top + rect.height);
|
||||
const spaceLeft = rect.left;
|
||||
const spaceRight = containerWidth - (rect.left + rect.width);
|
||||
|
||||
let top, left;
|
||||
|
||||
if (
|
||||
spaceBelow >= selectorHeight ||
|
||||
(spaceBelow >= spaceAbove && spaceBelow >= spaceLeft && spaceBelow >= spaceRight)
|
||||
) {
|
||||
top = rect.top + rect.height + 15;
|
||||
left = rect.left;
|
||||
} else if (
|
||||
spaceAbove >= selectorHeight ||
|
||||
(spaceAbove >= spaceBelow && spaceAbove >= spaceLeft && spaceAbove >= spaceRight)
|
||||
) {
|
||||
top = rect.top - selectorHeight - 15;
|
||||
left = rect.left;
|
||||
} else if (
|
||||
spaceRight >= selectorWidth ||
|
||||
(spaceRight >= spaceLeft && spaceRight >= spaceAbove && spaceRight >= spaceBelow)
|
||||
) {
|
||||
top = rect.top;
|
||||
left = rect.left + rect.width + 15;
|
||||
} else {
|
||||
top = rect.top;
|
||||
left = rect.left - selectorWidth - 15;
|
||||
}
|
||||
|
||||
if (left + selectorWidth > containerWidth) {
|
||||
left = containerWidth - selectorWidth - 15;
|
||||
}
|
||||
|
||||
if (left < 0) {
|
||||
left = 15;
|
||||
}
|
||||
|
||||
if (top + selectorHeight > containerHeight) {
|
||||
top = containerHeight - selectorHeight - 15;
|
||||
}
|
||||
|
||||
if (top < 0) {
|
||||
top = 15;
|
||||
}
|
||||
|
||||
faceSelectorEl.style.top = `${top}px`;
|
||||
faceSelectorEl.style.left = `${left}px`;
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
if (faceRect) {
|
||||
faceRect.on('moving', positionFaceSelector);
|
||||
faceRect.on('scaling', positionFaceSelector);
|
||||
}
|
||||
});
|
||||
|
||||
const getFaceCroppedCoordinates = () => {
|
||||
if (!faceRect || !imgElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { left, top, width, height } = faceRect.getBoundingRect();
|
||||
const { actualWidth, actualHeight } = getContainedSize(imgElement);
|
||||
|
||||
const offsetArea = {
|
||||
width: (containerWidth - actualWidth) / 2,
|
||||
height: (containerHeight - actualHeight) / 2,
|
||||
};
|
||||
|
||||
const x1Coeff = (left - offsetArea.width) / actualWidth;
|
||||
const y1Coeff = (top - offsetArea.height) / actualHeight;
|
||||
const x2Coeff = (left + width - offsetArea.width) / actualWidth;
|
||||
const y2Coeff = (top + height - offsetArea.height) / actualHeight;
|
||||
|
||||
// transpose to the natural image location
|
||||
const x1 = x1Coeff * imgElement.naturalWidth;
|
||||
const y1 = y1Coeff * imgElement.naturalHeight;
|
||||
const x2 = x2Coeff * imgElement.naturalWidth;
|
||||
const y2 = y2Coeff * imgElement.naturalHeight;
|
||||
|
||||
return {
|
||||
imageWidth: imgElement.naturalWidth,
|
||||
imageHeight: imgElement.naturalHeight,
|
||||
x: Math.floor(x1),
|
||||
y: Math.floor(y1),
|
||||
width: Math.floor(x2 - x1),
|
||||
height: Math.floor(y2 - y1),
|
||||
};
|
||||
};
|
||||
|
||||
const tagFace = async (person: PersonResponseDto) => {
|
||||
try {
|
||||
const data = getFaceCroppedCoordinates();
|
||||
if (!data) {
|
||||
notificationController.show({
|
||||
message: 'Error tagging face - cannot get bounding box coordinates',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const isConfirmed = await dialogController.show({
|
||||
prompt: `Do you want to tag this face as ${person.name}?`,
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
await createFace({
|
||||
assetFaceCreateDto: {
|
||||
assetId,
|
||||
personId: person.id,
|
||||
...data,
|
||||
},
|
||||
});
|
||||
|
||||
await assetViewingStore.setAssetId(assetId);
|
||||
} catch (error) {
|
||||
handleError(error, 'Error tagging face');
|
||||
} finally {
|
||||
isFaceEditMode.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="absolute left-0 top-0">
|
||||
<canvas bind:this={canvasEl} id="face-editor" class="absolute top-0 left-0"></canvas>
|
||||
|
||||
<div
|
||||
id="face-selector"
|
||||
bind:this={faceSelectorEl}
|
||||
class="absolute top-[calc(50%-250px)] left-[calc(50%-125px)] max-w-[250px] w-[250px] bg-white backdrop-blur-sm px-2 py-4 rounded-xl border border-gray-200"
|
||||
>
|
||||
<p class="text-center text-sm">Select a person to tag</p>
|
||||
|
||||
<div class="max-h-[250px] overflow-y-auto mt-2">
|
||||
<div class="mt-2 rounded-lg">
|
||||
{#each candidates as person}
|
||||
<button
|
||||
onclick={() => tagFace(person)}
|
||||
type="button"
|
||||
class="w-full flex place-items-center gap-2 rounded-lg pl-1 pr-4 py-2 hover:bg-immich-primary/25"
|
||||
>
|
||||
<ImageThumbnail
|
||||
curve
|
||||
shadow
|
||||
url={getPeopleThumbnailUrl(person)}
|
||||
altText={person.name}
|
||||
title={person.name}
|
||||
widthStyle="30px"
|
||||
heightStyle="30px"
|
||||
/>
|
||||
<p class="text-sm">
|
||||
{person.name}
|
||||
</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button size="small" fullWidth onclick={cancel} color="danger" class="mt-2">Cancel</Button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue