feat: facial recognition (#2180)

web/src/routes/(user)/explore/+page.server.ts

@@ -8,10 +8,11 @@ export const load = (async ({ locals, parent }) => {
 	}
 
 	const { data: items } = await locals.api.searchApi.getExploreData();
-
+	const { data: people } = await locals.api.personApi.getAllPeople();
 	return {
 		user,
 		items,
+		people,
 		meta: {
 			title: 'Explore'
 		}

web/src/routes/(user)/explore/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
 	import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
 	import { AppRoute } from '$lib/constants';
-	import { AssetTypeEnum, SearchExploreItem } from '@api';
+	import { AssetTypeEnum, SearchExploreResponseDto, api } from '@api';
 	import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
+	import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
 	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
 	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
-	import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
@@ -19,27 +20,47 @@
 
 	const MAX_ITEMS = 12;
 
-	let things: SearchExploreItem[] = [];
-	let places: SearchExploreItem[] = [];
+	const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
+		const targetField = items.find((item) => item.fieldName === field);
+		return targetField?.items || [];
+	};
 
-	for (const item of data.items) {
-		switch (item.fieldName) {
-			case Field.OBJECTS:
-				things = item.items;
-				break;
-
-			case Field.CITY:
-				places = item.items;
-				break;
-		}
-	}
-
-	things = things.slice(0, MAX_ITEMS);
-	places = places.slice(0, MAX_ITEMS);
+	$: things = getFieldItems(data.items, Field.OBJECTS);
+	$: places = getFieldItems(data.items, Field.CITY);
+	$: people = data.people.slice(0, MAX_ITEMS);
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	<div class="mx-4 flex flex-col">
+	<div class="mx-4">
+		{#if people.length > 0}
+			<div class="mb-6 mt-2">
+				<div class="flex justify-between">
+					<p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
+					{#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"
+							draggable="false">View All</a
+						>
+					{/if}
+				</div>
+				<div class="flex flex-row flex-wrap gap-4">
+					{#each people as person (person.id)}
+						<a href="/people/{person.id}" class="w-24 text-center">
+							<ImageThumbnail
+								circle
+								shadow
+								url={api.getPeopleThumbnailUrl(person.id)}
+								altText={person.name}
+								widthStyle="100%"
+							/>
+							<p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
+						</a>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
 		{#if places.length > 0}
 			<div class="mb-6 mt-2">
 				<div>

web/src/routes/(user)/people/+page.server.ts

@@ -0,0 +1,19 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ locals, parent }) => {
+	const { user } = await parent();
+	if (!user) {
+		throw redirect(302, '/auth/login');
+	}
+
+	const { data: people } = await locals.api.personApi.getAllPeople();
+
+	return {
+		user,
+		people,
+		meta: {
+			title: 'People'
+		}
+	};
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+	import { api } from '@api';
+	import AccountOff from 'svelte-material-icons/AccountOff.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<UserPageLayout user={data.user} showUploadButton title="People">
+	{#if data.people.length > 0}
+		<div class="pl-4">
+			<div class="flex flex-row flex-wrap gap-1">
+				{#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">
+								<ImageThumbnail
+									shadow
+									url={api.getPeopleThumbnailUrl(person.id)}
+									altText={person.name}
+									widthStyle="100%"
+								/>
+							</div>
+							{#if person.name}
+								<span
+									class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+								>
+									{person.name}
+								</span>
+							{/if}
+						</a>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<div
+			class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white"
+		>
+			<div class="flex flex-col content-center items-center text-center">
+				<AccountOff size="3.5em" />
+				<p class="font-medium text-3xl mt-5">No people</p>
+			</div>
+		</div>
+	{/if}
+</UserPageLayout>

web/src/routes/(user)/people/[personId]/+page.server.ts

@@ -0,0 +1,21 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ locals, parent, params }) => {
+	const { user } = await parent();
+	if (!user) {
+		throw redirect(302, '/auth/login');
+	}
+
+	const { data: person } = await locals.api.personApi.getPerson(params.personId);
+	const { data: assets } = await locals.api.personApi.getPersonAssets(params.personId);
+
+	return {
+		user,
+		assets,
+		person,
+		meta: {
+			title: person.name || 'Person'
+		}
+	};
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+	import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
+	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+	import DownloadFiles from '$lib/components/photos-page/actions/download-files.svelte';
+	import MoveToArchive from '$lib/components/photos-page/actions/move-to-archive.svelte';
+	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+	import OptionAddToAlbum from '$lib/components/photos-page/menu-options/option-add-to-album.svelte';
+	import OptionAddToFavorites from '$lib/components/photos-page/menu-options/option-add-to-favorites.svelte';
+	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+	import { AppRoute } from '$lib/constants';
+	import { handleError } from '$lib/utils/handle-error';
+	import { AssetResponseDto, api } from '@api';
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	let isEditName = false;
+
+	let multiSelectAsset: Set<AssetResponseDto> = new Set();
+	$: isMultiSelectionMode = multiSelectAsset.size > 0;
+
+	const handleNameChange = async (name: string) => {
+		try {
+			isEditName = false;
+			data.person.name = name;
+			await api.personApi.updatePerson(data.person.id, { name });
+		} catch (error) {
+			handleError(error, 'Unable to save name');
+		}
+	};
+
+	const handleAssetDelete = (assetId: string) => {
+		data.assets = data.assets.filter((asset: AssetResponseDto) => asset.id !== assetId);
+	};
+</script>
+
+{#if isMultiSelectionMode}
+	<AssetSelectControlBar
+		assets={multiSelectAsset}
+		clearSelect={() => (multiSelectAsset = new Set())}
+	>
+		<CreateSharedLink />
+		<MoveToArchive />
+		<DownloadFiles filename={data.person.name} />
+		<AssetSelectContextMenu icon={Plus} title="Add">
+			<OptionAddToFavorites />
+			<OptionAddToAlbum />
+			<OptionAddToAlbum shared />
+		</AssetSelectContextMenu>
+		<DeleteAssets onAssetDelete={handleAssetDelete} />
+	</AssetSelectControlBar>
+{:else}
+	<ControlAppBar
+		showBackButton
+		backIcon={ArrowLeft}
+		on:close-button-click={() => goto(AppRoute.EXPLORE)}
+	/>
+{/if}
+
+<!-- Face information block -->
+<section class="pt-24 px-4 sm:px-6 flex place-items-center">
+	{#if isEditName}
+		<EditNameInput
+			person={data.person}
+			on:change={(event) => handleNameChange(event.detail)}
+			on:blur={() => (isEditName = false)}
+		/>
+	{:else}
+		<ImageThumbnail
+			circle
+			shadow
+			url={api.getPeopleThumbnailUrl(data.person.id)}
+			altText={data.person.name}
+			widthStyle="3.375rem"
+			heightStyle="3.375rem"
+		/>
+		<button
+			title="Edit name"
+			class="px-4 text-immich-primary dark:text-immich-dark-primary"
+			on:click={() => (isEditName = true)}
+		>
+			{#if data.person.name}
+				<p class="font-medium py-2">{data.person.name}</p>
+			{:else}
+				<p class="font-medium w-fit">Add a name</p>
+				<p class="text-sm text-gray-500 dark:text-immich-gray">
+					Find them fast by name with search
+				</p>
+			{/if}
+		</button>
+	{/if}
+</section>
+
+<!-- Gallery Block -->
+<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 id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
+			<GalleryViewer
+				assets={data.assets}
+				viewFrom="search-page"
+				showArchiveIcon={true}
+				bind:selectedAssets={multiSelectAsset}
+			/>
+		</section>
+	</section>
+</section>

web/src/routes/(user)/search/+page.svelte

@@ -91,7 +91,7 @@
 				</div>
 			{:else}
 				<div
-					class="flex items-center place-content-center w-full min-h-[calc(100vh_-_11rem)] dark:text-white"
+					class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white"
 				>
 					<div class="flex flex-col content-center items-center text-center">
 						<ImageOffOutline size="3.5em" />