feat(web): re-assign person faces (2) (#4949)

* feat: unassign person faces * multiple improvements * chore: regenerate api * feat: improve face interactions in photos * fix: tests * fix: tests * optimize * fix: wrong assignment on complex-multiple re-assignments * fix: thumbnails with large photos * fix: complex reassign * fix: don't send people with faces * fix: person thumbnail generation * chore: regenerate api * add tess * feat: face box even when zoomed * fix: change feature photo * feat: make the blue icon hoverable * chore: regenerate api * feat: use websocket * fix: loading spinner when clicking on the done button * fix: use the svelte way * fix: tests * simplify * fix: unused vars * fix: remove unused code * fix: add migration * chore: regenerate api * ci: add unit tests * chore: regenerate api * feat: if a new person is created for a face and the server takes more than 15 seconds to generate the person thumbnail, don't wait for it * reorganize * chore: regenerate api * feat: global edit * pr feedback * pr feedback * simplify * revert test * fix: face generation * fix: tests * fix: face generation * fix merge * feat: search names in unmerge face selector modal * fix: merge face selector * simplify feature photo generation * fix: change endpoint * pr feedback * chore: fix merge * chore: fix merge * fix: tests * fix: edit & hide buttons * fix: tests * feat: show if person is hidden * feat: rename face to person * feat: split in new panel * copy-paste-error * pr feedback * fix: feature photo * do not leak faces * fix: unmerge modal * fix: merge modal event * feat(server): remove duplicates * fix: title for image thumbnails * fix: disable side panel when there's no face until next PR --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-11-14 17:36:12 +00:00 · 2023-12-05 16:43:15 +01:00 · 2023-12-05 16:43:15 +01:00 · 7702560b12
commit 7702560b12
parent 982183600d
74 changed files with 4882 additions and 283 deletions
--- a/web/src/lib/components/faces-page/people-list.svelte
+++ b/web/src/lib/components/faces-page/people-list.svelte
@ -0,0 +1,106 @@
+<script lang="ts">
+  import { api, type PersonResponseDto } from '@api';
+  import FaceThumbnail from './face-thumbnail.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import Icon from '../elements/icon.svelte';
+  import { mdiClose, mdiMagnify } from '@mdi/js';
+  import { handleError } from '$lib/utils/handle-error';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { searchNameLocal } from '$lib/utils/person';
+
+  export let screenHeight: number;
+  export let people: PersonResponseDto[];
+  export let peopleCopy: PersonResponseDto[];
+  export let unselectedPeople: PersonResponseDto[];
+
+  let name = '';
+  let searchWord: string;
+  let isSearchingPeople = false;
+
+  let dispatch = createEventDispatcher<{
+    select: PersonResponseDto;
+  }>();
+
+  const resetSearch = () => {
+    name = '';
+    people = peopleCopy;
+  };
+
+  $: {
+    people = peopleCopy.filter(
+      (person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
+    );
+    people = searchNameLocal(name, people, 10);
+  }
+
+  const searchPeople = async (force: boolean) => {
+    if (name === '') {
+      people = peopleCopy;
+      return;
+    }
+    if (!force) {
+      if (people.length < 20 && name.startsWith(searchWord)) {
+        return;
+      }
+    }
+
+    const timeout = setTimeout(() => (isSearchingPeople = true), 100);
+    try {
+      const { data } = await api.searchApi.searchPerson({ name });
+      people = data;
+      searchWord = name;
+    } catch (error) {
+      handleError(error, "Can't search people");
+    } finally {
+      clearTimeout(timeout);
+    }
+
+    isSearchingPeople = false;
+  };
+</script>
+
+<div class="flex w-40 sm:w-48 md:w-96 h-14 rounded-lg bg-gray-100 p-2 dark:bg-gray-700 mb-8 gap-2 place-items-center">
+  <button on:click={() => searchPeople(true)}>
+    <div class="w-fit">
+      <Icon path={mdiMagnify} size="24" />
+    </div>
+  </button>
+  <!-- svelte-ignore a11y-autofocus -->
+  <input
+    autofocus
+    class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
+    type="text"
+    placeholder="Search names"
+    bind:value={name}
+    on:input={() => searchPeople(false)}
+  />
+  {#if name}
+    <button on:click={resetSearch}>
+      <Icon path={mdiClose} />
+    </button>
+  {/if}
+  {#if isSearchingPeople}
+    <div class="flex place-items-center">
+      <LoadingSpinner />
+    </div>
+  {/if}
+</div>
+
+<div
+  class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray"
+  style:max-height={screenHeight - 400 + 'px'}
+>
+  <div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
+    {#each people as person (person.id)}
+      <FaceThumbnail
+        {person}
+        on:click={() => {
+          dispatch('select', person);
+        }}
+        circle
+        border
+        selectable
+      />
+    {/each}
+  </div>
+</div>