PDF text generation working so far

src/lib/components/wizard/StepGallery.svelte

@@ -6,10 +6,10 @@
   import * as tf from '@tensorflow/tfjs';
   import * as blazeface from '@tensorflow-models/blazeface';
 
-  let photos: PhotoInfo[] = [];
-  let isProcessing = false;
-  let processedCount = 0;
-  let totalCount = 0;
+  let photos = $state<PhotoInfo[]>([]);
+  let isProcessing = $state(false);
+  let processedCount = $state(0);
+  let totalCount = $state(0);
   let detector: blazeface.BlazeFaceModel;
 
   interface PhotoInfo {
@@ -90,7 +90,7 @@
 
     if (!isRetry) {
       photo.status = 'loading';
-      photos = [...photos]; // Trigger reactivity
+      // No need to reassign photos array with $state reactivity
     }
 
     try {
@@ -127,7 +127,7 @@
       photo.status = 'error';
     }
 
-    photos = [...photos]; // Trigger reactivity
+    // No need to reassign photos array with $state reactivity
   }
 
   async function detectFaceForPhoto(index: number) {
@@ -179,7 +179,7 @@
     } catch {
       photos[index].faceDetectionStatus = 'failed';
     }
-    photos = [...photos];
+    // No need to reassign photos array with $state reactivity
   }
 
   async function retryPhoto(index: number) {
@@ -195,16 +195,16 @@
 
   function handleCropUpdate(index: number, cropData: { x: number; y: number; width: number; height: number }) {
     photos[index].cropData = cropData;
-    photos = [...photos]; // Trigger reactivity
+    // No need to reassign photos array with $state reactivity
   }
 
-  function canProceed() {
+  const canProceed = $derived(() => {
     const hasPhotos = photos.length > 0;
     const allLoaded = photos.every(photo => photo.status === 'success');
     const allCropped = photos.every(photo => photo.cropData);
 
     return hasPhotos && allLoaded && allCropped;
-  }
+  });
 
   // Cleanup object URLs when component is destroyed
   function cleanupObjectUrls() {
@@ -215,13 +215,12 @@
     });
   }
 
-  // Cleanup on unmount or when photos change
-  $: {
-    // This will run when photos array changes
-    if (photos.length === 0) {
+  // Cleanup on unmount using $effect
+  $effect(() => {
+    return () => {
       cleanupObjectUrls();
-    }
-  }
+    };
+  });
 </script>
 
 <div class="p-6">
@@ -396,7 +395,7 @@
       </button>
       
       <button
-        onclick={() => currentStep.set(5)}
+        onclick={() => currentStep.set(6)}
         disabled={!canProceed()}
         class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
       >