github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-11 04:37:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
martin
2023-12-05 16:43:15 +01:00
committed by GitHub
parent 982183600d
commit 7702560b12
74 changed files with 4882 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/routes/(user)/people/+page.svelte
View File

@@ -79,7 +79,7 @@
// trigger reactivity
people = people;
// Reset variables used on the "Show & hide faces" modal
// Reset variables used on the "Show & hide people" modal
showLoadingSpinner = false;
selectHidden = false;
toggleVisibility = false;
@@ -145,13 +145,13 @@
`Unable to change the visibility for ${changed.length} ${changed.length <= 1 ? 'person' : 'people'}`,
);
}
// Reset variables used on the "Show & hide faces" modal
// Reset variables used on the "Show & hide people" modal
showLoadingSpinner = false;
selectHidden = false;
toggleVisibility = false;
};
const handleMergeSameFace = async (response: [PersonResponseDto, PersonResponseDto]) => {
const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
const [personToMerge, personToBeMergedIn] = response;
showMergeModal = false;
@@ -167,7 +167,7 @@
people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
notificationController.show({
message: 'Merge faces succesfully',
message: 'Merge people succesfully',
type: NotificationType.Info,
});
} catch (error) {
@@ -213,7 +213,7 @@
edittingPerson = detail;
};
const handleHideFace = async (detail: PersonResponseDto) => {
const handleHidePerson = async (detail: PersonResponseDto) => {
try {
const { data: updatedPerson } = await api.personApi.updatePerson({
id: detail.id,
@@ -244,7 +244,7 @@
}
};
const handleMergeFaces = (detail: PersonResponseDto) => {
const handleMergePeople = (detail: PersonResponseDto) => {
goto(`${AppRoute.PEOPLE}/${detail.id}?action=merge&previousRoute=${AppRoute.PEOPLE}`);
};
@@ -352,7 +352,7 @@
{potentialMergePeople}
on:close={() => (showMergeModal = false)}
on:reject={() => changeName()}
on:confirm={(event) => handleMergeSameFace(event.detail)}
on:confirm={(event) => handleMergeSamePerson(event.detail)}
/>
</FullScreenModal>
{/if}
@@ -363,7 +363,7 @@
<IconButton on:click={() => (selectHidden = !selectHidden)}>
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
<Icon path={mdiEyeOutline} size="18" />
<p class="ml-2">Show & hide faces</p>
<p class="ml-2">Show & hide people</p>
</div>
</IconButton>
{/if}
@@ -379,8 +379,8 @@
preload={idx < 20}
on:change-name={() => handleChangeName(person)}
on:set-birth-date={() => handleSetBirthDate(person)}
on:merge-faces={() => handleMergeFaces(person)}
on:hide-face={() => handleHideFace(person)}
on:merge-people={() => handleMergePeople(person)}
on:hide-person={() => handleHidePerson(person)}
/>
{/if}
{/each}

57
web/src/routes/(user)/people/[personId]/+page.svelte
View File

@@ -4,6 +4,7 @@
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
import UnMergeFaceSelector from '$lib/components/faces-page/unmerge-face-selector.svelte';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
@@ -46,10 +47,11 @@
enum ViewMode {
VIEW_ASSETS = 'view-assets',
SELECT_FACE = 'select-face',
MERGE_FACES = 'merge-faces',
SELECT_PERSON = 'select-person',
MERGE_PEOPLE = 'merge-people',
SUGGEST_MERGE = 'suggest-merge',
BIRTH_DATE = 'birth-date',
UNASSIGN_ASSETS = 'unassign-faces',
}
let assetStore = new AssetStore({
@@ -124,7 +126,7 @@
previousRoute = getPreviousRoute;
}
if (action == 'merge') {
viewMode = ViewMode.MERGE_FACES;
viewMode = ViewMode.MERGE_PEOPLE;
}
});
const handleEscape = () => {
@@ -155,7 +157,17 @@
}
});
const toggleHideFace = async () => {
const handleUnmerge = () => {
$assetStore.removeAssets(Array.from($selectedAssets).map((a) => a.id));
assetInteractionStore.clearMultiselect();
viewMode = ViewMode.VIEW_ASSETS;
};
const handleReassignAssets = () => {
viewMode = ViewMode.UNASSIGN_ASSETS;
};
const toggleHidePerson = async () => {
try {
await api.personApi.updatePerson({
id: data.person.id,
@@ -179,7 +191,7 @@
};
const handleSelectFeaturePhoto = async (asset: AssetResponseDto) => {
if (viewMode !== ViewMode.SELECT_FACE) {
if (viewMode !== ViewMode.SELECT_PERSON) {
return;
}
@@ -202,7 +214,7 @@
}
};
const handleMergeSameFace = async (response: [PersonResponseDto, PersonResponseDto]) => {
const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
const [personToMerge, personToBeMergedIn] = response;
viewMode = ViewMode.VIEW_ASSETS;
isEditingName = false;
@@ -212,7 +224,7 @@
mergePersonDto: { ids: [personToMerge.id] },
});
notificationController.show({
message: 'Merge faces succesfully',
message: 'Merge people succesfully',
type: NotificationType.Info,
});
people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
@@ -333,6 +345,15 @@
};
</script>
{#if viewMode === ViewMode.UNASSIGN_ASSETS}
<UnMergeFaceSelector
assetIds={Array.from($selectedAssets).map((a) => a.id)}
personAssets={data.person}
on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
on:confirm={handleUnmerge}
/>
{/if}
{#if viewMode === ViewMode.SUGGEST_MERGE}
<MergeSuggestionModal
{personMerge1}
@@ -340,7 +361,7 @@
{potentialMergePeople}
on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
on:reject={() => changeName()}
on:confirm={(event) => handleMergeSameFace(event.detail)}
on:confirm={(event) => handleMergeSamePerson(event.detail)}
/>
{/if}
@@ -352,7 +373,7 @@
/>
{/if}
{#if viewMode === ViewMode.MERGE_FACES}
{#if viewMode === ViewMode.MERGE_PEOPLE}
<MergeFaceSelector person={data.person} on:go-back={handleGoBack} on:merge={handleMerge} />
{/if}
@@ -370,6 +391,7 @@
<DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
<MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
<ChangeDate menuItem />
<ChangeLocation menuItem />
</AssetSelectContextMenu>
@@ -379,16 +401,19 @@
<ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close-button-click={() => goto(previousRoute)}>
<svelte:fragment slot="trailing">
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
<MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_FACE)} />
<MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_PERSON)} />
<MenuOption text="Set date of birth" on:click={() => (viewMode = ViewMode.BIRTH_DATE)} />
<MenuOption text="Merge face" on:click={() => (viewMode = ViewMode.MERGE_FACES)} />
<MenuOption text={data.person.isHidden ? 'Unhide face' : 'Hide face'} on:click={() => toggleHideFace()} />
<MenuOption text="Merge person" on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)} />
<MenuOption
text={data.person.isHidden ? 'Unhide person' : 'Hide person'}
on:click={() => toggleHidePerson()}
/>
</AssetSelectContextMenu>
</svelte:fragment>
</ControlAppBar>
{/if}
{#if viewMode === ViewMode.SELECT_FACE}
{#if viewMode === ViewMode.SELECT_PERSON}
<ControlAppBar on:close-button-click={() => (viewMode = ViewMode.VIEW_ASSETS)}>
<svelte:fragment slot="leading">Select feature photo</svelte:fragment>
</ControlAppBar>
@@ -401,13 +426,13 @@
<AssetGrid
{assetStore}
{assetInteractionStore}
isSelectionMode={viewMode === ViewMode.SELECT_FACE}
singleSelect={viewMode === ViewMode.SELECT_FACE}
isSelectionMode={viewMode === ViewMode.SELECT_PERSON}
singleSelect={viewMode === ViewMode.SELECT_PERSON}
on:select={({ detail: asset }) => handleSelectFeaturePhoto(asset)}
on:escape={handleEscape}
>
{#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
<!-- Face information block -->
<!-- Person information block -->
<div
role="button"
class="relative w-fit p-4 sm:px-6"