upload folders?!

src/lib/components/PicletGenerator/PicletGenerator.svelte

@@ -27,6 +27,10 @@
     isProcessing: false
   });
   
+  // Queue state for multi-image processing
+  let imageQueue: File[] = $state([]);
+  let currentImageIndex: number = $state(0);
+  
   const IMAGE_GENERATION_PROMPT = (concept: string) => `Extract ONLY the visual appearance from this monster concept and describe it in one concise sentence:
 "${concept}"
 
@@ -67,6 +71,10 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
       return;
     }
     
+    // Single image upload - clear queue and process normally
+    imageQueue = [];
+    currentImageIndex = 0;
+    
     state.userImage = file;
     state.error = null;
     
@@ -81,6 +89,57 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
     }
   }
   
+  async function handleImagesSelected(files: File[]) {
+    if (!joyCaptionClient || !fluxClient) {
+      state.error = "Services not connected. Please wait...";
+      return;
+    }
+    
+    // Multi-image upload - set up queue and start with first image
+    imageQueue = files;
+    currentImageIndex = 0;
+    
+    await processCurrentImage();
+  }
+  
+  async function processCurrentImage() {
+    if (currentImageIndex >= imageQueue.length) {
+      // Queue completed
+      console.log('All images processed!');
+      return;
+    }
+    
+    const currentFile = imageQueue[currentImageIndex];
+    state.userImage = currentFile;
+    state.error = null;
+    
+    // Check if this is a piclet card with metadata
+    const picletData = await extractPicletMetadata(currentFile);
+    if (picletData) {
+      // Import existing piclet
+      await importPiclet(picletData);
+      // Auto-advance to next image after import
+      await advanceToNextImage();
+    } else {
+      // Generate new piclet
+      startWorkflow();
+    }
+  }
+  
+  async function advanceToNextImage() {
+    currentImageIndex++;
+    
+    if (currentImageIndex < imageQueue.length) {
+      // Process next image
+      setTimeout(() => processCurrentImage(), 1000); // Small delay for better UX
+    } else {
+      // Queue completed - reset to single image mode
+      imageQueue = [];
+      currentImageIndex = 0;
+      reset();
+    }
+  }
+  
   async function startWorkflow() {
     state.isProcessing = true;
     
@@ -108,6 +167,11 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
       await autoSavePiclet();
       
       state.currentStep = 'complete';
+      
+      // If processing a queue, auto-advance to next image after a short delay
+      if (imageQueue.length > 1) {
+        setTimeout(() => advanceToNextImage(), 2000); // 2 second delay to show completion
+      }
     } catch (err) {
       console.error('Workflow error:', err);
       
@@ -931,7 +995,10 @@ Write your response within \`\`\`json\`\`\``;
   {#if state.currentStep === 'upload'}
     <UploadStep 
       onImageSelected={handleImageSelected}
+      onImagesSelected={handleImagesSelected}
       isProcessing={state.isProcessing}
+      imageQueue={imageQueue}
+      currentImageIndex={currentImageIndex}
     />
   {:else if state.currentStep === 'complete'}
     <PicletResult workflowState={state} onReset={reset} />

src/lib/components/PicletGenerator/UploadStep.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   interface Props {
     onImageSelected: (image: File) => void;
+    onImagesSelected: (images: File[]) => void;
     isProcessing?: boolean;
+    imageQueue?: File[];
+    currentImageIndex?: number;
   }
   
-  let { onImageSelected, isProcessing = false }: Props = $props();
+  let { onImageSelected, onImagesSelected, isProcessing = false, imageQueue = [], currentImageIndex = 0 }: Props = $props();
   
   let fileInput: HTMLInputElement;
   let dragActive = $state(false);
@@ -12,8 +15,12 @@
   
   function handleFileSelect(e: Event) {
     const target = e.target as HTMLInputElement;
-    if (target.files && target.files[0]) {
-      processFile(target.files[0]);
+    if (target.files) {
+      if (target.files.length === 1) {
+        processFile(target.files[0]);
+      } else if (target.files.length > 1) {
+        processMultipleFiles(Array.from(target.files));
+      }
     }
   }
   
@@ -21,8 +28,12 @@
     e.preventDefault();
     dragActive = false;
     
-    if (e.dataTransfer?.files && e.dataTransfer.files[0]) {
-      processFile(e.dataTransfer.files[0]);
+    if (e.dataTransfer?.files) {
+      if (e.dataTransfer.files.length === 1) {
+        processFile(e.dataTransfer.files[0]);
+      } else if (e.dataTransfer.files.length > 1) {
+        processMultipleFiles(Array.from(e.dataTransfer.files));
+      }
     }
   }
   
@@ -52,14 +63,66 @@
     onImageSelected(file);
   }
   
+  function processMultipleFiles(files: File[]) {
+    // Filter to only image files
+    const imageFiles = files.filter(file => file.type.startsWith('image/'));
+    
+    if (imageFiles.length === 0) {
+      alert('Please upload at least one image file');
+      return;
+    }
+    
+    if (imageFiles.length !== files.length) {
+      alert(`${files.length - imageFiles.length} non-image files were skipped. Processing ${imageFiles.length} images.`);
+    }
+    
+    // Create preview from first image
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      preview = e.target?.result as string;
+    };
+    reader.readAsDataURL(imageFiles[0]);
+    
+    onImagesSelected(imageFiles);
+  }
+  
   function triggerFileSelect() {
     fileInput.click();
   }
 </script>
 
 <div class="upload-container">
-  <h3>Upload Your Photo</h3>
-  <p class="subtitle">Upload a photo that will inspire your monster creation</p>
+  <h3>Upload Your Photo{imageQueue.length > 1 ? 's' : ''}</h3>
+  <p class="subtitle">Upload {imageQueue.length > 1 ? 'photos' : 'a photo'} that will inspire your monster creation</p>
+  
+  <!-- Image Queue Thumbnails -->
+  {#if imageQueue.length > 1}
+    <div class="queue-container">
+      <div class="queue-header">
+        <span class="queue-title">Processing {currentImageIndex + 1} of {imageQueue.length} images</span>
+      </div>
+      <div class="queue-thumbnails">
+        {#each imageQueue as image, index}
+          {@const isCurrentImage = index === currentImageIndex}
+          {@const isProcessed = index < currentImageIndex}
+          <div class="queue-thumbnail" class:current={isCurrentImage} class:processed={isProcessed}>
+            <img src={URL.createObjectURL(image)} alt="Queue thumbnail {index + 1}" />
+            <div class="thumbnail-overlay">
+              {#if isProcessed}
+                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
+                </svg>
+              {:else if isCurrentImage}
+                <div class="processing-indicator"></div>
+              {:else}
+                <span class="queue-number">{index + 1}</span>
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
   
   <div 
     class="upload-area"
@@ -92,6 +155,7 @@
   <input
     type="file"
     accept="image/*"
+    multiple
     onchange={handleFileSelect}
     bind:this={fileInput}
     class="hidden-input"
@@ -192,4 +256,99 @@
     color: white;
     font-size: 1.1rem;
   }
+  
+  /* Queue Thumbnails */
+  .queue-container {
+    margin-bottom: 2rem;
+    padding: 1rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+  }
+  
+  .queue-header {
+    margin-bottom: 1rem;
+    text-align: center;
+  }
+  
+  .queue-title {
+    font-weight: 600;
+    color: #495057;
+    font-size: 0.9rem;
+  }
+  
+  .queue-thumbnails {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .queue-thumbnail {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 2px solid #dee2e6;
+    transition: all 0.3s ease;
+  }
+  
+  .queue-thumbnail.current {
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+  }
+  
+  .queue-thumbnail.processed {
+    border-color: #28a745;
+    opacity: 0.8;
+  }
+  
+  .queue-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .thumbnail-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 24px;
+    height: 24px;
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: 0 6px 0 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+  
+  .queue-thumbnail.processed .thumbnail-overlay {
+    background: #28a745;
+  }
+  
+  .queue-thumbnail.current .thumbnail-overlay {
+    background: #007bff;
+  }
+  
+  .processing-indicator {
+    width: 12px;
+    height: 12px;
+    border: 2px solid #ffffff;
+    border-top: 2px solid transparent;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+  
+  .queue-number {
+    font-size: 0.7rem;
+  }
+  
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
 </style>