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-10-29 17:40:28 +00:00 · 2023-07-11 16:52:41 -05:00
parent 848ba685eb
commit c86b2ae500
30 changed files with 1478 additions and 71 deletions
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -798,6 +798,41 @@ export interface AuthDeviceResponseDto {
     */
    'deviceOS': string;
 }
+/**
+ * 
+ * @export
+ * @interface BulkIdResponseDto
+ */
+export interface BulkIdResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof BulkIdResponseDto
+     */
+    'id': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof BulkIdResponseDto
+     */
+    'success': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof BulkIdResponseDto
+     */
+    'error'?: BulkIdResponseDtoErrorEnum;
+}
+
+export const BulkIdResponseDtoErrorEnum = {
+    Duplicate: 'duplicate',
+    NoPermission: 'no_permission',
+    NotFound: 'not_found',
+    Unknown: 'unknown'
+} as const;
+
+export type BulkIdResponseDtoErrorEnum = typeof BulkIdResponseDtoErrorEnum[keyof typeof BulkIdResponseDtoErrorEnum];
+
 /**
 * 
 * @export
@@ -1686,6 +1721,19 @@ export interface MemoryLaneResponseDto {
     */
    'assets': Array<AssetResponseDto>;
 }
+/**
+ * 
+ * @export
+ * @interface MergePersonDto
+ */
+export interface MergePersonDto {
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof MergePersonDto
+     */
+    'ids': Array<string>;
+}
 /**
 * 
 * @export
@@ -8852,6 +8900,54 @@ export const PersonApiAxiosParamCreator = function (configuration?: Configuratio
                options: localVarRequestOptions,
            };
        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {MergePersonDto} mergePersonDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        mergePerson: async (id: string, mergePersonDto: MergePersonDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('mergePerson', 'id', id)
+            // verify required parameter 'mergePersonDto' is not null or undefined
+            assertParamExists('mergePerson', 'mergePersonDto', mergePersonDto)
+            const localVarPath = `/person/{id}/merge`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication cookie required
+
+            // authentication api_key required
+            await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(mergePersonDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
        /**
         * 
         * @param {string} id 
@@ -8949,6 +9045,17 @@ export const PersonApiFp = function(configuration?: Configuration) {
            const localVarAxiosArgs = await localVarAxiosParamCreator.getPersonThumbnail(id, options);
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {MergePersonDto} mergePersonDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async mergePerson(id: string, mergePersonDto: MergePersonDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<BulkIdResponseDto>>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.mergePerson(id, mergePersonDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
        /**
         * 
         * @param {string} id 
@@ -9005,6 +9112,16 @@ export const PersonApiFactory = function (configuration?: Configuration, basePat
        getPersonThumbnail(id: string, options?: any): AxiosPromise<File> {
            return localVarFp.getPersonThumbnail(id, options).then((request) => request(axios, basePath));
        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {MergePersonDto} mergePersonDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        mergePerson(id: string, mergePersonDto: MergePersonDto, options?: any): AxiosPromise<Array<BulkIdResponseDto>> {
+            return localVarFp.mergePerson(id, mergePersonDto, options).then((request) => request(axios, basePath));
+        },
        /**
         * 
         * @param {string} id 
@@ -9060,6 +9177,27 @@ export interface PersonApiGetPersonThumbnailRequest {
    readonly id: string
 }

+/**
+ * Request parameters for mergePerson operation in PersonApi.
+ * @export
+ * @interface PersonApiMergePersonRequest
+ */
+export interface PersonApiMergePersonRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonApiMergePerson
+     */
+    readonly id: string
+
+    /**
+     * 
+     * @type {MergePersonDto}
+     * @memberof PersonApiMergePerson
+     */
+    readonly mergePersonDto: MergePersonDto
+}
+
 /**
 * Request parameters for updatePerson operation in PersonApi.
 * @export
@@ -9131,6 +9269,17 @@ export class PersonApi extends BaseAPI {
        return PersonApiFp(this.configuration).getPersonThumbnail(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
    }

+    /**
+     * 
+     * @param {PersonApiMergePersonRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof PersonApi
+     */
+    public mergePerson(requestParameters: PersonApiMergePersonRequest, options?: AxiosRequestConfig) {
+        return PersonApiFp(this.configuration).mergePerson(requestParameters.id, requestParameters.mergePersonDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
    /**
     * 
     * @param {PersonApiUpdatePersonRequest} requestParameters Request parameters.
--- a/web/src/lib/components/faces-page/face-thumbnail.svelte
+++ b/web/src/lib/components/faces-page/face-thumbnail.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { api, type PersonResponseDto } from '@api';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let person: PersonResponseDto;
+  export let selectable = false;
+  export let selected = false;
+  export let thumbnailSize: number | null = null;
+  export let circle = false;
+  export let border = false;
+
+  let dispatch = createEventDispatcher();
+
+  const handleOnClicked = () => {
+    dispatch('click', person);
+  };
+</script>
+
+<button
+  class="relative transition-all rounded-lg"
+  on:click={handleOnClicked}
+  disabled={!selectable}
+  style:width={thumbnailSize ? thumbnailSize + 'px' : '100%'}
+  style:height={thumbnailSize ? thumbnailSize + 'px' : '100%'}
+>
+  <div
+    class="filter w-full h-full brightness-90 border-2"
+    class:rounded-full={circle}
+    class:rounded-lg={!circle}
+    class:border-transparent={!border}
+    class:dark:border-immich-dark-primary={border}
+    class:border-immich-primary={border}
+  >
+    <ImageThumbnail
+      {circle}
+      url={api.getPeopleThumbnailUrl(person.id)}
+      altText={person.name}
+      widthStyle="100%"
+      shadow
+    />
+  </div>
+
+  <div
+    class="absolute top-0 left-0 w-full h-full bg-immich-primary/30 opacity-0"
+    class:hover:opacity-100={selectable}
+    class:rounded-full={circle}
+    class:rounded-lg={!circle}
+  />
+
+  {#if selected}
+    <div
+      class="absolute top-0 left-0 w-full h-full bg-blue-500/80"
+      class:rounded-full={circle}
+      class:rounded-lg={!circle}
+    />
+  {/if}
+
+  {#if person.name}
+    <span
+      class="absolute bottom-2 left-0 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+    >
+      {person.name}
+    </span>
+  {/if}
+</button>
--- 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>
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -38,7 +38,7 @@
        {#if data.people.length > MAX_ITEMS}
          <a
            href={AppRoute.PEOPLE}
-            class="font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
+            class="font-medium text-sm pr-4 hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
            draggable="false">View All</a
          >
        {/if}
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -15,7 +15,7 @@
        {#each data.people as person (person.id)}
          <div class="relative">
            <a href="/people/{person.id}" draggable="false">
-              <div class="filter brightness-75 rounded-xl w-48">
+              <div class="filter brightness-95 rounded-xl w-48">
                <ImageThumbnail
                  shadow
                  url={api.getPeopleThumbnailUrl(person.id)}
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -28,17 +28,20 @@
    NotificationType,
    notificationController,
  } from '$lib/components/shared-components/notification/notification';
+  import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';

  export let data: PageData;
-
  let isEditingName = false;
-  let isSelectingFace = false;
+  let showFaceThumbnailSelection = false;
+  let showMergeFacePanel = false;
  let previousRoute: string = AppRoute.EXPLORE;
  let selectedAssets: Set<AssetResponseDto> = new Set();
  $: isMultiSelectionMode = selectedAssets.size > 0;
  $: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
  $: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);

+  $: showAssets = !showMergeFacePanel && !showFaceThumbnailSelection;
+
  afterNavigate(({ from }) => {
    // Prevent setting previousRoute to the current page.
    if (from && from.route.id !== $page.route.id) {
@@ -64,7 +67,7 @@
  };

  const handleSelectFeaturePhoto = async (event: CustomEvent) => {
-    isSelectingFace = false;
+    showFaceThumbnailSelection = false;

    const { selectedAsset }: { selectedAsset: AssetResponseDto | undefined } = event.detail;

@@ -102,7 +105,8 @@
  <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(previousRoute)}>
    <svelte:fragment slot="trailing">
      <AssetSelectContextMenu icon={DotsVertical} title="Menu">
-        <MenuOption text="Change feature photo" on:click={() => (isSelectingFace = true)} />
+        <MenuOption text="Change feature photo" on:click={() => (showFaceThumbnailSelection = true)} />
+        <MenuOption text="Merge face" on:click={() => (showMergeFacePanel = true)} />
      </AssetSelectContextMenu>
    </svelte:fragment>
  </ControlAppBar>
@@ -117,7 +121,7 @@
      on:cancel={() => (isEditingName = false)}
    />
  {:else}
-    <button on:click={() => (isSelectingFace = true)}>
+    <button on:click={() => (showFaceThumbnailSelection = true)}>
      <ImageThumbnail
        circle
        shadow
@@ -144,9 +148,9 @@
 </section>

 <!-- Gallery Block -->
-{#if !isSelectingFace}
+{#if showAssets}
  <section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
-    <section class="overflow-y-auto relative immich-scrollbar">
+    <section class="overflow-y-scroll relative immich-scrollbar">
      <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
        <GalleryViewer assets={data.assets} viewFrom="search-page" showArchiveIcon={true} bind:selectedAssets />
      </section>
@@ -154,6 +158,10 @@
  </section>
 {/if}

-{#if isSelectingFace}
+{#if showFaceThumbnailSelection}
  <FaceThumbnailSelector assets={data.assets} on:go-back={handleSelectFeaturePhoto} />
 {/if}
+
+{#if showMergeFacePanel}
+  <MergeFaceSelector person={data.person} on:go-back={() => (showMergeFacePanel = false)} />
+{/if}