Working POC created

src/lib/components/wizard/StepGallery.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { columnMapping, filteredSheetData, currentStep } from '$lib/stores';
+  import { columnMapping, filteredSheetData, currentStep, pictures, cropRects } from '$lib/stores';
   import { downloadDriveImage, isGoogleDriveUrl, createImageObjectUrl } from '$lib/google';
   import PhotoCard from '../PhotoCard.svelte';
   import * as tf from '@tensorflow/tfjs';
@@ -120,6 +120,39 @@
       photo.objectUrl = objectUrl;
       photo.status = 'success';
       console.log(`Photo loaded successfully: ${photo.name}`);
+      
+      // Save to pictures store
+      if (isGoogleDriveUrl(photo.url)) {
+        // For Google Drive images, save the blob
+        const blob = await downloadDriveImage(photo.url);
+        pictures.update(pics => ({
+          ...pics,
+          [photo.url]: {
+            id: photo.url,
+            blob: blob,
+            url: objectUrl,
+            downloaded: true,
+            faceDetected: false,
+            faceCount: 0
+          }
+        }));
+      } else {
+        // For direct URLs, convert to blob
+        const response = await fetch(photo.url);
+        const blob = await response.blob();
+        pictures.update(pics => ({
+          ...pics,
+          [photo.url]: {
+            id: photo.url,
+            blob: blob,
+            url: objectUrl,
+            downloaded: true,
+            faceDetected: false,
+            faceCount: 0
+          }
+        }));
+      }
+      
       // Automatically run face detection to generate crop
       await detectFaceForPhoto(index);
     } catch (error) {
@@ -173,6 +206,22 @@
         };
         photos[index].cropData = crop;
         photos[index].faceDetectionStatus = 'completed';
+        
+        // Save crop data to store
+        cropRects.update(crops => ({
+          ...crops,
+          [photos[index].url]: crop
+        }));
+        
+        // Update pictures store with face detection info
+        pictures.update(pics => ({
+          ...pics,
+          [photos[index].url]: {
+            ...pics[photos[index].url],
+            faceDetected: true,
+            faceCount: predictions.length
+          }
+        }));
       } else {
         photos[index].faceDetectionStatus = 'failed';
       }
@@ -195,6 +244,13 @@
 
   function handleCropUpdate(index: number, cropData: { x: number; y: number; width: number; height: number }) {
     photos[index].cropData = cropData;
+    
+    // Save updated crop data to store
+    cropRects.update(crops => ({
+      ...crops,
+      [photos[index].url]: cropData
+    }));
+    
     // No need to reassign photos array with $state reactivity
   }