client/src/App.css

@@ -19,19 +19,12 @@ div {
   height: 100%;
 }
 
-.Explorer .Resizer {
+.Resizer {
   width: 0.5rem;
   background-color: #ccc;
   border: 1px solid black;
 }
 
-.ExplorerVertical .Resizer {
-  height: 0.5rem;
-  width: 100%;
-  background-color: #ccc;
-  border: 1px solid black;
-}
-
 .Explorer {
   display: flex;
   flex-direction: row;
@@ -42,16 +35,6 @@ div {
   flex-grow: 1;
 }
 
-.ExplorerVertical {
-  display: flex;
-  flex-direction: column;
-  justify-self: stretch;
-  align-self: stretch;
-  width: 100%;
-  height: auto !important;
-  flex-grow: 1;
-}
-
 .Actions {
   display: flex;
   flex-direction: row;
@@ -61,23 +44,15 @@ div {
   width: 100%;
 }
 
-.PhotoFaces,
 .Identities {
   display: grid;
   user-select: none;
+  overflow-y: scroll;
   overflow-x: clip;
   width: 100%;
   max-height: 100%; /* scroll if too large */
   gap: 0.25rem;
-}
-
-.PhotoFaces {
-  grid-template-columns: repeat(auto-fill, minmax(6.25rem, auto));
-}
-
-.Identities {
   grid-template-columns: repeat(auto-fill, minmax(4.25rem, auto));
-  overflow-y: scroll;
 }
 
 .Face {
@@ -98,26 +73,16 @@ div {
   flex-direction: column;
 }
 
+.Viewer {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
 .PhotoPanel {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-height: 100%;
-  overflow-y: auto;
-}
-
-.PhotoPanel .FaceInfo {
-  padding: 0.25rem;
-  background-color: #444;
-  color: white;
-  margin-top: 0.25rem;
-}
-
-.PhotoPanel .ImageInfo {
-  padding: 0.25rem;
-  background-color: #222;
-  color: white;
-  margin-top: 0.25rem;
 }
 
 .Guess {
@@ -131,34 +96,34 @@ button {
   min-width: 4rem;
 }
 
-.PhotoInfo,
+.Image .FaceBox {
-.FaceInfo {
-  display: flex;
-  align-content: center;
-  align-items: center;
-  align-self: center;
-  text-align: center;
-  width: 100%;
-  flex-grow: 1;
-}
-
-.Photo .FaceBox {
   border: 1px solid red;
   position: absolute;
 }
 
-.Photo .FaceBox:hover {
+.Image .FaceBox:hover {
   background-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0px 0px 10px black;
 }
 
-.Photo {
+.Image {
   display: flex;
   position: relative;
-  flex-direction: column;
 }
 
-.PhotoFaces .UnknownFace,
+.PhotoPanel .FaceInfo {
+  padding: 0.25rem;
+  background-color: #444;
+  color: white;
+  margin-top: 0.25rem;}
+
+.PhotoPanel .ImageInfo {
+  padding: 0.25rem;
+  background-color: #222;
+  color: white;
+  margin-top: 0.25rem;
+}
+
 .Identities .UnknownFace {
   font-size: 2rem;
 }
@@ -209,11 +174,6 @@ button {
   height: 10rem;
 }
 
-.PhotoFaces .Face .Image {
-  min-width: 6rem;
-  min-height: 6rem;
-}
-
 .Identities .Face .Image {
   min-width: 4rem;
   min-height: 4rem;
@@ -250,7 +210,7 @@ button {
 }
 
 
-.Photo img {
+.Viewer .PhotoPanel img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;

client/src/App.tsx

@@ -62,27 +62,10 @@ const makeFaceBoxes = (photo: any,
   });
 };
 
-type PhotoData = {
-  photoId: number,
-  faces: FaceData[],
-  filename: string,
-  path: string,
-  taken: number
-};
-
-const EmptyPhoto = {
-  photoId: -1,
-  faces: [],
-  filename: '',
-  path: '',
-  taken: Date.now()
-};
-
 const Photo = ({ photoId, onFaceClick }: any) => {
-  const [photo, setPhoto] = useState<PhotoData>(EmptyPhoto);
+  const [image, setImage] = useState<any>(undefined);
   const [faceInfo, setFaceInfo] = useState<string>('');
   const ref = useRef(null);
-  const [photoSelected, setPhotoSelected] = useState<FaceData[]>([]);
   const [dimensions, setDimensions] = React.useState({width: 0, height: 0});
 
   const onFaceEnter = (e: any, face: FaceData) => {
@@ -96,12 +79,12 @@ const Photo = ({ photoId, onFaceClick }: any) => {
   }
 
   const faces = useMemo(() => {
-    if (photo === undefined || dimensions.height === 0) {
+    if (image === undefined || dimensions.height === 0) {
       return <></>;
     }
-    return makeFaceBoxes(photo, dimensions, 
+    return makeFaceBoxes(image, dimensions, 
       onFaceClick, onFaceEnter, onFaceLeave);
-  }, [photo, dimensions, onFaceClick]);
+  }, [image, dimensions, onFaceClick]);
 
   const checkResize = useCallback(() => {
     if (!ref.current) {
@@ -118,6 +101,7 @@ const Photo = ({ photoId, onFaceClick }: any) => {
     }
   }, [setDimensions, dimensions]);
 
+ 
   useEffect(() => {
     let timer = setInterval(() => checkResize(), 250);
     return () => { clearInterval(timer); }
@@ -127,110 +111,35 @@ const Photo = ({ photoId, onFaceClick }: any) => {
     if (photoId === 0) {
       return;
     }
-    const fetchPhotoData = async (photoId: number) => {
+    const fetchImageData = async (image: number) => {
-      console.log(`Loading photo ${photoId}`);
+      console.log(`Loading photo ${image}`);
-      const res = await window.fetch(`${base}/api/v1/photos/${photoId}`);
+      const res = await window.fetch(`${base}/api/v1/photos/${image}`);
       const photo = await res.json();
-      setPhoto(photo);
+      setImage(photo);
     };
 
-    setPhotoSelected([]);
+    fetchImageData(photoId);
-    fetchPhotoData(photoId);
+  }, [photoId, setImage]);
-  }, [photoId, setPhoto, setPhotoSelected]);
 
-  const forget = async () => {
+  if (image === undefined) {
-    try {
-      const res = await window.fetch(
-        `${base}/api/v1/faces`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          action: 'forget',
-          faces: photoSelected.map(face => face.faceId)
-        })
-      });
-      await res.json();
-      setPhotoSelected([]);
-      photo.faces = photo.faces.filter(
-        face => photoSelected.findIndex(x => x.faceId === face.faceId) === -1
-      );
-      setPhoto({...photo});
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const selectAll = async () => {
-    setPhotoSelected([...photo.faces]);
-  };
-
-  const clearSelection = async () => {
-    setPhotoSelected([]);
-  };
-
-  const faceClick = useCallback((e: any, face: FaceData) => {
-    const el = e.currentTarget;
-    /* Control -- select / deselect single item */
-    if (e.ctrlKey) {
-      const index = photoSelected.findIndex(x => x.faceId === face.faceId);
-      if (index !== -1) {
-        el.classList.remove('Selected');
-        photoSelected.splice(index, 1);
-      } else {
-        el.classList.add('Selected');
-        photoSelected.push(face);
-      }
-      setPhotoSelected([...photoSelected]);
-      return;
-    }
-
-    /* Shift -- select groups */
-    if (e.shiftKey) {
-      return;
-    }
-
-    /* Default to load image */
-    e.stopPropagation();
-    e.preventDefault();
-  }, [photoSelected, setPhotoSelected]);
-
-  if (photo.photoId === -1) {
     return <></>
   }
 
-  return (
+  return (<div className="PhotoPanel">
-  <div className="PhotoPanel">
+    <div className="Image" ref={ref}>
-    <div className="Photo" ref={ref}>
       <img 
-        alt={photo.filename}
+        alt={image.filename}
-        src={`${base}/../${photo.path}thumbs/scaled/${photo.filename}`.replace(/ /g, '%20')}/>
+        src={`${base}/../${image.path}thumbs/scaled/${image.filename}`.replace(/ /g, '%20')}/>
         { faces }
       </div>
-      <div className="PhotoInfo">{
+    <div className="ImageInfo">{
-        moment(photo.taken).format('MMMM Do YYYY, h:mm:ss a') 
+      moment(image.taken)
+        .format('MMMM Do YYYY, h:mm:ss a') 
       }, {
-          moment(photo.taken).fromNow() 
+        moment(image.taken)
+          .fromNow() 
       }.</div>
-        <div className="FaceInfo">
+      <div className="FaceInfo">{ faceInfo ? faceInfo : 'Hover over face for information.'}</div>
-          { faceInfo ? faceInfo : 'Hover over face for information.'}
-        </div>
-      <div className="Actions">
-        { photoSelected.length !== 0 && <Button onClick={forget}>
-          Forget Selected</Button> }
-        <Button onClick={selectAll}>Select All</Button>
-        <Button onClick={clearSelection}>Select None</Button>
-      </div>
-      { photoSelected.length !== 0 && <div style={{ display: 'flex' }}>
-        Selected faces (CTRL-CLICK to remove):
-      </div> }
-      <div className="PhotoFaces">
-      { photoSelected.map(face =>
-        <Face
-          key={face.faceId}
-          face={face}
-          onFaceClick={(e: any) => faceClick(e, face)}/>
-      ) }
-      </div>
     </div>
   );
 };
@@ -829,26 +738,6 @@ const App = () => {
     }
   };
 
-  const forgetFace = async () => {
-    try {
-      const res = await window.fetch(
-        `${base}/api/v1/faces`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          action: 'forget',
-          faces: selected
-        })
-      });
-      await res.json();
-      removeFacesFromIdentity(selected);
-      deselectAll();
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-
   const changeSelectedIdentity = async () => {
     if (selectedIdentities.length === 0) {
       window.alert('You need to select an identity first (CTRL+CLICK)');
@@ -1039,7 +928,6 @@ const App = () => {
                 <Button onClick={guessIdentity}>Guess</Button>
               </>}
               { selected.length !== 0 && <>
-                <Button onClick={forgetFace}>Forget</Button> 
                 <Button onClick={removeFaceFromIdentity}>Remove</Button> 
                 <Button onClick={updateFasAsNotFace}>Not a face</Button> 
                 <Button onClick={changeSelectedIdentity}>Change Identity</Button> 
@@ -1051,21 +939,19 @@ const App = () => {
             </div>
           </Panel>
           <PanelResizeHandle className="Resizer"/>
-          <Panel><>
+          <Panel>
-            { image === 0 && 
+            <div className="Viewer">
-              <div style={{ margin: '1rem' }}>Select image to view</div>
+              {image === 0 && <div style={{ margin: '1rem' }}>Select image to view</div>}
-            }
+              {image !== 0 && <Photo onFaceClick={onFaceClick} photoId={image}/> }
-            { image !== 0 && 
+              {guess !== undefined && guess.identity && <div 
-              <Photo onFaceClick={onFaceClick} photoId={image}/> 
-            }
-            { guess !== undefined && guess.identity && <div 
                 className="Guess">
                 <Face
                   face={guess.identity.relatedFaces[0]}
                   onFaceClick={guessOnFaceClick}
                   title={`${guess.identity.displayName} (${guess.distance})`}/>
               </div> }
-          </></Panel>
+            </div>
+          </Panel>
           <PanelResizeHandle className="Resizer" />
           <Panel defaultSize={8.5} minSize={8.5} className="IdentitiesList">
             { !loaded && <div style={{ margin: '1rem' }}>

ketrface/ketrface/db.py

@@ -101,7 +101,6 @@ def load_faces(db_path ):
       JOIN facedescriptors ON (faces.descriptorId=facedescriptors.id)
       WHERE faces.identityId IS null 
         AND faces.classifiedBy != 'not-a-face'
-        AND faces.classifiedBy != 'forget'
         AND faces.photoId=photos.id
       ''')
     for row in res.fetchall():

server/db/MODIFY.md

@@ -1,52 +0,0 @@
-
-# Dump schema
-
-```bash
-cat << EOF | sqlite3 db/photos.db > photos.schema
-.schema
-EOF
-```
-
-# Edit schema
-
-```bash
-nano photos.schema
-```
-
-# Backup database
-
-```bash
-cp db/photos.db photos.db.bk
-```
-
-# For the table you want to modify
-
-## Backup the table
-
-```bash
-cat << EOF | sqlite3 db/photos.db
-.output faces.dump
-.dump faces
-.quit
-EOF
-```
-
-## Drop the table
-
-```bash
-cat << EOF | sqlite3 db/photos.db
-drop table faces
-EOF
-```
-
-## Create the table with the modified schema
-
-```bash
-cat photos.schema | sqlite3 db/photos.db
-```
-
-## Re-populate the table
-
-```bash
-cat faces.dump | sqlite3 db/photos.db
-```

server/db/photos.js

@@ -197,7 +197,6 @@ function init() {
         type: Sequelize.DataTypes.ENUM(
           'machine',     /* DBSCAN with VGG-Face */
           'human',       /* Human identified */
-          'forget',      /* implies "human"; identityId=NULL */
           'not-a-face'), /* implies "human"; identityId=NULL */
         defaultValue: 'machine',
       },

server/routes/faces.js

@@ -36,16 +36,27 @@ router.put("/:id?", async (req, res/*, next*/) => {
   }
   const { action } = req.body; 
   console.log(`${action}: ${faces}`);
-  if ([ 'not-a-face', 'forget' ].indexOf(action) !== -1) {
+  switch (action) {
+  case 'not-a-face':
     await photoDB.sequelize.query(
-      `UPDATE faces SET classifiedBy=:action,identityId=NULL ` +
+      `UPDATE faces SET classifiedBy='not-a-face',identityId=NULL ` +
       `WHERE id IN (:faces)`, {
-        replacements: { 
+        replacements: { faces }
-          action,
-          faces 
-        }
       }
     );
+    /*
+    faces = await photoDB.sequelize.query(
+      'SELECT * FROM faces WHERE id IN (:faces)', {
+        replacements: { faces },
+        type: photoDB.Sequelize.QueryTypes.SELECT,
+        raw: true
+      }
+    );
+    faces.forEach(face => {
+      face.faceId = face.id;
+      delete face.id;
+    });
+    */
     return res.status(200).json(faces);
   }
   return res.status(400).json({ message: "Invalid request" });

server/routes/identities.js

@@ -448,10 +448,6 @@ router.put("/faces/add/:id", async (req, res) => {
     /* Do not block on this call finishing -- update can occur
      * in the background */
     Promise.map([identity, ...tuples], (x, i) => { 
-      if (x.identityId === null) {
-        /* Moving from the Unknown group */
-        return;
-      }
       try {
       updateIdentityFaces(x);
       } catch (error) {
@@ -532,12 +528,10 @@ const getUnknownIdentity = async (faceCount) => {
         faces AS total
       WHERE
         total.identityId IS NULL 
-        AND total.classifiedBy != 'not-a-face'
+        AND total.classifiedBy != 'not-a-face') AS total
-        AND total.classifiedBy != 'forget') AS total
     WHERE
     faces.identityId IS NULL 
       AND faces.classifiedBy != 'not-a-face'
-      AND faces.classifiedBy != 'forget'
       ${ limit }`;
 
   unknownIdentity.relatedFaces = await photoDB.sequelize.query(sql, {

server/routes/photos.js

@@ -1109,7 +1109,6 @@ router.get("/:id", async (req, res) => {
       `
       SELECT faces.* FROM faces
       WHERE faces.photoId=:id
-      AND faces.classifiedBy NOT IN ('not-a-face', 'forget' )
       `, {
         replacements: { id },
         type: photoDB.Sequelize.QueryTypes.SELECT