feat(server)!: search via typesense (#1778)

* build: add typesense to docker

* feat(server): typesense search

* feat(web): search

* fix(web): show api error response message

* chore: search tests

* chore: regenerate open api

* fix: disable typesense on e2e

* fix: number properties for open api (dart)

* fix: e2e test

* fix: change lat/lng from floats to typesense geopoint

* dev: Add smartInfo relation to findAssetById to be able to query against it

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/api/api.ts

@@ -8,6 +8,7 @@ import {
 	DeviceInfoApi,
 	JobApi,
 	OAuthApi,
+	SearchApi,
 	ServerInfoApi,
 	ShareApi,
 	SystemConfigApi,
@@ -21,6 +22,7 @@ export class ImmichApi {
 	public authenticationApi: AuthenticationApi;
 	public oauthApi: OAuthApi;
 	public deviceInfoApi: DeviceInfoApi;
+	public searchApi: SearchApi;
 	public serverInfoApi: ServerInfoApi;
 	public jobApi: JobApi;
 	public keyApi: APIKeyApi;
@@ -41,6 +43,7 @@ export class ImmichApi {
 		this.serverInfoApi = new ServerInfoApi(this.config);
 		this.jobApi = new JobApi(this.config);
 		this.keyApi = new APIKeyApi(this.config);
+		this.searchApi = new SearchApi(this.config);
 		this.systemConfigApi = new SystemConfigApi(this.config);
 		this.shareApi = new ShareApi(this.config);
 	}

web/src/api/open-api/api.ts

@@ -1451,6 +1451,37 @@ export interface RemoveAssetsDto {
      */
     'assetIds': Array<string>;
 }
+/**
+ * 
+ * @export
+ * @interface SearchAlbumResponseDto
+ */
+export interface SearchAlbumResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchAlbumResponseDto
+     */
+    'total': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchAlbumResponseDto
+     */
+    'count': number;
+    /**
+     * 
+     * @type {Array<AlbumResponseDto>}
+     * @memberof SearchAlbumResponseDto
+     */
+    'items': Array<AlbumResponseDto>;
+    /**
+     * 
+     * @type {Array<SearchFacetResponseDto>}
+     * @memberof SearchAlbumResponseDto
+     */
+    'facets': Array<SearchFacetResponseDto>;
+}
 /**
  * 
  * @export
@@ -1464,6 +1495,107 @@ export interface SearchAssetDto {
      */
     'searchTerm': string;
 }
+/**
+ * 
+ * @export
+ * @interface SearchAssetResponseDto
+ */
+export interface SearchAssetResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchAssetResponseDto
+     */
+    'total': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchAssetResponseDto
+     */
+    'count': number;
+    /**
+     * 
+     * @type {Array<AssetResponseDto>}
+     * @memberof SearchAssetResponseDto
+     */
+    'items': Array<AssetResponseDto>;
+    /**
+     * 
+     * @type {Array<SearchFacetResponseDto>}
+     * @memberof SearchAssetResponseDto
+     */
+    'facets': Array<SearchFacetResponseDto>;
+}
+/**
+ * 
+ * @export
+ * @interface SearchConfigResponseDto
+ */
+export interface SearchConfigResponseDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SearchConfigResponseDto
+     */
+    'enabled': boolean;
+}
+/**
+ * 
+ * @export
+ * @interface SearchFacetCountResponseDto
+ */
+export interface SearchFacetCountResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof SearchFacetCountResponseDto
+     */
+    'count': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchFacetCountResponseDto
+     */
+    'value': string;
+}
+/**
+ * 
+ * @export
+ * @interface SearchFacetResponseDto
+ */
+export interface SearchFacetResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof SearchFacetResponseDto
+     */
+    'fieldName': string;
+    /**
+     * 
+     * @type {Array<SearchFacetCountResponseDto>}
+     * @memberof SearchFacetResponseDto
+     */
+    'counts': Array<SearchFacetCountResponseDto>;
+}
+/**
+ * 
+ * @export
+ * @interface SearchResponseDto
+ */
+export interface SearchResponseDto {
+    /**
+     * 
+     * @type {SearchAlbumResponseDto}
+     * @memberof SearchResponseDto
+     */
+    'albums': SearchAlbumResponseDto;
+    /**
+     * 
+     * @type {SearchAssetResponseDto}
+     * @memberof SearchResponseDto
+     */
+    'assets': SearchAssetResponseDto;
+}
 /**
  * 
  * @export
@@ -6485,6 +6617,248 @@ export class OAuthApi extends BaseAPI {
 }
 
 
+/**
+ * SearchApi - axios parameter creator
+ * @export
+ */
+export const SearchApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getSearchConfig: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/search/config`;
+            // 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: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            // authentication cookie required
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} [query] 
+         * @param {'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'} [type] 
+         * @param {boolean} [isFavorite] 
+         * @param {string} [exifInfoCity] 
+         * @param {string} [exifInfoState] 
+         * @param {string} [exifInfoCountry] 
+         * @param {string} [exifInfoMake] 
+         * @param {string} [exifInfoModel] 
+         * @param {Array<string>} [smartInfoObjects] 
+         * @param {Array<string>} [smartInfoTags] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        search: async (query?: string, type?: 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER', isFavorite?: boolean, exifInfoCity?: string, exifInfoState?: string, exifInfoCountry?: string, exifInfoMake?: string, exifInfoModel?: string, smartInfoObjects?: Array<string>, smartInfoTags?: Array<string>, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/search`;
+            // 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: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            // authentication cookie required
+
+            if (query !== undefined) {
+                localVarQueryParameter['query'] = query;
+            }
+
+            if (type !== undefined) {
+                localVarQueryParameter['type'] = type;
+            }
+
+            if (isFavorite !== undefined) {
+                localVarQueryParameter['isFavorite'] = isFavorite;
+            }
+
+            if (exifInfoCity !== undefined) {
+                localVarQueryParameter['exifInfo.city'] = exifInfoCity;
+            }
+
+            if (exifInfoState !== undefined) {
+                localVarQueryParameter['exifInfo.state'] = exifInfoState;
+            }
+
+            if (exifInfoCountry !== undefined) {
+                localVarQueryParameter['exifInfo.country'] = exifInfoCountry;
+            }
+
+            if (exifInfoMake !== undefined) {
+                localVarQueryParameter['exifInfo.make'] = exifInfoMake;
+            }
+
+            if (exifInfoModel !== undefined) {
+                localVarQueryParameter['exifInfo.model'] = exifInfoModel;
+            }
+
+            if (smartInfoObjects) {
+                localVarQueryParameter['smartInfo.objects'] = smartInfoObjects;
+            }
+
+            if (smartInfoTags) {
+                localVarQueryParameter['smartInfo.tags'] = smartInfoTags;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * SearchApi - functional programming interface
+ * @export
+ */
+export const SearchApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = SearchApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getSearchConfig(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SearchConfigResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getSearchConfig(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {string} [query] 
+         * @param {'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'} [type] 
+         * @param {boolean} [isFavorite] 
+         * @param {string} [exifInfoCity] 
+         * @param {string} [exifInfoState] 
+         * @param {string} [exifInfoCountry] 
+         * @param {string} [exifInfoMake] 
+         * @param {string} [exifInfoModel] 
+         * @param {Array<string>} [smartInfoObjects] 
+         * @param {Array<string>} [smartInfoTags] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async search(query?: string, type?: 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER', isFavorite?: boolean, exifInfoCity?: string, exifInfoState?: string, exifInfoCountry?: string, exifInfoMake?: string, exifInfoModel?: string, smartInfoObjects?: Array<string>, smartInfoTags?: Array<string>, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SearchResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.search(query, type, isFavorite, exifInfoCity, exifInfoState, exifInfoCountry, exifInfoMake, exifInfoModel, smartInfoObjects, smartInfoTags, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * SearchApi - factory interface
+ * @export
+ */
+export const SearchApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = SearchApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getSearchConfig(options?: any): AxiosPromise<SearchConfigResponseDto> {
+            return localVarFp.getSearchConfig(options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {string} [query] 
+         * @param {'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'} [type] 
+         * @param {boolean} [isFavorite] 
+         * @param {string} [exifInfoCity] 
+         * @param {string} [exifInfoState] 
+         * @param {string} [exifInfoCountry] 
+         * @param {string} [exifInfoMake] 
+         * @param {string} [exifInfoModel] 
+         * @param {Array<string>} [smartInfoObjects] 
+         * @param {Array<string>} [smartInfoTags] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        search(query?: string, type?: 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER', isFavorite?: boolean, exifInfoCity?: string, exifInfoState?: string, exifInfoCountry?: string, exifInfoMake?: string, exifInfoModel?: string, smartInfoObjects?: Array<string>, smartInfoTags?: Array<string>, options?: any): AxiosPromise<SearchResponseDto> {
+            return localVarFp.search(query, type, isFavorite, exifInfoCity, exifInfoState, exifInfoCountry, exifInfoMake, exifInfoModel, smartInfoObjects, smartInfoTags, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * SearchApi - object-oriented interface
+ * @export
+ * @class SearchApi
+ * @extends {BaseAPI}
+ */
+export class SearchApi extends BaseAPI {
+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SearchApi
+     */
+    public getSearchConfig(options?: AxiosRequestConfig) {
+        return SearchApiFp(this.configuration).getSearchConfig(options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {string} [query] 
+     * @param {'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER'} [type] 
+     * @param {boolean} [isFavorite] 
+     * @param {string} [exifInfoCity] 
+     * @param {string} [exifInfoState] 
+     * @param {string} [exifInfoCountry] 
+     * @param {string} [exifInfoMake] 
+     * @param {string} [exifInfoModel] 
+     * @param {Array<string>} [smartInfoObjects] 
+     * @param {Array<string>} [smartInfoTags] 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof SearchApi
+     */
+    public search(query?: string, type?: 'IMAGE' | 'VIDEO' | 'AUDIO' | 'OTHER', isFavorite?: boolean, exifInfoCity?: string, exifInfoState?: string, exifInfoCountry?: string, exifInfoMake?: string, exifInfoModel?: string, smartInfoObjects?: Array<string>, smartInfoTags?: Array<string>, options?: AxiosRequestConfig) {
+        return SearchApiFp(this.configuration).search(query, type, isFavorite, exifInfoCity, exifInfoState, exifInfoCountry, exifInfoMake, exifInfoModel, smartInfoObjects, smartInfoTags, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
 /**
  * ServerInfoApi - axios parameter creator
  * @export

web/src/app.d.ts

@@ -13,7 +13,7 @@ declare namespace App {
 	interface Error {
 		message: string;
 		stack?: string;
-		code?: string;
+		code?: string | number;
 	}
 }
 

web/src/hooks.server.ts

@@ -1,5 +1,5 @@
 import type { Handle, HandleServerError } from '@sveltejs/kit';
-import { AxiosError } from 'axios';
+import { AxiosError, AxiosResponse } from 'axios';
 import { env } from '$env/dynamic/public';
 import { ImmichApi } from './api/api';
 
@@ -34,11 +34,24 @@ export const handle = (async ({ event, resolve }) => {
 	return res;
 }) satisfies Handle;
 
+const DEFAULT_MESSAGE = 'Hmm, not sure about that. Check the logs or open a ticket?';
+
 export const handleError: HandleServerError = async ({ error }) => {
 	const httpError = error as AxiosError;
+	const response = httpError?.response as AxiosResponse<{
+		message: string;
+		statusCode: number;
+		error: string;
+	}>;
+
+	let code = response?.data?.statusCode || response?.status || httpError.code || '500';
+	if (response) {
+		code += ` - ${response.data?.error || response.statusText}`;
+	}
+
 	return {
-		message: httpError?.message || 'Hmm, not sure about that. Check the logs or open a ticket?',
-		stack: httpError?.stack,
-		code: httpError.code || '500'
+		message: response?.data?.message || httpError?.message || DEFAULT_MESSAGE,
+		code,
+		stack: httpError?.stack
 	};
 };

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -22,7 +22,7 @@
 
 	$: {
 		if (assets.length < 6) {
-			thumbnailSize = Math.floor(viewWidth / assets.length - assets.length);
+			thumbnailSize = Math.min(320, Math.floor(viewWidth / assets.length - assets.length));
 		} else {
 			if (viewWidth > 600) thumbnailSize = Math.floor(viewWidth / 6 - 6);
 			else if (viewWidth > 400) thumbnailSize = Math.floor(viewWidth / 4 - 6);

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -11,6 +11,7 @@
 	import ImmichLogo from '../immich-logo.svelte';
 	export let user: UserResponseDto;
 	export let shouldShowUploadButton = true;
+	export let term = '';
 
 	let shouldShowAccountInfo = false;
 
@@ -35,6 +36,10 @@
 
 		goto(data.redirectUri || '/auth/login?autoLaunch=0');
 	};
+
+	const onSearch = () => {
+		goto(`/search?q=${term}`);
+	};
 </script>
 
 <section
@@ -52,12 +57,16 @@
 				IMMICH
 			</h1>
 		</a>
-		<div class="flex-1 ml-24">
+		<form class="flex-1 ml-24" autocomplete="off" on:submit|preventDefault={onSearch}>
 			<input
+				type="text"
+				name="search"
 				class="w-[50%] rounded-3xl bg-gray-200 dark:bg-immich-dark-gray  px-8 py-4"
-				placeholder="Search - Coming soon"
+				placeholder="Search"
+				required
+				bind:value={term}
 			/>
-		</div>
+		</form>
 		<section class="flex gap-4 place-items-center">
 			<ThemeButton />
 

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

@@ -0,0 +1,26 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ locals, parent, url }) => {
+	const { user } = await parent();
+	if (!user) {
+		throw redirect(302, '/auth/login');
+	}
+
+	const term = url.searchParams.get('q') || undefined;
+
+	const { data: results } = await locals.api.searchApi.search(
+		term,
+		undefined,
+		undefined,
+		undefined,
+		undefined,
+		undefined,
+		undefined,
+		undefined,
+		undefined,
+		undefined,
+		{ params: url.searchParams }
+	);
+	return { user, term, results };
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+	import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	const term = $page.url.searchParams.get('q') || '';
+</script>
+
+<section>
+	<NavigationBar {term} user={data.user} shouldShowUploadButton={false} />
+</section>
+
+<section class="relative pt-[72px] h-screen bg-immich-bg  dark:bg-immich-dark-bg">
+	<section class="overflow-y-auto relative immich-scrollbar">
+		<section
+			id="search-content"
+			class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
+		>
+			{#if data.results?.assets?.items}
+				<GalleryViewer assets={data.results.assets.items} />
+			{/if}
+		</section>
+	</section>
+</section>

web/src/routes/+error.svelte

@@ -68,7 +68,7 @@
 
 					<div class="p-4 max-h-[75vh] min-h-[300px] overflow-y-auto immich-scrollbar pb-4 gap-4">
 						<div class="flex flex-col w-full gap-2">
-							<p class="text-red-500">{$page.error?.message} - {$page.error?.code}</p>
+							<p class="text-red-500">{$page.error?.message} ({$page.error?.code})</p>
 							{#if $page.error?.stack}
 								<label for="stacktrace">Stacktrace</label>
 								<pre id="stacktrace" class="text-xs">{$page.error?.stack || 'No stack'}</pre>