feat(web/server): merge faces (#3121)

* feat(server/web): Merge faces * get parent id * update * query to get identical asset and change controller * change delete asset signature * delete identical assets * gaming time * delete merge person * query * query * generate api * pr feedback * generate api * naming * remove unused method * Update server/src/domain/person/person.service.ts Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> * Update server/src/domain/person/person.service.ts Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> * better method signature * cleaning up * fix bug * added interfaces * added tests * merge main * api * build merge face interface * api * selector interface * style * more style * clean up import * styling * styling * better * styling * styling * add merge face diablog * finished * refactor: merge person endpoint * refactor: merge person component * chore: open api * fix: tests --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
2025-11-07 17:27:20 +00:00 · 2023-07-11 16:52:41 -05:00 · 2023-07-11 16:52:41 -05:00 · c86b2ae500
commit c86b2ae500
parent 848ba685eb
30 changed files with 1478 additions and 71 deletions
--- a/web/src/lib/components/faces-page/merge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/merge-face-selector.svelte
@ -0,0 +1,145 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { api, type PersonResponseDto } from '@api';
+  import FaceThumbnail from './face-thumbnail.svelte';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import Merge from 'svelte-material-icons/Merge.svelte';
+  import CallMerge from 'svelte-material-icons/CallMerge.svelte';
+  import { flip } from 'svelte/animate';
+  import { NotificationType, notificationController } from '../shared-components/notification/notification';
+  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import { handleError } from '$lib/utils/handle-error';
+  import { invalidateAll } from '$app/navigation';
+
+  export let person: PersonResponseDto;
+  let people: PersonResponseDto[] = [];
+  let selectedPeople: PersonResponseDto[] = [];
+  let screenHeight: number;
+  let isShowConfirmation = false;
+  let dispatch = createEventDispatcher();
+
+  $: hasSelection = selectedPeople.length > 0;
+  $: unselectedPeople = people.filter((source) => !selectedPeople.includes(source) && source.id !== person.id);
+
+  onMount(async () => {
+    const { data } = await api.personApi.getAllPeople();
+    people = data;
+  });
+
+  const onClose = () => {
+    dispatch('go-back');
+  };
+
+  const onSelect = (selected: PersonResponseDto) => {
+    if (selectedPeople.includes(selected)) {
+      selectedPeople = selectedPeople.filter((person) => person.id !== selected.id);
+      return;
+    }
+
+    if (selectedPeople.length >= 5) {
+      notificationController.show({
+        message: 'You can only merge up to 5 faces at a time',
+        type: NotificationType.Info,
+      });
+      return;
+    }
+
+    selectedPeople = [selected, ...selectedPeople];
+  };
+
+  const handleMerge = async () => {
+    try {
+      const { data: results } = await api.personApi.mergePerson({
+        id: person.id,
+        mergePersonDto: { ids: selectedPeople.map(({ id }) => id) },
+      });
+      const count = results.filter(({ success }) => success).length;
+      notificationController.show({
+        message: `Merged ${count} ${count === 1 ? 'person' : 'people'}`,
+        type: NotificationType.Info,
+      });
+      await invalidateAll();
+      onClose();
+    } catch (error) {
+      handleError(error, 'Cannot merge faces');
+    } finally {
+      isShowConfirmation = false;
+    }
+  };
+</script>
+
+<svelte:window bind:innerHeight={screenHeight} />
+
+<section
+  transition:fly={{ y: 500, duration: 100, easing: quintOut }}
+  class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
+>
+  <ControlAppBar on:close-button-click={onClose}>
+    <svelte:fragment slot="leading">
+      {#if hasSelection}
+        Selected {selectedPeople.length}
+      {:else}
+        Merge faces
+      {/if}
+      <div />
+    </svelte:fragment>
+    <svelte:fragment slot="trailing">
+      <Button
+        size={'sm'}
+        disabled={!hasSelection}
+        on:click={() => {
+          isShowConfirmation = true;
+        }}
+      >
+        <Merge size={18} />
+        <span class="ml-2"> Merge</span></Button
+      >
+    </svelte:fragment>
+  </ControlAppBar>
+  <section class="pt-[100px] px-[70px] bg-immich-bg dark:bg-immich-dark-bg">
+    <section id="merge-face-selector relative">
+      <div class="place-items-center place-content-center mb-10 h-[200px]">
+        <p class="uppercase mb-4 dark:text-white text-center">Choose matching faces to merge</p>
+
+        <div class="grid grid-flow-col-dense place-items-center place-content-center gap-4">
+          {#each selectedPeople as person (person.id)}
+            <div animate:flip={{ duration: 250, easing: quintOut }}>
+              <FaceThumbnail border circle {person} selectable thumbnailSize={120} on:click={() => onSelect(person)} />
+            </div>
+          {/each}
+
+          {#if hasSelection}
+            <span><CallMerge size={48} class="rotate-90 dark:text-white" /> </span>
+          {/if}
+          <FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
+        </div>
+      </div>
+      <div
+        class="p-10 overflow-y-auto rounded-3xl bg-gray-200 dark:bg-immich-dark-gray"
+        style:max-height={screenHeight - 200 - 200 + 'px'}
+      >
+        <div class="grid grid-col-2 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-8">
+          {#each unselectedPeople as person (person.id)}
+            <FaceThumbnail {person} on:click={() => onSelect(person)} circle border selectable />
+          {/each}
+        </div>
+      </div>
+    </section>
+
+    {#if isShowConfirmation}
+      <ConfirmDialogue
+        title="Merge faces"
+        confirmText="Merge"
+        on:confirm={handleMerge}
+        on:cancel={() => (isShowConfirmation = false)}
+      >
+        <svelte:fragment slot="prompt">
+          <p>Are you sure you want merge these faces? <br />This action is <strong>irreversible</strong>.</p>
+        </svelte:fragment>
+      </ConfirmDialogue>
+    {/if}
+  </section>
+</section>