feat(web): show face's border on hovered

i18n/en.json

@@ -829,6 +829,7 @@
   "map_marker_for_images": "Map marker for images taken in {city}, {country}",
   "map_marker_with_image": "Map marker with image",
   "map_settings": "Map settings",
+  "mark_all_faces": "Show face border",
   "matches": "Matches",
   "media_type": "Media type",
   "memories": "Memories",

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

@@ -7,7 +7,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import ChangeDate from '$lib/components/shared-components/change-date.svelte';
   import { AppRoute, QueryParameter, timeToLoadTheMap } from '$lib/constants';
-  import { boundingBoxesArray } from '$lib/stores/people.store';
+  import { boundingBoxesArray, createBoundingBoxType, getBorderColor } from '$lib/stores/people.store';
   import { locale } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { preferences, user } from '$lib/stores/user.store';
@@ -34,9 +34,12 @@
     mdiImageOutline,
     mdiInformationOutline,
     mdiPencil,
+    mdiFaceRecognition,
+    mdiFaceMan,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
+  import { onDestroy } from 'svelte';
   import { slide } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@@ -97,7 +100,22 @@
   })();
 
   $: people = asset.people || [];
-  $: showingHiddenPeople = false;
+
+  $: faces = showFaceBoundingBox
+    ? people
+        .filter((person) => showingHiddenPeople || !person.isHidden)
+        .flatMap((person) =>
+          person.faces.map((face) => createBoundingBoxType(face, person.id, showingHiddenPeople && person.isHidden)),
+        )
+        .concat(showingHiddenPeople ? unassignedFaces.map((face) => createBoundingBoxType(face, face.id, true)) : [])
+    : [];
+
+  $: {
+    $boundingBoxesArray = faces || [];
+  }
+
+  let showingHiddenPeople = false;
+  let showFaceBoundingBox = false;
 
   $: unassignedFaces = asset.unassignedFaces || [];
 
@@ -107,6 +125,10 @@
       ? fromDateTimeOriginal(asset.exifInfo.dateTimeOriginal, timeZone)
       : fromLocalDateTime(asset.localDateTime);
 
+  onDestroy(() => {
+    $boundingBoxesArray = [];
+  });
+
   const getMegapixel = (width: number, height: number): number | undefined => {
     const megapixel = Math.round((height * width) / 1_000_000);
 
@@ -123,6 +145,7 @@
       unassignedFaces = data?.unassignedFaces || [];
     });
     showEditFaces = false;
+    $boundingBoxesArray = faces || [];
   };
 
   const toggleAssetPath = () => (showAssetPath = !showAssetPath);
@@ -184,7 +207,7 @@
               size="24"
             />
           {/if}
-          {#if people.some((person) => person.isHidden)}
+          {#if showFaceBoundingBox || people.some((person) => person.isHidden)}
             <CircleIconButton
               title={$t('show_hidden_people')}
               icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
@@ -193,6 +216,13 @@
               on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
             />
           {/if}
+          <CircleIconButton
+            title={$t('mark_all_faces')}
+            icon={showFaceBoundingBox ? mdiFaceMan : mdiFaceRecognition}
+            padding="1"
+            buttonSize="32"
+            on:click={() => (showFaceBoundingBox = !showFaceBoundingBox)}
+          />
           <CircleIconButton
             title={$t('edit_people')}
             icon={mdiPencil}
@@ -212,12 +242,17 @@
               href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={currentAlbum?.id
                 ? `${AppRoute.ALBUMS}/${currentAlbum?.id}`
                 : AppRoute.PHOTOS}"
-              on:focus={() => ($boundingBoxesArray = people[index].faces)}
+              on:focus={() =>
+                ($boundingBoxesArray = people[index].faces.map((face) => createBoundingBoxType(face, person.id, true)))}
               on:blur={() => ($boundingBoxesArray = [])}
-              on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
-              on:mouseleave={() => ($boundingBoxesArray = [])}
+              on:mouseover={() =>
+                ($boundingBoxesArray = people[index].faces.map((face) => createBoundingBoxType(face, person.id, true)))}
+              on:mouseleave={() => ($boundingBoxesArray = faces)}
             >
-              <div class="relative">
+              <div
+                class="relative border-solid border-[3px] rounded-lg border-transparent"
+                style:border-color={showFaceBoundingBox ? `${getBorderColor(person.id)}` : ''}
+              >
                 <ImageThumbnail
                   curve
                   shadow

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -191,8 +191,8 @@
       />
       {#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewer) as boundingbox}
         <div
-          class="absolute border-solid border-white border-[3px] rounded-lg"
-          style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
+          class="absolute border-solid border-[3px] rounded-lg text-slate-100"
+          style="{boundingbox.extendedStyle}; top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
         />
       {/each}
     </div>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { boundingBoxesArray } from '$lib/stores/people.store';
+  import { boundingBoxesArray, createBoundingBoxType } from '$lib/stores/people.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -207,8 +207,9 @@
               role="button"
               tabindex={index}
               class="absolute left-0 top-0 h-[90px] w-[90px] cursor-default"
-              on:focus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
-              on:mouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
+              on:focus={() => ($boundingBoxesArray = [createBoundingBoxType(peopleWithFaces[index], face.id, true)])}
+              on:mouseover={() =>
+                ($boundingBoxesArray = [createBoundingBoxType(peopleWithFaces[index], face.id, true)])}
               on:mouseleave={() => ($boundingBoxesArray = [])}
             >
               <div class="relative">

web/src/lib/stores/people.store.ts

@@ -9,4 +9,26 @@ export interface Faces {
   boundingBoxY2: number;
 }
 
-export const boundingBoxesArray = writable<Faces[]>([]);
+interface BoundingBoxStyle {
+  color: string;
+  isSelected: boolean;
+}
+
+export interface BoundingBoxType {
+  boundingBoxStyle: BoundingBoxStyle;
+  faces: Faces;
+}
+
+export function getBorderColor(personId: string): string {
+  return `#${personId.slice(-6)}`;
+}
+
+function createBoundingBoxStyle(personId: string, isSelected: boolean): BoundingBoxStyle {
+  return { color: getBorderColor(personId), isSelected };
+}
+
+export function createBoundingBoxType(faces: Faces, personId: string, isSelected: boolean): BoundingBoxType {
+  return { boundingBoxStyle: createBoundingBoxStyle(personId, isSelected), faces };
+}
+
+export const boundingBoxesArray = writable<BoundingBoxType[]>([]);

web/src/lib/utils/people-utils.ts

@@ -1,4 +1,4 @@
-import type { Faces } from '$lib/stores/people.store';
+import type { BoundingBoxType } from '$lib/stores/people.store';
 import { getAssetThumbnailUrl } from '$lib/utils';
 import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
 import type { ZoomImageWheelState } from '@zoom-image/core';
@@ -15,14 +15,15 @@ const getContainedSize = (img: HTMLImageElement): { width: number; height: numbe
 };
 
 export interface boundingBox {
+  extendedStyle: string;
   top: number;
   left: number;
   width: number;
   height: number;
 }
 
 export const getBoundingBox = (
-  faces: Faces[],
+  fromBoundingBoxesArray: BoundingBoxType[],
   zoom: ZoomImageWheelState,
   photoViewer: HTMLImageElement | null,
 ): boundingBox[] => {
@@ -36,7 +37,12 @@ export const getBoundingBox = (
 
   const { width, height } = getContainedSize(photoViewer);
 
-  for (const face of faces) {
+  for (const fromBoundingBox of fromBoundingBoxesArray) {
+    const extendedStyle = fromBoundingBox.boundingBoxStyle.isSelected
+      ? `border-color: #ffffff; background: ${fromBoundingBox.boundingBoxStyle.color}; opacity: 0.6`
+      : `border-color: ${fromBoundingBox.boundingBoxStyle.color}`;
+
+    const face = fromBoundingBox.faces;
     /*
      *
      * Create the coordinates of the box based on the displayed image.
@@ -63,6 +69,7 @@ export const getBoundingBox = (
     };
 
     boxes.push({
+      extendedStyle,
       top: Math.round(coordinates.y1),
       left: Math.round(coordinates.x1),
       width: Math.round(coordinates.x2 - coordinates.x1),