From e263bcae43a6a922cb9e3b50d164fea10cc31826 Mon Sep 17 00:00:00 2001
From: oezgueremir <github@3mir.de>
Date: Tue, 18 Jun 2024 23:47:14 +0200
Subject: [PATCH 1/4] When watching photos and the info tab (detail-panel) is
 open, all the faces in the photo are marked.

tasks:
- [x] the "mark all faces" function can be de-/activated on the info tab.
- [x] CircleIconButton mark_all_faces with mdiLabelMultiple icon as controller.
- [x] Each person/face has a different, static border color given.
      This is provided with a little quick'n'dirty solution. A better solution could/would require changes in the DB model...
- [x] The mouseover event will override that functionallity and mark only the faces of this single person.
      More over, it will change the visualization of the marking rectangle to border=white, filling=person/face color, opacity=0.6
- [x] If mark_all_faces is active, the CircleIconButton show_hidden_people will always be available.
      So you are able to see even hidden and unassigned faces.
      Hidden and unassigned faces will be visualized, as if the mouseover event is triggered for them.
      It can be further evaluated, if these two states have to be controlled individually and presented with unique designs.
---
 .../asset-viewer/detail-panel.svelte          | 44 ++++++++++++++++---
 .../asset-viewer/photo-viewer.svelte          |  4 +-
 .../faces-page/person-side-panel.svelte       | 11 +++--
 web/src/lib/i18n/en.json                      |  1 +
 web/src/lib/stores/people.store.ts            | 24 +++++++++-
 web/src/lib/utils/people-utils.ts             | 13 ++++--
 6 files changed, 82 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 5414871adbce7..5e13c02961a6d 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -3,7 +3,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 { user } from '$lib/stores/user.store';
@@ -28,9 +28,11 @@
     mdiInformationOutline,
     mdiPencil,
     mdiAccountOff,
+    mdiLabelMultiple,
+    mdiLabelOff,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { slide } from 'svelte/transition';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
@@ -93,7 +95,22 @@
   })();
 
   $: people = asset.people || [];
+
+  $: allFaces = markingAllFaces
+    ? 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 = allFaces || [];
+  }
+
   $: showingHiddenPeople = false;
+  $: markingAllFaces = false;
 
   $: unassignedFaces = asset.unassignedFaces || [];
 
@@ -105,6 +122,10 @@
     });
   });
 
+  onDestroy(() => {
+    $boundingBoxesArray = [];
+  });
+
   const dispatch = createEventDispatcher<{
     close: void;
   }>();
@@ -125,6 +146,7 @@
       unassignedFaces = data?.unassignedFaces || [];
     });
     showEditFaces = false;
+    $boundingBoxesArray = allFaces || [];
   };
 
   const toggleAssetPath = () => (showAssetPath = !showAssetPath);
@@ -177,7 +199,7 @@
               size="24"
             />
           {/if}
-          {#if people.some((person) => person.isHidden)}
+          {#if markingAllFaces || people.some((person) => person.isHidden)}
             <CircleIconButton
               title={$t('show_hidden_people')}
               icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
@@ -186,6 +208,13 @@
               on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
             />
           {/if}
+          <CircleIconButton
+            title={$t('mark_all_faces')}
+            icon={markingAllFaces ? mdiLabelOff : mdiLabelMultiple}
+            padding="1"
+            buttonSize="32"
+            on:click={() => (markingAllFaces = !markingAllFaces)}
+          />
           <CircleIconButton
             title={$t('edit_people')}
             icon={mdiPencil}
@@ -202,13 +231,16 @@
           {#if showingHiddenPeople || !person.isHidden}
             <a
               class="w-[90px]"
+              style="background-color: {getBorderColor(person.id)};"
               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 = allFaces)}
             >
               <div class="relative">
                 <ImageThumbnail
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index cd4010b135b2a..45fb874e9d5b1 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -152,8 +152,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>
diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/person-side-panel.svelte
index a25e30310350e..0e353b86ee0ff 100644
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/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';
@@ -94,6 +94,10 @@
     return websocketEvents.on('on_person_thumbnail', onPersonThumbnail);
   });
 
+  $: {
+    $boundingBoxesArray = [];
+  }
+
   const isEqual = (a: string[], b: string[]): boolean => {
     return b.every((valueB) => a.includes(valueB));
   };
@@ -215,8 +219,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">
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index 26c82d9852d2d..6896606a3b689 100644
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@@ -608,6 +608,7 @@
   "map": "Map",
   "map_marker_with_image": "Map marker with image",
   "map_settings": "Map settings",
+  "mark_all_faces": "Mark all faces in image",
   "matches": "Matches",
   "media_type": "Media type",
   "memories": "Memories",
diff --git a/web/src/lib/stores/people.store.ts b/web/src/lib/stores/people.store.ts
index 4aeb044b1cb13..3a97d7d3b4abc 100644
--- a/web/src/lib/stores/people.store.ts
+++ b/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: isSelected };
+}
+
+export function createBoundingBoxType(faces: Faces, personId: string, isSelected: boolean): BoundingBoxType {
+  return { boundingBoxStyle: createBoundingBoxStyle(personId, isSelected), faces: faces };
+}
+
+export const boundingBoxesArray = writable<BoundingBoxType[]>([]);
diff --git a/web/src/lib/utils/people-utils.ts b/web/src/lib/utils/people-utils.ts
index 5fb03842b8aca..edaaf61a325dd 100644
--- a/web/src/lib/utils/people-utils.ts
+++ b/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,6 +15,7 @@ const getContainedSize = (img: HTMLImageElement): { width: number; height: numbe
 };
 
 export interface boundingBox {
+  extendedStyle: string;
   top: number;
   left: number;
   width: number;
@@ -22,7 +23,7 @@ export interface boundingBox {
 }
 
 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: extendedStyle,
       top: Math.round(coordinates.y1),
       left: Math.round(coordinates.x1),
       width: Math.round(coordinates.x2 - coordinates.x1),

From 0caff07a819ffa82c2a5a337461917966e5e955b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr=20Emir?= <github@3mir.de>
Date: Sun, 30 Jun 2024 01:22:09 +0000
Subject: [PATCH 2/4] change requests: - [x] In people list, don't fill face
 background, only draw a border around the thumbnail. - [x] In people list,
 only draw border, if "mark all faces" option is active

---
 web/src/lib/components/asset-viewer/detail-panel.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 5e13c02961a6d..40728816182aa 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -231,7 +231,6 @@
           {#if showingHiddenPeople || !person.isHidden}
             <a
               class="w-[90px]"
-              style="background-color: {getBorderColor(person.id)};"
               href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={currentAlbum?.id
                 ? `${AppRoute.ALBUMS}/${currentAlbum?.id}`
                 : AppRoute.PHOTOS}"
@@ -242,7 +241,9 @@
                 ($boundingBoxesArray = people[index].faces.map((face) => createBoundingBoxType(face, person.id, true)))}
               on:mouseleave={() => ($boundingBoxesArray = allFaces)}
             >
-              <div class="relative">
+              <div
+                class="relative {markingAllFaces ? ' border-solid border-[3px] rounded-lg' : ''}"
+                style:border-color={markingAllFaces ? `${getBorderColor(person.id)}` : ''}>
                 <ImageThumbnail
                   curve
                   shadow

From 8029edae5db3d672f659cbed44502438698ee310 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Tue, 29 Oct 2024 00:28:27 -0500
Subject: [PATCH 3/4] cleaning up

---
 i18n/en.json                                  |  2 +-
 .../asset-viewer/detail-panel.svelte          | 40 +++++++------------
 .../faces-page/person-side-panel.svelte       |  4 --
 web/src/lib/stores/people.store.ts            |  4 +-
 4 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index f0abf05b16ac8..b38c2b3c0599b 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -829,7 +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": "Mark all faces in image",
+  "mark_all_faces": "Show face border",
   "matches": "Matches",
   "media_type": "Media type",
   "memories": "Memories",
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index c93da41eff96c..3ee3263ba77e5 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -34,12 +34,12 @@
     mdiImageOutline,
     mdiInformationOutline,
     mdiPencil,
-    mdiLabelMultiple,
-    mdiLabelOff,
+    mdiFaceRecognition,
+    mdiFaceMan,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
-  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  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';
@@ -48,7 +48,6 @@
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import AlbumListItemDetails from './album-list-item-details.svelte';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import { websocketEvents } from '$lib/stores/websocket';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -102,7 +101,7 @@
 
   $: people = asset.people || [];
 
-  $: allFaces = markingAllFaces
+  $: faces = showFaceBoundingBox
     ? people
         .filter((person) => showingHiddenPeople || !person.isHidden)
         .flatMap((person) =>
@@ -112,11 +111,11 @@
     : [];
 
   $: {
-    $boundingBoxesArray = allFaces || [];
+    $boundingBoxesArray = faces || [];
   }
 
-  $: showingHiddenPeople = false;
-  $: markingAllFaces = false;
+  let showingHiddenPeople = false;
+  let showFaceBoundingBox = false;
 
   $: unassignedFaces = asset.unassignedFaces || [];
 
@@ -125,22 +124,11 @@
     timeZone && asset.exifInfo?.dateTimeOriginal
       ? fromDateTimeOriginal(asset.exifInfo.dateTimeOriginal, timeZone)
       : fromLocalDateTime(asset.localDateTime);
-  onMount(() => {
-    return websocketEvents.on('on_asset_update', (assetUpdate) => {
-      if (assetUpdate.id === asset.id) {
-        asset = assetUpdate;
-      }
-    });
-  });
 
   onDestroy(() => {
     $boundingBoxesArray = [];
   });
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-  }>();
-
   const getMegapixel = (width: number, height: number): number | undefined => {
     const megapixel = Math.round((height * width) / 1_000_000);
 
@@ -157,7 +145,7 @@
       unassignedFaces = data?.unassignedFaces || [];
     });
     showEditFaces = false;
-    $boundingBoxesArray = allFaces || [];
+    $boundingBoxesArray = faces || [];
   };
 
   const toggleAssetPath = () => (showAssetPath = !showAssetPath);
@@ -219,7 +207,7 @@
               size="24"
             />
           {/if}
-          {#if markingAllFaces || people.some((person) => person.isHidden)}
+          {#if showFaceBoundingBox || people.some((person) => person.isHidden)}
             <CircleIconButton
               title={$t('show_hidden_people')}
               icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
@@ -230,10 +218,10 @@
           {/if}
           <CircleIconButton
             title={$t('mark_all_faces')}
-            icon={markingAllFaces ? mdiLabelOff : mdiLabelMultiple}
+            icon={showFaceBoundingBox ? mdiFaceMan : mdiFaceRecognition}
             padding="1"
             buttonSize="32"
-            on:click={() => (markingAllFaces = !markingAllFaces)}
+            on:click={() => (showFaceBoundingBox = !showFaceBoundingBox)}
           />
           <CircleIconButton
             title={$t('edit_people')}
@@ -259,11 +247,11 @@
               on:blur={() => ($boundingBoxesArray = [])}
               on:mouseover={() =>
                 ($boundingBoxesArray = people[index].faces.map((face) => createBoundingBoxType(face, person.id, true)))}
-              on:mouseleave={() => ($boundingBoxesArray = allFaces)}
+              on:mouseleave={() => ($boundingBoxesArray = faces)}
             >
               <div
-                class="relative {markingAllFaces ? ' border-solid border-[3px] rounded-lg' : ''}"
-                style:border-color={markingAllFaces ? `${getBorderColor(person.id)}` : ''}
+                class="relative border-solid border-[3px] rounded-lg border-transparent"
+                style:border-color={showFaceBoundingBox ? `${getBorderColor(person.id)}` : ''}
               >
                 <ImageThumbnail
                   curve
diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/person-side-panel.svelte
index b3834e9cc4f07..4a7fa19c6ec86 100644
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@@ -90,10 +90,6 @@
     return websocketEvents.on('on_person_thumbnail', onPersonThumbnail);
   });
 
-  $: {
-    $boundingBoxesArray = [];
-  }
-
   const isEqual = (a: string[], b: string[]): boolean => {
     return b.every((valueB) => a.includes(valueB));
   };
diff --git a/web/src/lib/stores/people.store.ts b/web/src/lib/stores/people.store.ts
index 3a97d7d3b4abc..3789790832517 100644
--- a/web/src/lib/stores/people.store.ts
+++ b/web/src/lib/stores/people.store.ts
@@ -24,11 +24,11 @@ export function getBorderColor(personId: string): string {
 }
 
 function createBoundingBoxStyle(personId: string, isSelected: boolean): BoundingBoxStyle {
-  return { color: getBorderColor(personId), isSelected: isSelected };
+  return { color: getBorderColor(personId), isSelected };
 }
 
 export function createBoundingBoxType(faces: Faces, personId: string, isSelected: boolean): BoundingBoxType {
-  return { boundingBoxStyle: createBoundingBoxStyle(personId, isSelected), faces: faces };
+  return { boundingBoxStyle: createBoundingBoxStyle(personId, isSelected), faces };
 }
 
 export const boundingBoxesArray = writable<BoundingBoxType[]>([]);

From 4f9b86390338a32400e3f3f4ab5e3d9102e4f3ec Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Tue, 29 Oct 2024 00:32:55 -0500
Subject: [PATCH 4/4] linting

---
 web/src/lib/utils/people-utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/lib/utils/people-utils.ts b/web/src/lib/utils/people-utils.ts
index edaaf61a325dd..09262db866235 100644
--- a/web/src/lib/utils/people-utils.ts
+++ b/web/src/lib/utils/people-utils.ts
@@ -69,7 +69,7 @@ export const getBoundingBox = (
     };
 
     boxes.push({
-      extendedStyle: extendedStyle,
+      extendedStyle,
       top: Math.round(coordinates.y1),
       left: Math.round(coordinates.x1),
       width: Math.round(coordinates.x2 - coordinates.x1),