simpler

src/lib/components/AutoTrainerScanner/AutoTrainerScanner.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
   import type { GradioClient } from '$lib/types';
-  import { TrainerScanService, type TrainerScanState } from '$lib/services/trainerScanService';
-  import { resetFailedScans } from '$lib/db/trainerScanning';
+  import { 
+    initializeTrainerScanProgress, 
+    getNextPendingImage, 
+    markImageProcessingCompleted,
+    markImageProcessingFailed,
+    getScanningStats
+  } from '$lib/db/trainerScanning';
+  import PicletGenerator from '$lib/components/PicletGenerator/PicletGenerator.svelte';
   
   interface Props {
     joyCaptionClient: GradioClient;
@@ -11,45 +17,53 @@
   
   let { joyCaptionClient, zephyrClient, fluxClient }: Props = $props();
   
-  // Scanner service and state
-  let scanService: TrainerScanService | null = null;
-  let scanState: TrainerScanState = $state({
+  // Scanner state
+  let scanState = $state({
     isScanning: false,
-    currentImage: null,
-    currentTrainer: null,
+    currentImage: null as string | null,
+    currentTrainer: null as string | null,
     progress: {
       total: 0,
       completed: 0,
       failed: 0,
       pending: 0
     },
-    error: null
+    error: null as string | null
   });
   
   let showDetails = $state(false);
   let isInitializing = $state(false);
+  let shouldStop = $state(false);
   
-  // Initialize scan service when clients are available
+  // Reference to PicletGenerator component
+  let picletGenerator: any;
+  
+  // Initialize trainer paths on component mount
   $effect(() => {
-    if (joyCaptionClient && zephyrClient && fluxClient && !scanService) {
-      scanService = new TrainerScanService(joyCaptionClient, zephyrClient, fluxClient);
-      
-      // Subscribe to state changes
-      scanService.onStateChange((newState) => {
-        scanState = newState;
-      });
-      
-      // Load initial state
+    if (joyCaptionClient && zephyrClient && fluxClient) {
       loadInitialState();
     }
   });
   
   async function loadInitialState() {
-    if (!scanService) return;
-    
     try {
       isInitializing = true;
-      await scanService.initializeFromFile();
+      
+      // Load trainer image paths and initialize database
+      const response = await fetch('/trainer_image_paths.txt');
+      if (!response.ok) {
+        throw new Error(`Failed to fetch trainer_image_paths.txt: ${response.statusText}`);
+      }
+      
+      const content = await response.text();
+      const imagePaths = content.trim().split('\n')
+        .map(path => typeof path === 'string' ? path.trim() : '')
+        .filter(path => path.length > 0);
+      
+      console.log(`Loaded ${imagePaths.length} trainer image paths`);
+      
+      await initializeTrainerScanProgress(imagePaths);
+      await updateProgress();
     } catch (error) {
       console.error('Failed to initialize scanner:', error);
       scanState.error = error instanceof Error ? error.message : 'Failed to initialize';
@@ -58,37 +72,102 @@
     }
   }
   
+  async function updateProgress() {
+    const stats = await getScanningStats();
+    scanState.progress = {
+      total: stats.total,
+      completed: stats.completed,
+      failed: stats.failed,
+      pending: stats.pending
+    };
+  }
+  
   async function startScanning() {
-    if (!scanService) return;
+    if (scanState.isScanning) return;
+    
+    scanState.isScanning = true;
+    scanState.error = null;
+    shouldStop = false;
     
     try {
-      await scanService.startScanning();
+      await processTrainerImages();
     } catch (error) {
-      console.error('Failed to start scanning:', error);
-      scanState.error = error instanceof Error ? error.message : 'Failed to start scanning';
+      console.error('Scanning error:', error);
+      scanState.error = error instanceof Error ? error.message : 'Unknown error';
+    } finally {
+      scanState.isScanning = false;
+      scanState.currentImage = null;
+      scanState.currentTrainer = null;
     }
   }
   
   function stopScanning() {
-    if (!scanService) return;
-    scanService.stopScanning();
+    shouldStop = true;
   }
   
-  async function retryFailedScans() {
-    try {
-      const resetCount = await resetFailedScans();
-      console.log(`Reset ${resetCount} failed scans to pending`);
+  async function processTrainerImages() {
+    while (!shouldStop) {
+      const nextImage = await getNextPendingImage();
       
-      // Refresh state
-      if (scanService) {
-        await scanService.initializeFromFile();
+      if (!nextImage) {
+        // No more pending images
+        break;
       }
-    } catch (error) {
-      console.error('Failed to retry failed scans:', error);
-      scanState.error = error instanceof Error ? error.message : 'Failed to retry failed scans';
+      
+      scanState.currentImage = nextImage.imagePath;
+      scanState.currentTrainer = nextImage.trainerName;
+      
+      try {
+        // Fetch remote image
+        const imageFile = await fetchRemoteImage(nextImage.remoteUrl, nextImage.imagePath);
+        
+        // Queue the image in PicletGenerator
+        if (picletGenerator) {
+          picletGenerator.queueTrainerImage(imageFile, nextImage.imagePath);
+        }
+        
+        // Wait for this image to be processed before continuing
+        // (The onTrainerImageCompleted callback will handle the database update)
+        
+      } catch (error) {
+        console.error(`Failed to process ${nextImage.imagePath}:`, error);
+        await markImageProcessingFailed(
+          nextImage.imagePath, 
+          error instanceof Error ? error.message : 'Unknown error'
+        );
+      }
+      
+      await updateProgress();
+      
+      // Small delay between images
+      await new Promise(resolve => setTimeout(resolve, 1000));
     }
   }
   
+  async function fetchRemoteImage(remoteUrl: string, originalPath: string): Promise<File> {
+    const response = await fetch(remoteUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${remoteUrl}: ${response.statusText}`);
+    }
+    
+    const blob = await response.blob();
+    const fileName = originalPath.split('/').pop() || 'trainer_image.jpg';
+    
+    return new File([blob], fileName, { type: blob.type });
+  }
+  
+  async function onTrainerImageCompleted(imagePath: string, picletId: number) {
+    console.log(`✅ Trainer image completed: ${imagePath} -> Piclet ID: ${picletId}`);
+    await markImageProcessingCompleted(imagePath, picletId);
+    await updateProgress();
+  }
+  
+  async function onTrainerImageFailed(imagePath: string, error: string) {
+    console.error(`❌ Trainer image failed: ${imagePath} -> ${error}`);
+    await markImageProcessingFailed(imagePath, error);
+    await updateProgress();
+  }
+  
   function formatImageName(imagePath: string | null): string {
     if (!imagePath) return '';
     const parts = imagePath.split('/');
@@ -168,12 +247,6 @@
           >
             ▶️ Start Auto Scan
           </button>
-          
-          {#if scanState.progress.failed > 0}
-            <button class="retry-button" onclick={retryFailedScans}>
-              🔄 Retry Failed ({scanState.progress.failed})
-            </button>
-          {/if}
         </div>
       {/if}
       
@@ -219,6 +292,20 @@
   {/if}
 </div>
 
+<!-- Hidden PicletGenerator for trainer mode processing -->
+<div style="display: none;">
+  <PicletGenerator 
+    bind:this={picletGenerator}
+    {joyCaptionClient}
+    {zephyrClient}
+    {fluxClient}
+    qwenClient={zephyrClient}
+    isTrainerMode={true}
+    onTrainerImageCompleted={onTrainerImageCompleted}
+    onTrainerImageFailed={onTrainerImageFailed}
+  />
+</div>
+
 <style>
   .auto-trainer-scanner {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -338,7 +425,7 @@
     margin-bottom: 1rem;
   }
   
-  .start-button, .stop-button, .retry-button {
+  .start-button, .stop-button {
     padding: 0.8rem 1.2rem;
     border: none;
     border-radius: 8px;
@@ -373,15 +460,6 @@
     box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
   }
   
-  .retry-button {
-    background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
-    color: white;
-  }
-  
-  .retry-button:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(255, 167, 38, 0.3);
-  }
   
   .progress-details {
     margin-bottom: 1rem;

src/lib/components/PicletGenerator/PicletGenerator.svelte

@@ -11,9 +11,22 @@
   import { PicletType, TYPE_DATA } from '$lib/types/picletTypes';
   import { EncounterService } from '$lib/db/encounterService';
   
-  interface Props extends PicletGeneratorProps {}
+  interface Props extends PicletGeneratorProps {
+    // Trainer mode props
+    isTrainerMode?: boolean;
+    onTrainerImageCompleted?: (imagePath: string, picletId: number) => void;
+    onTrainerImageFailed?: (imagePath: string, error: string) => void;
+  }
   
-  let { joyCaptionClient, zephyrClient, fluxClient, qwenClient }: Props = $props();
+  let { 
+    joyCaptionClient, 
+    zephyrClient, 
+    fluxClient, 
+    qwenClient,
+    isTrainerMode = false,
+    onTrainerImageCompleted,
+    onTrainerImageFailed
+  }: Props = $props();
   
   let state: PicletWorkflowState = $state({
     currentStep: 'upload',
@@ -31,6 +44,9 @@
   let imageQueue: File[] = $state([]);
   let currentImageIndex: number = $state(0);
   
+  // Track trainer image metadata when in trainer mode
+  let trainerImagePaths: string[] = $state([]);
+  
   const IMAGE_GENERATION_PROMPT = (concept: string) => `Extract ONLY the visual appearance from this monster concept and describe it in one concise sentence:
 "${concept}"
 
@@ -959,6 +975,11 @@ Write your response within \`\`\`json\`\`\``;
       const picletInstance = await generatedDataToPicletInstance(picletData);
       const picletId = await savePicletInstance(picletInstance);
       console.log('Piclet auto-saved as uncaught with ID:', picletId);
+      
+      // If in trainer mode, notify completion
+      if (isTrainerMode && onTrainerImageCompleted && trainerImagePaths[currentImageIndex]) {
+        onTrainerImageCompleted(trainerImagePaths[currentImageIndex], picletId);
+      }
     } catch (err) {
       console.error('Failed to auto-save piclet:', err);
       console.error('Piclet data that failed to save:', {
@@ -967,6 +988,13 @@ Write your response within \`\`\`json\`\`\``;
         hasImageData: !!state.picletImage?.imageData,
         hasStats: !!state.picletStats
       });
+      
+      // If in trainer mode, notify failure
+      if (isTrainerMode && onTrainerImageFailed && trainerImagePaths[currentImageIndex]) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to save piclet';
+        onTrainerImageFailed(trainerImagePaths[currentImageIndex], errorMessage);
+      }
+      
       // Don't throw - we don't want to interrupt the workflow
     }
   }
@@ -984,6 +1012,17 @@ Write your response within \`\`\`json\`\`\``;
       isProcessing: false
     };
   }
+  
+  // Public method for trainer scanner to queue trainer images
+  export function queueTrainerImage(imageFile: File, imagePath: string) {
+    imageQueue.push(imageFile);
+    trainerImagePaths.push(imagePath);
+    
+    // If this is the first image and we're not processing, start processing
+    if (imageQueue.length === 1 && !state.isProcessing) {
+      processCurrentImage();
+    }
+  }
 </script>
 
 <div class="piclet-generator">

src/lib/services/trainerScanService.ts

@@ -8,10 +8,6 @@ import {
   getScanningStats,
   getCurrentProcessingImage
 } from '$lib/db/trainerScanning';
-import { savePicletInstance, generatedDataToPicletInstance } from '$lib/db/piclets';
-import { extractPicletMetadata } from './picletMetadata';
-import { removeBackground } from '$lib/utils/professionalImageProcessing';
-import type { PicletStats } from '$lib/types';
 
 export interface TrainerScanState {
   isScanning: boolean;
@@ -211,63 +207,10 @@ export class TrainerScanService {
     }
   }
   
-  // Process a single remote image
+  // DEPRECATED: This service is no longer used
+  // The AutoTrainerScanner now directly uses PicletGenerator component
   private async processImage(imagePath: string, remoteUrl: string): Promise<void> {
-    await markImageProcessingStarted(imagePath);
-    
-    try {
-      console.log(`🔄 Processing ${imagePath}: Fetching remote image...`);
-      // Fetch remote image
-      const imageFile = await this.fetchRemoteImage(remoteUrl, imagePath);
-      
-      console.log(`🔄 Processing ${imagePath}: Captioning image...`);
-      // Caption the image
-      const imageCaption = await this.captionImage(imageFile);
-      
-      console.log(`🔄 Processing ${imagePath}: Generating concept...`);
-      // Generate monster concept
-      const picletConcept = await this.generatePicletConcept(imageCaption);
-      
-      console.log(`🔄 Processing ${imagePath}: Generating stats...`);
-      // Generate stats
-      const picletStats = await this.generatePicletStats(picletConcept);
-      
-      console.log(`🔄 Processing ${imagePath}: Generating image prompt...`);
-      // Generate image prompt
-      const imagePrompt = await this.generateImagePrompt(picletConcept);
-      
-      console.log(`🔄 Processing ${imagePath}: Generating monster image...`);
-      // Generate monster image
-      const picletImageUrl = await this.generateMonsterImage(imagePrompt);
-      
-      console.log(`🔄 Processing ${imagePath}: Processing generated image...`);
-      // Process generated image (remove background)
-      const imageData = await this.processGeneratedImage(picletImageUrl);
-      
-      console.log(`🔄 Processing ${imagePath}: Creating piclet instance...`);
-      // Create piclet instance
-      const generatedData = {
-        name: this.extractNameFromConcept(picletConcept),
-        imageUrl: picletImageUrl,
-        imageData,
-        imageCaption,
-        concept: picletConcept,
-        imagePrompt,
-        stats: picletStats,
-        createdAt: new Date()
-      };
-      
-      const picletInstance = await generatedDataToPicletInstance(generatedData, 5);
-      const savedId = await savePicletInstance(picletInstance);
-      
-      await markImageProcessingCompleted(imagePath, savedId);
-      
-    } catch (error) {
-      // Add context about which step failed
-      const enhancedError = new Error(`Failed during processing of ${imagePath}: ${error instanceof Error ? error.message : 'Unknown error'}`);
-      enhancedError.cause = error;
-      throw enhancedError;
-    }
+    throw new Error('TrainerScanService is deprecated - use PicletGenerator directly');
   }
   
   // Fetch remote image and convert to File
@@ -283,128 +226,4 @@ export class TrainerScanService {
     return new File([blob], fileName, { type: blob.type });
   }
   
-  // Caption image using Joy Caption
-  private async captionImage(imageFile: File): Promise<string> {
-    const result = await this.joyCaptionClient.predict("/caption", [imageFile, "descriptive", "any", false]);
-    const captionResult = result.data[0] as string;
-    
-    if (!captionResult || captionResult.trim() === '') {
-      throw new Error('Failed to generate image caption');
-    }
-    
-    return captionResult.trim();
-  }
-  
-  // Generate piclet concept using Zephyr
-  private async generatePicletConcept(imageCaption: string): Promise<string> {
-    const prompt = `Based on this image description, create a unique creature concept for a Pokemon-style monster collection game called "Pictuary":
-
-"${imageCaption}"
-
-Create a creative, original monster concept that:
-1. Is inspired by elements from the image but is clearly a fantastical creature
-2. Has a unique name and personality
-3. Includes special abilities related to its appearance
-4. Is suitable for a family-friendly game
-
-Write a detailed monster concept (2-3 paragraphs).`;
-
-    const result = await this.zephyrClient.predict("/chat", [
-      [["user", prompt]],
-      512,  // max tokens
-      0.7,  // temperature
-      0.9,  // top_p
-    ]);
-    
-    const conceptResult = result.data[0][1][1] as string;
-    
-    if (!conceptResult || conceptResult.trim() === '') {
-      throw new Error('Failed to generate piclet concept');
-    }
-    
-    return conceptResult.trim();
-  }
-  
-  // Generate piclet stats
-  private async generatePicletStats(concept: string): Promise<PicletStats> {
-    return await extractPicletMetadata(concept, this.zephyrClient);
-  }
-  
-  // Generate image prompt for monster creation
-  private async generateImagePrompt(concept: string): Promise<string> {
-    const prompt = `Extract ONLY the visual appearance from this monster concept and describe it in one concise sentence:
-"${concept}"
-
-Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit backstory, abilities, and non-visual details.`;
-
-    const result = await this.zephyrClient.predict("/chat", [
-      [["user", prompt]],
-      256,  // max tokens
-      0.5,  // temperature  
-      0.9,  // top_p
-    ]);
-    
-    const promptResult = result.data[0][1][1] as string;
-    
-    if (!promptResult || promptResult.trim() === '') {
-      throw new Error('Failed to generate image prompt');
-    }
-    
-    return promptResult.trim();
-  }
-  
-  // Generate monster image using Flux
-  private async generateMonsterImage(imagePrompt: string): Promise<string> {
-    const fullPrompt = `${imagePrompt}, digital art, creature design, fantasy monster, clean background, professional illustration`;
-    
-    const result = await this.fluxClient.predict("/infer", [
-      fullPrompt,
-      "",  // negative prompt
-      832, // width
-      1216, // height  
-      1,   // num inference steps
-      3.0, // guidance scale
-      0,   // seed
-    ]);
-    
-    const imageUrl = result.data[0] as string;
-    
-    if (!imageUrl) {
-      throw new Error('Failed to generate monster image');
-    }
-    
-    return imageUrl;
-  }
-  
-  // Process generated image (remove background)
-  private async processGeneratedImage(imageUrl: string): Promise<string> {
-    try {
-      return await removeBackground(imageUrl);
-    } catch (error) {
-      console.warn('Background removal failed, using original image:', error);
-      return imageUrl;
-    }
-  }
-  
-  // Extract name from concept text
-  private extractNameFromConcept(concept: string): string {
-    // Try to find a name in common patterns
-    const patterns = [
-      /(?:called|named)\s+([A-Z][a-z]+(?:\s+[A-Z][a-z]+)?)/,
-      /^([A-Z][a-z]+(?:\s+[A-Z][a-z]+)?)/,
-      /this\s+([A-Z][a-z]+(?:\s+[A-Z][a-z]+)?)/,
-    ];
-    
-    for (const pattern of patterns) {
-      const match = concept.match(pattern);
-      if (match && match[1]) {
-        return match[1].trim();
-      }
-    }
-    
-    // Fallback to generating a random trainer-inspired name
-    const trainerNames = ['Snap', 'Blaze', 'Nimbus', 'Breaker', 'Trinket'];
-    const randomName = trainerNames[Math.floor(Math.random() * trainerNames.length)];
-    return `Trainer${randomName}`;
-  }
 }