Fix

web/packages/base/assert.ts

@@ -0,0 +1,11 @@
+import { isDevBuild } from "./env";
+import log from "./log";
+
+/**
+ * If running in a dev build, throw an exception with the given message.
+ * Otherwise log it as a warning.
+ */
+export const assertionFailed = (message: string) => {
+    if (isDevBuild) throw new Error(message);
+    log.warn(message);
+};

web/packages/new/photos/components/PeopleList.tsx

@@ -111,10 +111,10 @@ export const UnidentifiedFaces: React.FC<UnidentifiedFacesProps> = ({
 };
 
 interface FaceCropImageViewProps {
-    /** The {@link EnteFile} which contains this face. */
-    enteFile: EnteFile;
     /** The ID of the face to display. */
     faceID: string;
+    /** The {@link EnteFile} which contains this face. */
+    enteFile: EnteFile;
 }
 
 /**
@@ -123,30 +123,29 @@ interface FaceCropImageViewProps {
  * The image is read from the "face-crops" {@link BlobCache}, regenerating it if
  * needed (which is why also need to pass the associated file).
  *
- * While the image is being fetched, or if it doesn't exist, a placeholder is
- * shown.
+ * While the image is being fetched or regenerated, or if it doesn't exist, a
+ * placeholder is shown.
  */
 const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
-    enteFile,
     faceID,
+    enteFile,
 }) => {
     const [objectURL, setObjectURL] = useState<string | undefined>();
 
     useEffect(() => {
         let didCancel = false;
+        let thisObjectURL: string | undefined;
 
         void faceCrop(faceID, enteFile).then((blob) => {
-            if (blob && !didCancel) setObjectURL(URL.createObjectURL(blob));
+            if (blob && !didCancel)
+                setObjectURL((thisObjectURL = URL.createObjectURL(blob)));
         });
 
         return () => {
             didCancel = true;
-            if (objectURL) URL.revokeObjectURL(objectURL);
+            if (thisObjectURL) URL.revokeObjectURL(thisObjectURL);
         };
-        // TODO: The linter warning is actually correct, objectURL should be a
-        // dependency, but adding that require reworking this code first.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [faceID]);
+    }, [faceID, enteFile]);
 
     return objectURL ? (
         <img style={{ objectFit: "cover" }} src={objectURL} />

web/packages/new/photos/services/ml/index.ts

@@ -4,6 +4,7 @@
 
 import { isDesktop } from "@/base/app";
 import { blobCache } from "@/base/blob-cache";
+import { assertionFailed } from "@/base/assert";
 import { ensureElectron } from "@/base/electron";
 import { isDevBuild } from "@/base/env";
 import log from "@/base/log";
@@ -487,6 +488,18 @@ export const unidentifiedFaceIDs = async (
     return index?.faces.map((f) => f.faceID) ?? [];
 };
 
+/**
+ * Extract the ID of the {@link EnteFile} to which a face belongs from its ID.
+ */
+export const fileIDFromFaceID = (faceID: string) => {
+    const fileID = parseInt(faceID.split("_")[0] ?? "");
+    if (isNaN(fileID)) {
+        assertionFailed(`Ignoring attempt to parse invalid faceID ${faceID}`);
+        return undefined;
+    }
+    return fileID;
+};
+
 /**
  * Return the cached face crop for the given face, regenerating it if needed.
  *