URL => id, which is what it is

web/apps/photos/src/components/ml/PeopleList.tsx

@@ -61,8 +61,8 @@ export const PeopleList = React.memo((props: PeopleListProps) => {
                     }
                 >
                     <FaceCropImageView
-                        url={person.displayImageUrl}
                         faceId={person.displayFaceId}
+                        cacheKey={person.faceCropCacheKey}
                     />
                 </FaceChip>
             ))}
@@ -141,7 +141,7 @@ export function UnidentifiedFaces(props: {
                         <FaceChip key={index}>
                             <FaceCropImageView
                                 faceId={face.id}
-                                url={face.crop?.imageUrl}
+                                cacheKey={face.crop?.cacheKey}
                             />
                         </FaceChip>
                     ))}
@@ -151,13 +151,13 @@ export function UnidentifiedFaces(props: {
 }
 
 interface FaceCropImageViewProps {
-    url: string;
     faceId: string;
+    cacheKey?: string;
 }
 
 const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
-    url,
     faceId,
+    cacheKey,
 }) => {
     const [objectURL, setObjectURL] = useState<string | undefined>();
 
@@ -165,22 +165,18 @@ const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
         let didCancel = false;
 
         async function loadImage() {
-            let blob: Blob;
-            if (!url) {
-                blob = undefined;
-            } else {
-                blob = await cachedOrNew("face-crops", url, async () => {
-                    const user = await ensureLocalUser();
-                    return machineLearningService.regenerateFaceCrop(
-                        user.token,
-                        user.id,
-                        faceId,
-                    );
-                });
-            }
-
-            if (didCancel) return;
-            setObjectURL(blob ? URL.createObjectURL(blob) : undefined);
+            const blob = cacheKey
+                ? await cachedOrNew("face-crops", cacheKey, async () => {
+                      const user = await ensureLocalUser();
+                      return machineLearningService.regenerateFaceCrop(
+                          user.token,
+                          user.id,
+                          faceId,
+                      );
+                  })
+                : undefined;
+            if (!didCancel)
+                setObjectURL(blob ? URL.createObjectURL(blob) : undefined);
         }
 
         loadImage();
@@ -189,7 +185,7 @@ const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
             didCancel = true;
             if (objectURL) URL.revokeObjectURL(objectURL);
         };
-    }, [url, faceId]);
+    }, [faceId, cacheKey]);
 
     return objectURL ? (
         <img src={objectURL} />

web/apps/photos/src/services/machineLearning/faceService.ts

@@ -229,13 +229,8 @@ class FaceService {
         const blobOptions = syncContext.config.faceCrop.blobOptions;
         const blob = await imageBitmapToBlob(faceCrop.image, blobOptions);
 
-        const faceCropUrl = `/${face.id}`;
-        const faceCropCache = await openCache("face-crops");
-        await faceCropCache.put(faceCropUrl, blob);
-        face.crop = {
-            imageUrl: faceCropUrl,
-            imageBox: faceCrop.imageBox,
-        };
+        const cache = await openCache("face-crops");
+        await cache.put(face.id, blob);
 
         faceCrop.image.close();
 

web/apps/photos/src/services/machineLearning/peopleService.ts

@@ -62,7 +62,7 @@ class PeopleService {
                 (a, b) => b.detection.probability - a.detection.probability,
             );
 
-            if (personFace && !personFace.crop?.imageUrl) {
+            if (personFace && !personFace.crop?.cacheKey) {
                 const file = await getLocalFile(personFace.fileId);
                 const imageBitmap = await getOriginalImageBitmap(file);
                 await FaceService.saveFaceCrop(
@@ -76,7 +76,7 @@ class PeopleService {
                 id: index,
                 files: faces.map((f) => f.fileId),
                 displayFaceId: personFace?.id,
-                displayImageUrl: personFace?.crop?.imageUrl,
+                faceCropCacheKey: personFace?.crop?.cacheKey,
             };
 
             await mlIDbStorage.putPerson(person);

web/apps/photos/src/types/machineLearning/index.ts

@@ -90,7 +90,7 @@ export interface FaceCrop {
 }
 
 export interface StoredFaceCrop {
-    imageUrl: string;
+    cacheKey: string;
     imageBox: Box;
 }
 
@@ -128,7 +128,7 @@ export interface Person {
     name?: string;
     files: Array<number>;
     displayFaceId?: string;
-    displayImageUrl?: string;
+    faceCropCacheKey?: string;
 }
 
 export interface MlFileData {