mirror of https://github.com/immich-app/immich.git
feat(web/server): merge faces (#3121)
* feat(server/web): Merge faces * get parent id * update * query to get identical asset and change controller * change delete asset signature * delete identical assets * gaming time * delete merge person * query * query * generate api * pr feedback * generate api * naming * remove unused method * Update server/src/domain/person/person.service.ts Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> * Update server/src/domain/person/person.service.ts Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> * better method signature * cleaning up * fix bug * added interfaces * added tests * merge main * api * build merge face interface * api * selector interface * style * more style * clean up import * styling * styling * better * styling * styling * add merge face diablog * finished * refactor: merge person endpoint * refactor: merge person component * chore: open api * fix: tests --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>pull/3193/head^2
Alex
GitHub
parent
848ba685eb
commit
c86b2ae500
@ -0,0 +1,17 @@
|
||||
# openapi.model.BulkIdResponseDto
|
||||
|
||||
## Load the model package
|
||||
```dart
|
||||
import 'package:openapi/api.dart';
|
||||
```
|
||||
|
||||
## Properties
|
||||
Name | Type | Description | Notes
|
||||
------------ | ------------- | ------------- | -------------
|
||||
**id** | **String** | |
|
||||
**success** | **bool** | |
|
||||
**error** | **String** | | [optional]
|
||||
|
||||
[[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)
|
||||
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
# openapi.model.MergePersonDto
|
||||
|
||||
## Load the model package
|
||||
```dart
|
||||
import 'package:openapi/api.dart';
|
||||
```
|
||||
|
||||
## Properties
|
||||
Name | Type | Description | Notes
|
||||
------------ | ------------- | ------------- | -------------
|
||||
**ids** | **List<String>** | | [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)
|
||||
|
||||
|
||||
@ -0,0 +1,197 @@
|
||||
//
|
||||
// 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 BulkIdResponseDto {
|
||||
/// Returns a new [BulkIdResponseDto] instance.
|
||||
BulkIdResponseDto({
|
||||
required this.id,
|
||||
required this.success,
|
||||
this.error,
|
||||
});
|
||||
|
||||
String id;
|
||||
|
||||
bool success;
|
||||
|
||||
BulkIdResponseDtoErrorEnum? error;
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) => identical(this, other) || other is BulkIdResponseDto &&
|
||||
other.id == id &&
|
||||
other.success == success &&
|
||||
other.error == error;
|
||||
|
||||
@override
|
||||
int get hashCode =>
|
||||
// ignore: unnecessary_parenthesis
|
||||
(id.hashCode) +
|
||||
(success.hashCode) +
|
||||
(error == null ? 0 : error!.hashCode);
|
||||
|
||||
@override
|
||||
String toString() => 'BulkIdResponseDto[id=$id, success=$success, error=$error]';
|
||||
|
||||
Map<String, dynamic> toJson() {
|
||||
final json = <String, dynamic>{};
|
||||
json[r'id'] = this.id;
|
||||
json[r'success'] = this.success;
|
||||
if (this.error != null) {
|
||||
json[r'error'] = this.error;
|
||||
} else {
|
||||
// json[r'error'] = null;
|
||||
}
|
||||
return json;
|
||||
}
|
||||
|
||||
/// Returns a new [BulkIdResponseDto] instance and imports its values from
|
||||
/// [value] if it's a [Map], null otherwise.
|
||||
// ignore: prefer_constructors_over_static_methods
|
||||
static BulkIdResponseDto? fromJson(dynamic value) {
|
||||
if (value is Map) {
|
||||
final json = value.cast<String, dynamic>();
|
||||
|
||||
return BulkIdResponseDto(
|
||||
id: mapValueOfType<String>(json, r'id')!,
|
||||
success: mapValueOfType<bool>(json, r'success')!,
|
||||
error: BulkIdResponseDtoErrorEnum.fromJson(json[r'error']),
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
static List<BulkIdResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
|
||||
final result = <BulkIdResponseDto>[];
|
||||
if (json is List && json.isNotEmpty) {
|
||||
for (final row in json) {
|
||||
final value = BulkIdResponseDto.fromJson(row);
|
||||
if (value != null) {
|
||||
result.add(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result.toList(growable: growable);
|
||||
}
|
||||
|
||||
static Map<String, BulkIdResponseDto> mapFromJson(dynamic json) {
|
||||
final map = <String, BulkIdResponseDto>{};
|
||||
if (json is Map && json.isNotEmpty) {
|
||||
json = json.cast<String, dynamic>(); // ignore: parameter_assignments
|
||||
for (final entry in json.entries) {
|
||||
final value = BulkIdResponseDto.fromJson(entry.value);
|
||||
if (value != null) {
|
||||
map[entry.key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
// maps a json object with a list of BulkIdResponseDto-objects as value to a dart map
|
||||
static Map<String, List<BulkIdResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
|
||||
final map = <String, List<BulkIdResponseDto>>{};
|
||||
if (json is Map && json.isNotEmpty) {
|
||||
// ignore: parameter_assignments
|
||||
json = json.cast<String, dynamic>();
|
||||
for (final entry in json.entries) {
|
||||
map[entry.key] = BulkIdResponseDto.listFromJson(entry.value, growable: growable,);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
/// The list of required keys that must be present in a JSON.
|
||||
static const requiredKeys = <String>{
|
||||
'id',
|
||||
'success',
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
class BulkIdResponseDtoErrorEnum {
|
||||
/// Instantiate a new enum with the provided [value].
|
||||
const BulkIdResponseDtoErrorEnum._(this.value);
|
||||
|
||||
/// The underlying value of this enum member.
|
||||
final String value;
|
||||
|
||||
@override
|
||||
String toString() => value;
|
||||
|
||||
String toJson() => value;
|
||||
|
||||
static const duplicate = BulkIdResponseDtoErrorEnum._(r'duplicate');
|
||||
static const noPermission = BulkIdResponseDtoErrorEnum._(r'no_permission');
|
||||
static const notFound = BulkIdResponseDtoErrorEnum._(r'not_found');
|
||||
static const unknown = BulkIdResponseDtoErrorEnum._(r'unknown');
|
||||
|
||||
/// List of all possible values in this [enum][BulkIdResponseDtoErrorEnum].
|
||||
static const values = <BulkIdResponseDtoErrorEnum>[
|
||||
duplicate,
|
||||
noPermission,
|
||||
notFound,
|
||||
unknown,
|
||||
];
|
||||
|
||||
static BulkIdResponseDtoErrorEnum? fromJson(dynamic value) => BulkIdResponseDtoErrorEnumTypeTransformer().decode(value);
|
||||
|
||||
static List<BulkIdResponseDtoErrorEnum>? listFromJson(dynamic json, {bool growable = false,}) {
|
||||
final result = <BulkIdResponseDtoErrorEnum>[];
|
||||
if (json is List && json.isNotEmpty) {
|
||||
for (final row in json) {
|
||||
final value = BulkIdResponseDtoErrorEnum.fromJson(row);
|
||||
if (value != null) {
|
||||
result.add(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result.toList(growable: growable);
|
||||
}
|
||||
}
|
||||
|
||||
/// Transformation class that can [encode] an instance of [BulkIdResponseDtoErrorEnum] to String,
|
||||
/// and [decode] dynamic data back to [BulkIdResponseDtoErrorEnum].
|
||||
class BulkIdResponseDtoErrorEnumTypeTransformer {
|
||||
factory BulkIdResponseDtoErrorEnumTypeTransformer() => _instance ??= const BulkIdResponseDtoErrorEnumTypeTransformer._();
|
||||
|
||||
const BulkIdResponseDtoErrorEnumTypeTransformer._();
|
||||
|
||||
String encode(BulkIdResponseDtoErrorEnum data) => data.value;
|
||||
|
||||
/// Decodes a [dynamic value][data] to a BulkIdResponseDtoErrorEnum.
|
||||
///
|
||||
/// If [allowNull] is true and the [dynamic value][data] cannot be decoded successfully,
|
||||
/// then null is returned. However, if [allowNull] is false and the [dynamic value][data]
|
||||
/// cannot be decoded successfully, then an [UnimplementedError] is thrown.
|
||||
///
|
||||
/// The [allowNull] is very handy when an API changes and a new enum value is added or removed,
|
||||
/// and users are still using an old app with the old code.
|
||||
BulkIdResponseDtoErrorEnum? decode(dynamic data, {bool allowNull = true}) {
|
||||
if (data != null) {
|
||||
switch (data) {
|
||||
case r'duplicate': return BulkIdResponseDtoErrorEnum.duplicate;
|
||||
case r'no_permission': return BulkIdResponseDtoErrorEnum.noPermission;
|
||||
case r'not_found': return BulkIdResponseDtoErrorEnum.notFound;
|
||||
case r'unknown': return BulkIdResponseDtoErrorEnum.unknown;
|
||||
default:
|
||||
if (!allowNull) {
|
||||
throw ArgumentError('Unknown enum value to decode: $data');
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/// Singleton [BulkIdResponseDtoErrorEnumTypeTransformer] instance.
|
||||
static BulkIdResponseDtoErrorEnumTypeTransformer? _instance;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,100 @@
|
||||
//
|
||||
// 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 MergePersonDto {
|
||||
/// Returns a new [MergePersonDto] instance.
|
||||
MergePersonDto({
|
||||
this.ids = const [],
|
||||
});
|
||||
|
||||
List<String> ids;
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) => identical(this, other) || other is MergePersonDto &&
|
||||
other.ids == ids;
|
||||
|
||||
@override
|
||||
int get hashCode =>
|
||||
// ignore: unnecessary_parenthesis
|
||||
(ids.hashCode);
|
||||
|
||||
@override
|
||||
String toString() => 'MergePersonDto[ids=$ids]';
|
||||
|
||||
Map<String, dynamic> toJson() {
|
||||
final json = <String, dynamic>{};
|
||||
json[r'ids'] = this.ids;
|
||||
return json;
|
||||
}
|
||||
|
||||
/// Returns a new [MergePersonDto] instance and imports its values from
|
||||
/// [value] if it's a [Map], null otherwise.
|
||||
// ignore: prefer_constructors_over_static_methods
|
||||
static MergePersonDto? fromJson(dynamic value) {
|
||||
if (value is Map) {
|
||||
final json = value.cast<String, dynamic>();
|
||||
|
||||
return MergePersonDto(
|
||||
ids: json[r'ids'] is Iterable
|
||||
? (json[r'ids'] as Iterable).cast<String>().toList(growable: false)
|
||||
: const [],
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
static List<MergePersonDto> listFromJson(dynamic json, {bool growable = false,}) {
|
||||
final result = <MergePersonDto>[];
|
||||
if (json is List && json.isNotEmpty) {
|
||||
for (final row in json) {
|
||||
final value = MergePersonDto.fromJson(row);
|
||||
if (value != null) {
|
||||
result.add(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result.toList(growable: growable);
|
||||
}
|
||||
|
||||
static Map<String, MergePersonDto> mapFromJson(dynamic json) {
|
||||
final map = <String, MergePersonDto>{};
|
||||
if (json is Map && json.isNotEmpty) {
|
||||
json = json.cast<String, dynamic>(); // ignore: parameter_assignments
|
||||
for (final entry in json.entries) {
|
||||
final value = MergePersonDto.fromJson(entry.value);
|
||||
if (value != null) {
|
||||
map[entry.key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
// maps a json object with a list of MergePersonDto-objects as value to a dart map
|
||||
static Map<String, List<MergePersonDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
|
||||
final map = <String, List<MergePersonDto>>{};
|
||||
if (json is Map && json.isNotEmpty) {
|
||||
// ignore: parameter_assignments
|
||||
json = json.cast<String, dynamic>();
|
||||
for (final entry in json.entries) {
|
||||
map[entry.key] = MergePersonDto.listFromJson(entry.value, growable: growable,);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
/// The list of required keys that must be present in a JSON.
|
||||
static const requiredKeys = <String>{
|
||||
'ids',
|
||||
};
|
||||
}
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
//
|
||||
// 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 BulkIdResponseDto
|
||||
void main() {
|
||||
// final instance = BulkIdResponseDto();
|
||||
|
||||
group('test BulkIdResponseDto', () {
|
||||
// String id
|
||||
test('to test the property `id`', () async {
|
||||
// TODO
|
||||
});
|
||||
|
||||
// bool success
|
||||
test('to test the property `success`', () async {
|
||||
// TODO
|
||||
});
|
||||
|
||||
// String error
|
||||
test('to test the property `error`', () async {
|
||||
// TODO
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
//
|
||||
// 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 MergePersonDto
|
||||
void main() {
|
||||
// final instance = MergePersonDto();
|
||||
|
||||
group('test MergePersonDto', () {
|
||||
// List<String> ids (default value: const [])
|
||||
test('to test the property `ids`', () async {
|
||||
// TODO
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
@ -1,11 +1,26 @@
|
||||
/** @deprecated Use `BulkIdResponseDto` instead */
|
||||
export enum AssetIdErrorReason {
|
||||
DUPLICATE = 'duplicate',
|
||||
NO_PERMISSION = 'no_permission',
|
||||
NOT_FOUND = 'not_found',
|
||||
}
|
||||
|
||||
/** @deprecated Use `BulkIdResponseDto` instead */
|
||||
export class AssetIdsResponseDto {
|
||||
assetId!: string;
|
||||
success!: boolean;
|
||||
error?: AssetIdErrorReason;
|
||||
}
|
||||
|
||||
export enum BulkIdErrorReason {
|
||||
DUPLICATE = 'duplicate',
|
||||
NO_PERMISSION = 'no_permission',
|
||||
NOT_FOUND = 'not_found',
|
||||
UNKNOWN = 'unknown',
|
||||
}
|
||||
|
||||
export class BulkIdResponseDto {
|
||||
id!: string;
|
||||
success!: boolean;
|
||||
error?: BulkIdErrorReason;
|
||||
}
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
import { api, type PersonResponseDto } from '@api';
|
||||
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let person: PersonResponseDto;
|
||||
export let selectable = false;
|
||||
export let selected = false;
|
||||
export let thumbnailSize: number | null = null;
|
||||
export let circle = false;
|
||||
export let border = false;
|
||||
|
||||
let dispatch = createEventDispatcher();
|
||||
|
||||
const handleOnClicked = () => {
|
||||
dispatch('click', person);
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="relative transition-all rounded-lg"
|
||||
on:click={handleOnClicked}
|
||||
disabled={!selectable}
|
||||
style:width={thumbnailSize ? thumbnailSize + 'px' : '100%'}
|
||||
style:height={thumbnailSize ? thumbnailSize + 'px' : '100%'}
|
||||
>
|
||||
<div
|
||||
class="filter w-full h-full brightness-90 border-2"
|
||||
class:rounded-full={circle}
|
||||
class:rounded-lg={!circle}
|
||||
class:border-transparent={!border}
|
||||
class:dark:border-immich-dark-primary={border}
|
||||
class:border-immich-primary={border}
|
||||
>
|
||||
<ImageThumbnail
|
||||
{circle}
|
||||
url={api.getPeopleThumbnailUrl(person.id)}
|
||||
altText={person.name}
|
||||
widthStyle="100%"
|
||||
shadow
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-immich-primary/30 opacity-0"
|
||||
class:hover:opacity-100={selectable}
|
||||
class:rounded-full={circle}
|
||||
class:rounded-lg={!circle}
|
||||
/>
|
||||
|
||||
{#if selected}
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-blue-500/80"
|
||||
class:rounded-full={circle}
|
||||
class:rounded-lg={!circle}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if person.name}
|
||||
<span
|
||||
class="absolute bottom-2 left-0 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
|
||||
>
|
||||
{person.name}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
@ -0,0 +1,145 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { api, type PersonResponseDto } from '@api';
|
||||
import FaceThumbnail from './face-thumbnail.svelte';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import Merge from 'svelte-material-icons/Merge.svelte';
|
||||
import CallMerge from 'svelte-material-icons/CallMerge.svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { NotificationType, notificationController } from '../shared-components/notification/notification';
|
||||
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
|
||||
export let person: PersonResponseDto;
|
||||
let people: PersonResponseDto[] = [];
|
||||
let selectedPeople: PersonResponseDto[] = [];
|
||||
let screenHeight: number;
|
||||
let isShowConfirmation = false;
|
||||
let dispatch = createEventDispatcher();
|
||||
|
||||
$: hasSelection = selectedPeople.length > 0;
|
||||
$: unselectedPeople = people.filter((source) => !selectedPeople.includes(source) && source.id !== person.id);
|
||||
|
||||
onMount(async () => {
|
||||
const { data } = await api.personApi.getAllPeople();
|
||||
people = data;
|
||||
});
|
||||
|
||||
const onClose = () => {
|
||||
dispatch('go-back');
|
||||
};
|
||||
|
||||
const onSelect = (selected: PersonResponseDto) => {
|
||||
if (selectedPeople.includes(selected)) {
|
||||
selectedPeople = selectedPeople.filter((person) => person.id !== selected.id);
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedPeople.length >= 5) {
|
||||
notificationController.show({
|
||||
message: 'You can only merge up to 5 faces at a time',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
selectedPeople = [selected, ...selectedPeople];
|
||||
};
|
||||
|
||||
const handleMerge = async () => {
|
||||
try {
|
||||
const { data: results } = await api.personApi.mergePerson({
|
||||
id: person.id,
|
||||
mergePersonDto: { ids: selectedPeople.map(({ id }) => id) },
|
||||
});
|
||||
const count = results.filter(({ success }) => success).length;
|
||||
notificationController.show({
|
||||
message: `Merged ${count} ${count === 1 ? 'person' : 'people'}`,
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
await invalidateAll();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
handleError(error, 'Cannot merge faces');
|
||||
} finally {
|
||||
isShowConfirmation = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerHeight={screenHeight} />
|
||||
|
||||
<section
|
||||
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
|
||||
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
|
||||
>
|
||||
<ControlAppBar on:close-button-click={onClose}>
|
||||
<svelte:fragment slot="leading">
|
||||
{#if hasSelection}
|
||||
Selected {selectedPeople.length}
|
||||
{:else}
|
||||
Merge faces
|
||||
{/if}
|
||||
<div />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="trailing">
|
||||
<Button
|
||||
size={'sm'}
|
||||
disabled={!hasSelection}
|
||||
on:click={() => {
|
||||
isShowConfirmation = true;
|
||||
}}
|
||||
>
|
||||
<Merge size={18} />
|
||||
<span class="ml-2"> Merge</span></Button
|
||||
>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
<section class="pt-[100px] px-[70px] bg-immich-bg dark:bg-immich-dark-bg">
|
||||
<section id="merge-face-selector relative">
|
||||
<div class="place-items-center place-content-center mb-10 h-[200px]">
|
||||
<p class="uppercase mb-4 dark:text-white text-center">Choose matching faces to merge</p>
|
||||
|
||||
<div class="grid grid-flow-col-dense place-items-center place-content-center gap-4">
|
||||
{#each selectedPeople as person (person.id)}
|
||||
<div animate:flip={{ duration: 250, easing: quintOut }}>
|
||||
<FaceThumbnail border circle {person} selectable thumbnailSize={120} on:click={() => onSelect(person)} />
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if hasSelection}
|
||||
<span><CallMerge size={48} class="rotate-90 dark:text-white" /> </span>
|
||||
{/if}
|
||||
<FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-10 overflow-y-auto rounded-3xl bg-gray-200 dark:bg-immich-dark-gray"
|
||||
style:max-height={screenHeight - 200 - 200 + 'px'}
|
||||
>
|
||||
<div class="grid grid-col-2 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-8">
|
||||
{#each unselectedPeople as person (person.id)}
|
||||
<FaceThumbnail {person} on:click={() => onSelect(person)} circle border selectable />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{#if isShowConfirmation}
|
||||
<ConfirmDialogue
|
||||
title="Merge faces"
|
||||
confirmText="Merge"
|
||||
on:confirm={handleMerge}
|
||||
on:cancel={() => (isShowConfirmation = false)}
|
||||
>
|
||||
<svelte:fragment slot="prompt">
|
||||
<p>Are you sure you want merge these faces? <br />This action is <strong>irreversible</strong>.</p>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
Loading…
Reference in New Issue