mirror of
https://github.com/immich-app/immich.git
synced 2025-12-16 07:23:44 +09:00
feat(web): re-assign person faces (2) (#4949)
* feat: unassign person faces * multiple improvements * chore: regenerate api * feat: improve face interactions in photos * fix: tests * fix: tests * optimize * fix: wrong assignment on complex-multiple re-assignments * fix: thumbnails with large photos * fix: complex reassign * fix: don't send people with faces * fix: person thumbnail generation * chore: regenerate api * add tess * feat: face box even when zoomed * fix: change feature photo * feat: make the blue icon hoverable * chore: regenerate api * feat: use websocket * fix: loading spinner when clicking on the done button * fix: use the svelte way * fix: tests * simplify * fix: unused vars * fix: remove unused code * fix: add migration * chore: regenerate api * ci: add unit tests * chore: regenerate api * feat: if a new person is created for a face and the server takes more than 15 seconds to generate the person thumbnail, don't wait for it * reorganize * chore: regenerate api * feat: global edit * pr feedback * pr feedback * simplify * revert test * fix: face generation * fix: tests * fix: face generation * fix merge * feat: search names in unmerge face selector modal * fix: merge face selector * simplify feature photo generation * fix: change endpoint * pr feedback * chore: fix merge * chore: fix merge * fix: tests * fix: edit & hide buttons * fix: tests * feat: show if person is hidden * feat: rename face to person * feat: split in new panel * copy-paste-error * pr feedback * fix: feature photo * do not leak faces * fix: unmerge modal * fix: merge modal event * feat(server): remove duplicates * fix: title for image thumbnails * fix: disable side panel when there's no face until next PR --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
martin
GitHub
@@ -21,6 +21,7 @@ import {
|
||||
UserApiFp,
|
||||
AuditApi,
|
||||
ActivityApi,
|
||||
FaceApi,
|
||||
} from './open-api';
|
||||
import { BASE_PATH } from './open-api/base';
|
||||
import { DUMMY_BASE_URL, toPathString } from './open-api/common';
|
||||
@@ -33,6 +34,7 @@ class ImmichApi {
|
||||
public assetApi: AssetApi;
|
||||
public auditApi: AuditApi;
|
||||
public authenticationApi: AuthenticationApi;
|
||||
public faceApi: FaceApi;
|
||||
public jobApi: JobApi;
|
||||
public keyApi: APIKeyApi;
|
||||
public oauthApi: OAuthApi;
|
||||
@@ -60,6 +62,7 @@ class ImmichApi {
|
||||
this.libraryApi = new LibraryApi(this.config);
|
||||
this.assetApi = new AssetApi(this.config);
|
||||
this.authenticationApi = new AuthenticationApi(this.config);
|
||||
this.faceApi = new FaceApi(this.config);
|
||||
this.jobApi = new JobApi(this.config);
|
||||
this.keyApi = new APIKeyApi(this.config);
|
||||
this.oauthApi = new OAuthApi(this.config);
|
||||
|
||||
588
web/src/api/open-api/api.ts
generated
588
web/src/api/open-api/api.ts
generated
@@ -586,6 +586,142 @@ export const AssetBulkUploadCheckResultReasonEnum = {
|
||||
|
||||
export type AssetBulkUploadCheckResultReasonEnum = typeof AssetBulkUploadCheckResultReasonEnum[keyof typeof AssetBulkUploadCheckResultReasonEnum];
|
||||
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface AssetFaceResponseDto
|
||||
*/
|
||||
export interface AssetFaceResponseDto {
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceResponseDto
|
||||
*/
|
||||
'boundingBoxX1': number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceResponseDto
|
||||
*/
|
||||
'boundingBoxX2': number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceResponseDto
|
||||
*/
|
||||
'boundingBoxY1': number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceResponseDto
|
||||
*/
|
||||
'boundingBoxY2': number;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetFaceResponseDto
|
||||
*/
|
||||
'id': string;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceResponseDto
|
||||
*/
|
||||
'imageHeight': number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceResponseDto
|
||||
*/
|
||||
'imageWidth': number;
|
||||
/**
|
||||
*
|
||||
* @type {PersonResponseDto}
|
||||
* @memberof AssetFaceResponseDto
|
||||
*/
|
||||
'person': PersonResponseDto | null;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface AssetFaceUpdateDto
|
||||
*/
|
||||
export interface AssetFaceUpdateDto {
|
||||
/**
|
||||
*
|
||||
* @type {Array<AssetFaceUpdateItem>}
|
||||
* @memberof AssetFaceUpdateDto
|
||||
*/
|
||||
'data': Array<AssetFaceUpdateItem>;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface AssetFaceUpdateItem
|
||||
*/
|
||||
export interface AssetFaceUpdateItem {
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetFaceUpdateItem
|
||||
*/
|
||||
'assetId': string;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetFaceUpdateItem
|
||||
*/
|
||||
'personId': string;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface AssetFaceWithoutPersonResponseDto
|
||||
*/
|
||||
export interface AssetFaceWithoutPersonResponseDto {
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceWithoutPersonResponseDto
|
||||
*/
|
||||
'boundingBoxX1': number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceWithoutPersonResponseDto
|
||||
*/
|
||||
'boundingBoxX2': number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceWithoutPersonResponseDto
|
||||
*/
|
||||
'boundingBoxY1': number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceWithoutPersonResponseDto
|
||||
*/
|
||||
'boundingBoxY2': number;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetFaceWithoutPersonResponseDto
|
||||
*/
|
||||
'id': string;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceWithoutPersonResponseDto
|
||||
*/
|
||||
'imageHeight': number;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetFaceWithoutPersonResponseDto
|
||||
*/
|
||||
'imageWidth': number;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
@@ -842,10 +978,10 @@ export interface AssetResponseDto {
|
||||
'ownerId': string;
|
||||
/**
|
||||
*
|
||||
* @type {Array<PersonResponseDto>}
|
||||
* @type {Array<PersonWithFacesResponseDto>}
|
||||
* @memberof AssetResponseDto
|
||||
*/
|
||||
'people'?: Array<PersonResponseDto>;
|
||||
'people'?: Array<PersonWithFacesResponseDto>;
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
@@ -1672,6 +1808,19 @@ export interface ExifResponseDto {
|
||||
*/
|
||||
'timeZone'?: string | null;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface FaceDto
|
||||
*/
|
||||
export interface FaceDto {
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof FaceDto
|
||||
*/
|
||||
'id': string;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
@@ -2564,6 +2713,49 @@ export interface PersonUpdateDto {
|
||||
*/
|
||||
'name'?: string;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface PersonWithFacesResponseDto
|
||||
*/
|
||||
export interface PersonWithFacesResponseDto {
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof PersonWithFacesResponseDto
|
||||
*/
|
||||
'birthDate': string | null;
|
||||
/**
|
||||
*
|
||||
* @type {Array<AssetFaceWithoutPersonResponseDto>}
|
||||
* @memberof PersonWithFacesResponseDto
|
||||
*/
|
||||
'faces': Array<AssetFaceWithoutPersonResponseDto>;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof PersonWithFacesResponseDto
|
||||
*/
|
||||
'id': string;
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
* @memberof PersonWithFacesResponseDto
|
||||
*/
|
||||
'isHidden': boolean;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof PersonWithFacesResponseDto
|
||||
*/
|
||||
'name': string;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof PersonWithFacesResponseDto
|
||||
*/
|
||||
'thumbnailPath': string;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
@@ -11349,6 +11541,233 @@ export class AuthenticationApi extends BaseAPI {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* FaceApi - axios parameter creator
|
||||
* @export
|
||||
*/
|
||||
export const FaceApiAxiosParamCreator = function (configuration?: Configuration) {
|
||||
return {
|
||||
/**
|
||||
*
|
||||
* @param {string} id
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getFaces: async (id: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
// verify required parameter 'id' is not null or undefined
|
||||
assertParamExists('getFaces', 'id', id)
|
||||
const localVarPath = `/face`;
|
||||
// use dummy base URL string because the URL constructor only accepts absolute URLs.
|
||||
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
|
||||
let baseOptions;
|
||||
if (configuration) {
|
||||
baseOptions = configuration.baseOptions;
|
||||
}
|
||||
|
||||
const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
|
||||
const localVarHeaderParameter = {} as any;
|
||||
const localVarQueryParameter = {} as any;
|
||||
|
||||
// authentication cookie required
|
||||
|
||||
// authentication api_key required
|
||||
await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
|
||||
|
||||
// authentication bearer required
|
||||
// http bearer authentication required
|
||||
await setBearerAuthToObject(localVarHeaderParameter, configuration)
|
||||
|
||||
if (id !== undefined) {
|
||||
localVarQueryParameter['id'] = id;
|
||||
}
|
||||
|
||||
|
||||
|
||||
setSearchParams(localVarUrlObj, localVarQueryParameter);
|
||||
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
|
||||
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
|
||||
|
||||
return {
|
||||
url: toPathString(localVarUrlObj),
|
||||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {string} id
|
||||
* @param {FaceDto} faceDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
reassignFacesById: async (id: string, faceDto: FaceDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
// verify required parameter 'id' is not null or undefined
|
||||
assertParamExists('reassignFacesById', 'id', id)
|
||||
// verify required parameter 'faceDto' is not null or undefined
|
||||
assertParamExists('reassignFacesById', 'faceDto', faceDto)
|
||||
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: 'PUT', ...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)
|
||||
|
||||
|
||||
|
||||
localVarHeaderParameter['Content-Type'] = 'application/json';
|
||||
|
||||
setSearchParams(localVarUrlObj, localVarQueryParameter);
|
||||
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
|
||||
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
|
||||
localVarRequestOptions.data = serializeDataIfNeeded(faceDto, localVarRequestOptions, configuration)
|
||||
|
||||
return {
|
||||
url: toPathString(localVarUrlObj),
|
||||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* FaceApi - functional programming interface
|
||||
* @export
|
||||
*/
|
||||
export const FaceApiFp = function(configuration?: Configuration) {
|
||||
const localVarAxiosParamCreator = FaceApiAxiosParamCreator(configuration)
|
||||
return {
|
||||
/**
|
||||
*
|
||||
* @param {string} id
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async getFaces(id: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetFaceResponseDto>>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.getFaces(id, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {string} id
|
||||
* @param {FaceDto} faceDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async reassignFacesById(id: string, faceDto: FaceDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<PersonResponseDto>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.reassignFacesById(id, faceDto, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* FaceApi - factory interface
|
||||
* @export
|
||||
*/
|
||||
export const FaceApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
|
||||
const localVarFp = FaceApiFp(configuration)
|
||||
return {
|
||||
/**
|
||||
*
|
||||
* @param {FaceApiGetFacesRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getFaces(requestParameters: FaceApiGetFacesRequest, options?: AxiosRequestConfig): AxiosPromise<Array<AssetFaceResponseDto>> {
|
||||
return localVarFp.getFaces(requestParameters.id, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {FaceApiReassignFacesByIdRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
reassignFacesById(requestParameters: FaceApiReassignFacesByIdRequest, options?: AxiosRequestConfig): AxiosPromise<PersonResponseDto> {
|
||||
return localVarFp.reassignFacesById(requestParameters.id, requestParameters.faceDto, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Request parameters for getFaces operation in FaceApi.
|
||||
* @export
|
||||
* @interface FaceApiGetFacesRequest
|
||||
*/
|
||||
export interface FaceApiGetFacesRequest {
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof FaceApiGetFaces
|
||||
*/
|
||||
readonly id: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for reassignFacesById operation in FaceApi.
|
||||
* @export
|
||||
* @interface FaceApiReassignFacesByIdRequest
|
||||
*/
|
||||
export interface FaceApiReassignFacesByIdRequest {
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof FaceApiReassignFacesById
|
||||
*/
|
||||
readonly id: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {FaceDto}
|
||||
* @memberof FaceApiReassignFacesById
|
||||
*/
|
||||
readonly faceDto: FaceDto
|
||||
}
|
||||
|
||||
/**
|
||||
* FaceApi - object-oriented interface
|
||||
* @export
|
||||
* @class FaceApi
|
||||
* @extends {BaseAPI}
|
||||
*/
|
||||
export class FaceApi extends BaseAPI {
|
||||
/**
|
||||
*
|
||||
* @param {FaceApiGetFacesRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
* @memberof FaceApi
|
||||
*/
|
||||
public getFaces(requestParameters: FaceApiGetFacesRequest, options?: AxiosRequestConfig) {
|
||||
return FaceApiFp(this.configuration).getFaces(requestParameters.id, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {FaceApiReassignFacesByIdRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
* @memberof FaceApi
|
||||
*/
|
||||
public reassignFacesById(requestParameters: FaceApiReassignFacesByIdRequest, options?: AxiosRequestConfig) {
|
||||
return FaceApiFp(this.configuration).reassignFacesById(requestParameters.id, requestParameters.faceDto, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* JobApi - axios parameter creator
|
||||
* @export
|
||||
@@ -13180,6 +13599,44 @@ export class PartnerApi extends BaseAPI {
|
||||
*/
|
||||
export const PersonApiAxiosParamCreator = function (configuration?: Configuration) {
|
||||
return {
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
createPerson: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
const localVarPath = `/person`;
|
||||
// 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: 'POST', ...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,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {boolean} [withHidden]
|
||||
@@ -13439,6 +13896,54 @@ export const PersonApiAxiosParamCreator = function (configuration?: Configuratio
|
||||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {string} id
|
||||
* @param {AssetFaceUpdateDto} assetFaceUpdateDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
reassignFaces: async (id: string, assetFaceUpdateDto: AssetFaceUpdateDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
// verify required parameter 'id' is not null or undefined
|
||||
assertParamExists('reassignFaces', 'id', id)
|
||||
// verify required parameter 'assetFaceUpdateDto' is not null or undefined
|
||||
assertParamExists('reassignFaces', 'assetFaceUpdateDto', assetFaceUpdateDto)
|
||||
const localVarPath = `/person/{id}/reassign`
|
||||
.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: 'PUT', ...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)
|
||||
|
||||
|
||||
|
||||
localVarHeaderParameter['Content-Type'] = 'application/json';
|
||||
|
||||
setSearchParams(localVarUrlObj, localVarQueryParameter);
|
||||
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
|
||||
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
|
||||
localVarRequestOptions.data = serializeDataIfNeeded(assetFaceUpdateDto, localVarRequestOptions, configuration)
|
||||
|
||||
return {
|
||||
url: toPathString(localVarUrlObj),
|
||||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {PeopleUpdateDto} peopleUpdateDto
|
||||
@@ -13541,6 +14046,15 @@ export const PersonApiAxiosParamCreator = function (configuration?: Configuratio
|
||||
export const PersonApiFp = function(configuration?: Configuration) {
|
||||
const localVarAxiosParamCreator = PersonApiAxiosParamCreator(configuration)
|
||||
return {
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async createPerson(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<PersonResponseDto>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.createPerson(options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {boolean} [withHidden]
|
||||
@@ -13602,6 +14116,17 @@ export const PersonApiFp = function(configuration?: Configuration) {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.mergePerson(id, mergePersonDto, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {string} id
|
||||
* @param {AssetFaceUpdateDto} assetFaceUpdateDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async reassignFaces(id: string, assetFaceUpdateDto: AssetFaceUpdateDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<PersonResponseDto>>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.reassignFaces(id, assetFaceUpdateDto, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {PeopleUpdateDto} peopleUpdateDto
|
||||
@@ -13633,6 +14158,14 @@ export const PersonApiFp = function(configuration?: Configuration) {
|
||||
export const PersonApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
|
||||
const localVarFp = PersonApiFp(configuration)
|
||||
return {
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
createPerson(options?: AxiosRequestConfig): AxiosPromise<PersonResponseDto> {
|
||||
return localVarFp.createPerson(options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {PersonApiGetAllPeopleRequest} requestParameters Request parameters.
|
||||
@@ -13687,6 +14220,15 @@ export const PersonApiFactory = function (configuration?: Configuration, basePat
|
||||
mergePerson(requestParameters: PersonApiMergePersonRequest, options?: AxiosRequestConfig): AxiosPromise<Array<BulkIdResponseDto>> {
|
||||
return localVarFp.mergePerson(requestParameters.id, requestParameters.mergePersonDto, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {PersonApiReassignFacesRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
reassignFaces(requestParameters: PersonApiReassignFacesRequest, options?: AxiosRequestConfig): AxiosPromise<Array<PersonResponseDto>> {
|
||||
return localVarFp.reassignFaces(requestParameters.id, requestParameters.assetFaceUpdateDto, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {PersonApiUpdatePeopleRequest} requestParameters Request parameters.
|
||||
@@ -13799,6 +14341,27 @@ export interface PersonApiMergePersonRequest {
|
||||
readonly mergePersonDto: MergePersonDto
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for reassignFaces operation in PersonApi.
|
||||
* @export
|
||||
* @interface PersonApiReassignFacesRequest
|
||||
*/
|
||||
export interface PersonApiReassignFacesRequest {
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof PersonApiReassignFaces
|
||||
*/
|
||||
readonly id: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {AssetFaceUpdateDto}
|
||||
* @memberof PersonApiReassignFaces
|
||||
*/
|
||||
readonly assetFaceUpdateDto: AssetFaceUpdateDto
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for updatePeople operation in PersonApi.
|
||||
* @export
|
||||
@@ -13841,6 +14404,16 @@ export interface PersonApiUpdatePersonRequest {
|
||||
* @extends {BaseAPI}
|
||||
*/
|
||||
export class PersonApi extends BaseAPI {
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
* @memberof PersonApi
|
||||
*/
|
||||
public createPerson(options?: AxiosRequestConfig) {
|
||||
return PersonApiFp(this.configuration).createPerson(options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {PersonApiGetAllPeopleRequest} requestParameters Request parameters.
|
||||
@@ -13907,6 +14480,17 @@ export class PersonApi extends BaseAPI {
|
||||
return PersonApiFp(this.configuration).mergePerson(requestParameters.id, requestParameters.mergePersonDto, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {PersonApiReassignFacesRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
* @memberof PersonApi
|
||||
*/
|
||||
public reassignFaces(requestParameters: PersonApiReassignFacesRequest, options?: AxiosRequestConfig) {
|
||||
return PersonApiFp(this.configuration).reassignFaces(requestParameters.id, requestParameters.assetFaceUpdateDto, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {PersonApiUpdatePeopleRequest} requestParameters Request parameters.
|
||||
|
||||
@@ -560,7 +560,7 @@
|
||||
|
||||
<section
|
||||
id="immich-asset-viewer"
|
||||
class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-y-hidden bg-black"
|
||||
class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
|
||||
>
|
||||
<!-- Top navigation bar -->
|
||||
{#if $slideshowState === SlideshowState.None}
|
||||
|
||||
@@ -15,16 +15,18 @@
|
||||
mdiCalendar,
|
||||
mdiCameraIris,
|
||||
mdiClose,
|
||||
mdiPencil,
|
||||
mdiEye,
|
||||
mdiEyeOff,
|
||||
mdiImageOutline,
|
||||
mdiMapMarkerOutline,
|
||||
mdiInformationOutline,
|
||||
mdiEye,
|
||||
mdiEyeOff,
|
||||
mdiPencil,
|
||||
} from '@mdi/js';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import PersonSidePanel from '../faces-page/person-side-panel.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import Map from '../shared-components/map/map.svelte';
|
||||
import { boundingBoxesArray } from '$lib/stores/people.store';
|
||||
import { websocketStore } from '$lib/stores/websocket';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import ChangeLocation from '../shared-components/change-location.svelte';
|
||||
@@ -35,8 +37,21 @@
|
||||
export let albums: AlbumResponseDto[] = [];
|
||||
export let albumId: string | null = null;
|
||||
|
||||
let showAssetPath = false;
|
||||
let textarea: HTMLTextAreaElement;
|
||||
let description: string;
|
||||
let showEditFaces = false;
|
||||
let previousId: string;
|
||||
|
||||
$: {
|
||||
if (!previousId) {
|
||||
previousId = asset.id;
|
||||
}
|
||||
if (asset.id !== previousId) {
|
||||
showEditFaces = false;
|
||||
previousId = asset.id;
|
||||
}
|
||||
}
|
||||
|
||||
$: isOwner = $page?.data?.user?.id === asset.ownerId;
|
||||
|
||||
@@ -84,6 +99,14 @@
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const handleRefreshPeople = async () => {
|
||||
await api.assetApi.getAssetById({ id: asset.id }).then((res) => {
|
||||
people = res.data?.people || [];
|
||||
textarea.value = res.data?.exifInfo?.description || '';
|
||||
});
|
||||
showEditFaces = false;
|
||||
};
|
||||
|
||||
const autoGrowHeight = (e: Event) => {
|
||||
const target = e.target as HTMLTextAreaElement;
|
||||
target.style.height = 'auto';
|
||||
@@ -106,7 +129,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
let showAssetPath = false;
|
||||
const toggleAssetPath = () => (showAssetPath = !showAssetPath);
|
||||
|
||||
let isShowChangeDate = false;
|
||||
@@ -139,7 +161,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
|
||||
<section class="relative p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
|
||||
<div class="flex place-items-center gap-2">
|
||||
<button
|
||||
class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
|
||||
@@ -183,54 +205,71 @@
|
||||
<section class="px-4 py-4 text-sm">
|
||||
<div class="flex h-10 w-full items-center justify-between">
|
||||
<h2>PEOPLE</h2>
|
||||
{#if people.some((person) => person.isHidden)}
|
||||
<div class="flex gap-2">
|
||||
{#if people.some((person) => person.isHidden)}
|
||||
<CircleIconButton
|
||||
title="Show hidden people"
|
||||
icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
|
||||
padding="1"
|
||||
on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
|
||||
/>
|
||||
{/if}
|
||||
<CircleIconButton
|
||||
title="Show hidden people"
|
||||
icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
|
||||
title="Edit people"
|
||||
icon={mdiPencil}
|
||||
padding="1"
|
||||
on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
|
||||
size="20"
|
||||
on:click={() => (showEditFaces = true)}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
{#each people as person (person.id)}
|
||||
<a
|
||||
href="/people/{person.id}?previousRoute={albumId ? `${AppRoute.ALBUMS}/${albumId}` : AppRoute.PHOTOS}"
|
||||
class="w-[90px] {!showingHiddenPeople && person.isHidden ? 'hidden' : ''}"
|
||||
on:click={() => dispatch('close-viewer')}
|
||||
{#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>
|
||||
<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>
|
||||
</section>
|
||||
@@ -589,3 +628,13 @@
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if showEditFaces}
|
||||
<PersonSidePanel
|
||||
assetId={asset.id}
|
||||
on:close={() => {
|
||||
showEditFaces = false;
|
||||
}}
|
||||
on:refresh={handleRefreshPeople}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -8,6 +8,9 @@
|
||||
import { photoZoomState } from '$lib/stores/zoom-image.store';
|
||||
import { isWebCompatibleImage } from '$lib/utils/asset-utils';
|
||||
import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
|
||||
import { photoViewer } from '$lib/stores/assets.store';
|
||||
import { getBoundingBox } from '$lib/utils/people-utils';
|
||||
import { boundingBoxesArray } from '$lib/stores/people.store';
|
||||
|
||||
export let asset: AssetResponseDto;
|
||||
export let element: HTMLDivElement | undefined = undefined;
|
||||
@@ -20,6 +23,13 @@
|
||||
let copyImageToClipboard: (src: string) => Promise<Blob>;
|
||||
let canCopyImagesToClipboard: () => boolean;
|
||||
|
||||
$: if (imgElement) {
|
||||
createZoomImageWheel(imgElement, {
|
||||
maxZoom: 10,
|
||||
wheelZoomRatio: 0.2,
|
||||
});
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
|
||||
// TODO: Move to regular import once the package correctly supports ESM.
|
||||
@@ -29,6 +39,7 @@
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
$boundingBoxesArray = [];
|
||||
abortController?.abort();
|
||||
});
|
||||
|
||||
@@ -105,16 +116,10 @@
|
||||
|
||||
if (state.currentZoom > 1 && isWebCompatibleImage(asset) && !hasZoomed) {
|
||||
hasZoomed = true;
|
||||
|
||||
loadAssetData({ loadOriginal: true });
|
||||
}
|
||||
});
|
||||
|
||||
$: if (imgElement) {
|
||||
createZoomImageWheel(imgElement, {
|
||||
maxZoom: 10,
|
||||
wheelZoomRatio: 0.2,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} on:zoomImage={doZoomImage} />
|
||||
@@ -129,12 +134,19 @@
|
||||
{:then}
|
||||
<div bind:this={imgElement} class="h-full w-full">
|
||||
<img
|
||||
bind:this={$photoViewer}
|
||||
transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
|
||||
src={assetData}
|
||||
alt={asset.id}
|
||||
class="h-full w-full object-contain"
|
||||
draggable="false"
|
||||
/>
|
||||
{#each getBoundingBox($boundingBoxesArray, $photoZoomState, $photoViewer) as boundingbox}
|
||||
<div
|
||||
class="absolute border-solid border-white border-[3px] rounded-lg p-3"
|
||||
style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
{#if hidden}
|
||||
<div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
|
||||
<Icon path={mdiEyeOffOutline} size="2em" class="text-{eyeColor}" />
|
||||
<Icon {title} path={mdiEyeOffOutline} size="2em" class="text-{eyeColor}" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
export let size: string | number = '1em';
|
||||
export let color = 'currentColor';
|
||||
export let path: string;
|
||||
export let title = '';
|
||||
export let title: string | null = null;
|
||||
export let desc = '';
|
||||
export let flipped = false;
|
||||
let className = '';
|
||||
|
||||
246
web/src/lib/components/faces-page/assign-face-side-panel.svelte
Normal file
246
web/src/lib/components/faces-page/assign-face-side-panel.svelte
Normal file
@@ -0,0 +1,246 @@
|
||||
<script lang="ts">
|
||||
import { api, type AssetFaceResponseDto, type PersonResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { linear } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import Icon from '../elements/icon.svelte';
|
||||
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 { handleError } from '$lib/utils/handle-error';
|
||||
import { photoViewer } from '$lib/stores/assets.store';
|
||||
|
||||
export let peopleWithFaces: AssetFaceResponseDto[];
|
||||
export let allPeople: PersonResponseDto[];
|
||||
export let editedPersonIndex: number;
|
||||
|
||||
// loading spinners
|
||||
let isShowLoadingNewPerson = false;
|
||||
let isShowLoadingSearch = false;
|
||||
|
||||
// search people
|
||||
let searchedPeople: PersonResponseDto[] = [];
|
||||
let searchedPeopleCopy: PersonResponseDto[] = [];
|
||||
let searchWord: string;
|
||||
let searchFaces = false;
|
||||
let searchName = '';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
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);
|
||||
|
||||
clearTimeout(timeout);
|
||||
isShowLoadingNewPerson = false;
|
||||
dispatch('createPerson', newFeaturePhoto);
|
||||
};
|
||||
|
||||
const searchPeople = async () => {
|
||||
if ((searchedPeople.length < 20 && searchName.startsWith(searchWord)) || searchName === '') {
|
||||
return;
|
||||
}
|
||||
const timeout = setTimeout(() => (isShowLoadingSearch = true), 100);
|
||||
try {
|
||||
const { data } = await api.searchApi.searchPerson({ name: searchName });
|
||||
searchedPeople = data;
|
||||
searchedPeopleCopy = data;
|
||||
searchWord = searchName;
|
||||
} catch (error) {
|
||||
handleError(error, "Can't search people");
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
|
||||
isShowLoadingSearch = false;
|
||||
};
|
||||
|
||||
$: {
|
||||
searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 10);
|
||||
}
|
||||
|
||||
const initInput = (element: HTMLInputElement) => {
|
||||
element.focus();
|
||||
};
|
||||
</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 dark:bg-immich-dark-bg dark:text-immich-dark-fg"
|
||||
>
|
||||
<div class="flex place-items-center justify-between gap-2">
|
||||
{#if !searchFaces}
|
||||
<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">Select face</p>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
|
||||
title="Search existing person"
|
||||
on:click={() => {
|
||||
searchFaces = true;
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Icon path={mdiMagnify} size="24" />
|
||||
</div>
|
||||
</button>
|
||||
{#if !isShowLoadingNewPerson}
|
||||
<button
|
||||
class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
|
||||
on:click={handleCreatePerson}
|
||||
title="Create new person"
|
||||
>
|
||||
<div>
|
||||
<Icon path={mdiPlus} size="24" />
|
||||
</div>
|
||||
</button>
|
||||
{:else}
|
||||
<div class="flex place-content-center place-items-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<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>
|
||||
<div class="w-full flex">
|
||||
<input
|
||||
class="w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
type="text"
|
||||
placeholder="Name or nickname"
|
||||
bind:value={searchName}
|
||||
on:input={searchPeople}
|
||||
use:initInput
|
||||
/>
|
||||
{#if isShowLoadingSearch}
|
||||
<div>
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
|
||||
on:click={() => (searchFaces = false)}
|
||||
>
|
||||
<div>
|
||||
<Icon path={mdiClose} size="24" />
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="px-4 py-4 text-sm">
|
||||
<h2 class="mb-8 mt-4 uppercase">All people</h2>
|
||||
<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}
|
||||
<div class="w-fit">
|
||||
<button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
|
||||
<div class="relative">
|
||||
<ImageThumbnail
|
||||
curve
|
||||
shadow
|
||||
url={api.getPeopleThumbnailUrl(person.id)}
|
||||
altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
widthStyle="90px"
|
||||
heightStyle="90px"
|
||||
thumbhash={null}
|
||||
hidden={person.isHidden}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
|
||||
{person.name}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
{#each searchedPeople as person (person.id)}
|
||||
{#if person.id !== peopleWithFaces[editedPersonIndex].person?.id}
|
||||
<div class="w-fit">
|
||||
<button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
|
||||
<div class="relative">
|
||||
<ImageThumbnail
|
||||
curve
|
||||
shadow
|
||||
url={api.getPeopleThumbnailUrl(person.id)}
|
||||
altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
widthStyle="90px"
|
||||
heightStyle="90px"
|
||||
thumbhash={null}
|
||||
hidden={person.isHidden}
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -12,23 +12,18 @@
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { goto } from '$app/navigation';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { mdiCallMerge, mdiClose, mdiMagnify, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
|
||||
import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
||||
import { searchNameLocal } from '$lib/utils/person';
|
||||
import PeopleList from './people-list.svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
export let person: PersonResponseDto;
|
||||
let people: PersonResponseDto[] = [];
|
||||
let peopleCopy: PersonResponseDto[] = [];
|
||||
let selectedPeople: PersonResponseDto[] = [];
|
||||
let screenHeight: number;
|
||||
let isShowConfirmation = false;
|
||||
let name = '';
|
||||
let searchWord: string;
|
||||
let isSearchingPeople = false;
|
||||
|
||||
let dispatch = createEventDispatcher();
|
||||
|
||||
$: hasSelection = selectedPeople.length > 0;
|
||||
@@ -39,44 +34,12 @@
|
||||
onMount(async () => {
|
||||
const { data } = await api.personApi.getAllPeople({ withHidden: false });
|
||||
people = data.people;
|
||||
peopleCopy = cloneDeep(people);
|
||||
});
|
||||
|
||||
const onClose = () => {
|
||||
dispatch('go-back');
|
||||
};
|
||||
|
||||
const resetSearch = () => {
|
||||
name = '';
|
||||
people = peopleCopy;
|
||||
};
|
||||
|
||||
const searchPeople = async (force: boolean) => {
|
||||
if (name === '') {
|
||||
people = peopleCopy;
|
||||
return;
|
||||
}
|
||||
if (!force) {
|
||||
if (people.length < 20 && name.startsWith(searchWord)) {
|
||||
people = searchNameLocal(name, peopleCopy, 10);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => (isSearchingPeople = true), 100);
|
||||
try {
|
||||
const { data } = await api.searchApi.searchPerson({ name });
|
||||
people = data;
|
||||
searchWord = name;
|
||||
} catch (error) {
|
||||
handleError(error, "Can't search people");
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
|
||||
isSearchingPeople = false;
|
||||
};
|
||||
|
||||
const handleSwapPeople = () => {
|
||||
[person, selectedPeople[0]] = [selectedPeople[0], person];
|
||||
$page.url.searchParams.set('action', 'merge');
|
||||
@@ -113,7 +76,7 @@
|
||||
});
|
||||
dispatch('merge');
|
||||
} catch (error) {
|
||||
handleError(error, 'Cannot merge faces');
|
||||
handleError(error, 'Cannot merge people');
|
||||
} finally {
|
||||
isShowConfirmation = false;
|
||||
}
|
||||
@@ -131,7 +94,7 @@
|
||||
{#if hasSelection}
|
||||
Selected {selectedPeople.length}
|
||||
{:else}
|
||||
Merge faces
|
||||
Merge people
|
||||
{/if}
|
||||
<div />
|
||||
</svelte:fragment>
|
||||
@@ -151,7 +114,7 @@
|
||||
<section class="bg-immich-bg px-[70px] pt-[100px] dark:bg-immich-dark-bg">
|
||||
<section id="merge-face-selector relative">
|
||||
<div class="mb-10 h-[200px] place-content-center place-items-center">
|
||||
<p class="mb-4 text-center uppercase dark:text-white">Choose matching faces to merge</p>
|
||||
<p class="mb-4 text-center uppercase dark:text-white">Choose matching people to merge</p>
|
||||
|
||||
<div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">
|
||||
{#each selectedPeople as person (person.id)}
|
||||
@@ -178,57 +141,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex w-40 sm:w-48 md:w-96 h-14 rounded-lg bg-gray-100 p-2 dark:bg-gray-700 mb-8 gap-2 place-items-center"
|
||||
>
|
||||
<button on:click={() => searchPeople(true)}>
|
||||
<div class="w-fit">
|
||||
<Icon path={mdiMagnify} size="24" />
|
||||
</div>
|
||||
</button>
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
autofocus
|
||||
class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
|
||||
type="text"
|
||||
placeholder="Search names"
|
||||
bind:value={name}
|
||||
on:input={() => searchPeople(false)}
|
||||
/>
|
||||
{#if name}
|
||||
<button on:click={resetSearch}>
|
||||
<Icon path={mdiClose} />
|
||||
</button>
|
||||
{/if}
|
||||
{#if isSearchingPeople}
|
||||
<div class="flex place-items-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 pt-8 px-8 pb-10 dark:bg-immich-dark-gray"
|
||||
style:max-height={screenHeight - 250 - 250 + 'px'}
|
||||
>
|
||||
<div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
|
||||
{#each unselectedPeople as person (person.id)}
|
||||
<FaceThumbnail {person} on:click={() => onSelect(person)} circle border selectable />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<PeopleList
|
||||
people={unselectedPeople}
|
||||
peopleCopy={unselectedPeople}
|
||||
unselectedPeople={selectedPeople}
|
||||
{screenHeight}
|
||||
on:select={({ detail }) => onSelect(detail)}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{#if isShowConfirmation}
|
||||
<ConfirmDialogue
|
||||
title="Merge faces"
|
||||
title="Merge people"
|
||||
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>
|
||||
<p>Are you sure you want merge these people ?</p></svelte:fragment
|
||||
>
|
||||
</ConfirmDialogue>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
>
|
||||
<div class="relative flex items-center justify-between">
|
||||
<h1 class="truncate px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
Merge faces - {title}
|
||||
Merge People - {title}
|
||||
</h1>
|
||||
<div class="p-2">
|
||||
<CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
|
||||
@@ -108,7 +108,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex px-4 md:px-8 md:pt-4">
|
||||
<h1 class="text-xl text-gray-500 dark:text-gray-300">Are these the same face?</h1>
|
||||
<h1 class="text-xl text-gray-500 dark:text-gray-300">Are these the same person?</h1>
|
||||
</div>
|
||||
<div class="flex px-4 pt-2 md:px-8">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-300">They will be merged together</p>
|
||||
|
||||
@@ -14,12 +14,12 @@
|
||||
export let person: PersonResponseDto;
|
||||
export let preload = false;
|
||||
|
||||
type MenuItemEvent = 'change-name' | 'set-birth-date' | 'merge-faces' | 'hide-face';
|
||||
type MenuItemEvent = 'change-name' | 'set-birth-date' | 'merge-people' | 'hide-person';
|
||||
let dispatch = createEventDispatcher<{
|
||||
'change-name': void;
|
||||
'set-birth-date': void;
|
||||
'merge-faces': void;
|
||||
'hide-face': void;
|
||||
'merge-people': void;
|
||||
'hide-person': void;
|
||||
}>();
|
||||
|
||||
let showVerticalDots = false;
|
||||
@@ -82,10 +82,10 @@
|
||||
{#if showContextMenu}
|
||||
<Portal target="body">
|
||||
<ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
|
||||
<MenuOption on:click={() => onMenuClick('hide-face')} text="Hide face" />
|
||||
<MenuOption on:click={() => onMenuClick('hide-person')} text="Hide Person" />
|
||||
<MenuOption on:click={() => onMenuClick('change-name')} text="Change name" />
|
||||
<MenuOption on:click={() => onMenuClick('set-birth-date')} text="Set date of birth" />
|
||||
<MenuOption on:click={() => onMenuClick('merge-faces')} text="Merge faces" />
|
||||
<MenuOption on:click={() => onMenuClick('merge-people')} text="Merge People" />
|
||||
</ContextMenu>
|
||||
</Portal>
|
||||
{/if}
|
||||
|
||||
106
web/src/lib/components/faces-page/people-list.svelte
Normal file
106
web/src/lib/components/faces-page/people-list.svelte
Normal file
@@ -0,0 +1,106 @@
|
||||
<script lang="ts">
|
||||
import { api, type PersonResponseDto } from '@api';
|
||||
import FaceThumbnail from './face-thumbnail.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import Icon from '../elements/icon.svelte';
|
||||
import { mdiClose, mdiMagnify } from '@mdi/js';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
||||
import { searchNameLocal } from '$lib/utils/person';
|
||||
|
||||
export let screenHeight: number;
|
||||
export let people: PersonResponseDto[];
|
||||
export let peopleCopy: PersonResponseDto[];
|
||||
export let unselectedPeople: PersonResponseDto[];
|
||||
|
||||
let name = '';
|
||||
let searchWord: string;
|
||||
let isSearchingPeople = false;
|
||||
|
||||
let dispatch = createEventDispatcher<{
|
||||
select: PersonResponseDto;
|
||||
}>();
|
||||
|
||||
const resetSearch = () => {
|
||||
name = '';
|
||||
people = peopleCopy;
|
||||
};
|
||||
|
||||
$: {
|
||||
people = peopleCopy.filter(
|
||||
(person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
|
||||
);
|
||||
people = searchNameLocal(name, people, 10);
|
||||
}
|
||||
|
||||
const searchPeople = async (force: boolean) => {
|
||||
if (name === '') {
|
||||
people = peopleCopy;
|
||||
return;
|
||||
}
|
||||
if (!force) {
|
||||
if (people.length < 20 && name.startsWith(searchWord)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => (isSearchingPeople = true), 100);
|
||||
try {
|
||||
const { data } = await api.searchApi.searchPerson({ name });
|
||||
people = data;
|
||||
searchWord = name;
|
||||
} catch (error) {
|
||||
handleError(error, "Can't search people");
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
|
||||
isSearchingPeople = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="flex w-40 sm:w-48 md:w-96 h-14 rounded-lg bg-gray-100 p-2 dark:bg-gray-700 mb-8 gap-2 place-items-center">
|
||||
<button on:click={() => searchPeople(true)}>
|
||||
<div class="w-fit">
|
||||
<Icon path={mdiMagnify} size="24" />
|
||||
</div>
|
||||
</button>
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
autofocus
|
||||
class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
|
||||
type="text"
|
||||
placeholder="Search names"
|
||||
bind:value={name}
|
||||
on:input={() => searchPeople(false)}
|
||||
/>
|
||||
{#if name}
|
||||
<button on:click={resetSearch}>
|
||||
<Icon path={mdiClose} />
|
||||
</button>
|
||||
{/if}
|
||||
{#if isSearchingPeople}
|
||||
<div class="flex place-items-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray"
|
||||
style:max-height={screenHeight - 400 + 'px'}
|
||||
>
|
||||
<div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
|
||||
{#each people as person (person.id)}
|
||||
<FaceThumbnail
|
||||
{person}
|
||||
on:click={() => {
|
||||
dispatch('select', person);
|
||||
}}
|
||||
circle
|
||||
border
|
||||
selectable
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
278
web/src/lib/components/faces-page/person-side-panel.svelte
Normal file
278
web/src/lib/components/faces-page/person-side-panel.svelte
Normal file
@@ -0,0 +1,278 @@
|
||||
<script lang="ts">
|
||||
import { fly } from 'svelte/transition';
|
||||
import { linear } from 'svelte/easing';
|
||||
import { api, type PersonResponseDto, AssetFaceResponseDto } from '@api';
|
||||
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
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 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';
|
||||
|
||||
export let assetId: string;
|
||||
|
||||
// keep track of the changes
|
||||
let numberOfPersonToCreate: string[] = [];
|
||||
let numberOfAssetFaceGenerated: string[] = [];
|
||||
|
||||
// faces
|
||||
let peopleWithFaces: AssetFaceResponseDto[] = [];
|
||||
let selectedPersonToReassign: (PersonResponseDto | null)[];
|
||||
let selectedPersonToCreate: (string | null)[];
|
||||
let editedPersonIndex: number;
|
||||
|
||||
// loading spinners
|
||||
let isShowLoadingDone = false;
|
||||
let isShowLoadingPeople = false;
|
||||
|
||||
// search people
|
||||
let showSeletecFaces = false;
|
||||
let allPeople: PersonResponseDto[] = [];
|
||||
|
||||
// timers
|
||||
let loaderLoadingDoneTimeout: NodeJS.Timeout;
|
||||
let automaticRefreshTimeout: NodeJS.Timeout;
|
||||
|
||||
const { onPersonThumbnail } = websocketStore;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Reset value
|
||||
$onPersonThumbnail = '';
|
||||
|
||||
$: {
|
||||
if ($onPersonThumbnail) {
|
||||
numberOfAssetFaceGenerated.push($onPersonThumbnail);
|
||||
if (
|
||||
isEqual(numberOfAssetFaceGenerated, numberOfPersonToCreate) &&
|
||||
loaderLoadingDoneTimeout &&
|
||||
automaticRefreshTimeout &&
|
||||
selectedPersonToCreate.filter((person) => person !== null).length === numberOfPersonToCreate.length
|
||||
) {
|
||||
clearTimeout(loaderLoadingDoneTimeout);
|
||||
clearTimeout(automaticRefreshTimeout);
|
||||
dispatch('refresh');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
const timeout = setTimeout(() => (isShowLoadingPeople = true), 100);
|
||||
try {
|
||||
const { data } = await api.personApi.getAllPeople({ withHidden: true });
|
||||
allPeople = data.people;
|
||||
const result = await api.faceApi.getFaces({ id: assetId });
|
||||
peopleWithFaces = result.data;
|
||||
selectedPersonToCreate = new Array<string | null>(peopleWithFaces.length);
|
||||
selectedPersonToReassign = new Array<PersonResponseDto | null>(peopleWithFaces.length);
|
||||
} catch (error) {
|
||||
handleError(error, "Can't get faces");
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
isShowLoadingPeople = false;
|
||||
});
|
||||
|
||||
const isEqual = (a: string[], b: string[]): boolean => {
|
||||
return b.every((valueB) => a.includes(valueB));
|
||||
};
|
||||
|
||||
const handleBackButton = () => {
|
||||
dispatch('close');
|
||||
};
|
||||
|
||||
const handleReset = (index: number) => {
|
||||
if (selectedPersonToReassign[index]) {
|
||||
selectedPersonToReassign[index] = null;
|
||||
}
|
||||
if (selectedPersonToCreate[index]) {
|
||||
selectedPersonToCreate[index] = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditFaces = async () => {
|
||||
loaderLoadingDoneTimeout = setTimeout(() => (isShowLoadingDone = true), 100);
|
||||
const numberOfChanges =
|
||||
selectedPersonToCreate.filter((person) => person !== null).length +
|
||||
selectedPersonToReassign.filter((person) => person !== null).length;
|
||||
if (numberOfChanges > 0) {
|
||||
try {
|
||||
for (let i = 0; i < peopleWithFaces.length; i++) {
|
||||
const personId = selectedPersonToReassign[i]?.id;
|
||||
|
||||
if (personId) {
|
||||
await api.faceApi.reassignFacesById({
|
||||
id: personId,
|
||||
faceDto: { id: peopleWithFaces[i].id },
|
||||
});
|
||||
} else if (selectedPersonToCreate[i]) {
|
||||
const { data } = await api.personApi.createPerson();
|
||||
numberOfPersonToCreate.push(data.id);
|
||||
await api.faceApi.reassignFacesById({
|
||||
id: data.id,
|
||||
faceDto: { id: peopleWithFaces[i].id },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
notificationController.show({
|
||||
message: `Edited ${numberOfChanges} ${numberOfChanges > 1 ? 'people' : 'person'}`,
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
} catch (error) {
|
||||
handleError(error, "Can't apply changes");
|
||||
}
|
||||
}
|
||||
|
||||
isShowLoadingDone = false;
|
||||
if (numberOfPersonToCreate.length === 0) {
|
||||
clearTimeout(loaderLoadingDoneTimeout);
|
||||
dispatch('refresh');
|
||||
} else {
|
||||
automaticRefreshTimeout = setTimeout(() => dispatch('refresh'), 15000);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreatePerson = (newFeaturePhoto: string | null) => {
|
||||
const personToUpdate = peopleWithFaces.find((person) => person.id === peopleWithFaces[editedPersonIndex].id);
|
||||
if (newFeaturePhoto && personToUpdate) {
|
||||
selectedPersonToCreate[peopleWithFaces.indexOf(personToUpdate)] = newFeaturePhoto;
|
||||
}
|
||||
showSeletecFaces = false;
|
||||
};
|
||||
|
||||
const handleReassignFace = (person: PersonResponseDto | null) => {
|
||||
if (person) {
|
||||
selectedPersonToReassign[editedPersonIndex] = person;
|
||||
showSeletecFaces = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handlePersonPicker = async (index: number) => {
|
||||
editedPersonIndex = index;
|
||||
showSeletecFaces = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<section
|
||||
transition:fly={{ x: 360, duration: 100, easing: linear }}
|
||||
class="absolute top-0 z-[2000] h-full w-[360px] overflow-x-hidden p-2 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">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>
|
||||
{:else}
|
||||
<LoadingSpinner />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-4 text-sm">
|
||||
<div class="mt-4 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}
|
||||
<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={selectedPersonToCreate[index] ||
|
||||
api.getPeopleThumbnailUrl(selectedPersonToReassign[index]?.id || face.person.id)}
|
||||
altText={selectedPersonToReassign[index]
|
||||
? selectedPersonToReassign[index]?.name || ''
|
||||
: selectedPersonToCreate[index]
|
||||
? 'new person'
|
||||
: getPersonNameWithHiddenValue(face.person?.name, face.person?.isHidden)}
|
||||
title={selectedPersonToReassign[index]
|
||||
? selectedPersonToReassign[index]?.name || ''
|
||||
: selectedPersonToCreate[index]
|
||||
? 'new person'
|
||||
: getPersonNameWithHiddenValue(face.person?.name, face.person?.isHidden)}
|
||||
widthStyle="90px"
|
||||
heightStyle="90px"
|
||||
thumbhash={null}
|
||||
hidden={selectedPersonToReassign[index]
|
||||
? selectedPersonToReassign[index]?.isHidden
|
||||
: selectedPersonToCreate[index]
|
||||
? false
|
||||
: face.person?.isHidden}
|
||||
/>
|
||||
</div>
|
||||
{#if !selectedPersonToCreate[index]}
|
||||
<p class="relative mt-1 truncate font-medium" title={face.person?.name}>
|
||||
{#if selectedPersonToReassign[index]?.id}
|
||||
{selectedPersonToReassign[index]?.name}
|
||||
{:else}
|
||||
{face.person?.name}
|
||||
{/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} />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{#if showSeletecFaces}
|
||||
<AssignFaceSidePanel
|
||||
{peopleWithFaces}
|
||||
{allPeople}
|
||||
{editedPersonIndex}
|
||||
on:close={() => (showSeletecFaces = false)}
|
||||
on:createPerson={(event) => handleCreatePerson(event.detail)}
|
||||
on:reassign={(event) => handleReassignFace(event.detail)}
|
||||
/>
|
||||
{/if}
|
||||
@@ -22,12 +22,12 @@
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<CircleIconButton icon={mdiClose} on:click={() => dispatch('closeClick')} />
|
||||
<p class="ml-4 hidden sm:block">Show & hide faces</p>
|
||||
<p class="ml-4 hidden sm:block">Show & hide people</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<div class="flex items-center md:mr-8">
|
||||
<CircleIconButton
|
||||
title="Reset faces visibility"
|
||||
title="Reset people visibility"
|
||||
icon={mdiRestart}
|
||||
on:click={() => dispatch('reset-visibility')}
|
||||
/>
|
||||
|
||||
190
web/src/lib/components/faces-page/unmerge-face-selector.svelte
Normal file
190
web/src/lib/components/faces-page/unmerge-face-selector.svelte
Normal file
@@ -0,0 +1,190 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import FaceThumbnail from './face-thumbnail.svelte';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { api, AssetFaceUpdateItem, type PersonResponseDto } from '@api';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import { mdiPlus, mdiMerge } from '@mdi/js';
|
||||
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { notificationController, NotificationType } from '../shared-components/notification/notification';
|
||||
import PeopleList from './people-list.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
|
||||
export let assetIds: string[];
|
||||
export let personAssets: PersonResponseDto;
|
||||
|
||||
let people: PersonResponseDto[] = [];
|
||||
let selectedPerson: PersonResponseDto | null = null;
|
||||
let disableButtons = false;
|
||||
let showLoadingSpinnerCreate = false;
|
||||
let showLoadingSpinnerReassign = false;
|
||||
let hasSelection = false;
|
||||
let screenHeight: number;
|
||||
|
||||
$: unselectedPeople = selectedPerson
|
||||
? people.filter((person) => selectedPerson && person.id !== selectedPerson.id && personAssets.id !== person.id)
|
||||
: people;
|
||||
|
||||
let dispatch = createEventDispatcher();
|
||||
|
||||
const selectedPeople: AssetFaceUpdateItem[] = [];
|
||||
|
||||
for (const assetId of assetIds) {
|
||||
selectedPeople.push({ assetId, personId: personAssets.id });
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
const { data } = await api.personApi.getAllPeople({ withHidden: false });
|
||||
people = data.people;
|
||||
});
|
||||
|
||||
const onClose = () => {
|
||||
dispatch('close');
|
||||
};
|
||||
|
||||
const handleSelectedPerson = (person: PersonResponseDto) => {
|
||||
if (selectedPerson && selectedPerson.id === person.id) {
|
||||
handleRemoveSelectedPerson();
|
||||
return;
|
||||
}
|
||||
selectedPerson = person;
|
||||
hasSelection = true;
|
||||
};
|
||||
|
||||
const handleRemoveSelectedPerson = () => {
|
||||
selectedPerson = null;
|
||||
hasSelection = false;
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
const timeout = setTimeout(() => (showLoadingSpinnerCreate = true), 100);
|
||||
|
||||
try {
|
||||
disableButtons = true;
|
||||
const { data } = await api.personApi.createPerson();
|
||||
await api.personApi.reassignFaces({
|
||||
id: data.id,
|
||||
assetFaceUpdateDto: { data: selectedPeople },
|
||||
});
|
||||
|
||||
notificationController.show({
|
||||
message: `Re-assigned ${assetIds.length} asset${assetIds.length > 1 ? 's' : ''} to a new person`,
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to reassign assets to a new person');
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
|
||||
showLoadingSpinnerCreate = false;
|
||||
dispatch('confirm');
|
||||
};
|
||||
|
||||
const handleReassign = async () => {
|
||||
const timeout = setTimeout(() => (showLoadingSpinnerReassign = true), 100);
|
||||
try {
|
||||
disableButtons = true;
|
||||
if (selectedPerson) {
|
||||
await api.personApi.reassignFaces({
|
||||
id: selectedPerson.id,
|
||||
assetFaceUpdateDto: { data: selectedPeople },
|
||||
});
|
||||
notificationController.show({
|
||||
message: `Re-assigned ${assetIds.length} asset${assetIds.length > 1 ? 's' : ''} to ${
|
||||
selectedPerson.name || 'an existing person'
|
||||
}`,
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, `Unable to reassign assets to ${selectedPerson?.name || 'an existing person'}`);
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
|
||||
showLoadingSpinnerReassign = false;
|
||||
dispatch('confirm');
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerHeight={screenHeight} />
|
||||
|
||||
<section
|
||||
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
|
||||
class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
|
||||
>
|
||||
<ControlAppBar on:close-button-click={onClose}>
|
||||
<svelte:fragment slot="leading">
|
||||
<slot name="header" />
|
||||
<div />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="trailing">
|
||||
<div class="flex gap-4">
|
||||
<Button
|
||||
title={'Assign selected assets to a new person'}
|
||||
size={'sm'}
|
||||
disabled={disableButtons || hasSelection}
|
||||
on:click={() => {
|
||||
handleCreate();
|
||||
}}
|
||||
>
|
||||
{#if !showLoadingSpinnerCreate}
|
||||
<Icon path={mdiPlus} size={18} />
|
||||
{:else}
|
||||
<LoadingSpinner />
|
||||
{/if}
|
||||
<span class="ml-2"> Create new Person</span></Button
|
||||
>
|
||||
<Button
|
||||
size={'sm'}
|
||||
title={'Assign selected assets to an existing person'}
|
||||
disabled={disableButtons || !hasSelection}
|
||||
on:click={() => {
|
||||
handleReassign();
|
||||
}}
|
||||
>
|
||||
{#if !showLoadingSpinnerReassign}
|
||||
<div>
|
||||
<Icon path={mdiMerge} size={18} class="rotate-180" />
|
||||
</div>
|
||||
{:else}
|
||||
<LoadingSpinner />
|
||||
{/if}
|
||||
<span class="ml-2"> Reassign</span></Button
|
||||
>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
<slot name="merge" />
|
||||
<section class="bg-immich-bg px-[70px] pt-[100px] dark:bg-immich-dark-bg">
|
||||
<section id="merge-face-selector relative">
|
||||
{#if selectedPerson !== null}
|
||||
<div class="mb-10 h-[200px] place-content-center place-items-center">
|
||||
<p class="mb-4 text-center uppercase dark:text-white">Choose matching faces to re assign</p>
|
||||
|
||||
<div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">
|
||||
<FaceThumbnail
|
||||
person={selectedPerson}
|
||||
border
|
||||
circle
|
||||
selectable
|
||||
thumbnailSize={180}
|
||||
on:click={handleRemoveSelectedPerson}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<PeopleList
|
||||
people={unselectedPeople}
|
||||
peopleCopy={unselectedPeople}
|
||||
unselectedPeople={selectedPerson ? [selectedPerson, personAssets] : [personAssets]}
|
||||
{screenHeight}
|
||||
on:select={({ detail }) => handleSelectedPerson(detail)}
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@@ -58,6 +58,8 @@ interface TrashAsset {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const photoViewer = writable<HTMLImageElement | null>(null);
|
||||
|
||||
type PendingChange = AddAsset | DeleteAsset | TrashAsset;
|
||||
|
||||
export class AssetStore {
|
||||
|
||||
12
web/src/lib/stores/people.store.ts
Normal file
12
web/src/lib/stores/people.store.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export interface Faces {
|
||||
imageHeight: number;
|
||||
imageWidth: number;
|
||||
boundingBoxX1: number;
|
||||
boundingBoxX2: number;
|
||||
boundingBoxY1: number;
|
||||
boundingBoxY2: number;
|
||||
}
|
||||
|
||||
export const boundingBoxesArray = writable<Faces[]>([]);
|
||||
71
web/src/lib/utils/people-utils.ts
Normal file
71
web/src/lib/utils/people-utils.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import type { Faces } from '$lib/stores/people.store';
|
||||
import type { ZoomImageWheelState } from '@zoom-image/core';
|
||||
|
||||
const getContainedSize = (img: HTMLImageElement): { width: number; height: number } => {
|
||||
const ratio = img.naturalWidth / img.naturalHeight;
|
||||
let width = img.height * ratio;
|
||||
let height = img.height;
|
||||
if (width > img.width) {
|
||||
width = img.width;
|
||||
height = img.width / ratio;
|
||||
}
|
||||
return { width, height };
|
||||
};
|
||||
|
||||
export interface boundingBox {
|
||||
top: number;
|
||||
left: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export const getBoundingBox = (
|
||||
faces: Faces[],
|
||||
zoom: ZoomImageWheelState,
|
||||
photoViewer: HTMLImageElement | null,
|
||||
): boundingBox[] => {
|
||||
const boxes: boundingBox[] = [];
|
||||
|
||||
if (photoViewer === null) {
|
||||
return boxes;
|
||||
}
|
||||
const clientHeight = photoViewer.clientHeight;
|
||||
const clientWidth = photoViewer.clientWidth;
|
||||
|
||||
const { width, height } = getContainedSize(photoViewer);
|
||||
|
||||
for (const face of faces) {
|
||||
/*
|
||||
*
|
||||
* Create the coordinates of the box based on the displayed image.
|
||||
* The coordinates must take into account margins due to the 'object-fit: contain;' css property of the photo-viewer.
|
||||
*
|
||||
*/
|
||||
const coordinates = {
|
||||
x1:
|
||||
(width / face.imageWidth) * zoom.currentZoom * face.boundingBoxX1 +
|
||||
((clientWidth - width) / 2) * zoom.currentZoom +
|
||||
zoom.currentPositionX,
|
||||
x2:
|
||||
(width / face.imageWidth) * zoom.currentZoom * face.boundingBoxX2 +
|
||||
((clientWidth - width) / 2) * zoom.currentZoom +
|
||||
zoom.currentPositionX,
|
||||
y1:
|
||||
(height / face.imageHeight) * zoom.currentZoom * face.boundingBoxY1 +
|
||||
((clientHeight - height) / 2) * zoom.currentZoom +
|
||||
zoom.currentPositionY,
|
||||
y2:
|
||||
(height / face.imageHeight) * zoom.currentZoom * face.boundingBoxY2 +
|
||||
((clientHeight - height) / 2) * zoom.currentZoom +
|
||||
zoom.currentPositionY,
|
||||
};
|
||||
|
||||
boxes.push({
|
||||
top: Math.round(coordinates.y1),
|
||||
left: Math.round(coordinates.x1),
|
||||
width: Math.round(coordinates.x2 - coordinates.x1),
|
||||
height: Math.round(coordinates.y2 - coordinates.y1),
|
||||
});
|
||||
}
|
||||
return boxes;
|
||||
};
|
||||
@@ -30,3 +30,7 @@ export const searchNameLocal = (
|
||||
})
|
||||
.slice(0, slice);
|
||||
};
|
||||
|
||||
export const getPersonNameWithHiddenValue = (name: string, isHidden: boolean) => {
|
||||
return `${name ? name + (isHidden ? ' ' : '') : ''}${isHidden ? '(hidden)' : ''}`;
|
||||
};
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
// trigger reactivity
|
||||
people = people;
|
||||
|
||||
// Reset variables used on the "Show & hide faces" modal
|
||||
// Reset variables used on the "Show & hide people" modal
|
||||
showLoadingSpinner = false;
|
||||
selectHidden = false;
|
||||
toggleVisibility = false;
|
||||
@@ -145,13 +145,13 @@
|
||||
`Unable to change the visibility for ${changed.length} ${changed.length <= 1 ? 'person' : 'people'}`,
|
||||
);
|
||||
}
|
||||
// Reset variables used on the "Show & hide faces" modal
|
||||
// Reset variables used on the "Show & hide people" modal
|
||||
showLoadingSpinner = false;
|
||||
selectHidden = false;
|
||||
toggleVisibility = false;
|
||||
};
|
||||
|
||||
const handleMergeSameFace = async (response: [PersonResponseDto, PersonResponseDto]) => {
|
||||
const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
|
||||
const [personToMerge, personToBeMergedIn] = response;
|
||||
showMergeModal = false;
|
||||
|
||||
@@ -167,7 +167,7 @@
|
||||
people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
|
||||
|
||||
notificationController.show({
|
||||
message: 'Merge faces succesfully',
|
||||
message: 'Merge people succesfully',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
} catch (error) {
|
||||
@@ -213,7 +213,7 @@
|
||||
edittingPerson = detail;
|
||||
};
|
||||
|
||||
const handleHideFace = async (detail: PersonResponseDto) => {
|
||||
const handleHidePerson = async (detail: PersonResponseDto) => {
|
||||
try {
|
||||
const { data: updatedPerson } = await api.personApi.updatePerson({
|
||||
id: detail.id,
|
||||
@@ -244,7 +244,7 @@
|
||||
}
|
||||
};
|
||||
|
||||
const handleMergeFaces = (detail: PersonResponseDto) => {
|
||||
const handleMergePeople = (detail: PersonResponseDto) => {
|
||||
goto(`${AppRoute.PEOPLE}/${detail.id}?action=merge&previousRoute=${AppRoute.PEOPLE}`);
|
||||
};
|
||||
|
||||
@@ -352,7 +352,7 @@
|
||||
{potentialMergePeople}
|
||||
on:close={() => (showMergeModal = false)}
|
||||
on:reject={() => changeName()}
|
||||
on:confirm={(event) => handleMergeSameFace(event.detail)}
|
||||
on:confirm={(event) => handleMergeSamePerson(event.detail)}
|
||||
/>
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
@@ -363,7 +363,7 @@
|
||||
<IconButton on:click={() => (selectHidden = !selectHidden)}>
|
||||
<div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
|
||||
<Icon path={mdiEyeOutline} size="18" />
|
||||
<p class="ml-2">Show & hide faces</p>
|
||||
<p class="ml-2">Show & hide people</p>
|
||||
</div>
|
||||
</IconButton>
|
||||
{/if}
|
||||
@@ -379,8 +379,8 @@
|
||||
preload={idx < 20}
|
||||
on:change-name={() => handleChangeName(person)}
|
||||
on:set-birth-date={() => handleSetBirthDate(person)}
|
||||
on:merge-faces={() => handleMergeFaces(person)}
|
||||
on:hide-face={() => handleHideFace(person)}
|
||||
on:merge-people={() => handleMergePeople(person)}
|
||||
on:hide-person={() => handleHidePerson(person)}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
|
||||
import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
|
||||
import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
|
||||
import UnMergeFaceSelector from '$lib/components/faces-page/unmerge-face-selector.svelte';
|
||||
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
|
||||
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
|
||||
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
|
||||
@@ -46,10 +47,11 @@
|
||||
|
||||
enum ViewMode {
|
||||
VIEW_ASSETS = 'view-assets',
|
||||
SELECT_FACE = 'select-face',
|
||||
MERGE_FACES = 'merge-faces',
|
||||
SELECT_PERSON = 'select-person',
|
||||
MERGE_PEOPLE = 'merge-people',
|
||||
SUGGEST_MERGE = 'suggest-merge',
|
||||
BIRTH_DATE = 'birth-date',
|
||||
UNASSIGN_ASSETS = 'unassign-faces',
|
||||
}
|
||||
|
||||
let assetStore = new AssetStore({
|
||||
@@ -124,7 +126,7 @@
|
||||
previousRoute = getPreviousRoute;
|
||||
}
|
||||
if (action == 'merge') {
|
||||
viewMode = ViewMode.MERGE_FACES;
|
||||
viewMode = ViewMode.MERGE_PEOPLE;
|
||||
}
|
||||
});
|
||||
const handleEscape = () => {
|
||||
@@ -155,7 +157,17 @@
|
||||
}
|
||||
});
|
||||
|
||||
const toggleHideFace = async () => {
|
||||
const handleUnmerge = () => {
|
||||
$assetStore.removeAssets(Array.from($selectedAssets).map((a) => a.id));
|
||||
assetInteractionStore.clearMultiselect();
|
||||
viewMode = ViewMode.VIEW_ASSETS;
|
||||
};
|
||||
|
||||
const handleReassignAssets = () => {
|
||||
viewMode = ViewMode.UNASSIGN_ASSETS;
|
||||
};
|
||||
|
||||
const toggleHidePerson = async () => {
|
||||
try {
|
||||
await api.personApi.updatePerson({
|
||||
id: data.person.id,
|
||||
@@ -179,7 +191,7 @@
|
||||
};
|
||||
|
||||
const handleSelectFeaturePhoto = async (asset: AssetResponseDto) => {
|
||||
if (viewMode !== ViewMode.SELECT_FACE) {
|
||||
if (viewMode !== ViewMode.SELECT_PERSON) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -202,7 +214,7 @@
|
||||
}
|
||||
};
|
||||
|
||||
const handleMergeSameFace = async (response: [PersonResponseDto, PersonResponseDto]) => {
|
||||
const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
|
||||
const [personToMerge, personToBeMergedIn] = response;
|
||||
viewMode = ViewMode.VIEW_ASSETS;
|
||||
isEditingName = false;
|
||||
@@ -212,7 +224,7 @@
|
||||
mergePersonDto: { ids: [personToMerge.id] },
|
||||
});
|
||||
notificationController.show({
|
||||
message: 'Merge faces succesfully',
|
||||
message: 'Merge people succesfully',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
|
||||
@@ -333,6 +345,15 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if viewMode === ViewMode.UNASSIGN_ASSETS}
|
||||
<UnMergeFaceSelector
|
||||
assetIds={Array.from($selectedAssets).map((a) => a.id)}
|
||||
personAssets={data.person}
|
||||
on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
|
||||
on:confirm={handleUnmerge}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if viewMode === ViewMode.SUGGEST_MERGE}
|
||||
<MergeSuggestionModal
|
||||
{personMerge1}
|
||||
@@ -340,7 +361,7 @@
|
||||
{potentialMergePeople}
|
||||
on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
|
||||
on:reject={() => changeName()}
|
||||
on:confirm={(event) => handleMergeSameFace(event.detail)}
|
||||
on:confirm={(event) => handleMergeSamePerson(event.detail)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -352,7 +373,7 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if viewMode === ViewMode.MERGE_FACES}
|
||||
{#if viewMode === ViewMode.MERGE_PEOPLE}
|
||||
<MergeFaceSelector person={data.person} on:go-back={handleGoBack} on:merge={handleMerge} />
|
||||
{/if}
|
||||
|
||||
@@ -370,6 +391,7 @@
|
||||
<DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
|
||||
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
|
||||
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
|
||||
<MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
|
||||
<ChangeDate menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
</AssetSelectContextMenu>
|
||||
@@ -379,16 +401,19 @@
|
||||
<ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close-button-click={() => goto(previousRoute)}>
|
||||
<svelte:fragment slot="trailing">
|
||||
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
|
||||
<MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_FACE)} />
|
||||
<MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_PERSON)} />
|
||||
<MenuOption text="Set date of birth" on:click={() => (viewMode = ViewMode.BIRTH_DATE)} />
|
||||
<MenuOption text="Merge face" on:click={() => (viewMode = ViewMode.MERGE_FACES)} />
|
||||
<MenuOption text={data.person.isHidden ? 'Unhide face' : 'Hide face'} on:click={() => toggleHideFace()} />
|
||||
<MenuOption text="Merge person" on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)} />
|
||||
<MenuOption
|
||||
text={data.person.isHidden ? 'Unhide person' : 'Hide person'}
|
||||
on:click={() => toggleHidePerson()}
|
||||
/>
|
||||
</AssetSelectContextMenu>
|
||||
</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
{/if}
|
||||
|
||||
{#if viewMode === ViewMode.SELECT_FACE}
|
||||
{#if viewMode === ViewMode.SELECT_PERSON}
|
||||
<ControlAppBar on:close-button-click={() => (viewMode = ViewMode.VIEW_ASSETS)}>
|
||||
<svelte:fragment slot="leading">Select feature photo</svelte:fragment>
|
||||
</ControlAppBar>
|
||||
@@ -401,13 +426,13 @@
|
||||
<AssetGrid
|
||||
{assetStore}
|
||||
{assetInteractionStore}
|
||||
isSelectionMode={viewMode === ViewMode.SELECT_FACE}
|
||||
singleSelect={viewMode === ViewMode.SELECT_FACE}
|
||||
isSelectionMode={viewMode === ViewMode.SELECT_PERSON}
|
||||
singleSelect={viewMode === ViewMode.SELECT_PERSON}
|
||||
on:select={({ detail: asset }) => handleSelectFeaturePhoto(asset)}
|
||||
on:escape={handleEscape}
|
||||
>
|
||||
{#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
|
||||
<!-- Face information block -->
|
||||
<!-- Person information block -->
|
||||
<div
|
||||
role="button"
|
||||
class="relative w-fit p-4 sm:px-6"
|
||||
|
||||
Reference in New Issue
Block a user