fix: use face thumbnail and not person face thumbnail when un-assigning face

fix: reset re-assigning selected un-assigned face
fix: reset un-assigned person
2023-12-06 22:43:06 +01:00 · 2023-12-06 18:43:01 +01:00 · 2023-12-06 16:08:40 +01:00 · 2023-12-06 11:09:08 +01:00 · 2023-12-06 01:25:49 +01:00 · 2023-12-06 00:11:15 +01:00
42 changed files with 1254 additions and 360 deletions
--- a/cli/src/api/open-api/api.ts
+++ b/cli/src/api/open-api/api.ts
@ -978,10 +978,10 @@ export interface AssetResponseDto {
    'ownerId': string;
    /**
     * 
-     * @type {Array<PersonWithFacesResponseDto>}
+     * @type {PeopleWithFacesResponseDto}
     * @memberof AssetResponseDto
     */
-    'people'?: Array<PersonWithFacesResponseDto>;
+    'people'?: PeopleWithFacesResponseDto | null;
    /**
     * 
     * @type {boolean}
@ -2632,6 +2632,25 @@ export interface PeopleUpdateItem {
     */
    'name'?: string;
 }
+/**
+ * 
+ * @export
+ * @interface PeopleWithFacesResponseDto
+ */
+export interface PeopleWithFacesResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof PeopleWithFacesResponseDto
+     */
+    'numberOfAssets': number;
+    /**
+     * 
+     * @type {Array<PersonWithFacesResponseDto>}
+     * @memberof PeopleWithFacesResponseDto
+     */
+    'people': Array<PersonWithFacesResponseDto>;
+}
 /**
 * 
 * @export
@ -11635,6 +11654,48 @@ export const FaceApiAxiosParamCreator = function (configuration?: Configuration)
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
            localVarRequestOptions.data = serializeDataIfNeeded(faceDto, localVarRequestOptions, configuration)

+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        unassignFace: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('unassignFace', 'id', id)
+            const localVarPath = `/face/{id}`
+                .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: 'DELETE', ...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)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
            return {
                url: toPathString(localVarUrlObj),
                options: localVarRequestOptions,
@ -11671,6 +11732,16 @@ export const FaceApiFp = function(configuration?: Configuration) {
            const localVarAxiosArgs = await localVarAxiosParamCreator.reassignFacesById(id, faceDto, options);
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async unassignFace(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetFaceResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.unassignFace(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
    }
 };

@ -11699,6 +11770,15 @@ export const FaceApiFactory = function (configuration?: Configuration, basePath?
        reassignFacesById(requestParameters: FaceApiReassignFacesByIdRequest, options?: AxiosRequestConfig): AxiosPromise<PersonResponseDto> {
            return localVarFp.reassignFacesById(requestParameters.id, requestParameters.faceDto, options).then((request) => request(axios, basePath));
        },
+        /**
+         * 
+         * @param {FaceApiUnassignFaceRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        unassignFace(requestParameters: FaceApiUnassignFaceRequest, options?: AxiosRequestConfig): AxiosPromise<AssetFaceResponseDto> {
+            return localVarFp.unassignFace(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
    };
 };

@ -11737,6 +11817,20 @@ export interface FaceApiReassignFacesByIdRequest {
    readonly faceDto: FaceDto
 }

+/**
+ * Request parameters for unassignFace operation in FaceApi.
+ * @export
+ * @interface FaceApiUnassignFaceRequest
+ */
+export interface FaceApiUnassignFaceRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof FaceApiUnassignFace
+     */
+    readonly id: string
+}
+
 /**
 * FaceApi - object-oriented interface
 * @export
@ -11765,6 +11859,17 @@ export class FaceApi extends BaseAPI {
    public reassignFacesById(requestParameters: FaceApiReassignFacesByIdRequest, options?: AxiosRequestConfig) {
        return FaceApiFp(this.configuration).reassignFacesById(requestParameters.id, requestParameters.faceDto, options).then((request) => request(this.axios, this.basePath));
    }
+
+    /**
+     * 
+     * @param {FaceApiUnassignFaceRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof FaceApi
+     */
+    public unassignFace(requestParameters: FaceApiUnassignFaceRequest, options?: AxiosRequestConfig) {
+        return FaceApiFp(this.configuration).unassignFace(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
 }


--- a/mobile/lib/modules/album/ui/album_thumbnail_listtile.dart
+++ b/mobile/lib/modules/album/ui/album_thumbnail_listtile.dart
@ -68,46 +68,46 @@ class AlbumThumbnailListTile extends StatelessWidget {
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
-              borderRadius: const BorderRadius.all(Radius.circular(8)),
+              borderRadius: BorderRadius.circular(8),
              child: album.thumbnail.value == null
                  ? buildEmptyThumbnail()
                  : buildAlbumThumbnail(),
            ),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      album.name,
-                      overflow: TextOverflow.ellipsis,
-                      style: const TextStyle(
-                        fontWeight: FontWeight.bold,
-                      ),
+            Padding(
+              padding: const EdgeInsets.only(
+                left: 8.0,
+                right: 8.0,
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    album.name,
+                    style: const TextStyle(
+                      fontWeight: FontWeight.bold,
                    ),
-                    Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        Text(
-                          album.assetCount == 1
-                              ? 'album_thumbnail_card_item'
-                              : 'album_thumbnail_card_items',
-                          style: const TextStyle(
+                  ),
+                  Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Text(
+                        album.assetCount == 1
+                            ? 'album_thumbnail_card_item'
+                            : 'album_thumbnail_card_items',
+                        style: const TextStyle(
+                          fontSize: 12,
+                        ),
+                      ).tr(args: ['${album.assetCount}']),
+                      if (album.shared)
+                        const Text(
+                          'album_thumbnail_card_shared',
+                          style: TextStyle(
                            fontSize: 12,
                          ),
-                        ).tr(args: ['${album.assetCount}']),
-                        if (album.shared)
-                          const Text(
-                            'album_thumbnail_card_shared',
-                            style: TextStyle(
-                              fontSize: 12,
-                            ),
-                          ).tr(),
-                      ],
-                    ),
-                  ],
-                ),
+                        ).tr(),
+                    ],
+                  ),
+                ],
              ),
            ),
          ],
--- a/mobile/lib/shared/providers/websocket.provider.dart
+++ b/mobile/lib/shared/providers/websocket.provider.dart
@ -1,13 +1,10 @@
-import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
-import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/models/server_info/server_version.model.dart';
 import 'package:immich_mobile/shared/models/store.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
-import 'package:immich_mobile/shared/providers/db.provider.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/services/sync.service.dart';
 import 'package:immich_mobile/utils/debounce.dart';
@ -17,33 +14,13 @@ import 'package:socket_io_client/socket_io_client.dart';

 enum PendingAction {
  assetDelete,
-  assetUploaded,
-  assetHidden,
 }

 class PendingChange {
-  final String id;
  final PendingAction action;
  final dynamic value;

-  const PendingChange(
-    this.id,
-    this.action,
-    this.value,
-  );
-
-  @override
-  String toString() => 'PendingChange(id: $id, action: $action, value: $value)';
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-
-    return other is PendingChange && other.id == id && other.action == action;
-  }
-
-  @override
-  int get hashCode => id.hashCode ^ action.hashCode;
+  const PendingChange(this.action, this.value);
 }

 class WebsocketState {
@ -154,7 +131,6 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
        socket.on('on_asset_trash', _handleServerUpdates);
        socket.on('on_asset_restore', _handleServerUpdates);
        socket.on('on_asset_update', _handleServerUpdates);
-        socket.on('on_asset_hidden', _handleOnAssetHidden);
        socket.on('on_new_release', _handleReleaseUpdates);
      } catch (e) {
        debugPrint("[WEBSOCKET] Catch Websocket Error - ${e.toString()}");
@ -187,78 +163,35 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
  }

  void addPendingChange(PendingAction action, dynamic value) {
-    final now = DateTime.now();
    state = state.copyWith(
-      pendingChanges: [
-        ...state.pendingChanges,
-        PendingChange(now.millisecondsSinceEpoch.toString(), action, value),
-      ],
+      pendingChanges: [...state.pendingChanges, PendingChange(action, value)],
    );
-    _debounce(handlePendingChanges);
  }

-  Future<void> _handlePendingDeletes() async {
+  void handlePendingChanges() {
    final deleteChanges = state.pendingChanges
        .where((c) => c.action == PendingAction.assetDelete)
        .toList();
    if (deleteChanges.isNotEmpty) {
      List<String> remoteIds =
          deleteChanges.map((a) => a.value.toString()).toList();
-      await _ref.read(syncServiceProvider).handleRemoteAssetRemoval(remoteIds);
+      _ref.read(syncServiceProvider).handleRemoteAssetRemoval(remoteIds);
      state = state.copyWith(
        pendingChanges: state.pendingChanges
-            .whereNot((c) => deleteChanges.contains(c))
+            .where((c) => c.action != PendingAction.assetDelete)
            .toList(),
      );
    }
  }

-  Future<void> _handlePendingUploaded() async {
-    final uploadedChanges = state.pendingChanges
-        .where((c) => c.action == PendingAction.assetUploaded)
-        .toList();
-    if (uploadedChanges.isNotEmpty) {
-      List<AssetResponseDto?> remoteAssets = uploadedChanges
-          .map((a) => AssetResponseDto.fromJson(a.value))
-          .toList();
-      for (final dto in remoteAssets) {
-        if (dto != null) {
-          final newAsset = Asset.remote(dto);
-          await _ref.watch(assetProvider.notifier).onNewAssetUploaded(newAsset);
-        }
-      }
-      state = state.copyWith(
-        pendingChanges: state.pendingChanges
-            .whereNot((c) => uploadedChanges.contains(c))
-            .toList(),
-      );
+  void _handleOnUploadSuccess(dynamic data) {
+    final dto = AssetResponseDto.fromJson(data);
+    if (dto != null) {
+      final newAsset = Asset.remote(dto);
+      _ref.watch(assetProvider.notifier).onNewAssetUploaded(newAsset);
    }
  }

-  Future<void> _handlingPendingHidden() async {
-    final hiddenChanges = state.pendingChanges
-        .where((c) => c.action == PendingAction.assetHidden)
-        .toList();
-    if (hiddenChanges.isNotEmpty) {
-      List<String> remoteIds =
-          hiddenChanges.map((a) => a.value.toString()).toList();
-      final db = _ref.watch(dbProvider);
-      await db.writeTxn(() => db.assets.deleteAllByRemoteId(remoteIds));
-
-      state = state.copyWith(
-        pendingChanges: state.pendingChanges
-            .whereNot((c) => hiddenChanges.contains(c))
-            .toList(),
-      );
-    }
-  }
-
-  void handlePendingChanges() async {
-    await _handlePendingUploaded();
-    await _handlePendingDeletes();
-    await _handlingPendingHidden();
-  }
-
  void _handleOnConfigUpdate(dynamic _) {
    _ref.read(serverInfoProvider.notifier).getServerFeatures();
    _ref.read(serverInfoProvider.notifier).getServerConfig();
@ -269,14 +202,10 @@ class WebsocketNotifier extends StateNotifier<WebsocketState> {
    _ref.read(assetProvider.notifier).getAllAsset();
  }

-  void _handleOnUploadSuccess(dynamic data) =>
-      addPendingChange(PendingAction.assetUploaded, data);
-
-  void _handleOnAssetDelete(dynamic data) =>
-      addPendingChange(PendingAction.assetDelete, data);
-
-  void _handleOnAssetHidden(dynamic data) =>
-      addPendingChange(PendingAction.assetHidden, data);
+  void _handleOnAssetDelete(dynamic data) {
+    addPendingChange(PendingAction.assetDelete, data);
+    _debounce(handlePendingChanges);
+  }

  _handleReleaseUpdates(dynamic data) {
    // Json guard
--- a/mobile/lib/shared/ui/date_time_picker.dart
+++ b/mobile/lib/shared/ui/date_time_picker.dart
@ -86,14 +86,11 @@ class _DateTimePicker extends HookWidget {
    final timeZones = useMemoized(() => getAllTimeZones(), const []);

    void pickDate() async {
-      final now = DateTime.now();
-      // Handles cases where the date from the asset is far off in the future
-      final initialDate = date.value.isAfter(now) ? now : date.value;
      final newDate = await showDatePicker(
        context: context,
-        initialDate: initialDate,
+        initialDate: date.value,
        firstDate: DateTime(1800),
-        lastDate: now,
+        lastDate: DateTime.now(),
      );
      if (newDate == null) {
        return;
--- a/mobile/openapi/.openapi-generator/FILES
+++ b/mobile/openapi/.openapi-generator/FILES
@ -102,6 +102,7 @@ doc/PathType.md
 doc/PeopleResponseDto.md
 doc/PeopleUpdateDto.md
 doc/PeopleUpdateItem.md
+doc/PeopleWithFacesResponseDto.md
 doc/PersonApi.md
 doc/PersonResponseDto.md
 doc/PersonStatisticsResponseDto.md
@ -292,6 +293,7 @@ lib/model/path_type.dart
 lib/model/people_response_dto.dart
 lib/model/people_update_dto.dart
 lib/model/people_update_item.dart
+lib/model/people_with_faces_response_dto.dart
 lib/model/person_response_dto.dart
 lib/model/person_statistics_response_dto.dart
 lib/model/person_update_dto.dart
@ -459,6 +461,7 @@ test/path_type_test.dart
 test/people_response_dto_test.dart
 test/people_update_dto_test.dart
 test/people_update_item_test.dart
+test/people_with_faces_response_dto_test.dart
 test/person_api_test.dart
 test/person_response_dto_test.dart
 test/person_statistics_response_dto_test.dart
--- a/mobile/openapi/README.md
+++ b/mobile/openapi/README.md
@ -135,6 +135,7 @@ Class | Method | HTTP request | Description
 *AuthenticationApi* | [**validateAccessToken**](doc//AuthenticationApi.md#validateaccesstoken) | **POST** /auth/validateToken | 
 *FaceApi* | [**getFaces**](doc//FaceApi.md#getfaces) | **GET** /face | 
 *FaceApi* | [**reassignFacesById**](doc//FaceApi.md#reassignfacesbyid) | **PUT** /face/{id} | 
+*FaceApi* | [**unassignFace**](doc//FaceApi.md#unassignface) | **DELETE** /face/{id} | 
 *JobApi* | [**getAllJobsStatus**](doc//JobApi.md#getalljobsstatus) | **GET** /jobs | 
 *JobApi* | [**sendJobCommand**](doc//JobApi.md#sendjobcommand) | **PUT** /jobs/{id} | 
 *LibraryApi* | [**createLibrary**](doc//LibraryApi.md#createlibrary) | **POST** /library | 
@ -299,6 +300,7 @@ Class | Method | HTTP request | Description
 - [PeopleResponseDto](doc//PeopleResponseDto.md)
 - [PeopleUpdateDto](doc//PeopleUpdateDto.md)
 - [PeopleUpdateItem](doc//PeopleUpdateItem.md)
+ - [PeopleWithFacesResponseDto](doc//PeopleWithFacesResponseDto.md)
 - [PersonResponseDto](doc//PersonResponseDto.md)
 - [PersonStatisticsResponseDto](doc//PersonStatisticsResponseDto.md)
 - [PersonUpdateDto](doc//PersonUpdateDto.md)
--- a/mobile/openapi/doc/AssetResponseDto.md
+++ b/mobile/openapi/doc/AssetResponseDto.md
@ -30,7 +30,7 @@ Name | Type | Description | Notes
 **originalPath** | **String** |  | 
 **owner** | [**UserResponseDto**](UserResponseDto.md) |  | [optional] 
 **ownerId** | **String** |  | 
-**people** | [**List<PersonWithFacesResponseDto>**](PersonWithFacesResponseDto.md) |  | [optional] [default to const []]
+**people** | [**PeopleWithFacesResponseDto**](PeopleWithFacesResponseDto.md) |  | [optional] 
 **resized** | **bool** |  | 
 **smartInfo** | [**SmartInfoResponseDto**](SmartInfoResponseDto.md) |  | [optional] 
 **stack** | [**List<AssetResponseDto>**](AssetResponseDto.md) |  | [optional] [default to const []]
--- a/mobile/openapi/doc/FaceApi.md
+++ b/mobile/openapi/doc/FaceApi.md
@ -11,6 +11,7 @@ Method | HTTP request | Description
 ------------- | ------------- | -------------
 [**getFaces**](FaceApi.md#getfaces) | **GET** /face | 
 [**reassignFacesById**](FaceApi.md#reassignfacesbyid) | **PUT** /face/{id} | 
+[**unassignFace**](FaceApi.md#unassignface) | **DELETE** /face/{id} | 


 # **getFaces**
@ -125,3 +126,58 @@ Name | Type | Description  | Notes

 [[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)

+# **unassignFace**
+> AssetFaceResponseDto unassignFace(id)
+
+
+
+### Example
+```dart
+import 'package:openapi/api.dart';
+// TODO Configure API key authorization: cookie
+//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKey = 'YOUR_API_KEY';
+// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
+//defaultApiClient.getAuthentication<ApiKeyAuth>('cookie').apiKeyPrefix = 'Bearer';
+// TODO Configure API key authorization: api_key
+//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKey = 'YOUR_API_KEY';
+// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
+//defaultApiClient.getAuthentication<ApiKeyAuth>('api_key').apiKeyPrefix = 'Bearer';
+// TODO Configure HTTP Bearer authorization: bearer
+// Case 1. Use String Token
+//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken('YOUR_ACCESS_TOKEN');
+// Case 2. Use Function which generate token.
+// String yourTokenGeneratorFunction() { ... }
+//defaultApiClient.getAuthentication<HttpBearerAuth>('bearer').setAccessToken(yourTokenGeneratorFunction);
+
+final api_instance = FaceApi();
+final id = 38400000-8cf0-11bd-b23e-10b96e4ef00d; // String | 
+
+try {
+    final result = api_instance.unassignFace(id);
+    print(result);
+} catch (e) {
+    print('Exception when calling FaceApi->unassignFace: $e\n');
+}
+```
+
+### Parameters
+
+Name | Type | Description  | Notes
+------------- | ------------- | ------------- | -------------
+ **id** | **String**|  | 
+
+### Return type
+
+[**AssetFaceResponseDto**](AssetFaceResponseDto.md)
+
+### Authorization
+
+[cookie](../README.md#cookie), [api_key](../README.md#api_key), [bearer](../README.md#bearer)
+
+### HTTP request headers
+
+ - **Content-Type**: Not defined
+ - **Accept**: application/json
+
+[[Back to top]](#) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to Model list]](../README.md#documentation-for-models) [[Back to README]](../README.md)
+
--- a/mobile/openapi/doc/PeopleWithFacesResponseDto.md
+++ b/mobile/openapi/doc/PeopleWithFacesResponseDto.md
@ -0,0 +1,16 @@
+# openapi.model.PeopleWithFacesResponseDto
+
+## Load the model package
+```dart
+import 'package:openapi/api.dart';
+```
+
+## Properties
+Name | Type | Description | Notes
+------------ | ------------- | ------------- | -------------
+**numberOfAssets** | **int** |  | 
+**people** | [**List<PersonWithFacesResponseDto>**](PersonWithFacesResponseDto.md) |  | [default to const []]
+
+[[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)
+
+
--- a/mobile/openapi/lib/api.dart
+++ b/mobile/openapi/lib/api.dart
@ -135,6 +135,7 @@ part 'model/path_type.dart';
 part 'model/people_response_dto.dart';
 part 'model/people_update_dto.dart';
 part 'model/people_update_item.dart';
+part 'model/people_with_faces_response_dto.dart';
 part 'model/person_response_dto.dart';
 part 'model/person_statistics_response_dto.dart';
 part 'model/person_update_dto.dart';
--- a/mobile/openapi/lib/api/face_api.dart
+++ b/mobile/openapi/lib/api/face_api.dart
@ -119,4 +119,52 @@ class FaceApi {
    }
    return null;
  }
+
+  /// Performs an HTTP 'DELETE /face/{id}' operation and returns the [Response].
+  /// Parameters:
+  ///
+  /// * [String] id (required):
+  Future<Response> unassignFaceWithHttpInfo(String id,) async {
+    // ignore: prefer_const_declarations
+    final path = r'/face/{id}'
+      .replaceAll('{id}', id);
+
+    // ignore: prefer_final_locals
+    Object? postBody;
+
+    final queryParams = <QueryParam>[];
+    final headerParams = <String, String>{};
+    final formParams = <String, String>{};
+
+    const contentTypes = <String>[];
+
+
+    return apiClient.invokeAPI(
+      path,
+      'DELETE',
+      queryParams,
+      postBody,
+      headerParams,
+      formParams,
+      contentTypes.isEmpty ? null : contentTypes.first,
+    );
+  }
+
+  /// Parameters:
+  ///
+  /// * [String] id (required):
+  Future<AssetFaceResponseDto?> unassignFace(String id,) async {
+    final response = await unassignFaceWithHttpInfo(id,);
+    if (response.statusCode >= HttpStatus.badRequest) {
+      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
+    }
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'AssetFaceResponseDto',) as AssetFaceResponseDto;
+    
+    }
+    return null;
+  }
 }
--- a/mobile/openapi/lib/api_client.dart
+++ b/mobile/openapi/lib/api_client.dart
@ -357,6 +357,8 @@ class ApiClient {
          return PeopleUpdateDto.fromJson(value);
        case 'PeopleUpdateItem':
          return PeopleUpdateItem.fromJson(value);
+        case 'PeopleWithFacesResponseDto':
+          return PeopleWithFacesResponseDto.fromJson(value);
        case 'PersonResponseDto':
          return PersonResponseDto.fromJson(value);
        case 'PersonStatisticsResponseDto':
--- a/mobile/openapi/lib/model/asset_response_dto.dart
+++ b/mobile/openapi/lib/model/asset_response_dto.dart
@ -35,7 +35,7 @@ class AssetResponseDto {
    required this.originalPath,
    this.owner,
    required this.ownerId,
-    this.people = const [],
+    this.people,
    required this.resized,
    this.smartInfo,
    this.stack = const [],
@ -104,7 +104,7 @@ class AssetResponseDto {

  String ownerId;

-  List<PersonWithFacesResponseDto> people;
+  PeopleWithFacesResponseDto? people;

  bool resized;

@ -190,7 +190,7 @@ class AssetResponseDto {
    (originalPath.hashCode) +
    (owner == null ? 0 : owner!.hashCode) +
    (ownerId.hashCode) +
-    (people.hashCode) +
+    (people == null ? 0 : people!.hashCode) +
    (resized.hashCode) +
    (smartInfo == null ? 0 : smartInfo!.hashCode) +
    (stack.hashCode) +
@ -240,7 +240,11 @@ class AssetResponseDto {
    //  json[r'owner'] = null;
    }
      json[r'ownerId'] = this.ownerId;
+    if (this.people != null) {
      json[r'people'] = this.people;
+    } else {
+    //  json[r'people'] = null;
+    }
      json[r'resized'] = this.resized;
    if (this.smartInfo != null) {
      json[r'smartInfo'] = this.smartInfo;
@ -299,7 +303,7 @@ class AssetResponseDto {
        originalPath: mapValueOfType<String>(json, r'originalPath')!,
        owner: UserResponseDto.fromJson(json[r'owner']),
        ownerId: mapValueOfType<String>(json, r'ownerId')!,
-        people: PersonWithFacesResponseDto.listFromJson(json[r'people']),
+        people: PeopleWithFacesResponseDto.fromJson(json[r'people']),
        resized: mapValueOfType<bool>(json, r'resized')!,
        smartInfo: SmartInfoResponseDto.fromJson(json[r'smartInfo']),
        stack: AssetResponseDto.listFromJson(json[r'stack']),
--- a/mobile/openapi/lib/model/people_with_faces_response_dto.dart
+++ b/mobile/openapi/lib/model/people_with_faces_response_dto.dart
@ -0,0 +1,106 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.12
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+part of openapi.api;
+
+class PeopleWithFacesResponseDto {
+  /// Returns a new [PeopleWithFacesResponseDto] instance.
+  PeopleWithFacesResponseDto({
+    required this.numberOfAssets,
+    this.people = const [],
+  });
+
+  int numberOfAssets;
+
+  List<PersonWithFacesResponseDto> people;
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is PeopleWithFacesResponseDto &&
+     other.numberOfAssets == numberOfAssets &&
+     other.people == people;
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+    (numberOfAssets.hashCode) +
+    (people.hashCode);
+
+  @override
+  String toString() => 'PeopleWithFacesResponseDto[numberOfAssets=$numberOfAssets, people=$people]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+      json[r'numberOfAssets'] = this.numberOfAssets;
+      json[r'people'] = this.people;
+    return json;
+  }
+
+  /// Returns a new [PeopleWithFacesResponseDto] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static PeopleWithFacesResponseDto? fromJson(dynamic value) {
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      return PeopleWithFacesResponseDto(
+        numberOfAssets: mapValueOfType<int>(json, r'numberOfAssets')!,
+        people: PersonWithFacesResponseDto.listFromJson(json[r'people']),
+      );
+    }
+    return null;
+  }
+
+  static List<PeopleWithFacesResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <PeopleWithFacesResponseDto>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = PeopleWithFacesResponseDto.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, PeopleWithFacesResponseDto> mapFromJson(dynamic json) {
+    final map = <String, PeopleWithFacesResponseDto>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = PeopleWithFacesResponseDto.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of PeopleWithFacesResponseDto-objects as value to a dart map
+  static Map<String, List<PeopleWithFacesResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<PeopleWithFacesResponseDto>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = PeopleWithFacesResponseDto.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+    'numberOfAssets',
+    'people',
+  };
+}
+
--- a/mobile/openapi/test/asset_response_dto_test.dart
+++ b/mobile/openapi/test/asset_response_dto_test.dart
@ -127,7 +127,7 @@ void main() {
      // TODO
    });

-    // List<PersonWithFacesResponseDto> people (default value: const [])
+    // PeopleWithFacesResponseDto people
    test('to test the property `people`', () async {
      // TODO
    });
--- a/mobile/openapi/test/face_api_test.dart
+++ b/mobile/openapi/test/face_api_test.dart
@ -27,5 +27,10 @@ void main() {
      // TODO
    });

+    //Future<AssetFaceResponseDto> unassignFace(String id) async
+    test('test unassignFace', () async {
+      // TODO
+    });
+
  });
 }
--- a/mobile/openapi/test/people_with_faces_response_dto_test.dart
+++ b/mobile/openapi/test/people_with_faces_response_dto_test.dart
@ -0,0 +1,32 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.12
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+import 'package:openapi/api.dart';
+import 'package:test/test.dart';
+
+// tests for PeopleWithFacesResponseDto
+void main() {
+  // final instance = PeopleWithFacesResponseDto();
+
+  group('test PeopleWithFacesResponseDto', () {
+    // int numberOfAssets
+    test('to test the property `numberOfAssets`', () async {
+      // TODO
+    });
+
+    // List<PersonWithFacesResponseDto> people (default value: const [])
+    test('to test the property `people`', () async {
+      // TODO
+    });
+
+
+  });
+
+}
--- a/renovate.json
+++ b/renovate.json
@ -62,9 +62,6 @@
      "versioning": "node"
    }
  ],
-  "ignorePaths": [
-    "mobile/openapi/pubspec.yaml"
-  ],
  "ignoreDeps": [
    "http",
    "latlong2",
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@ -3266,6 +3266,46 @@
      }
    },
    "/face/{id}": {
+      "delete": {
+        "operationId": "unassignFace",
+        "parameters": [
+          {
+            "name": "id",
+            "required": true,
+            "in": "path",
+            "schema": {
+              "format": "uuid",
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/AssetFaceResponseDto"
+                }
+              }
+            },
+            "description": ""
+          }
+        },
+        "security": [
+          {
+            "bearer": []
+          },
+          {
+            "cookie": []
+          },
+          {
+            "api_key": []
+          }
+        ],
+        "tags": [
+          "Face"
+        ]
+      },
      "put": {
        "operationId": "reassignFacesById",
        "parameters": [
@ -7012,10 +7052,12 @@
            "type": "string"
          },
          "people": {
-            "items": {
-              "$ref": "#/components/schemas/PersonWithFacesResponseDto"
-            },
-            "type": "array"
+            "allOf": [
+              {
+                "$ref": "#/components/schemas/PeopleWithFacesResponseDto"
+              }
+            ],
+            "nullable": true
          },
          "resized": {
            "type": "boolean"
@ -8390,6 +8432,24 @@
        ],
        "type": "object"
      },
+      "PeopleWithFacesResponseDto": {
+        "properties": {
+          "numberOfAssets": {
+            "type": "integer"
+          },
+          "people": {
+            "items": {
+              "$ref": "#/components/schemas/PersonWithFacesResponseDto"
+            },
+            "type": "array"
+          }
+        },
+        "required": [
+          "numberOfAssets",
+          "people"
+        ],
+        "type": "object"
+      },
      "PersonResponseDto": {
        "properties": {
          "birthDate": {
--- a/server/src/domain/asset/response-dto/asset-response.dto.ts
+++ b/server/src/domain/asset/response-dto/asset-response.dto.ts
@ -1,6 +1,6 @@
 import { AssetEntity, AssetFaceEntity, AssetType } from '@app/infra/entities';
 import { ApiProperty } from '@nestjs/swagger';
-import { PersonWithFacesResponseDto } from '../../person/person.dto';
+import { PeopleWithFacesResponseDto, PersonWithFacesResponseDto } from '../../person/person.dto';
 import { TagResponseDto, mapTag } from '../../tag';
 import { UserResponseDto, mapUser } from '../../user/response-dto/user-response.dto';
 import { ExifResponseDto, mapExif } from './exif-response.dto';
@ -39,7 +39,7 @@ export class AssetResponseDto extends SanitizedAssetResponseDto {
  exifInfo?: ExifResponseDto;
  smartInfo?: SmartInfoResponseDto;
  tags?: TagResponseDto[];
-  people?: PersonWithFacesResponseDto[];
+  people?: PeopleWithFacesResponseDto | null;
  /**base64 encoded sha1 hash */
  checksum!: string;
  stackParentId?: string | null;
@ -53,7 +53,7 @@ export type AssetMapOptions = {
  withStack?: boolean;
 };

-const peopleWithFaces = (faces: AssetFaceEntity[]): PersonWithFacesResponseDto[] => {
+const peopleWithFaces = (faces: AssetFaceEntity[]): PeopleWithFacesResponseDto => {
  const result: PersonWithFacesResponseDto[] = [];
  if (faces) {
    faces.forEach((face) => {
@ -68,7 +68,7 @@ const peopleWithFaces = (faces: AssetFaceEntity[]): PersonWithFacesResponseDto[]
    });
  }

-  return result;
+  return { people: result, numberOfAssets: faces.length };
 };

 export function mapAsset(entity: AssetEntity, options: AssetMapOptions = {}): AssetResponseDto {
@ -114,7 +114,7 @@ export function mapAsset(entity: AssetEntity, options: AssetMapOptions = {}): As
    smartInfo: entity.smartInfo ? mapSmartInfo(entity.smartInfo) : undefined,
    livePhotoVideoId: entity.livePhotoVideoId,
    tags: entity.tags?.map(mapTag),
-    people: peopleWithFaces(entity.faces),
+    people: entity.faces ? peopleWithFaces(entity.faces) : null,
    checksum: entity.checksum.toString('base64'),
    stackParentId: entity.stackParentId,
    stack: withStack ? entity.stack?.map((a) => mapAsset(a, { stripMetadata })) ?? undefined : undefined,
--- a/server/src/domain/metadata/metadata.service.spec.ts
+++ b/server/src/domain/metadata/metadata.service.spec.ts
@ -3,7 +3,6 @@ import {
  assetStub,
  newAlbumRepositoryMock,
  newAssetRepositoryMock,
-  newCommunicationRepositoryMock,
  newCryptoRepositoryMock,
  newJobRepositoryMock,
  newMediaRepositoryMock,
@ -20,10 +19,8 @@ import { constants } from 'fs/promises';
 import { when } from 'jest-when';
 import { JobName } from '../job';
 import {
-  CommunicationEvent,
  IAlbumRepository,
  IAssetRepository,
-  ICommunicationRepository,
  ICryptoRepository,
  IJobRepository,
  IMediaRepository,
@ -49,7 +46,6 @@ describe(MetadataService.name, () => {
  let mediaMock: jest.Mocked<IMediaRepository>;
  let personMock: jest.Mocked<IPersonRepository>;
  let storageMock: jest.Mocked<IStorageRepository>;
-  let communicationMock: jest.Mocked<ICommunicationRepository>;
  let sut: MetadataService;

  beforeEach(async () => {
@ -61,7 +57,6 @@ describe(MetadataService.name, () => {
    metadataMock = newMetadataRepositoryMock();
    moveMock = newMoveRepositoryMock();
    personMock = newPersonRepositoryMock();
-    communicationMock = newCommunicationRepositoryMock();
    storageMock = newStorageRepositoryMock();
    mediaMock = newMediaRepositoryMock();

@ -75,7 +70,6 @@ describe(MetadataService.name, () => {
      configMock,
      mediaMock,
      moveMock,
-      communicationMock,
      personMock,
    );
  });
@ -178,23 +172,6 @@ describe(MetadataService.name, () => {
      expect(assetMock.save).toHaveBeenCalledWith({ id: assetStub.livePhotoMotionAsset.id, isVisible: false });
      expect(albumMock.removeAsset).toHaveBeenCalledWith(assetStub.livePhotoMotionAsset.id);
    });
-
-    it('should notify clients on live photo link', async () => {
-      assetMock.getByIds.mockResolvedValue([
-        {
-          ...assetStub.livePhotoStillAsset,
-          exifInfo: { livePhotoCID: assetStub.livePhotoMotionAsset.id } as ExifEntity,
-        },
-      ]);
-      assetMock.findLivePhotoMatch.mockResolvedValue(assetStub.livePhotoMotionAsset);
-
-      await expect(sut.handleLivePhotoLinking({ id: assetStub.livePhotoStillAsset.id })).resolves.toBe(true);
-      expect(communicationMock.send).toHaveBeenCalledWith(
-        CommunicationEvent.ASSET_HIDDEN,
-        assetStub.livePhotoMotionAsset.ownerId,
-        assetStub.livePhotoMotionAsset.id,
-      );
-    });
  });

  describe('handleQueueMetadataExtraction', () => {
--- a/server/src/domain/metadata/metadata.service.ts
+++ b/server/src/domain/metadata/metadata.service.ts
@ -9,11 +9,9 @@ import { Subscription } from 'rxjs';
 import { usePagination } from '../domain.util';
 import { IBaseJob, IEntityJob, ISidecarWriteJob, JOBS_ASSET_PAGINATION_SIZE, JobName, QueueName } from '../job';
 import {
-  CommunicationEvent,
  ExifDuration,
  IAlbumRepository,
  IAssetRepository,
-  ICommunicationRepository,
  ICryptoRepository,
  IJobRepository,
  IMediaRepository,
@ -106,7 +104,6 @@ export class MetadataService {
    @Inject(ISystemConfigRepository) configRepository: ISystemConfigRepository,
    @Inject(IMediaRepository) private mediaRepository: IMediaRepository,
    @Inject(IMoveRepository) moveRepository: IMoveRepository,
-    @Inject(ICommunicationRepository) private communicationRepository: ICommunicationRepository,
    @Inject(IPersonRepository) personRepository: IPersonRepository,
  ) {
    this.configCore = SystemConfigCore.create(configRepository);
@ -170,9 +167,6 @@ export class MetadataService {
    await this.assetRepository.save({ id: motionAsset.id, isVisible: false });
    await this.albumRepository.removeAsset(motionAsset.id);

-    // Notify clients to hide the linked live photo asset
-    this.communicationRepository.send(CommunicationEvent.ASSET_HIDDEN, motionAsset.ownerId, motionAsset.id);
-
    return true;
  }

--- a/server/src/domain/person/person.dto.ts
+++ b/server/src/domain/person/person.dto.ts
@ -78,6 +78,12 @@ export class PersonWithFacesResponseDto extends PersonResponseDto {
  faces!: AssetFaceWithoutPersonResponseDto[];
 }

+export class PeopleWithFacesResponseDto {
+  people!: PersonWithFacesResponseDto[];
+  @ApiProperty({ type: 'integer' })
+  numberOfAssets!: number;
+}
+
 export class AssetFaceWithoutPersonResponseDto {
  @ValidateUUID()
  id!: string;
--- a/server/src/domain/person/person.service.spec.ts
+++ b/server/src/domain/person/person.service.spec.ts
@ -491,6 +491,21 @@ describe(PersonService.name, () => {
    });
  });

+  describe('unassignFace', () => {
+    it('should unassign a face', async () => {
+      personMock.getFaceById.mockResolvedValue(faceStub.face1);
+      accessMock.person.checkOwnerAccess.mockResolvedValue(new Set([personStub.noName.id]));
+      accessMock.person.hasFaceOwnerAccess.mockResolvedValue(new Set([faceStub.face1.id]));
+      personMock.reassignFace.mockResolvedValue(1);
+      personMock.getRandomFace.mockResolvedValue(null);
+      personMock.getFaceById.mockResolvedValue(faceStub.unassignedFace);
+
+      await expect(sut.unassignFace(authStub.admin, faceStub.face1.id)).resolves.toStrictEqual(
+        mapFaces(faceStub.unassignedFace, authStub.admin),
+      );
+    });
+  });
+
  describe('handlePersonDelete', () => {
    it('should stop if a person has not be found', async () => {
      personMock.getById.mockResolvedValue(null);
--- a/server/src/domain/person/person.service.ts
+++ b/server/src/domain/person/person.service.ts
@ -117,6 +117,21 @@ export class PersonService {
    return result;
  }

+  async unassignFace(authUser: AuthUserDto, id: string): Promise<AssetFaceResponseDto> {
+    let face = await this.repository.getFaceById(id);
+    await this.access.requirePermission(authUser, Permission.PERSON_CREATE, face.id);
+    if (face.personId) {
+      await this.access.requirePermission(authUser, Permission.PERSON_WRITE, face.personId);
+    }
+
+    await this.repository.reassignFace(face.id, null);
+    if (face.person && face.person.faceAssetId === face.id) {
+      await this.createNewFeaturePhoto([face.person.id]);
+    }
+    face = await this.repository.getFaceById(id);
+    return mapFaces(face, authUser);
+  }
+
  async reassignFacesById(authUser: AuthUserDto, personId: string, dto: FaceDto): Promise<PersonResponseDto> {
    await this.access.requirePermission(authUser, Permission.PERSON_WRITE, personId);

--- a/server/src/domain/repositories/communication.repository.ts
+++ b/server/src/domain/repositories/communication.repository.ts
@ -5,7 +5,6 @@ export enum CommunicationEvent {
  ASSET_DELETE = 'on_asset_delete',
  ASSET_TRASH = 'on_asset_trash',
  ASSET_UPDATE = 'on_asset_update',
-  ASSET_HIDDEN = 'on_asset_hidden',
  ASSET_RESTORE = 'on_asset_restore',
  PERSON_THUMBNAIL = 'on_person_thumbnail',
  SERVER_VERSION = 'on_server_version',
--- a/server/src/domain/repositories/person.repository.ts
+++ b/server/src/domain/repositories/person.repository.ts
@ -18,7 +18,7 @@ export interface AssetFaceId {

 export interface UpdateFacesData {
  oldPersonId: string;
-  newPersonId: string;
+  newPersonId: string | null;
 }

 export interface PersonStatistics {
@ -49,7 +49,7 @@ export interface IPersonRepository {
  getRandomFace(personId: string): Promise<AssetFaceEntity | null>;
  createFace(entity: Partial<AssetFaceEntity>): Promise<AssetFaceEntity>;
  getFaces(assetId: string): Promise<AssetFaceEntity[]>;
-  reassignFace(assetFaceId: string, newPersonId: string): Promise<number>;
+  reassignFace(assetFaceId: string, newPersonId: string | null): Promise<number>;
  getFaceById(id: string): Promise<AssetFaceEntity>;
  getFaceByIdWithAssets(id: string): Promise<AssetFaceEntity | null>;
 }
--- a/server/src/immich/api-v1/asset/asset.service.ts
+++ b/server/src/immich/api-v1/asset/asset.service.ts
@ -133,7 +133,7 @@ export class AssetService {
      const data = mapAsset(asset, { withStack: true });

      if (data.ownerId !== authUser.id) {
-        data.people = [];
+        data.people = null;
      }

      if (authUser.isPublicUser) {
@ -336,18 +336,14 @@ export class AssetService {

    res.set('Cache-Control', 'private, max-age=86400, no-transform');
    res.header('Content-Type', mimeTypes.lookup(filepath));
-    return new Promise((resolve, reject) => {
-      res.sendFile(filepath, options, (error: Error) => {
-        if (!error) {
-          resolve();
-          return;
-        }
+    res.sendFile(filepath, options, (error: Error) => {
+      if (!error) {
+        return;
+      }

-        if (error.message !== 'Request aborted') {
-          this.logger.error(`Unable to send file: ${error.name}`, error.stack);
-        }
-        reject(error);
-      });
+      if (error.message !== 'Request aborted') {
+        this.logger.error(`Unable to send file: ${error.name}`, error.stack);
+      }
    });
  }

--- a/server/src/immich/controllers/face.controller.ts
+++ b/server/src/immich/controllers/face.controller.ts
@ -1,5 +1,5 @@
 import { AssetFaceResponseDto, AuthUserDto, FaceDto, PersonResponseDto, PersonService } from '@app/domain';
-import { Body, Controller, Get, Param, Put, Query } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Param, Put, Query } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
 import { AuthUser, Authenticated } from '../app.guard';
 import { UseValidation } from '../app.utils';
@ -25,4 +25,9 @@ export class FaceController {
  ): Promise<PersonResponseDto> {
    return this.service.reassignFacesById(authUser, id, dto);
  }
+
+  @Delete(':id')
+  unassignFace(@AuthUser() authUser: AuthUserDto, @Param() { id }: UUIDParamDto): Promise<AssetFaceResponseDto> {
+    return this.service.unassignFace(authUser, id);
+  }
 }
--- a/server/test/e2e/asset.e2e-spec.ts
+++ b/server/test/e2e/asset.e2e-spec.ts
@ -774,15 +774,18 @@ describe(`${AssetController.name} (e2e)`, () => {
      expect(body).toMatchObject({
        id: asset1.id,
        isFavorite: true,
-        people: [
-          {
-            birthDate: null,
-            id: expect.any(String),
-            isHidden: false,
-            name: 'Test Person',
-            thumbnailPath: '',
-          },
-        ],
+        people: {
+          numberOfAssets: 1,
+          people: [
+            {
+              birthDate: null,
+              id: expect.any(String),
+              isHidden: false,
+              name: 'Test Person',
+              thumbnailPath: '',
+            },
+          ],
+        },
      });
    });
  });
--- a/server/test/fixtures/face.stub.ts
+++ b/server/test/fixtures/face.stub.ts
@ -17,6 +17,20 @@ export const faceStub = {
    imageHeight: 1024,
    imageWidth: 1024,
  }),
+  unassignedFace: Object.freeze<AssetFaceEntity>({
+    id: 'assetFaceId',
+    assetId: assetStub.image.id,
+    asset: assetStub.image,
+    personId: null,
+    person: null,
+    embedding: [1, 2, 3, 4],
+    boundingBoxX1: 0,
+    boundingBoxY1: 0,
+    boundingBoxX2: 1,
+    boundingBoxY2: 1,
+    imageHeight: 1024,
+    imageWidth: 1024,
+  }),
  primaryFace1: Object.freeze<AssetFaceEntity>({
    id: 'assetFaceId',
    assetId: assetStub.image.id,
--- a/server/test/fixtures/shared-link.stub.ts
+++ b/server/test/fixtures/shared-link.stub.ts
@ -67,7 +67,7 @@ const assetResponse: AssetResponseDto = {
  exifInfo: assetInfo,
  livePhotoVideoId: null,
  tags: [],
-  people: [],
+  people: null,
  checksum: 'ZmlsZSBoYXNo',
  isTrashed: false,
  libraryId: 'library-id',
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -11866,9 +11866,9 @@
      "dev": true
    },
    "node_modules/vite": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
-      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
+      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
      "dev": true,
      "dependencies": {
        "esbuild": "^0.18.10",
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@ -978,10 +978,10 @@ export interface AssetResponseDto {
    'ownerId': string;
    /**
     * 
-     * @type {Array<PersonWithFacesResponseDto>}
+     * @type {PeopleWithFacesResponseDto}
     * @memberof AssetResponseDto
     */
-    'people'?: Array<PersonWithFacesResponseDto>;
+    'people'?: PeopleWithFacesResponseDto | null;
    /**
     * 
     * @type {boolean}
@ -2632,6 +2632,25 @@ export interface PeopleUpdateItem {
     */
    'name'?: string;
 }
+/**
+ * 
+ * @export
+ * @interface PeopleWithFacesResponseDto
+ */
+export interface PeopleWithFacesResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof PeopleWithFacesResponseDto
+     */
+    'numberOfAssets': number;
+    /**
+     * 
+     * @type {Array<PersonWithFacesResponseDto>}
+     * @memberof PeopleWithFacesResponseDto
+     */
+    'people': Array<PersonWithFacesResponseDto>;
+}
 /**
 * 
 * @export
@ -11635,6 +11654,48 @@ export const FaceApiAxiosParamCreator = function (configuration?: Configuration)
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
            localVarRequestOptions.data = serializeDataIfNeeded(faceDto, localVarRequestOptions, configuration)

+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        unassignFace: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'id' is not null or undefined
+            assertParamExists('unassignFace', 'id', id)
+            const localVarPath = `/face/{id}`
+                .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: 'DELETE', ...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)
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
            return {
                url: toPathString(localVarUrlObj),
                options: localVarRequestOptions,
@ -11671,6 +11732,16 @@ export const FaceApiFp = function(configuration?: Configuration) {
            const localVarAxiosArgs = await localVarAxiosParamCreator.reassignFacesById(id, faceDto, options);
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
        },
+        /**
+         * 
+         * @param {string} id 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async unassignFace(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetFaceResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.unassignFace(id, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
    }
 };

@ -11699,6 +11770,15 @@ export const FaceApiFactory = function (configuration?: Configuration, basePath?
        reassignFacesById(requestParameters: FaceApiReassignFacesByIdRequest, options?: AxiosRequestConfig): AxiosPromise<PersonResponseDto> {
            return localVarFp.reassignFacesById(requestParameters.id, requestParameters.faceDto, options).then((request) => request(axios, basePath));
        },
+        /**
+         * 
+         * @param {FaceApiUnassignFaceRequest} requestParameters Request parameters.
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        unassignFace(requestParameters: FaceApiUnassignFaceRequest, options?: AxiosRequestConfig): AxiosPromise<AssetFaceResponseDto> {
+            return localVarFp.unassignFace(requestParameters.id, options).then((request) => request(axios, basePath));
+        },
    };
 };

@ -11737,6 +11817,20 @@ export interface FaceApiReassignFacesByIdRequest {
    readonly faceDto: FaceDto
 }

+/**
+ * Request parameters for unassignFace operation in FaceApi.
+ * @export
+ * @interface FaceApiUnassignFaceRequest
+ */
+export interface FaceApiUnassignFaceRequest {
+    /**
+     * 
+     * @type {string}
+     * @memberof FaceApiUnassignFace
+     */
+    readonly id: string
+}
+
 /**
 * FaceApi - object-oriented interface
 * @export
@ -11765,6 +11859,17 @@ export class FaceApi extends BaseAPI {
    public reassignFacesById(requestParameters: FaceApiReassignFacesByIdRequest, options?: AxiosRequestConfig) {
        return FaceApiFp(this.configuration).reassignFacesById(requestParameters.id, requestParameters.faceDto, options).then((request) => request(this.axios, this.basePath));
    }
+
+    /**
+     * 
+     * @param {FaceApiUnassignFaceRequest} requestParameters Request parameters.
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof FaceApi
+     */
+    public unassignFace(requestParameters: FaceApiUnassignFaceRequest, options?: AxiosRequestConfig) {
+        return FaceApiFp(this.configuration).unassignFace(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
+    }
 }


--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@ -59,7 +59,7 @@
    // Get latest description from server
    if (asset.id && !api.isSharedLink) {
      api.assetApi.getAssetById({ id: asset.id }).then((res) => {
-        people = res.data?.people || [];
+        people = res.data?.people?.people || [];
        textarea.value = res.data?.exifInfo?.description || '';
      });
    }
@ -74,7 +74,8 @@
    }
  })();

-  $: people = asset.people || [];
+  $: people = asset.people?.people || [];
+  $: numberOfFaces = asset.people?.numberOfAssets || 0;
  $: showingHiddenPeople = false;

  const unsubscribe = websocketStore.onAssetUpdate.subscribe((assetUpdate) => {
@ -101,7 +102,8 @@

  const handleRefreshPeople = async () => {
    await api.assetApi.getAssetById({ id: asset.id }).then((res) => {
-      people = res.data?.people || [];
+      people = res.data?.people?.people || [];
+      numberOfFaces = asset.people?.numberOfAssets || 0;
      textarea.value = res.data?.exifInfo?.description || '';
    });
    showEditFaces = false;
@ -201,17 +203,16 @@
    />
  </section>

-  {#if !api.isSharedLink && people.length > 0}
+  {#if !api.isSharedLink && numberOfFaces > 0}
    <section class="px-4 py-4 text-sm">
      <div class="flex h-10 w-full items-center justify-between">
        <h2>PEOPLE</h2>
-        <div class="flex gap-2 items-center">
+        <div class="flex gap-2">
          {#if people.some((person) => person.isHidden)}
            <CircleIconButton
              title="Show hidden people"
              icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
              padding="1"
-              buttonSize="32"
              on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
            />
          {/if}
@ -220,60 +221,60 @@
            icon={mdiPencil}
            padding="1"
            size="20"
-            buttonSize="32"
            on:click={() => (showEditFaces = true)}
          />
        </div>
      </div>
-
-      <div class="mt-2 flex flex-wrap gap-2">
-        {#each people as person, index (person.id)}
-          <div
-            role="button"
-            tabindex={index}
-            on:focus={() => ($boundingBoxesArray = people[index].faces)}
-            on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
-            on:mouseleave={() => ($boundingBoxesArray = [])}
-          >
-            <a
-              href="/people/{person.id}?previousRoute={albumId ? `${AppRoute.ALBUMS}/${albumId}` : AppRoute.PHOTOS}"
-              class="w-[90px] {!showingHiddenPeople && person.isHidden ? 'hidden' : ''}"
-              on:click={() => dispatch('close-viewer')}
+      {#if people.length > 0}
+        <div class="mt-2 flex flex-wrap gap-2">
+          {#each people as person, index (person.id)}
+            <div
+              role="button"
+              tabindex={index}
+              on:focus={() => ($boundingBoxesArray = people[index].faces)}
+              on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
+              on:mouseleave={() => ($boundingBoxesArray = [])}
            >
-              <div class="relative">
-                <ImageThumbnail
-                  curve
-                  shadow
-                  url={api.getPeopleThumbnailUrl(person.id)}
-                  altText={person.name}
-                  title={person.name}
-                  widthStyle="90px"
-                  heightStyle="90px"
-                  thumbhash={null}
-                  hidden={person.isHidden}
-                />
-              </div>
-              <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
-              {#if person.birthDate}
-                {@const personBirthDate = DateTime.fromISO(person.birthDate)}
-                <p
-                  class="font-light"
-                  title={personBirthDate.toLocaleString(
-                    {
-                      month: 'long',
-                      day: 'numeric',
-                      year: 'numeric',
-                    },
-                    { locale: $locale },
-                  )}
-                >
-                  Age {Math.floor(DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'years').years)}
-                </p>
-              {/if}
-            </a>
-          </div>
-        {/each}
-      </div>
+              <a
+                href="/people/{person.id}?previousRoute={albumId ? `${AppRoute.ALBUMS}/${albumId}` : AppRoute.PHOTOS}"
+                class="w-[90px] {!showingHiddenPeople && person.isHidden ? 'hidden' : ''}"
+                on:click={() => dispatch('close-viewer')}
+              >
+                <div class="relative">
+                  <ImageThumbnail
+                    curve
+                    shadow
+                    url={api.getPeopleThumbnailUrl(person.id)}
+                    altText={person.name}
+                    title={person.name}
+                    widthStyle="90px"
+                    heightStyle="90px"
+                    thumbhash={null}
+                    hidden={person.isHidden}
+                  />
+                </div>
+                <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
+                {#if person.birthDate}
+                  {@const personBirthDate = DateTime.fromISO(person.birthDate)}
+                  <p
+                    class="font-light"
+                    title={personBirthDate.toLocaleString(
+                      {
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric',
+                      },
+                      { locale: $locale },
+                    )}
+                  >
+                    Age {Math.floor(DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'years').years)}
+                  </p>
+                {/if}
+              </a>
+            </div>
+          {/each}
+        </div>
+      {/if}
    </section>
  {/if}

@ -339,7 +340,7 @@
        </div>

        {#if isOwner}
-          <button class="focus:outline-none p-1">
+          <button class="focus:outline-none">
            <Icon path={mdiPencil} size="20" />
          </button>
        {/if}
@ -351,7 +352,7 @@
            <Icon path={mdiCalendar} size="24" />
          </div>
        </div>
-        <button class="focus:outline-none p-1">
+        <button class="focus:outline-none">
          <Icon path={mdiPencil} size="20" />
        </button>
      </div>
@ -509,7 +510,7 @@
      </div>
    {:else if !asset.exifInfo?.city && !asset.isReadOnly && $user && asset.ownerId === $user.id}
      <div
-        class="flex justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
+        class="flex justify-between place-items-start gap-4 py-4 rounded-lg pr-2 hover:dark:text-immich-dark-primary hover:text-immich-primary"
        on:click={() => (isShowChangeLocation = true)}
        on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
        tabindex="0"
@ -523,7 +524,7 @@

          <p>Add a location</p>
        </div>
-        <div class="focus:outline-none p-1">
+        <div class="focus:outline-none">
          <Icon path={mdiPencil} size="20" />
        </div>
      </div>
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@ -19,6 +19,7 @@
  export let border = false;
  export let preload = true;
  export let eyeColor: 'black' | 'white' = 'white';
+  export let persistentBorder = false;

  let complete = false;
  let img: HTMLImageElement;
@ -42,7 +43,7 @@
  {title}
  class="object-cover transition duration-300 {border
    ? 'border-[3px] border-immich-dark-primary/80 hover:border-immich-primary'
-    : ''}"
+    : ''} {persistentBorder ? 'border-[3px] border-immich-dark-primary/80 border-immich-primary' : ''}"
  class:rounded-xl={curve}
  class:shadow-lg={shadow}
  class:rounded-full={circle}
--- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte
+++ b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
@ -11,13 +11,10 @@
  export let forceDark = false;
  export let hideMobile = false;
  export let iconColor = 'currentColor';
-  export let buttonSize: string | undefined = undefined;
 </script>

 <button
  {title}
-  style:width={buttonSize ? buttonSize + 'px' : ''}
-  style:height={buttonSize ? buttonSize + 'px' : ''}
  style:background-color={backgroundColor}
  style:--immich-icon-button-hover-color={hoverColor}
  class:dark:text-immich-dark-fg={!forceDark}
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@ -7,13 +7,12 @@
  import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
+  import { getPersonNameWithHiddenValue, searchNameLocal, zoomImageToBase64 } from '$lib/utils/person';
  import { handleError } from '$lib/utils/handle-error';
  import { photoViewer } from '$lib/stores/assets.store';

-  export let peopleWithFaces: AssetFaceResponseDto[];
+  export let personWithFace: AssetFaceResponseDto;
  export let allPeople: PersonResponseDto[];
-  export let editedPersonIndex: number;

  // loading spinners
  let isShowLoadingNewPerson = false;
@ -30,51 +29,11 @@
  const handleBackButton = () => {
    dispatch('close');
  };
-  const zoomImageToBase64 = async (face: AssetFaceResponseDto): Promise<string | null> => {
-    if ($photoViewer === null) {
-      return null;
-    }
-    const { boundingBoxX1: x1, boundingBoxX2: x2, boundingBoxY1: y1, boundingBoxY2: y2 } = face;
-
-    const coordinates = {
-      x1: ($photoViewer.naturalWidth / face.imageWidth) * x1,
-      x2: ($photoViewer.naturalWidth / face.imageWidth) * x2,
-      y1: ($photoViewer.naturalHeight / face.imageHeight) * y1,
-      y2: ($photoViewer.naturalHeight / face.imageHeight) * y2,
-    };
-
-    const faceWidth = coordinates.x2 - coordinates.x1;
-    const faceHeight = coordinates.y2 - coordinates.y1;
-
-    const faceImage = new Image();
-    faceImage.src = $photoViewer.src;
-
-    await new Promise((resolve) => {
-      faceImage.onload = resolve;
-      faceImage.onerror = () => resolve(null);
-    });
-
-    const canvas = document.createElement('canvas');
-    canvas.width = faceWidth;
-    canvas.height = faceHeight;
-
-    const ctx = canvas.getContext('2d');
-    if (ctx) {
-      ctx.drawImage(faceImage, coordinates.x1, coordinates.y1, faceWidth, faceHeight, 0, 0, faceWidth, faceHeight);
-
-      return canvas.toDataURL();
-    } else {
-      return null;
-    }
-  };

  const handleCreatePerson = async () => {
    const timeout = setTimeout(() => (isShowLoadingNewPerson = true), 100);
-    const personToUpdate = peopleWithFaces.find((person) => person.id === peopleWithFaces[editedPersonIndex].id);

-    const newFeaturePhoto = personToUpdate ? await zoomImageToBase64(personToUpdate) : null;
-
-    dispatch('createPerson', newFeaturePhoto);
+    const newFeaturePhoto = await zoomImageToBase64(personWithFace, $photoViewer);

    clearTimeout(timeout);
    isShowLoadingNewPerson = false;
@ -111,7 +70,7 @@

 <section
  transition:fly={{ x: 360, duration: 100, easing: linear }}
-  class="absolute top-0 z-[2001] h-full w-[360px] overflow-x-hidden p-2 bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
+  class="absolute top-0 z-[2002] h-full w-[360px] overflow-x-hidden p-2 bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
 >
  <div class="flex place-items-center justify-between gap-2">
    {#if !searchFaces}
@ -193,7 +152,7 @@
    <div class="immich-scrollbar mt-4 flex flex-wrap gap-2 overflow-y-auto">
      {#if searchName == ''}
        {#each allPeople as person (person.id)}
-          {#if person.id !== peopleWithFaces[editedPersonIndex].person?.id}
+          {#if person.id !== personWithFace.person?.id}
            <div class="w-fit">
              <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
                <div class="relative">
@ -219,7 +178,7 @@
        {/each}
      {:else}
        {#each searchedPeople as person (person.id)}
-          {#if person.id !== peopleWithFaces[editedPersonIndex].person?.id}
+          {#if person.id !== personWithFace.person?.id}
            <div class="w-fit">
              <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
                <div class="relative">
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@ -7,31 +7,41 @@
  import { createEventDispatcher, onMount } from 'svelte';
  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
  import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { mdiArrowLeftThin, mdiRestart } from '@mdi/js';
+  import { mdiAccountOff, mdiArrowLeftThin, mdiFaceMan, mdiRestart, mdiSelect } from '@mdi/js';
  import Icon from '../elements/icon.svelte';
  import { boundingBoxesArray } from '$lib/stores/people.store';
  import { websocketStore } from '$lib/stores/websocket';
  import AssignFaceSidePanel from './assign-face-side-panel.svelte';
-  import { getPersonNameWithHiddenValue } from '$lib/utils/person';
+  import { getPersonNameWithHiddenValue, zoomImageToBase64 } from '$lib/utils/person';
+  import { photoViewer } from '$lib/stores/assets.store';
+  import UnassignedFacesSidePannel from './unassigned-faces-side-pannel.svelte';
+  import type { FaceWithGeneretedThumbnail } from '$lib/utils/people-utils';

  export let assetId: string;

  // keep track of the changes
-  let numberOfPersonToCreate: string[] = [];
-  let numberOfAssetFaceGenerated: string[] = [];
+  let idsOfPersonToCreate: string[] = [];
+  let idsOfAssetFaceGenerated: string[] = [];

  // faces
  let peopleWithFaces: AssetFaceResponseDto[] = [];
  let selectedPersonToReassign: (PersonResponseDto | null)[];
  let selectedPersonToCreate: (string | null)[];
+  let selectedPersonToAdd: FaceWithGeneretedThumbnail[] = [];
+  let selectedPersonToUnassign: FaceWithGeneretedThumbnail[] = [];
+  let selectedPersonToRemove: boolean[] = [];
+  let unassignedFaces: (FaceWithGeneretedThumbnail | null)[] = [];
  let editedPersonIndex: number;
+  let shouldRefresh: boolean = false;

  // loading spinners
  let isShowLoadingDone = false;
  let isShowLoadingPeople = false;

-  // search people
+  // other modals
  let showSeletecFaces = false;
+  let showUnassignedFaces = false;
+  let isSelectingFaces = false;
  let allPeople: PersonResponseDto[] = [];

  // timers
@ -43,15 +53,17 @@

  // Reset value
  $onPersonThumbnail = '';
-
+  $: numberOfFacesToUnassign = selectedPersonToRemove ? selectedPersonToRemove.filter((value) => value).length : 0;
  $: {
    if ($onPersonThumbnail) {
-      numberOfAssetFaceGenerated.push($onPersonThumbnail);
+      idsOfAssetFaceGenerated.push($onPersonThumbnail);
      if (
-        isEqual(numberOfAssetFaceGenerated, numberOfPersonToCreate) &&
+        isEqual(idsOfAssetFaceGenerated, idsOfPersonToCreate) &&
        loaderLoadingDoneTimeout &&
        automaticRefreshTimeout &&
-        selectedPersonToCreate.filter((person) => person !== null).length === numberOfPersonToCreate.length
+        selectedPersonToCreate.filter((person) => person !== null).length +
+          selectedPersonToAdd.filter((face) => face.person === null).length ===
+          idsOfPersonToCreate.length
      ) {
        clearTimeout(loaderLoadingDoneTimeout);
        clearTimeout(automaticRefreshTimeout);
@ -69,6 +81,17 @@
      peopleWithFaces = result.data;
      selectedPersonToCreate = new Array<string | null>(peopleWithFaces.length);
      selectedPersonToReassign = new Array<PersonResponseDto | null>(peopleWithFaces.length);
+      selectedPersonToRemove = new Array<boolean>(peopleWithFaces.length);
+      unassignedFaces = await Promise.all(
+        peopleWithFaces.map(async (personWithFace) => {
+          if (personWithFace.person) {
+            return null;
+          } else {
+            const image = await zoomImageToBase64(personWithFace, $photoViewer);
+            return image ? { ...personWithFace, customThumbnail: image } : null;
+          }
+        }),
+      );
    } catch (error) {
      handleError(error, "Can't get faces");
    } finally {
@ -82,6 +105,15 @@
  };

  const handleBackButton = () => {
+    if (isSelectingFaces) {
+      isSelectingFaces = false;
+      selectedPersonToRemove = new Array<boolean>(peopleWithFaces.length);
+      return;
+    }
+    if (shouldRefresh) {
+      dispatch('refresh');
+      return;
+    }
    dispatch('close');
  };

@ -94,11 +126,67 @@
    }
  };

+  const handleOpenAvailableFaces = () => {
+    showUnassignedFaces = true;
+  };
+
+  const handleSelectFaces = () => {
+    isSelectingFaces = !isSelectingFaces;
+  };
+
+  const handleSelectFace = (index: number) => {
+    if (!isSelectingFaces) {
+      return;
+    }
+    selectedPersonToRemove[index] = !selectedPersonToRemove[index];
+  };
+
+  const handleRemoveAddedFace = (indexToRemove: number) => {
+    $boundingBoxesArray = [];
+    selectedPersonToAdd = selectedPersonToAdd.filter((_, index) => index !== indexToRemove);
+  };
+
+  const handleAddRemovedFace = (indexToRemove: number) => {
+    $boundingBoxesArray = [];
+    unassignedFaces = unassignedFaces.map((obj) =>
+      obj && obj.id === selectedPersonToUnassign[indexToRemove].id ? null : obj,
+    );
+    selectedPersonToUnassign = selectedPersonToUnassign.filter((_, index) => index !== indexToRemove);
+  };
+
+  const handleUnassignFaces = async () => {
+    if (numberOfFacesToUnassign > 0) {
+      for (let i = 0; i < peopleWithFaces.length; i++) {
+        if (selectedPersonToRemove[i]) {
+          const image = await zoomImageToBase64(peopleWithFaces[i], $photoViewer);
+          if (image) {
+            selectedPersonToUnassign.push({ ...peopleWithFaces[i], customThumbnail: image });
+            // Trigger reactivity
+            selectedPersonToUnassign = selectedPersonToUnassign;
+            if (selectedPersonToReassign[i]) {
+              selectedPersonToReassign[i] = null;
+            }
+            if (selectedPersonToCreate[i]) {
+              selectedPersonToCreate[i] = null;
+            }
+          }
+        }
+      }
+      const uniqueIds = new Set(selectedPersonToUnassign.map((objA) => objA.id));
+      selectedPersonToAdd = selectedPersonToAdd.filter((objB) => !uniqueIds.has(objB.id));
+    }
+    selectedPersonToRemove = new Array<boolean>(peopleWithFaces.length);
+    isSelectingFaces = false;
+  };
+
  const handleEditFaces = async () => {
    loaderLoadingDoneTimeout = setTimeout(() => (isShowLoadingDone = true), 100);
+
    const numberOfChanges =
      selectedPersonToCreate.filter((person) => person !== null).length +
-      selectedPersonToReassign.filter((person) => person !== null).length;
+      selectedPersonToReassign.filter((person) => person !== null).length +
+      selectedPersonToAdd.length +
+      selectedPersonToUnassign.length;
    if (numberOfChanges > 0) {
      try {
        for (let i = 0; i < peopleWithFaces.length; i++) {
@ -111,13 +199,34 @@
            });
          } else if (selectedPersonToCreate[i]) {
            const { data } = await api.personApi.createPerson();
-            numberOfPersonToCreate.push(data.id);
+            idsOfPersonToCreate.push(data.id);
            await api.faceApi.reassignFacesById({
              id: data.id,
              faceDto: { id: peopleWithFaces[i].id },
            });
          }
        }
+        for (const face of selectedPersonToAdd) {
+          if (face.person) {
+            await api.faceApi.reassignFacesById({
+              id: face.person.id,
+              faceDto: { id: face.id },
+            });
+          } else {
+            const { data } = await api.personApi.createPerson();
+            idsOfPersonToCreate.push(data.id);
+            await api.faceApi.reassignFacesById({
+              id: data.id,
+              faceDto: { id: face.id },
+            });
+          }
+        }
+
+        for (const face of selectedPersonToUnassign) {
+          await api.faceApi.unassignFace({
+            id: face.id,
+          });
+        }

        notificationController.show({
          message: `Edited ${numberOfChanges} ${numberOfChanges > 1 ? 'people' : 'person'}`,
@ -129,7 +238,7 @@
    }

    isShowLoadingDone = false;
-    if (numberOfPersonToCreate.length === 0) {
+    if (idsOfPersonToCreate.length === 0) {
      clearTimeout(loaderLoadingDoneTimeout);
      dispatch('refresh');
    } else {
@ -148,8 +257,14 @@
  const handleReassignFace = (person: PersonResponseDto | null) => {
    if (person) {
      selectedPersonToReassign[editedPersonIndex] = person;
-      showSeletecFaces = false;
    }
+    showSeletecFaces = false;
+  };
+
+  const handleCreateOrReassignFaceFromUnassignedFace = (face: FaceWithGeneretedThumbnail) => {
+    selectedPersonToAdd.push(face);
+    selectedPersonToAdd = selectedPersonToAdd;
+    showUnassignedFaces = false;
  };

  const handlePersonPicker = async (index: number) => {
@ -172,29 +287,78 @@
          <Icon path={mdiArrowLeftThin} size="24" />
        </div>
      </button>
-      <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">Edit faces</p>
+      <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">
+        {isSelectingFaces ? 'Select Faces' : 'Edit faces'}
+      </p>
    </div>
    {#if !isShowLoadingDone}
-      <button
-        class="justify-self-end rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
-        on:click={() => handleEditFaces()}
-      >
-        Done
-      </button>
+      <div class="flex items-center gap-2">
+        {#if !isSelectingFaces && unassignedFaces.length > 0}
+          <button
+            class="justify-self-end rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
+            on:click={handleOpenAvailableFaces}
+            title="Faces available"
+          >
+            <div>
+              <Icon path={mdiFaceMan} />
+            </div>
+          </button>
+        {/if}
+        {#if !peopleWithFaces.every((item) => item.person === null)}
+          <button
+            class="justify-self-end rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
+            on:click={handleSelectFaces}
+            title="Select faces to unassign"
+          >
+            <div>
+              <Icon path={mdiSelect} />
+            </div>
+          </button>
+        {/if}
+        {#if !isSelectingFaces}
+          <button
+            class="justify-self-end rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
+            on:click={handleEditFaces}
+          >
+            Done
+          </button>
+        {/if}
+      </div>
    {:else}
      <LoadingSpinner />
    {/if}
  </div>

  <div class="px-4 py-4 text-sm">
-    <div class="mt-4 flex flex-wrap gap-2">
+    <div class="flex items-center justify-between gap-2 h-10">
+      {#if peopleWithFaces.every((item) => item.person === null)}
+        <div class="flex items-center justify-center w-full">
+          <div class="grid place-items-center">
+            <Icon path={mdiAccountOff} size="3.5em" />
+            <p class="mt-5 font-medium">No faces visible</p>
+          </div>
+        </div>
+      {:else}
+        <div>Visible faces</div>
+      {/if}
+
+      {#if isSelectingFaces && selectedPersonToRemove && selectedPersonToRemove.filter((value) => value).length > 0}
+        <button
+          class="justify-self-end rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
+          on:click={handleUnassignFaces}
+        >
+          Unassign faces
+        </button>
+      {/if}
+    </div>
+    <div class="mt-2 flex flex-wrap gap-2">
      {#if isShowLoadingPeople}
        <div class="flex w-full justify-center">
          <LoadingSpinner />
        </div>
      {:else}
        {#each peopleWithFaces as face, index}
-          {#if face.person}
+          {#if face.person && unassignedFaces[index] === null && !selectedPersonToUnassign.some((unassignedFace) => unassignedFace.id === face.id)}
            <div class="relative z-[20001] h-[115px] w-[95px]">
              <div
                role="button"
@ -203,6 +367,8 @@
                on:focus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
                on:mouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
                on:mouseleave={() => ($boundingBoxesArray = [])}
+                on:click={() => handleSelectFace(index)}
+                on:keydown={() => handleSelectFace(index)}
              >
                <div class="relative">
                  <ImageThumbnail
@ -223,11 +389,14 @@
                    widthStyle="90px"
                    heightStyle="90px"
                    thumbhash={null}
-                    hidden={selectedPersonToReassign[index]
-                      ? selectedPersonToReassign[index]?.isHidden
-                      : selectedPersonToCreate[index]
-                        ? false
-                        : face.person?.isHidden}
+                    hidden={!isSelectingFaces
+                      ? selectedPersonToReassign[index]
+                        ? selectedPersonToReassign[index]?.isHidden
+                        : selectedPersonToCreate[index]
+                          ? false
+                          : face.person?.isHidden
+                      : false}
+                    persistentBorder={isSelectingFaces ? selectedPersonToRemove[index] : false}
                  />
                </div>
                {#if !selectedPersonToCreate[index]}
@ -239,40 +408,147 @@
                    {/if}
                  </p>
                {/if}
-
-                <div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full bg-blue-700">
-                  {#if selectedPersonToCreate[index] || selectedPersonToReassign[index]}
-                    <button on:click={() => handleReset(index)} class="flex h-full w-full">
-                      <div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
-                        <div>
-                          <Icon path={mdiRestart} size={18} />
+                {#if !isSelectingFaces}
+                  <div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full bg-blue-700">
+                    {#if selectedPersonToCreate[index] || selectedPersonToReassign[index]}
+                      <button on:click={() => handleReset(index)} class="flex h-full w-full">
+                        <div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
+                          <div>
+                            <Icon path={mdiRestart} size={18} />
+                          </div>
                        </div>
-                      </div>
-                    </button>
-                  {:else}
-                    <button on:click={() => handlePersonPicker(index)} class="flex h-full w-full">
-                      <div
-                        class="absolute left-1/2 top-1/2 h-[2px] w-[14px] translate-x-[-50%] translate-y-[-50%] transform bg-white"
-                      />
-                    </button>
-                  {/if}
-                </div>
+                      </button>
+                    {:else}
+                      <button on:click={() => handlePersonPicker(index)} class="flex h-full w-full">
+                        <div
+                          class="absolute left-1/2 top-1/2 h-[2px] w-[14px] translate-x-[-50%] translate-y-[-50%] transform bg-white"
+                        />
+                      </button>
+                    {/if}
+                  </div>
+                {/if}
              </div>
            </div>
          {/if}
        {/each}
      {/if}
    </div>
+    {#if selectedPersonToAdd.length > 0}
+      <div class="mt-2">
+        <p>Faces to add</p>
+        <div class="mt-4 flex flex-wrap gap-2">
+          {#each selectedPersonToAdd as face, index}
+            {#if face}
+              <div class="relative z-[20001] h-[115px] w-[95px]">
+                <div
+                  role="button"
+                  tabindex={index}
+                  class="absolute left-0 top-0 h-[90px] w-[90px] cursor-default"
+                  on:focus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
+                  on:mouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
+                  on:mouseleave={() => ($boundingBoxesArray = [])}
+                >
+                  <div class="relative">
+                    <ImageThumbnail
+                      curve
+                      shadow
+                      url={face.person && face.person.id
+                        ? api.getPeopleThumbnailUrl(face.person.id)
+                        : face.customThumbnail}
+                      altText={'New person'}
+                      title={'New person'}
+                      widthStyle="90px"
+                      heightStyle="90px"
+                      thumbhash={null}
+                    />
+                  </div>
+                  {#if face.person?.name}
+                    <p class="relative mt-1 truncate font-medium" title={face.person?.name}>
+                      {face.person?.name}
+                    </p>{/if}
+                  {#if !isSelectingFaces}
+                    <div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full bg-red-700">
+                      <button on:click={() => handleRemoveAddedFace(index)} class="flex h-full w-full">
+                        <div
+                          class="absolute left-1/2 top-1/2 h-[2px] w-[14px] translate-x-[-50%] translate-y-[-50%] transform bg-white"
+                        />
+                      </button>
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    {/if}
+    {#if selectedPersonToUnassign.length > 0}
+      <div class="mt-2">
+        <p>Faces to unassign</p>
+        <div class="mt-4 flex flex-wrap gap-2">
+          {#each selectedPersonToUnassign as face, index}
+            {#if face && face.person}
+              <div class="relative z-[20001] h-[115px] w-[95px]">
+                <div
+                  role="button"
+                  tabindex={index}
+                  class="absolute left-0 top-0 h-[90px] w-[90px] cursor-default"
+                  on:focus={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
+                  on:mouseover={() => ($boundingBoxesArray = [peopleWithFaces[index]])}
+                  on:mouseleave={() => ($boundingBoxesArray = [])}
+                >
+                  <div class="relative">
+                    <ImageThumbnail
+                      curve
+                      shadow
+                      url={face.customThumbnail}
+                      altText={'New person'}
+                      title={'New person'}
+                      widthStyle="90px"
+                      heightStyle="90px"
+                      thumbhash={null}
+                    />
+                  </div>
+                  {#if face.person?.name}
+                    <p class="relative mt-1 truncate font-medium" title={face.person?.name}>
+                      {face.person?.name}
+                    </p>{/if}
+                  {#if !isSelectingFaces}
+                    <div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full bg-red-700">
+                      <button on:click={() => handleAddRemovedFace(index)} class="flex h-full w-full">
+                        <div
+                          class="absolute left-1/2 top-1/2 h-[2px] w-[14px] translate-x-[-50%] translate-y-[-50%] transform bg-white"
+                        />
+                      </button>
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    {/if}
  </div>
 </section>

 {#if showSeletecFaces}
  <AssignFaceSidePanel
-    {peopleWithFaces}
+    personWithFace={peopleWithFaces[editedPersonIndex]}
    {allPeople}
-    {editedPersonIndex}
    on:close={() => (showSeletecFaces = false)}
    on:createPerson={(event) => handleCreatePerson(event.detail)}
    on:reassign={(event) => handleReassignFace(event.detail)}
  />
 {/if}
+
+{#if showUnassignedFaces}
+  <UnassignedFacesSidePannel
+    {allPeople}
+    {unassignedFaces}
+    {selectedPersonToAdd}
+    on:close={() => (showUnassignedFaces = false)}
+    on:createPerson={(event) => handleCreateOrReassignFaceFromUnassignedFace(event.detail)}
+    on:reassign={(event) => handleCreateOrReassignFaceFromUnassignedFace(event.detail)}
+  />
+{/if}
--- a/web/src/lib/components/faces-page/unassigned-faces-side-pannel.svelte
+++ b/web/src/lib/components/faces-page/unassigned-faces-side-pannel.svelte
@ -0,0 +1,122 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import { linear } from 'svelte/easing';
+
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+
+  import { mdiAccountOff, mdiArrowLeftThin } from '@mdi/js';
+  import Icon from '../elements/icon.svelte';
+
+  import { createEventDispatcher } from 'svelte';
+  import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import type { PersonResponseDto } from '@api';
+  import type { FaceWithGeneretedThumbnail } from '$lib/utils/people-utils';
+  import { boundingBoxesArray } from '$lib/stores/people.store';
+
+  export let unassignedFaces: (FaceWithGeneretedThumbnail | null)[];
+  export let allPeople: PersonResponseDto[];
+  export let selectedPersonToAdd: FaceWithGeneretedThumbnail[];
+
+  let showSeletecFaces = false;
+  let personSelected: FaceWithGeneretedThumbnail;
+  const dispatch = createEventDispatcher();
+  const handleBackButton = () => {
+    dispatch('close');
+  };
+
+  const handleSelectedFace = (index: number) => {
+    const face = unassignedFaces[index];
+    if (face) {
+      personSelected = face;
+      showSeletecFaces = true;
+    }
+  };
+
+  const handleCreatePerson = (newFeaturePhoto: string | null) => {
+    showSeletecFaces = false;
+    if (newFeaturePhoto) {
+      personSelected.customThumbnail = newFeaturePhoto;
+      dispatch('createPerson', personSelected);
+    } else {
+      dispatch('close');
+    }
+  };
+
+  const handleReassignFace = (person: PersonResponseDto | null) => {
+    if (person) {
+      showSeletecFaces = false;
+      personSelected.person = person;
+      dispatch('reassign', personSelected);
+    } else {
+      dispatch('close');
+    }
+  };
+</script>
+
+<section
+  transition:fly={{ x: 360, duration: 100, easing: linear }}
+  class="absolute top-0 z-[2001] h-full w-[360px] overflow-x-hidden p-2 bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
+>
+  <div class="flex place-items-center justify-between gap-2">
+    <div class="flex items-center gap-2">
+      <button
+        class="flex place-content-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
+        on:click={handleBackButton}
+      >
+        <div>
+          <Icon path={mdiArrowLeftThin} size="24" />
+        </div>
+      </button>
+      <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">Faces available</p>
+    </div>
+  </div>
+  {#if unassignedFaces.some((face) => face)}
+    <div class="px-4 py-4 text-sm">
+      <div class="mt-4 flex flex-wrap gap-2">
+        {#each unassignedFaces as face, index}
+          {#if face && !selectedPersonToAdd.some((faceToAdd) => face && faceToAdd.id === face.id)}
+            <div class="relative z-[20001] h-[115px] w-[95px]">
+              <button
+                tabindex={index}
+                class="absolute left-0 top-0 h-[90px] w-[90px] cursor-default"
+                on:focus={() => (face ? ($boundingBoxesArray = [face]) : '')}
+                on:mouseover={() => (face ? ($boundingBoxesArray = [face]) : '')}
+                on:mouseleave={() => ($boundingBoxesArray = [])}
+                on:click={() => handleSelectedFace(index)}
+                on:keydown={() => handleSelectedFace(index)}
+              >
+                <ImageThumbnail
+                  curve
+                  shadow
+                  url={face.customThumbnail}
+                  title="Available face"
+                  altText="Available face"
+                  widthStyle="90px"
+                  heightStyle="90px"
+                  thumbhash={null}
+                />
+              </button>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="flex items-center justify-center">
+      <div class="grid place-items-center">
+        <Icon path={mdiAccountOff} size="3.5em" />
+        <p class="mt-5 font-medium">No faces available</p>
+      </div>
+    </div>
+  {/if}
+</section>
+
+{#if showSeletecFaces}
+  <AssignFaceSidePanel
+    personWithFace={personSelected}
+    {allPeople}
+    on:close={() => (showSeletecFaces = false)}
+    on:createPerson={(event) => handleCreatePerson(event.detail)}
+    on:reassign={(event) => handleReassignFace(event.detail)}
+  />
+{/if}
--- a/web/src/lib/utils/people-utils.ts
+++ b/web/src/lib/utils/people-utils.ts
@ -1,4 +1,5 @@
 import type { Faces } from '$lib/stores/people.store';
+import type { AssetFaceResponseDto } from '@api';
 import type { ZoomImageWheelState } from '@zoom-image/core';

 const getContainedSize = (img: HTMLImageElement): { width: number; height: number } => {
@ -19,6 +20,10 @@ export interface boundingBox {
  height: number;
 }

+export interface FaceWithGeneretedThumbnail extends AssetFaceResponseDto {
+  customThumbnail: string;
+}
+
 export const getBoundingBox = (
  faces: Faces[],
  zoom: ZoomImageWheelState,
--- a/web/src/lib/utils/person.ts
+++ b/web/src/lib/utils/person.ts
@ -1,4 +1,4 @@
-import type { PersonResponseDto } from '@api';
+import type { AssetFaceResponseDto, PersonResponseDto } from '@api';

 export const searchNameLocal = (
  name: string,
@ -34,3 +34,44 @@ export const searchNameLocal = (
 export const getPersonNameWithHiddenValue = (name: string, isHidden: boolean) => {
  return `${name ? name + (isHidden ? ' ' : '') : ''}${isHidden ? '(hidden)' : ''}`;
 };
+
+export const zoomImageToBase64 = async (
+  face: AssetFaceResponseDto,
+  photoViewer: HTMLImageElement | null,
+): Promise<string | null> => {
+  if (photoViewer === null) {
+    return null;
+  }
+  const { boundingBoxX1: x1, boundingBoxX2: x2, boundingBoxY1: y1, boundingBoxY2: y2 } = face;
+
+  const coordinates = {
+    x1: (photoViewer.naturalWidth / face.imageWidth) * x1,
+    x2: (photoViewer.naturalWidth / face.imageWidth) * x2,
+    y1: (photoViewer.naturalHeight / face.imageHeight) * y1,
+    y2: (photoViewer.naturalHeight / face.imageHeight) * y2,
+  };
+
+  const faceWidth = coordinates.x2 - coordinates.x1;
+  const faceHeight = coordinates.y2 - coordinates.y1;
+
+  const faceImage = new Image();
+  faceImage.src = photoViewer.src;
+
+  await new Promise((resolve) => {
+    faceImage.onload = resolve;
+    faceImage.onerror = () => resolve(null);
+  });
+
+  const canvas = document.createElement('canvas');
+  canvas.width = faceWidth;
+  canvas.height = faceHeight;
+
+  const ctx = canvas.getContext('2d');
+  if (ctx) {
+    ctx.drawImage(faceImage, coordinates.x1, coordinates.y1, faceWidth, faceHeight, 0, 0, faceWidth, faceHeight);
+
+    return canvas.toDataURL();
+  } else {
+    return null;
+  }
+};
Author	SHA1	Message	Date
martabal	920026fbc6	fix: use face thumbnail and not person face thumbnail when un-assigning face	2023-12-06 22:43:06 +01:00
martabal	8aede9e575	fix: reset re-assigning selected un-assigned face	2023-12-06 18:43:01 +01:00
martabal	5a08b7e25e	fix: reset un-assigned person	2023-12-06 16:08:40 +01:00
martabal	bbe86a4632	move the selected unassigned faces to the person side panel	2023-12-06 11:09:08 +01:00
martabal	b64dabd6f0	fix: un-assign when clicking on done	2023-12-06 01:25:49 +01:00
martabal	7e32f8b292	merge main	2023-12-06 00:11:15 +01:00
martabal	56ff252b2e	fix: e2e test	2023-12-06 00:04:49 +01:00
martabal	e23168810b	feat(web,server): unassign faces	2023-12-05 23:47:19 +01:00