feat(web): Option to assign people to unassigned faces

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -14,6 +14,8 @@
     ThumbnailFormat,
     getAssetInfo,
     updateAsset,
+    getFaces,
+    type AssetFaceResponseDto,
     type AlbumResponseDto,
     type AssetResponseDto,
     type ExifResponseDto,
@@ -27,6 +29,7 @@
     mdiImageOutline,
     mdiInformationOutline,
     mdiPencil,
+    mdiAccountOff,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { createEventDispatcher, onMount } from 'svelte';
@@ -75,6 +78,10 @@
     if (newAsset.id && !isSharedLink()) {
       const data = await getAssetInfo({ id: asset.id });
       people = data?.people || [];
+      await getFaces({ id: asset.id }).then((data) => {
+        faces = data;
+        hasUnassignedFaces = faces.length > people.length;
+      });
     }
   };
 
@@ -92,6 +99,9 @@
   $: people = asset.people || [];
   $: showingHiddenPeople = false;
 
+  let faces: AssetFaceResponseDto[] = [];
+  let hasUnassignedFaces = false;
+
   onMount(() => {
     return websocketEvents.on('on_asset_update', (assetUpdate) => {
       if (assetUpdate.id === asset.id) {
@@ -118,6 +128,11 @@
   const handleRefreshPeople = async () => {
     await getAssetInfo({ id: asset.id }).then((data) => {
       people = data?.people || [];
+      hasUnassignedFaces = faces.length > people.length;
+    });
+    await getFaces({ id: asset.id }).then((data) => {
+      faces = data;
+      hasUnassignedFaces = faces.length > people.length;
     });
     showEditFaces = false;
   };
@@ -158,11 +173,14 @@
 
   <DetailPanelDescription {asset} {isOwner} />
 
-  {#if !isSharedLink() && people.length > 0}
+  {#if !isSharedLink() && (faces.length > 0 || people.length > 0)}
     <section class="px-4 py-4 text-sm">
       <div class="flex h-10 w-full items-center justify-between">
         <h2>PEOPLE</h2>
         <div class="flex gap-2 items-center">
+          {#if hasUnassignedFaces}
+            <Icon ariaLabel="Asset has unassigned faces" color="currentColor" path={mdiAccountOff} size="24" />
+          {/if}
           {#if people.some((person) => person.isHidden)}
             <CircleIconButton
               title="Show hidden people"
@@ -497,7 +515,6 @@
 {#if showEditFaces}
   <PersonSidePanel
     assetId={asset.id}
-    assetType={asset.type}
     on:close={() => {
       showEditFaces = false;
     }}

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { photoViewer } from '$lib/stores/assets.store';
-  import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
   import { getPersonNameWithHiddenValue } from '$lib/utils/person';
-  import { AssetTypeEnum, ThumbnailFormat, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
   import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { linear } from 'svelte/easing';
@@ -12,11 +11,10 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { zoomImageToBase64 } from '$lib/utils/people-utils';
 
-  export let peopleWithFaces: AssetFaceResponseDto[];
   export let allPeople: PersonResponseDto[];
-  export let editedPerson: PersonResponseDto;
-  export let assetType: AssetTypeEnum;
+  export let editedFace: AssetFaceResponseDto;
   export let assetId: string;
 
   // loading spinners
@@ -38,71 +36,11 @@
   const handleBackButton = () => {
     dispatch('close');
   };
-  const zoomImageToBase64 = async (face: AssetFaceResponseDto): Promise<string | null> => {
-    let image: HTMLImageElement | null = null;
-    if (assetType === AssetTypeEnum.Image) {
-      image = $photoViewer;
-    } else if (assetType === AssetTypeEnum.Video) {
-      const data = getAssetThumbnailUrl(assetId, ThumbnailFormat.Webp);
-      const img: HTMLImageElement = new Image();
-      img.src = data;
-
-      await new Promise<void>((resolve) => {
-        img.addEventListener('load', () => resolve());
-        img.addEventListener('error', () => resolve());
-      });
-
-      image = img;
-    }
-    if (image === null) {
-      return null;
-    }
-    const {
-      boundingBoxX1: x1,
-      boundingBoxX2: x2,
-      boundingBoxY1: y1,
-      boundingBoxY2: y2,
-      imageWidth,
-      imageHeight,
-    } = face;
-
-    const coordinates = {
-      x1: (image.naturalWidth / imageWidth) * x1,
-      x2: (image.naturalWidth / imageWidth) * x2,
-      y1: (image.naturalHeight / imageHeight) * y1,
-      y2: (image.naturalHeight / imageHeight) * y2,
-    };
-
-    const faceWidth = coordinates.x2 - coordinates.x1;
-    const faceHeight = coordinates.y2 - coordinates.y1;
-
-    const faceImage = new Image();
-    faceImage.src = image.src;
-
-    await new Promise((resolve) => {
-      faceImage.addEventListener('load', resolve);
-      faceImage.addEventListener('error', () => resolve(null));
-    });
-
-    const canvas = document.createElement('canvas');
-    canvas.width = faceWidth;
-    canvas.height = faceHeight;
-
-    const context = canvas.getContext('2d');
-    if (context) {
-      context.drawImage(faceImage, coordinates.x1, coordinates.y1, faceWidth, faceHeight, 0, 0, faceWidth, faceHeight);
-
-      return canvas.toDataURL();
-    } else {
-      return null;
-    }
-  };
 
   const handleCreatePerson = async () => {
     const timeout = setTimeout(() => (isShowLoadingNewPerson = true), timeBeforeShowLoadingSpinner);
-    const personToUpdate = peopleWithFaces.find((face) => face.person?.id === editedPerson.id);
 
-    const newFeaturePhoto = personToUpdate ? await zoomImageToBase64(personToUpdate) : null;
+    const newFeaturePhoto = await zoomImageToBase64(editedFace, assetId);
 
     dispatch('createPerson', newFeaturePhoto);
 
@@ -160,7 +98,7 @@
     <h2 class="mb-8 mt-4 uppercase">All people</h2>
     <div class="immich-scrollbar mt-4 flex flex-wrap gap-2 overflow-y-auto">
       {#each showPeople as person (person.id)}
-        {#if person.id !== editedPerson.id}
+        {#if !editedFace.person || person.id !== editedFace.person.id}
           <div class="w-fit">
             <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
               <div class="relative">