monster-piclet

src/lib/components/Pages/Scanner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MonsterGenerator from '../MonsterGenerator/MonsterGenerator.svelte';
+  import PicletGenerator from '../PicletGenerator/PicletGenerator.svelte';
   import type { GradioClient } from '$lib/types';
   
   interface Props {
@@ -13,7 +13,7 @@
 
 <div class="scanner-page">
   {#if fluxClient && joyCaptionClient && zephyrClient}
-    <MonsterGenerator 
+    <PicletGenerator 
       {fluxClient}
       {joyCaptionClient}
       {zephyrClient}

src/lib/components/{MonsterGenerator/MonsterGenerator.svelte → PicletGenerator/PicletGenerator.svelte}

@@ -1,27 +1,26 @@
 <script lang="ts">
-  import type { MonsterGeneratorProps, MonsterWorkflowState, CaptionType, CaptionLength, MonsterStats } from '$lib/types';
+  import type { PicletGeneratorProps, PicletWorkflowState, CaptionType, CaptionLength, PicletStats } from '$lib/types';
   import type { PicletInstance } from '$lib/db/schema';
   import UploadStep from './UploadStep.svelte';
   import WorkflowProgress from './WorkflowProgress.svelte';
-  import MonsterResult from './MonsterResult.svelte';
+  import PicletResult from './PicletResult.svelte';
   import { removeBackground } from '$lib/utils/professionalImageProcessing';
-  import { saveMonster } from '$lib/db/monsters';
   import { extractPicletMetadata } from '$lib/services/picletMetadata';
-  import { savePicletInstance } from '$lib/db/piclets';
+  import { savePicletInstance, monsterToPicletInstance } from '$lib/db/piclets';
   import { PicletType, TYPE_DATA } from '$lib/types/picletTypes';
   
-  interface Props extends MonsterGeneratorProps {}
+  interface Props extends PicletGeneratorProps {}
   
   let { joyCaptionClient, zephyrClient, fluxClient }: Props = $props();
   
-  let state: MonsterWorkflowState = $state({
+  let state: PicletWorkflowState = $state({
     currentStep: 'upload',
     userImage: null,
     imageCaption: null,
-    monsterConcept: null,
-    monsterStats: null,
+    picletConcept: null,
+    picletStats: null,
     imagePrompt: null,
-    monsterImage: null,
+    picletImage: null,
     error: null,
     isProcessing: false
   });
@@ -66,9 +65,11 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
       const savedId = await savePicletInstance(picletData);
       
       // Create a success state similar to generation
-      state.monsterImage = {
+      state.picletImage = {
         imageUrl: picletData.imageUrl,
-        imageData: picletData.imageData
+        imageData: picletData.imageData,
+        seed: 0,
+        prompt: 'Imported piclet'
       };
       
       // Show import success
@@ -118,8 +119,8 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
       // Step 3: Generate monster image
       await generateMonsterImage();
       
-      // Step 4: Auto-save the monster
-      await autoSaveMonster();
+      // Step 4: Auto-save the piclet
+      await autoSavePiclet();
       
       state.currentStep = 'complete';
     } catch (err) {
@@ -187,7 +188,7 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
       const [prompt, caption] = output.data;
       // The caption now contains the full monster concept with lore, visual description, and rarity
       state.imageCaption = caption;
-      state.monsterConcept = caption; // Store as concept since it's the full monster details
+      state.picletConcept = caption; // Store as concept since it's the full monster details
       console.log('Monster concept generated:', caption);
     } catch (error) {
       handleAPIError(error);
@@ -199,12 +200,12 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
   async function generateMonsterImage() {
     state.currentStep = 'generating';
     
-    if (!fluxClient || !state.monsterConcept || !state.monsterStats) {
+    if (!fluxClient || !state.picletConcept || !state.picletStats) {
       throw new Error('Image generation service not available or no concept/stats');
     }
     
     // Extract the visual description from the joy-caption output
-    const visualDescMatch = state.monsterConcept.match(/## Monster Visual Description\s*\n([\s\S]*?)(?=##|$)/);
+    const visualDescMatch = state.picletConcept.match(/## Monster Visual Description\s*\n([\s\S]*?)(?=##|$)/);
     
     if (visualDescMatch && visualDescMatch[1]) {
       state.imagePrompt = visualDescMatch[1].trim();
@@ -213,7 +214,7 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
       // Fallback: use text generation to extract visual description
       console.log('Using text generation for visual description extraction');
       
-      const promptGenerationPrompt = IMAGE_GENERATION_PROMPT(state.monsterConcept);
+      const promptGenerationPrompt = IMAGE_GENERATION_PROMPT(state.picletConcept);
       const systemPrompt = "You are an expert at creating concise visual descriptions for image generation. Extract ONLY visual appearance details and describe them in ONE sentence (max 50 words). Focus on colors, shape, eyes, limbs, and distinctive features. Omit all non-visual information like abilities, personality, or backstory.";
       
       console.log('Using smart text generation for visual description extraction');
@@ -241,7 +242,7 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
     }
     
     // Get tier for image quality enhancement
-    const tier = state.monsterStats.tier || 'medium';
+    const tier = state.picletStats.tier || 'medium';
     const tierDescriptions = {
       low: 'simple and basic design',
       medium: 'detailed and well-crafted design', 
@@ -271,7 +272,7 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
         console.log('Processing image for background removal...');
         try {
           const transparentBase64 = await removeBackground(url);
-          state.monsterImage = {
+          state.picletImage = {
             imageUrl: url,
             imageData: transparentBase64,
             seed: usedSeed,
@@ -281,7 +282,7 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
         } catch (processError) {
           console.error('Failed to process image for background removal:', processError);
           // Fallback to original image
-          state.monsterImage = {
+          state.picletImage = {
             imageUrl: url,
             seed: usedSeed,
             prompt: state.imagePrompt
@@ -298,7 +299,7 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
   async function generateStats() {
     state.currentStep = 'statsGenerating';
     
-    if (!state.monsterConcept) {
+    if (!state.picletConcept) {
       throw new Error('No concept available for stats generation');
     }
     
@@ -306,11 +307,11 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
     let tier: 'low' | 'medium' | 'high' | 'legendary' = 'medium';
     
     // Extract object description from the Object Caption section
-    const objectMatch = state.monsterConcept.match(/# Object Caption\s*\n([\s\S]*?)(?=^# )/m);
+    const objectMatch = state.picletConcept.match(/# Object Caption\s*\n([\s\S]*?)(?=^# )/m);
     const objectDescription = objectMatch ? objectMatch[1].trim() : '';
     
     // Extract monster name from the Monster Name section - similar to object extraction
-    const monsterNameMatch = state.monsterConcept.match(/# Monster Name\s*\n([\s\S]*?)(?=^## |$)/m);
+    const monsterNameMatch = state.picletConcept.match(/# Monster Name\s*\n([\s\S]*?)(?=^## |$)/m);
     const monsterName = monsterNameMatch ? monsterNameMatch[1].trim() : 'Unknown Monster';
     
     // Debug logging
@@ -319,7 +320,7 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
     
     // Create stats prompt - only ask for battle-related stats
     const statsPrompt = `Based on this monster concept, generate a JSON object with battle stats and abilities:
-"${state.monsterConcept}"
+"${state.picletConcept}"
 
 The original object is described as: "${objectDescription}"
 
@@ -483,8 +484,8 @@ Write your response within \`\`\`json\`\`\``;
           delete parsedStats.disparageActionDescription;
         }
         
-        const stats: MonsterStats = parsedStats;
-        state.monsterStats = stats;
+        const stats: PicletStats = parsedStats;
+        state.picletStats = stats;
         console.log('Monster stats generated:', stats);
         console.log('Monster stats JSON:', JSON.stringify(stats, null, 2));
       } catch (parseError) {
@@ -496,45 +497,48 @@ Write your response within \`\`\`json\`\`\``;
     }
   }
   
-  async function autoSaveMonster() {
-    if (!state.monsterImage || !state.imageCaption || !state.monsterConcept || !state.imagePrompt || !state.monsterStats) {
+  async function autoSavePiclet() {
+    if (!state.picletImage || !state.imageCaption || !state.picletConcept || !state.imagePrompt || !state.picletStats) {
       console.error('Cannot auto-save: missing required data');
       return;
     }
     
     try {
       // Create a clean copy of stats to ensure it's serializable
-      const cleanStats = JSON.parse(JSON.stringify(state.monsterStats));
+      const cleanStats = JSON.parse(JSON.stringify(state.picletStats));
       
-      const monsterData = {
-        name: state.monsterStats.name,
-        imageUrl: state.monsterImage.imageUrl,
-        imageData: state.monsterImage.imageData,
+      const picletData = {
+        name: state.picletStats.name,
+        imageUrl: state.picletImage.imageUrl,
+        imageData: state.picletImage.imageData,
         imageCaption: state.imageCaption,
-        concept: state.monsterConcept,
+        concept: state.picletConcept,
         imagePrompt: state.imagePrompt,
-        stats: cleanStats
+        stats: cleanStats,
+        createdAt: new Date()
       };
       
       // Check for any non-serializable data
-      console.log('Checking monster data for serializability:');
-      console.log('- name type:', typeof monsterData.name);
-      console.log('- imageUrl type:', typeof monsterData.imageUrl);
-      console.log('- imageData type:', typeof monsterData.imageData, monsterData.imageData ? `length: ${monsterData.imageData.length}` : 'null/undefined');
-      console.log('- imageCaption type:', typeof monsterData.imageCaption);
-      console.log('- concept type:', typeof monsterData.concept);
-      console.log('- imagePrompt type:', typeof monsterData.imagePrompt);
+      console.log('Checking piclet data for serializability:');
+      console.log('- name type:', typeof picletData.name);
+      console.log('- imageUrl type:', typeof picletData.imageUrl);
+      console.log('- imageData type:', typeof picletData.imageData, picletData.imageData ? `length: ${picletData.imageData.length}` : 'null/undefined');
+      console.log('- imageCaption type:', typeof picletData.imageCaption);
+      console.log('- concept type:', typeof picletData.concept);
+      console.log('- imagePrompt type:', typeof picletData.imagePrompt);
       console.log('- stats:', cleanStats);
       
-      const id = await saveMonster(monsterData);
-      console.log('Monster auto-saved with ID:', id);
+      // Convert to PicletInstance format and save
+      const picletInstance = await monsterToPicletInstance(picletData);
+      const id = await savePicletInstance(picletInstance);
+      console.log('Piclet auto-saved with ID:', id);
     } catch (err) {
-      console.error('Failed to auto-save monster:', err);
-      console.error('Monster data that failed to save:', {
-        name: state.monsterStats?.name,
-        hasImageUrl: !!state.monsterImage?.imageUrl,
-        hasImageData: !!state.monsterImage?.imageData,
-        hasStats: !!state.monsterStats
+      console.error('Failed to auto-save piclet:', err);
+      console.error('Piclet data that failed to save:', {
+        name: state.picletStats?.name,
+        hasImageUrl: !!state.picletImage?.imageUrl,
+        hasImageData: !!state.picletImage?.imageData,
+        hasStats: !!state.picletStats
       });
       // Don't throw - we don't want to interrupt the workflow
     }
@@ -545,17 +549,17 @@ Write your response within \`\`\`json\`\`\``;
       currentStep: 'upload',
       userImage: null,
       imageCaption: null,
-      monsterConcept: null,
-      monsterStats: null,
+      picletConcept: null,
+      picletStats: null,
       imagePrompt: null,
-      monsterImage: null,
+      picletImage: null,
       error: null,
       isProcessing: false
     };
   }
 </script>
 
-<div class="monster-generator">
+<div class="piclet-generator">
   
   {#if state.currentStep !== 'upload'}
     <WorkflowProgress currentStep={state.currentStep} error={state.error} />
@@ -567,7 +571,7 @@ Write your response within \`\`\`json\`\`\``;
       isProcessing={state.isProcessing}
     />
   {:else if state.currentStep === 'complete'}
-    <MonsterResult workflowState={state} onReset={reset} />
+    <PicletResult workflowState={state} onReset={reset} />
   {:else}
     <div class="processing-container">
       <div class="spinner"></div>
@@ -585,7 +589,7 @@ Write your response within \`\`\`json\`\`\``;
 </div>
 
 <style>
-  .monster-generator {
+  .piclet-generator {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;

src/lib/components/{MonsterGenerator/MonsterResult.svelte → PicletGenerator/PicletResult.svelte}

@@ -1,14 +1,13 @@
 <script lang="ts">
-  import type { MonsterWorkflowState } from '$lib/types';
+  import type { PicletWorkflowState } from '$lib/types';
   import type { PicletInstance } from '$lib/db/schema';
-  import { saveMonster } from '$lib/db/monsters';
   import { TYPE_DATA, PicletType } from '$lib/types/picletTypes';
   import { monsterToPicletInstance } from '$lib/db/piclets';
   import PicletCard from '../Piclets/PicletCard.svelte';
   import PicletDetail from '../Piclets/PicletDetail.svelte';
   
   interface Props {
-    workflowState: MonsterWorkflowState;
+    workflowState: PicletWorkflowState;
     onReset: () => void;
   }
   
@@ -19,23 +18,31 @@
   let showDetailView = $state(false);
   let saveError: string | null = $state(null);
 
-  // Create piclet instance from the monster data
+  // Create piclet instance from the generated data
   $effect(() => {
-    if (workflowState.monsterImage && workflowState.monsterConcept && workflowState.monsterStats) {
+    if (workflowState.picletImage && workflowState.picletConcept && workflowState.picletStats) {
       try {
-        const monster = {
-          name: workflowState.monsterStats.name || 'Unknown Monster',
-          imageUrl: workflowState.monsterImage.imageUrl,
-          imageData: workflowState.monsterImage.imageData,
+        const picletData = {
+          name: workflowState.picletStats.name || 'Unknown Piclet',
+          imageUrl: workflowState.picletImage.imageUrl,
+          imageData: workflowState.picletImage.imageData,
           imageCaption: workflowState.imageCaption || '',
-          concept: workflowState.monsterConcept,
+          concept: workflowState.picletConcept,
           imagePrompt: workflowState.imagePrompt || '',
-          stats: workflowState.monsterStats
+          stats: workflowState.picletStats,
+          createdAt: new Date()
         };
         
-        picletInstance = monsterToPicletInstance(monster);
+        // Create piclet instance asynchronously
+        monsterToPicletInstance(picletData).then(instance => {
+          picletInstance = { ...instance, id: 0 }; // Add temporary id for display
+        }).catch(error => {
+          console.error('Failed to create piclet instance:', error);
+          saveError = `Failed to create piclet: ${(error as Error).message || String(error)}`;
+        });
       } catch (error) {
         console.error('Failed to create piclet instance:', error);
+        saveError = `Failed to create piclet: ${(error as Error).message || String(error)}`;
       }
     }
   });

src/lib/components/{MonsterGenerator → PicletGenerator}/WorkflowProgress.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import type { MonsterWorkflowStep } from '$lib/types';
+  import type { PicletWorkflowStep } from '$lib/types';
   
   interface Props {
-    currentStep: MonsterWorkflowStep;
+    currentStep: PicletWorkflowStep;
     error?: string | null;
   }
   
   let { currentStep, error = null }: Props = $props();
   
   interface StepInfo {
-    id: MonsterWorkflowStep;
+    id: PicletWorkflowStep;
     label: string;
     description: string;
   }
@@ -22,7 +22,7 @@
     },
     {
       id: 'captioning',
-      label: 'Monster Design',
+      label: 'Piclet Design',
       description: 'Creating concept & lore'
     },
     {
@@ -33,16 +33,16 @@
     {
       id: 'generating',
       label: 'Image Generation',
-      description: 'Creating monster art'
+      description: 'Creating piclet art'
     },
     {
       id: 'complete',
       label: 'Complete',
-      description: 'Your monster is ready!'
+      description: 'Your piclet is ready!'
     }
   ];
   
-  function getStepIndex(step: MonsterWorkflowStep): number {
+  function getStepIndex(step: PicletWorkflowStep): number {
     return steps.findIndex(s => s.id === step);
   }
   

src/lib/db/piclets.ts

@@ -29,9 +29,18 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
   // Determine primary type - use picletType from stats if available, otherwise auto-detect
   let primaryType: PicletType;
   if (monster.stats && (monster.stats as any).picletType) {
-    // Use the type determined during stat generation
+    // Use the type determined during stat generation, but validate it
     const statsType = (monster.stats as any).picletType as string;
-    primaryType = statsType as PicletType;
+    const normalizedType = statsType.toLowerCase();
+    
+    // Validate that the type exists in our enum
+    const validType = Object.values(PicletType).find(type => type === normalizedType);
+    if (validType) {
+      primaryType = validType;
+    } else {
+      console.warn(`Invalid picletType "${statsType}" from stats, falling back to concept detection`);
+      primaryType = getTypeFromConcept(monster.concept, monster.imageCaption);
+    }
   } else {
     // Fallback to concept-based detection
     primaryType = getTypeFromConcept(monster.concept, monster.imageCaption);

src/lib/types/index.ts

@@ -74,8 +74,8 @@ export interface GradioLibs {
   };
 }
 
-// Monster Generator Types
-export type MonsterWorkflowStep = 
+// Piclet Generator Types
+export type PicletWorkflowStep = 
   | 'upload' 
   | 'captioning' 
   | 'conceptualizing'
@@ -84,26 +84,26 @@ export type MonsterWorkflowStep =
   | 'generating' 
   | 'complete';
 
-export interface MonsterWorkflowState {
-  currentStep: MonsterWorkflowStep;
+export interface PicletWorkflowState {
+  currentStep: PicletWorkflowStep;
   userImage: Blob | null;
   imageCaption: string | null;
-  monsterConcept: string | null;
-  monsterStats: MonsterStats | null;
+  picletConcept: string | null;
+  picletStats: PicletStats | null;
   imagePrompt: string | null;
-  monsterImage: FluxGenerationResult | null;
+  picletImage: FluxGenerationResult | null;
   error: string | null;
   isProcessing: boolean;
 }
 
-export interface MonsterGeneratorProps {
+export interface PicletGeneratorProps {
   joyCaptionClient: GradioClient | null;
   zephyrClient: GradioClient | null;
   fluxClient: GradioClient | null;
 }
 
-// Monster Stats Types
-export interface MonsterStats {
+// Piclet Stats Types
+export interface PicletStats {
   name: string;
   description: string;
   tier: 'low' | 'medium' | 'high' | 'legendary';