uniying image labels => tags. made face tags distinguishable from other tags - and drag off to place face collection.

2 files changed, 31 insertions, 12 deletions

diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
index ea1c22962..c62303dc0 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
@@ -9,8 +9,9 @@ import React from 'react';
 import { DivHeight, lightOrDark, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, Opt } from '../../../../fields/Doc';
+import { DocData } from '../../../../fields/DocSymbols';
 import { List } from '../../../../fields/List';
-import { ImageCast, NumCast, StrCast } from '../../../../fields/Types';
+import { DocCast, ImageCast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
@@ -87,23 +88,27 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
             ?.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.Document).length === 0 && FaceRecognitionHandler.ImageDocFaceDescriptors(imgDoc).length > 1) {
+                if (FaceRecognitionHandler.UniqueFaceDescriptors(this.Document).length === 0 && FaceRecognitionHandler.ImageDocFaceAnnos(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.Document).map(fd => new Float32Array(Array.from(fd)));
                     const labeledFaceDescriptor = new faceapi.LabeledFaceDescriptors(FaceRecognitionHandler.UniqueFaceLabel(this.Document), faceDescriptorsAsFloat32Array);
                     const faceMatcher = new FaceMatcher([labeledFaceDescriptor], 1);
-                    const { face_match } = FaceRecognitionHandler.ImageDocFaceDescriptors(imgDoc).reduce(
-                        (prev, face) => {
-                            const match = faceMatcher.matchDescriptor(new Float32Array(Array.from(face)));
-                            return match.distance < prev.dist ? { dist: match.distance, face_match: face } : prev;
+                    const { faceAnno } = FaceRecognitionHandler.ImageDocFaceAnnos(imgDoc).reduce(
+                        (prev, faceAnno) => {
+                            const match = faceMatcher.matchDescriptor(new Float32Array(Array.from(faceAnno.faceDescriptor as List<number>)));
+                            return match.distance < prev.dist ? { dist: match.distance, faceAnno } : prev;
                         },
-                        { dist: 1, face_match: undefined as Opt<List<number>> }
+                        { dist: 1, faceAnno: undefined as Opt<Doc> }
                     );
 
                     // assign the face in the image that's closest to the face collection's face
-                    FaceRecognitionHandler.UniqueFaceAddFaceImage(imgDoc, face_match, this.Document);
+                    if (faceAnno) {
+                        FaceRecognitionHandler.UniqueFaceRemoveFaceImage(faceAnno, DocCast(faceAnno.face));
+                        FaceRecognitionHandler.UniqueFaceAddFaceImage(faceAnno, this.Document);
+                        faceAnno.face = this.Document;
+                    }
                 }
             });
         e.stopPropagation();
@@ -224,7 +229,15 @@ export class FaceCollectionBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => !!(this._props.removeDocument?.(doc) && addDocument?.(doc));
-
+    addDocument = (doc: Doc | Doc[], annotationKey?: string) => {
+        const uniqueFaceDoc = doc instanceof Doc ? doc : doc[0];
+        const added = uniqueFaceDoc.type === DocumentType.UFACE;
+        if (added) {
+            Doc.SetContainer(uniqueFaceDoc, Doc.MyFaceCollection);
+            Doc.ActiveDashboard && Doc.AddDocToList(Doc.ActiveDashboard[DocData], 'myUniqueFaces', uniqueFaceDoc);
+        }
+        return added;
+    };
     /**
      * this changes style provider requests that target the dashboard to requests that target the face collection box which is what's actually being rendered.
      * This is needed, for instance, to get the default background color from the face collection, not the dashboard.
@@ -233,6 +246,7 @@ export class FaceCollectionBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (doc === Doc.ActiveDashboard) return this._props.styleProvider?.(this.Document, this._props, property);
         return this._props.styleProvider?.(doc, this._props, property);
     };
+
     render() {
         return !Doc.ActiveDashboard ? null : (
             <div className="faceCollectionBox">
@@ -245,6 +259,7 @@ export class FaceCollectionBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     Document={Doc.ActiveDashboard}
                     fieldKey="myUniqueFaces"
                     moveDocument={this.moveDocument}
+                    addDocument={this.addDocument}
                     isContentActive={returnTrue}
                     isAnyChildContentActive={returnTrue}
                     childHideDecorations={true}
diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
index 6eb3eb784..5d3154e3c 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
@@ -51,7 +51,7 @@ export class ImageLabelBoxData {
         label = label.toUpperCase().trim();
         if (label.length > 0) {
             if (!this._labelGroups.includes(label)) {
-                this._labelGroups = [...this._labelGroups, label];
+                this._labelGroups = [...this._labelGroups, label.startsWith('#') ? label : '#' + label];
             }
         }
     };
@@ -178,8 +178,12 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
                 const labels = imageInfo.labels.split('\n');
                 labels.forEach(label => {
-                    label = label.replace(/^\d+\.\s*|-|f\*/, '').trim();
-                    console.log(label);
+                    label =
+                        '#' +
+                        label
+                            .replace(/^\d+\.\s*|-|f\*/, '')
+                            .replace(/^#/, '')
+                            .trim();
                     imageInfo.doc[DocData][label] = true;
                     (imageInfo.doc[DocData].tags as List<string>).push(label);
                 });