feat(web): Face merging utility

i18n/en.json

@@ -463,6 +463,8 @@
   "check_all": "Check All",
   "check_logs": "Check Logs",
   "choose_matching_people_to_merge": "Choose matching people to merge",
+  "choose_faces_to_merge": "Choose faces to merge into {name}",
+  "choose_person_see_similar": "Choose person to see similar faces",
   "city": "City",
   "clear": "Clear",
   "clear_all": "Clear all",
@@ -688,6 +690,7 @@
     "unable_to_log_out_all_devices": "Unable to log out all devices",
     "unable_to_log_out_device": "Unable to log out device",
     "unable_to_login_with_oauth": "Unable to login with OAuth",
+    "unable_to_merge_people": "Unable to merge people",
     "unable_to_play_video": "Unable to play video",
     "unable_to_reassign_assets_existing_person": "Unable to reassign assets to {name, select, null {an existing person} other {{name}}}",
     "unable_to_reassign_assets_new_person": "Unable to reassign assets to a new person",
@@ -872,6 +875,8 @@
   "merge_people_limit": "You can only merge up to 5 faces at a time",
   "merge_people_prompt": "Do you want to merge these people? This action is irreversible.",
   "merge_people_successfully": "Merge people successfully",
+  "merge_people_utility_success": "Merged {count, plural, one {# person} other {# people}} into {name}",
+  "merge_selected": "Merge {count, plural, one {# person} other {# people}} into {person}",
   "merged_people_count": "Merged {count, plural, one {# person} other {# people}}",
   "minimize": "Minimize",
   "minute": "Minute",
@@ -935,6 +940,7 @@
   "open_the_search_filters": "Open the search filters",
   "options": "Options",
   "or": "or",
+  "organize_people": "Organize people",
   "organize_your_library": "Organize your library",
   "original": "original",
   "other": "Other",

web/src/lib/components/utilities-page/utilities-menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { mdiContentDuplicate } from '@mdi/js';
+  import { mdiAccountGroup, mdiContentDuplicate } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute } from '$lib/constants';
   import { t } from 'svelte-i18n';
@@ -17,4 +17,13 @@
     </span>
     {$t('review_duplicates')}
   </a>
+
+  <p class="text-xs font-medium p-4">{$t('organize_people').toUpperCase()}</p>
+  <a
+    href={AppRoute.MERGE_FACES}
+    class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
+  >
+    <span><Icon path={mdiAccountGroup} class="text-immich-primary dark:text-immich-dark-primary" size="24" /> </span>
+    {$t('merge_people')}
+  </a>
 </div>

web/src/lib/constants.ts

@@ -46,6 +46,7 @@ export enum AppRoute {
 
   UTILITIES = '/utilities',
   DUPLICATES = '/utilities/duplicates',
+  MERGE_FACES = '/utilities/merge-faces',
 
   FOLDERS = '/folders',
   TAGS = '/tags',

web/src/routes/(user)/utilities/merge-faces/+page.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { scrollMemory } from '$lib/actions/scroll-memory';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import PeopleInfiniteScroll from '$lib/components/faces-page/people-infinite-scroll.svelte';
+  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { handlePromiseError } from '$lib/utils';
+  import { AppRoute, QueryParameter, SessionStorageKey } from '$lib/constants';
+  import { locale } from '$lib/stores/preferences.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { clearQueryParam } from '$lib/utils/navigation';
+  import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
+  import { mdiAccountOff } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  let searchName = $state('');
+  let currentPage = $state(1);
+  let nextPage = $state(data.people.hasNextPage ? 2 : null);
+  let searchedPeopleLocal: PersonResponseDto[] = $state([]);
+  let innerHeight = $state(0);
+  let searchPeopleElement = $state<ReturnType<typeof SearchPeople>>();
+
+  const loadInitialScroll = () =>
+    new Promise<void>((resolve) => {
+      let newNextPage = sessionStorage.getItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+      if (newNextPage && nextPage) {
+        let startingPage = nextPage,
+          pagesToLoad = Number.parseInt(newNextPage) - nextPage;
+
+        if (pagesToLoad) {
+          handlePromiseError(
+            Promise.all(
+              Array.from({ length: pagesToLoad }).map((_, i) => {
+                return getAllPeople({ withHidden: true, page: startingPage + i });
+              }),
+            ).then((pages) => {
+              for (const page of pages) {
+                people = people.concat(page.people);
+              }
+              currentPage = startingPage + pagesToLoad - 1;
+              nextPage = pages.at(-1)?.hasNextPage ? startingPage + pagesToLoad : null;
+              resolve(); // wait until extra pages are loaded
+            }),
+          );
+        } else {
+          resolve();
+        }
+        sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+      } else {
+        resolve();
+      }
+    });
+
+  const loadNextPage = async () => {
+    if (!nextPage) {
+      return;
+    }
+
+    try {
+      const { people: newPeople, hasNextPage } = await getAllPeople({ withHidden: true, page: nextPage });
+      people = people.concat(newPeople);
+      if (nextPage !== null) {
+        currentPage = nextPage;
+      }
+      nextPage = hasNextPage ? nextPage + 1 : null;
+    } catch (error) {
+      handleError(error, $t('errors.failed_to_load_people'));
+    }
+  };
+
+  const handleSearch = async () => {
+    const getSearchedPeople = $page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
+    if (getSearchedPeople !== searchName) {
+      $page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
+      await goto($page.url, { keepFocus: true });
+    }
+  };
+
+  const onResetSearchBar = async () => {
+    await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
+  };
+
+  let people = $state(data.people.people);
+  $effect(() => {
+    people = data.people.people;
+  });
+  let visiblePeople = $derived(people.filter((people) => !people.isHidden));
+  let countVisiblePeople = $derived(searchName ? searchedPeopleLocal.length : data.people.total - data.people.hidden);
+  let showPeople = $derived(searchName ? searchedPeopleLocal : visiblePeople);
+</script>
+
+<svelte:window bind:innerHeight />
+
+<UserPageLayout
+  title={$t('choose_person_see_similar')}
+  description={countVisiblePeople === 0 && !searchName ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
+  use={[
+    [
+      scrollMemory,
+      {
+        routeStartsWith: AppRoute.MERGE_FACES,
+        beforeSave: () => {
+          if (currentPage) {
+            sessionStorage.setItem(SessionStorageKey.INFINITE_SCROLL_PAGE, currentPage.toString());
+          }
+        },
+        beforeClear: () => {
+          sessionStorage.removeItem(SessionStorageKey.INFINITE_SCROLL_PAGE);
+        },
+        beforeLoad: loadInitialScroll,
+      },
+    ],
+  ]}
+>
+  {#snippet buttons()}
+    {#if people.length > 0}
+      <div class="flex gap-2 items-center justify-center">
+        <div class="hidden sm:block">
+          <div class="w-40 lg:w-80 h-10">
+            <SearchPeople
+              bind:this={searchPeopleElement}
+              type="searchBar"
+              placeholder={$t('search_people')}
+              onReset={onResetSearchBar}
+              onSearch={handleSearch}
+              bind:searchName
+              bind:searchedPeopleLocal
+            />
+          </div>
+        </div>
+      </div>
+    {/if}
+  {/snippet}
+
+  {#if countVisiblePeople > 0 && (!searchName || searchedPeopleLocal.length > 0)}
+    <PeopleInfiniteScroll people={showPeople} hasNextPage={!!nextPage && !searchName} {loadNextPage}>
+      {#snippet children({ person, index })}
+        <a href="{AppRoute.MERGE_FACES}/{person.id}" class="group relative w-full h-full block">
+          <ImageThumbnail
+            preload={index < 20}
+            shadow
+            url={getPeopleThumbnailUrl(person)}
+            altText={person.name}
+            widthStyle="100%"
+            hiddenIconClass="text-white group-hover:text-black transition-colors"
+          />
+          {#if person.name}
+            <span class="absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white">
+              {person.name}
+            </span>
+          {/if}
+        </a>
+      {/snippet}
+    </PeopleInfiniteScroll>
+  {:else}
+    <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
+      <div class="flex flex-col content-center items-center text-center">
+        <Icon path={mdiAccountOff} size="3.5em" />
+        <p class="mt-5 text-3xl font-medium max-w-lg line-clamp-2 overflow-hidden">
+          {$t(searchName ? 'search_no_people_named' : 'search_no_people', { values: { name: searchName } })}
+        </p>
+      </div>
+    </div>
+  {/if}
+</UserPageLayout>

web/src/routes/(user)/utilities/merge-faces/+page.ts

@@ -0,0 +1,18 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getAllPeople } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+  await authenticate();
+
+  const people = await getAllPeople({ withHidden: true });
+  const $t = await getFormatter();
+
+  return {
+    people,
+    meta: {
+      title: $t('people'),
+    },
+  };
+}) satisfies PageLoad;