aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/DocumentTypes.ts1
-rw-r--r--src/client/documents/Documents.ts4
-rw-r--r--src/client/views/DashboardView.tsx1
-rw-r--r--src/client/views/Main.tsx3
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx3
-rw-r--r--src/client/views/collections/CollectionSubView.tsx1
-rw-r--r--src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss24
-rw-r--r--src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx113
-rw-r--r--src/client/views/search/FaceRecognitionHandler.tsx34
9 files changed, 123 insertions, 61 deletions
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 49df943d8..b055546fc 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -18,6 +18,7 @@ export enum DocumentType {
SEARCH = 'search', // search query
IMAGEGROUPER = 'imagegrouper',
FACECOLLECTION = 'facecollection',
+ UFACE = 'uniqueface', // unique face collection doc
LABEL = 'label', // simple text label
BUTTON = 'button', // onClick button
WEBCAM = 'webcam', // webcam
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index c0e4e961c..c2211fb80 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -795,6 +795,10 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.FACECOLLECTION), undefined, options);
}
+ export function UniqeFaceDocument(options: DocumentOptions = {}) {
+ return InstanceFromProto(Prototypes.get(DocumentType.UFACE), undefined, options);
+ }
+
export function LoadingDocument(file: File | string, options: DocumentOptions) {
return InstanceFromProto(Prototypes.get(DocumentType.LOADING), undefined, { _height: 150, _width: 200, title: typeof file === 'string' ? file : file.name, ...options }, undefined, '');
}
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 4616e15e5..33e905a54 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -432,6 +432,7 @@ export class DashboardView extends ObservableReactComponent<object> {
dashboardDoc.myOverlayDocs = new List<Doc>();
dashboardDoc[DocData].myPublishedDocs = new List<Doc>();
dashboardDoc[DocData].myTagCollections = new List<Doc>();
+ dashboardDoc[DocData].myUniqueFaces = new List<Doc>();
dashboardDoc[DocData].myTrails = DashboardView.SetupDashboardTrails(dashboardDoc);
dashboardDoc[DocData].myCalendars = DashboardView.SetupDashboardCalendars(dashboardDoc);
// open this new dashboard
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 023324881..f7cd0e925 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -63,7 +63,7 @@ import { PresBox, PresElementBox } from './nodes/trails';
import { SearchBox } from './search/SearchBox';
import { ImageLabelBox } from './collections/collectionFreeForm/ImageLabelBox';
import { FaceRecognitionHandler } from './search/FaceRecognitionHandler';
-import { FaceCollectionBox } from './collections/collectionFreeForm/FaceCollectionBox';
+import { FaceCollectionBox, UniqueFaceBox } from './collections/collectionFreeForm/FaceCollectionBox';
import { Node } from 'prosemirror-model';
import { EditorView } from 'prosemirror-view';
@@ -140,6 +140,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
SearchBox,
ImageLabelBox,
FaceCollectionBox,
+ UniqueFaceBox,
FunctionPlotBox,
InkingStroke,
LinkBox,
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 3f8aee792..6402ef16c 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -98,7 +98,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
}
// are we stacking or masonry?
@computed get isStackingView() {
- return (this._props.type_collection ?? this.layoutDoc._type_collection) === CollectionViewType.Stacking;
+ return (this._props.type_collection ?? this.layoutDoc._type_collection) !== CollectionViewType.Masonry;
}
// this is the number of StackingViewFieldColumns that we have
@computed get numGroupColumns() {
@@ -355,6 +355,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
childFilters={this.childDocFilters}
hideDecorationTitle={this._props.childHideDecorationTitle}
hideResizeHandles={this._props.childHideResizeHandles}
+ hideDecorations={this._props.childHideDecorations}
childFiltersByRanges={this.childDocRangeFilters}
searchFilterDocs={this.searchFilterDocs}
xPadding={NumCast(this.layoutDoc._childXPadding, this._props.childXPadding)}
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 5782d407e..6aca8f2ca 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -45,6 +45,7 @@ export interface CollectionViewProps extends React.PropsWithChildren<FieldViewPr
childLayoutTemplate?: () => Doc | undefined; // specify a layout Doc template to use for children of the collection
childHideDecorationTitle?: boolean;
childHideResizeHandles?: boolean;
+ childHideDecorations?: boolean;
childDragAction?: dropActionType;
childXPadding?: number;
childYPadding?: number;
diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
index 480d109c8..86120f966 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
@@ -1,10 +1,11 @@
.face-document-item {
- background: #555555;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
- border-radius: 10px;
+ border-radius: inherit;
position: relative;
+ width: 100%;
+ height: 100%;
h1 {
color: white;
@@ -14,14 +15,31 @@
.face-collection-buttons {
position: absolute;
- top: 10px;
+ top: 0px;
right: 10px;
}
+ .face-collection-toggle {
+ position: absolute;
+ top: 0px;
+ left: 10px;
+ }
+ .face-document-top {
+ position: absolute;
+ top: 0;
+ margin: auto;
+ width: 100%;
+ left: 0;
+ }
.face-document-image-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: absolute;
+ top: 75px;
+ height: calc(100% - 75px);
.image-wrapper {
position: relative;
diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
index 1cc1f59dc..6a0d51e32 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
@@ -6,23 +6,21 @@ import 'ldrs/ring';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
-import { setupMoveUpEvents } from '../../../../ClientUtils';
-import { Utils, emptyFunction } from '../../../../Utils';
+import { lightOrDark, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
import { Doc, Opt } from '../../../../fields/Doc';
-import { Id } from '../../../../fields/FieldSymbols';
import { List } from '../../../../fields/List';
-import { ImageCast } from '../../../../fields/Types';
+import { ImageCast, StrCast } from '../../../../fields/Types';
import { DocumentType } from '../../../documents/DocumentTypes';
import { Docs } from '../../../documents/Documents';
import { DragManager } from '../../../util/DragManager';
import { dropActionType } from '../../../util/DropActionTypes';
-import { SnappingManager } from '../../../util/SnappingManager';
import { undoable } from '../../../util/UndoManager';
import { ViewBoxBaseComponent } from '../../DocComponent';
-import { ObservableReactComponent } from '../../ObservableReactComponent';
import { DocumentView } from '../../nodes/DocumentView';
import { FieldView, FieldViewProps } from '../../nodes/FieldView';
import { FaceRecognitionHandler } from '../../search/FaceRecognitionHandler';
+import { CollectionStackingView } from '../CollectionStackingView';
import './FaceCollectionBox.scss';
import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
@@ -31,31 +29,29 @@ import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
* unique face in turn displays the set of images that correspond to the face.
*/
-interface UniqueFaceProps {
- faceDoc: Doc;
-}
-
/**
- * React component for rendering a unique face and its collection of image Docs.
+ * Viewer for unique face Doc collections.
*
* This both displays a collection of images corresponding tp a unique face, and
* allows for editing the face collection by removing an image, or drag-and-dropping
* an image that was not recognized.
*/
@observer
-export class UniqueFaceView extends ObservableReactComponent<UniqueFaceProps> {
+export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
+ public static LayoutString(fieldKey: string) {
+ return FieldView.LayoutString(UniqueFaceBox, fieldKey);
+ }
private _dropDisposer?: DragManager.DragDropDisposer;
+ private _oldWheel: HTMLElement | null = null;
- constructor(props: UniqueFaceProps) {
+ constructor(props: FieldViewProps) {
super(props);
makeObservable(this);
}
- @observable _displayImages: boolean = true;
-
protected createDropTarget = (ele: HTMLDivElement) => {
this._dropDisposer?.();
- ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this._props.faceDoc));
+ ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this._props.Document));
};
protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean {
@@ -63,12 +59,12 @@ export class UniqueFaceView extends ObservableReactComponent<UniqueFaceProps> {
?.filter(doc => doc.type === DocumentType.IMG)
.forEach(imgDoc => {
// If the current Face Document has no faces, and the doc has more than one face descriptor, don't let the user add the document first. Or should we just use the first face ?
- if (FaceRecognitionHandler.UniqueFaceDescriptors(this._props.faceDoc).length === 0 && FaceRecognitionHandler.ImageDocFaceDescriptors(imgDoc).length > 1) {
+ if (FaceRecognitionHandler.UniqueFaceDescriptors(this._props.Document).length === 0 && FaceRecognitionHandler.ImageDocFaceDescriptors(imgDoc).length > 1) {
alert('Cannot add a document with multiple faces as the first item!');
} else {
// Loop through the documents' face descriptors and choose the face in the iage with the smallest distance (most similar to the face colleciton)
- const faceDescriptorsAsFloat32Array = FaceRecognitionHandler.UniqueFaceDescriptors(this._props.faceDoc).map(fd => new Float32Array(Array.from(fd)));
- const labeledFaceDescriptor = new faceapi.LabeledFaceDescriptors(FaceRecognitionHandler.UniqueFaceLabel(this._props.faceDoc), faceDescriptorsAsFloat32Array);
+ const faceDescriptorsAsFloat32Array = FaceRecognitionHandler.UniqueFaceDescriptors(this._props.Document).map(fd => new Float32Array(Array.from(fd)));
+ const labeledFaceDescriptor = new faceapi.LabeledFaceDescriptors(FaceRecognitionHandler.UniqueFaceLabel(this._props.Document), faceDescriptorsAsFloat32Array);
const faceMatcher = new FaceMatcher([labeledFaceDescriptor], 1);
const { face_match } = FaceRecognitionHandler.ImageDocFaceDescriptors(imgDoc).reduce(
(prev, face) => {
@@ -80,11 +76,12 @@ export class UniqueFaceView extends ObservableReactComponent<UniqueFaceProps> {
// assign the face in the image that's closest to the face collection to be the face that's assigned to the collection
if (face_match) {
- FaceRecognitionHandler.UniqueFaceAddFaceImage(imgDoc, face_match, this._props.faceDoc);
+ FaceRecognitionHandler.UniqueFaceAddFaceImage(imgDoc, face_match, this._props.Document);
}
}
});
- return false;
+ e.stopPropagation();
+ return true;
}
/**
@@ -92,14 +89,15 @@ export class UniqueFaceView extends ObservableReactComponent<UniqueFaceProps> {
*/
@action
onDisplayClick() {
- this._displayImages = !this._displayImages;
+ this._props.Document._displayImages = !this.props.Document._displayImages;
+ this._props.Document.height = this._props.Document._displayImages ? 400 : 100;
}
/**
* Removes a unique face Doc from the colelction of unique faces.
*/
deleteUniqueFace = undoable(() => {
- FaceRecognitionHandler.DeleteUniqueFace(this._props.faceDoc);
+ FaceRecognitionHandler.DeleteUniqueFace(this._props.Document);
}, 'delete face');
/**
@@ -107,9 +105,11 @@ export class UniqueFaceView extends ObservableReactComponent<UniqueFaceProps> {
* @param imgDoc - image Doc to remove
*/
removeFaceImageFromUniqueFace = undoable((imgDoc: Doc) => {
- FaceRecognitionHandler.UniqueFaceRemoveFaceImage(imgDoc, this._props.faceDoc);
+ FaceRecognitionHandler.UniqueFaceRemoveFaceImage(imgDoc, this._props.Document);
}, 'remove doc from face');
+ onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
+
render() {
return (
<div className="face-document-item" ref={ele => this.createDropTarget(ele!)}>
@@ -117,23 +117,35 @@ export class UniqueFaceView extends ObservableReactComponent<UniqueFaceProps> {
<IconButton tooltip="Delete Face From Collection" onPointerDown={this.deleteUniqueFace} icon={'x'} style={{ width: '4px' }} size={Size.XSMALL} />
</div>
<div className="face-document-top">
- <h1>{FaceRecognitionHandler.UniqueFaceLabel(this._props.faceDoc)}</h1>
+ <h1 style={{ color: lightOrDark(StrCast(this._props.Document.backgroundColor)) }}>{FaceRecognitionHandler.UniqueFaceLabel(this._props.Document)}</h1>
</div>
- <IconButton
- tooltip="See image information"
- onPointerDown={() => this.onDisplayClick()}
- icon={<FontAwesomeIcon icon={this._displayImages ? 'caret-up' : 'caret-down'} />}
- color={MarqueeOptionsMenu.Instance.userColor}
- style={{ width: '19px' }}
- />
- {this._displayImages ? (
- <div className="face-document-image-container">
- {FaceRecognitionHandler.UniqueFaceImages(this._props.faceDoc).map(doc => {
+ <div className="face-collection-toggle">
+ <IconButton
+ tooltip="See image information"
+ onPointerDown={() => this.onDisplayClick()}
+ icon={<FontAwesomeIcon icon={this._props.Document._displayImages ? 'caret-up' : 'caret-down'} />}
+ color={MarqueeOptionsMenu.Instance.userColor}
+ style={{ width: '19px' }}
+ />
+ </div>
+ {this.props.Document._displayImages ? (
+ <div
+ className="face-document-image-container"
+ style={{
+ pointerEvents: this._props.isContentActive() ? undefined : 'none',
+ }}
+ ref={ele => {
+ this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
+ this._oldWheel = ele;
+ // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling
+ ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
+ }}>
+ {FaceRecognitionHandler.UniqueFaceImages(this._props.Document).map((doc, i) => {
const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)]).url.href.split('.');
return (
<div
className="image-wrapper"
- key={Utils.GenerateGuid()}
+ key={i}
onPointerDown={e =>
setupMoveUpEvents(
this,
@@ -165,8 +177,8 @@ export class UniqueFaceView extends ObservableReactComponent<UniqueFaceProps> {
*
* Since the collection of recognized faces is stored on the active dashboard, this class
* does not itself store any Docs, but accesses the myUniqueFaces field of the current
- * dashboard. Each Face collection Doc is rendered using a FaceCollectionDocView which
- * is not a CollectionView or even a DocumentView (but probably should be).
+ * dashboard. (This should probably go away as Doc type in favor of it just being a
+ * stacking collection of uniqueFace docs)
*/
@observer
export class FaceCollectionBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -179,18 +191,29 @@ export class FaceCollectionBox extends ViewBoxBaseComponent<FieldViewProps>() {
makeObservable(this);
}
+ moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => !!(this._props.removeDocument?.(doc) && addDocument?.(doc));
+
render() {
- return (
- <div className="searchBox-container" style={{ pointerEvents: 'all', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}>
- {FaceRecognitionHandler.UniqueFaces().map(doc => (
- <UniqueFaceView key={doc[Id]} faceDoc={doc} />
- ))}
- </div>
+ return !Doc.ActiveDashboard ? null : (
+ <CollectionStackingView
+ {...this._props} //
+ Document={Doc.ActiveDashboard}
+ fieldKey="myUniqueFaces"
+ moveDocument={this.moveDocument}
+ isContentActive={returnTrue}
+ isAnyChildContentActive={returnTrue}
+ childHideDecorations={true}
+ />
);
}
}
Docs.Prototypes.TemplateMap.set(DocumentType.FACECOLLECTION, {
layout: { view: FaceCollectionBox, dataField: 'data' },
- options: { acl: '', _width: 400 },
+ options: { acl: '', _width: 400, dropAction: dropActionType.embed },
+});
+
+Docs.Prototypes.TemplateMap.set(DocumentType.UFACE, {
+ layout: { view: UniqueFaceBox, dataField: 'face_images' },
+ options: { acl: '', _width: 400, _height: 400 },
});
diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx
index a17e4c54a..1ab084eaa 100644
--- a/src/client/views/search/FaceRecognitionHandler.tsx
+++ b/src/client/views/search/FaceRecognitionHandler.tsx
@@ -8,6 +8,8 @@ import { Cast, ImageCast, NumCast, StrCast } from '../../../fields/Types';
import { DocumentType } from '../../documents/DocumentTypes';
import { DocumentManager } from '../../util/DocumentManager';
import { ImageField } from '../../../fields/URLField';
+import { UniqueFaceBox } from '../collections/collectionFreeForm/FaceCollectionBox';
+import { Docs } from '../../documents/Documents';
/**
* A singleton class that handles face recognition and manages face Doc collections for each face found.
@@ -169,15 +171,25 @@ export class FaceRecognitionHandler {
* @returns a unique face Doc
*/
private createUniqueFaceDoc = (dashboard: Doc) => {
- const faceDocNum = NumCast(dashboard.myUniqueFaces_count) + 1;
- dashboard.myUniqueFaces_count = faceDocNum; // TODO: improve to a better name
-
- const uniqueFaceDoc = new Doc();
- uniqueFaceDoc.title = `Face ${faceDocNum}`;
- uniqueFaceDoc.face = ''; // just to make prettyprinting look better
- uniqueFaceDoc.face_label = `Face${faceDocNum}`;
- uniqueFaceDoc.face_images = new List<Doc>();
- uniqueFaceDoc.face_descriptors = new List<List<number>>();
+ const faceDocNum = NumCast(dashboard[DocData].myUniqueFaces_count) + 1;
+ dashboard[DocData].myUniqueFaces_count = faceDocNum; // TODO: improve to a better name
+
+ const uniqueFaceDoc = Docs.Create.UniqeFaceDocument({
+ title: `Face ${faceDocNum}`,
+ _layout_reflowHorizontal: true,
+ _layout_reflowVertical: true,
+ _layout_nativeDimEditable: true,
+ _layout_borderRounding: '20px',
+ backgroundColor: '#555555',
+ _width: 400,
+ _height: 400,
+ });
+ const uface = uniqueFaceDoc[DocData];
+ uface.face = ''; // just to make prettyprinting look better
+ uface.face_label = `Face${faceDocNum}`;
+ uface.face_images = new List<Doc>();
+ uface.face_descriptors = new List<List<number>>();
+ Doc.SetContainer(uniqueFaceDoc, Doc.MyFaceCollection);
Doc.ActiveDashboard && Doc.AddDocToList(Doc.ActiveDashboard[DocData], 'myUniqueFaces', uniqueFaceDoc);
return uniqueFaceDoc;
@@ -222,8 +234,8 @@ export class FaceRecognitionHandler {
setTimeout(() => this.classifyFacesInImage(imgDoc), 1000);
} else {
const imgUrl = ImageCast(imgDoc[Doc.LayoutFieldKey(imgDoc)]);
- if (imgUrl && !DocListCast(Doc.MyFaceCollection.examinedFaceDocs).includes(imgDoc)) { // only examine Docs that have an image and that haven't already been examined.
- Doc.AddDocToList(Doc.MyFaceCollection, 'examinedFaceDocs', imgDoc);
+ if (imgUrl && !DocListCast(Doc.MyFaceCollection.examinedFaceDocs).includes(imgDoc[DocData])) { // only examine Docs that have an image and that haven't already been examined.
+ Doc.AddDocToList(Doc.MyFaceCollection, 'examinedFaceDocs', imgDoc[DocData]);
FaceRecognitionHandler.initImageDocFaceDescriptors(imgDoc);
FaceRecognitionHandler.loadImage(imgUrl).then( // load image and analyze faces
img => faceapi.detectAllFaces(img).withFaceLandmarks().withFaceDescriptors()
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 10:24:32 +0000