scanner DB update

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -3,6 +3,7 @@
   import UploadStep from './UploadStep.svelte';
   import WorkflowProgress from './WorkflowProgress.svelte';
   import MonsterResult from './MonsterResult.svelte';
+  import { makeWhiteTransparent } from '$lib/utils/imageProcessing';
   
   interface Props extends MonsterGeneratorProps {}
   
@@ -50,6 +51,40 @@ Include all of its visual details, format the description as a single long sente
 
 Assistant:`;
   
+  const MONSTER_STATS_PROMPT = (concept: string) => `User: Convert the following monster concept into a JSON object with stats:
+
+"${concept}"
+
+The output should be formatted as a JSON instance that conforms to the JSON schema below.
+
+As an example, for the schema {"properties": {"foo": {"title": "Foo", "description": "a list of strings", "type": "array", "items": {"type": "string"}}}, "required": ["foo"]}
+the object {"foo": ["bar", "baz"]} is a well-formatted instance of the schema. The object {"properties": {"foo": ["bar", "baz"]}} is not well-formatted.
+
+Here is the output schema:
+\`\`\`
+{
+  "properties": {
+    "name": {"type": "string", "description": "The monster's name"},
+    "description": {"type": "string", "description": "A brief description of the monster"},
+    "rarity": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "How rare/unique the monster is"},
+    "HP": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "Health points"},
+    "defence": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "Defensive capability"},
+    "attack": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "Attack power"},
+    "speed": {"type": "string", "enum": ["very-low", "low", "medium", "high", "very-high"], "description": "Movement speed"},
+    "specialAbility": {"type": "string", "description": "Passive trait that gives the monster a unique advantage in battle"},
+    "attackActionDescription": {"type": "string", "description": "Primary attack that deals damage"},
+    "boostActionDescription": {"type": "string", "description": "Action that buffs the monster's own stats/status"},
+    "disparageActionDescription": {"type": "string", "description": "Action that lowers enemy stats/status"},
+    "specialActionDescription": {"type": "string", "description": "Powerful action with single use per battle"}
+  },
+  "required": ["name", "description", "rarity", "HP", "defence", "attack", "speed", "specialAbility", "attackActionDescription", "boostActionDescription", "disparageActionDescription", "specialActionDescription"]
+}
+\`\`\`
+
+Remember to base the stats on how unique/powerful the original object was. Common objects should have lower stats, unique objects should have higher stats.
+
+Assistant: \`\`\`json`;
+  
   async function handleImageSelected(file: File) {
     if (!joyCaptionClient || !rwkvClient || !fluxClient) {
       state.error = "Services not connected. Please wait...";
@@ -73,11 +108,15 @@ Assistant:`;
       await generateMonsterConcept();
       await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
       
-      // Step 3: Generate image prompt
+      // Step 3: Generate monster stats
+      await generateStats();
+      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
+      
+      // Step 4: Generate image prompt
       await generateImagePrompt();
       await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
       
-      // Step 4: Generate monster image
+      // Step 5: Generate monster image
       await generateMonsterImage();
       
       state.currentStep = 'complete';
@@ -242,11 +281,25 @@ Assistant:`;
       else if (image && image.path) url = image.path;
       
       if (url) {
-        state.monsterImage = {
-          imageUrl: url,
-          seed: usedSeed,
-          prompt: state.imagePrompt
-        };
+        // Process the image to make white background transparent
+        console.log('Processing image for transparency...');
+        try {
+          const transparentBase64 = await makeWhiteTransparent(url);
+          state.monsterImage = {
+            imageUrl: url,
+            imageData: transparentBase64,
+            seed: usedSeed,
+            prompt: state.imagePrompt
+          };
+        } catch (processError) {
+          console.error('Failed to process image for transparency:', processError);
+          // Fallback to original image
+          state.monsterImage = {
+            imageUrl: url,
+            seed: usedSeed,
+            prompt: state.imagePrompt
+          };
+        }
       } else {
         throw new Error('Failed to generate monster image');
       }
@@ -255,12 +308,59 @@ Assistant:`;
     }
   }
   
+  async function generateStats() {
+    state.currentStep = 'statsGenerating';
+    
+    if (!rwkvClient || !state.monsterConcept) {
+      throw new Error('Text generation service not available or no concept');
+    }
+    
+    const statsPrompt = MONSTER_STATS_PROMPT(state.monsterConcept);
+    
+    console.log('Generating monster stats from concept');
+    
+    try {
+      const output = await rwkvClient.predict(0, [
+        statsPrompt,
+        500,   // maxTokens - more for JSON
+        0.3,   // temperature - lower for structured output
+        0.9,   // topP
+        0.05,  // presencePenalty - lower for JSON
+        0.05   // countPenalty
+      ]);
+      
+      console.log('Stats output:', output);
+      const jsonString = output.data[0];
+      
+      // Extract JSON from the response (remove markdown if present)
+      let cleanJson = jsonString;
+      if (jsonString.includes('```')) {
+        const matches = jsonString.match(/```(?:json)?\s*([\s\S]*?)```/);
+        if (matches) {
+          cleanJson = matches[1];
+        }
+      }
+      
+      try {
+        const stats: MonsterStats = JSON.parse(cleanJson.trim());
+        state.monsterStats = stats;
+        console.log('Monster stats generated:', stats);
+      } catch (parseError) {
+        console.error('Failed to parse JSON:', parseError, 'Raw output:', cleanJson);
+        throw new Error('Failed to parse monster stats JSON');
+      }
+    } catch (error) {
+      handleAPIError(error);
+    }
+  }
+  
   function reset() {
     state = {
       currentStep: 'upload',
       userImage: null,
       imageCaption: null,
       monsterConcept: null,
+      monsterStats: null,
       imagePrompt: null,
       monsterImage: null,
       error: null,
@@ -290,6 +390,8 @@ Assistant:`;
           Analyzing your image...
         {:else if state.currentStep === 'conceptualizing'}
           Creating monster concept...
+        {:else if state.currentStep === 'statsGenerating'}
+          Generating battle stats...
         {:else if state.currentStep === 'promptCrafting'}
           Crafting generation prompt...
         {:else if state.currentStep === 'generating'}

src/lib/components/MonsterGenerator/MonsterResult.svelte

@@ -13,10 +13,11 @@
   let saveError: string | null = $state(null);
   
   function downloadImage() {
-    if (!workflowState.monsterImage?.imageUrl) return;
+    if (!workflowState.monsterImage) return;
     
     const link = document.createElement('a');
-    link.href = workflowState.monsterImage.imageUrl;
+    // Use transparent image if available, otherwise original
+    link.href = workflowState.monsterImage.imageData || workflowState.monsterImage.imageUrl;
     link.download = `monster-${Date.now()}.png`;
     link.click();
   }
@@ -51,12 +52,19 @@
         }
       }
       
+      // Use stats name if available, otherwise use extracted name
+      if (workflowState.monsterStats?.name) {
+        monsterName = workflowState.monsterStats.name;
+      }
+      
       await saveMonster({
         name: monsterName,
         imageUrl: workflowState.monsterImage.imageUrl,
+        imageData: workflowState.monsterImage.imageData,
         imageCaption: workflowState.imageCaption,
         concept: workflowState.monsterConcept,
-        imagePrompt: workflowState.imagePrompt
+        imagePrompt: workflowState.imagePrompt,
+        stats: workflowState.monsterStats || undefined
       });
       
       isSaved = true;
@@ -75,7 +83,7 @@
   {#if workflowState.monsterImage}
     <div class="monster-image-container">
       <img 
-        src={workflowState.monsterImage.imageUrl} 
+        src={workflowState.monsterImage.imageData || workflowState.monsterImage.imageUrl} 
         alt="Generated Monster" 
         class="monster-image"
       />
@@ -111,6 +119,56 @@
         {/if}
       </div>
     </div>
+    
+    {#if workflowState.monsterStats}
+      <div class="result-section">
+        <h4>Battle Stats</h4>
+        <div class="stats-grid">
+          <div class="stat-item">
+            <span class="stat-label">Rarity:</span>
+            <span class="stat-value stat-{workflowState.monsterStats.rarity}">{workflowState.monsterStats.rarity}</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">HP:</span>
+            <span class="stat-value stat-{workflowState.monsterStats.HP}">{workflowState.monsterStats.HP}</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">Attack:</span>
+            <span class="stat-value stat-{workflowState.monsterStats.attack}">{workflowState.monsterStats.attack}</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">Defence:</span>
+            <span class="stat-value stat-{workflowState.monsterStats.defence}">{workflowState.monsterStats.defence}</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-label">Speed:</span>
+            <span class="stat-value stat-{workflowState.monsterStats.speed}">{workflowState.monsterStats.speed}</span>
+          </div>
+        </div>
+        <div class="abilities-section">
+          <div class="ability-item">
+            <h5>Special Ability</h5>
+            <p>{workflowState.monsterStats.specialAbility}</p>
+          </div>
+          <div class="ability-item">
+            <h5>Attack</h5>
+            <p>{workflowState.monsterStats.attackActionDescription}</p>
+          </div>
+          <div class="ability-item">
+            <h5>Boost</h5>
+            <p>{workflowState.monsterStats.boostActionDescription}</p>
+          </div>
+          <div class="ability-item">
+            <h5>Disparage</h5>
+            <p>{workflowState.monsterStats.disparageActionDescription}</p>
+          </div>
+          <div class="ability-item">
+            <h5>Special</h5>
+            <p>{workflowState.monsterStats.specialActionDescription}</p>
+          </div>
+        </div>
+      </div>
+    {/if}
   </div>
   
   <div class="action-buttons">
@@ -302,6 +360,65 @@
     to { transform: rotate(360deg); }
   }
   
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.5rem;
+    background: white;
+    border-radius: 6px;
+    border: 1px solid #dee2e6;
+  }
+  
+  .stat-label {
+    font-size: 0.85rem;
+    color: #6c757d;
+    margin-bottom: 0.25rem;
+  }
+  
+  .stat-value {
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.9rem;
+  }
+  
+  .stat-very-low { color: #dc3545; }
+  .stat-low { color: #fd7e14; }
+  .stat-medium { color: #ffc107; }
+  .stat-high { color: #28a745; }
+  .stat-very-high { color: #007bff; }
+  
+  .abilities-section {
+    display: grid;
+    gap: 1rem;
+  }
+  
+  .ability-item {
+    background: white;
+    padding: 1rem;
+    border-radius: 6px;
+    border: 1px solid #dee2e6;
+  }
+  
+  .ability-item h5 {
+    margin: 0 0 0.5rem 0;
+    color: #495057;
+    font-size: 0.95rem;
+  }
+  
+  .ability-item p {
+    margin: 0;
+    font-size: 0.85rem;
+    line-height: 1.4;
+  }
+  
   @media (max-width: 768px) {
     .result-container {
       padding: 1rem;

src/lib/components/MonsterGenerator/WorkflowProgress.svelte

@@ -30,6 +30,11 @@
       label: 'Conceptualizing',
       description: 'Designing your monster'
     },
+    {
+      id: 'statsGenerating',
+      label: 'Generating Stats',
+      description: 'Creating battle attributes'
+    },
     {
       id: 'promptCrafting',
       label: 'Crafting Prompt',

src/lib/components/MonsterGenerator/todo.txt

@@ -1,13 +1,4 @@
 
-Long term I want to turn this into a monster battle game. As part of this I need some kind of internal DB for the game.
-When I worked on a Flutter-based version of this I used Isar DB, is there an equivalent that would work well here?
-
----
-
-How could you update the image processing so that pure white is made transparent? Could you store the transparent images in local storage?
-
----
-
 Note the "Sign in with Hugging Face" button that is added with my page, can I just auto
 <iframe src="https://fraser-piclets.static.hf.space/index.html?embed=true&amp;__sign=eyJhbGciOiJFZERTQSJ9.eyJyZWFkIjp0cnVlLCJwZXJtaXNzaW9ucyI6eyJyZXBvLmNvbnRlbnQucmVhZCI6dHJ1ZX0sIm9uQmVoYWxmT2YiOnsia2luZCI6InVzZXIiLCJfaWQiOiI1ZjE5NTc4NDkyNWI5ODYzZTI4YWQ2MTAiLCJ1c2VyIjoiRnJhc2VyIiwic2Vzc2lvbklkIjoiNjg3NjU0ZjZhYmI2ZWE2ZTk0OThkNjVmIn0sImlhdCI6MTc1MjY1NzYxMiwic3ViIjoiL3NwYWNlcy9GcmFzZXIvcGljbGV0cyIsImV4cCI6MTc1Mjc0NDAxMiwiaXNzIjoiaHR0cHM6Ly9odWdnaW5nZmFjZS5jbyJ9.vH_qEMDwpCpEapX36n-JPgfj6P7jxGdpwomhT6MIpY-r2OS9Wc1bFsQq0USfbQqKxif2rR9XL7sB8f0ximxCDA" aria-label="static space app" class="space-iframe outline-hidden grow bg-white p-0" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; serial; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-storage-access-by-user-activation" scrolling="yes" id="iFrameResizer0" style="overflow: auto;"></iframe>
 
@@ -24,10 +15,12 @@ This will be created with the following schema:
 - speed: likert
 - special ability: string (passive trait that gives the monster a unique advantage in battle)
 - attack action description: string (deals damage)
-- attack action description: string (buff monsters own stats/status)
+- boost action description: string (buff monsters own stats/status)
 - disparage action description: string (lowers enemy stats/status)
 - special action description: string (powerful action with single use per battle)
 
+Also update the DB to use this JSON data in its schema.
+
 ---
 
 ```python

src/lib/components/Pages/Pictuary.svelte

@@ -43,7 +43,7 @@
       {#each monsters as monster}
         <div class="monster-card">
           <img 
-            src={monster.imageUrl} 
+            src={monster.imageData || monster.imageUrl} 
             alt={monster.name}
             class="monster-image"
           />
@@ -144,7 +144,11 @@
   .monster-image {
     width: 100%;
     aspect-ratio: 1;
-    object-fit: cover;
+    object-fit: contain;
+    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0),
+                linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
+    background-size: 20px 20px;
+    background-position: 0 0, 10px 10px;
   }
   
   .monster-name {

src/lib/db/index.ts

@@ -10,6 +10,26 @@ export class MonsterDatabase extends Dexie {
     this.version(1).stores({
       monsters: '++id, name, createdAt'
     });
+    
+    // Version 2: Add imageData field
+    this.version(2).stores({
+      monsters: '++id, name, createdAt'
+    }).upgrade(tx => {
+      // No data migration needed, just schema update
+      return tx.table('monsters').toCollection().modify(monster => {
+        monster.imageData = monster.imageData || null;
+      });
+    });
+    
+    // Version 3: Add stats field
+    this.version(3).stores({
+      monsters: '++id, name, createdAt'
+    }).upgrade(tx => {
+      // No data migration needed, just schema update
+      return tx.table('monsters').toCollection().modify(monster => {
+        monster.stats = monster.stats || null;
+      });
+    });
   }
 }
 

src/lib/db/schema.ts

@@ -1,9 +1,13 @@
+import type { MonsterStats } from '$lib/types';
+
 export interface Monster {
   id?: number;
   name: string;
   imageUrl: string;
+  imageData?: string; // Base64 encoded image with transparency
   imageCaption: string;
   concept: string;
   imagePrompt: string;
+  stats?: MonsterStats; // JSON stats object
   createdAt: Date;
 }

src/lib/types/index.ts

@@ -9,6 +9,7 @@ export interface FluxGenerationParams {
 
 export interface FluxGenerationResult {
   imageUrl: string;
+  imageData?: string; // Base64 encoded image with transparency
   seed: number;
   prompt: string;
 }
@@ -77,7 +78,8 @@ export interface GradioLibs {
 export type MonsterWorkflowStep = 
   | 'upload' 
   | 'captioning' 
-  | 'conceptualizing' 
+  | 'conceptualizing'
+  | 'statsGenerating' 
   | 'promptCrafting' 
   | 'generating' 
   | 'complete';
@@ -87,6 +89,7 @@ export interface MonsterWorkflowState {
   userImage: Blob | null;
   imageCaption: string | null;
   monsterConcept: string | null;
+  monsterStats: MonsterStats | null;
   imagePrompt: string | null;
   monsterImage: FluxGenerationResult | null;
   error: string | null;
@@ -97,4 +100,22 @@ export interface MonsterGeneratorProps {
   joyCaptionClient: GradioClient | null;
   rwkvClient: GradioClient | null;
   fluxClient: GradioClient | null;
+}
+
+// Monster Stats Types
+export type LikertScale = 'very-low' | 'low' | 'medium' | 'high' | 'very-high';
+
+export interface MonsterStats {
+  name: string;
+  description: string;
+  rarity: LikertScale;
+  HP: LikertScale;
+  defence: LikertScale;
+  attack: LikertScale;
+  speed: LikertScale;
+  specialAbility: string;
+  attackActionDescription: string;
+  boostActionDescription: string;
+  disparageActionDescription: string;
+  specialActionDescription: string;
 }

src/lib/utils/imageProcessing.ts

@@ -0,0 +1,94 @@
+/**
+ * Converts an image URL to a base64 data URL with white background made transparent
+ */
+export async function makeWhiteTransparent(imageUrl: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      
+      if (!ctx) {
+        reject(new Error('Failed to get canvas context'));
+        return;
+      }
+      
+      canvas.width = img.width;
+      canvas.height = img.height;
+      
+      // Draw the image
+      ctx.drawImage(img, 0, 0);
+      
+      // Get image data
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const data = imageData.data;
+      
+      // Define white threshold (adjust if needed)
+      const whiteThreshold = 240; // RGB values above this are considered "white"
+      
+      // Make white pixels transparent
+      for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        
+        // Check if pixel is white-ish
+        if (r > whiteThreshold && g > whiteThreshold && b > whiteThreshold) {
+          // Calculate how "white" this pixel is (0-1)
+          const whiteness = Math.min(r, g, b) / 255;
+          
+          // Make it transparent based on whiteness
+          data[i + 3] = Math.floor((1 - whiteness) * 255);
+        }
+      }
+      
+      // Put the modified image data back
+      ctx.putImageData(imageData, 0, 0);
+      
+      // Convert to base64
+      const base64 = canvas.toDataURL('image/png');
+      resolve(base64);
+    };
+    
+    img.onerror = () => {
+      reject(new Error('Failed to load image'));
+    };
+    
+    img.src = imageUrl;
+  });
+}
+
+/**
+ * Fetches an image from URL and converts it to base64
+ */
+export async function imageUrlToBase64(imageUrl: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      
+      if (!ctx) {
+        reject(new Error('Failed to get canvas context'));
+        return;
+      }
+      
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+      
+      const base64 = canvas.toDataURL('image/png');
+      resolve(base64);
+    };
+    
+    img.onerror = () => {
+      reject(new Error('Failed to load image'));
+    };
+    
+    img.src = imageUrl;
+  });
+}