monsters

package-lock.json

@@ -7,6 +7,9 @@
     "": {
       "name": "svelte",
       "version": "0.0.0",
+      "dependencies": {
+        "dexie": "^4.0.11"
+      },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tsconfig/svelte": "^5.0.4",
@@ -953,6 +956,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dexie": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.0.11.tgz",
+      "integrity": "sha512-SOKO002EqlvBYYKQSew3iymBoN2EQ4BDw/3yprjh7kAfFzjBYkaMNa/pZvcA7HSWlcKSQb9XhPe3wKyQ0x4A8A==",
+      "license": "Apache-2.0"
+    },
     "node_modules/esbuild": {
       "version": "0.25.6",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.6.tgz",

package.json

@@ -17,5 +17,8 @@
     "svelte-check": "^4.1.6",
     "typescript": "~5.8.3",
     "vite": "^6.3.5"
+  },
+  "dependencies": {
+    "dexie": "^4.0.11"
   }
 }

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -281,7 +281,7 @@ Assistant:`;
       isProcessing={state.isProcessing}
     />
   {:else if state.currentStep === 'complete'}
-    <MonsterResult state={state} onReset={reset} />
+    <MonsterResult workflowState={state} onReset={reset} />
   {:else}
     <div class="processing-container">
       <div class="spinner"></div>

src/lib/components/MonsterGenerator/MonsterResult.svelte

@@ -1,36 +1,81 @@
 <script lang="ts">
   import type { MonsterWorkflowState } from '$lib/types';
+  import { saveMonster } from '$lib/db/monsters';
   
   interface Props {
-    state: MonsterWorkflowState;
+    workflowState: MonsterWorkflowState;
     onReset: () => void;
   }
   
-  let { state, onReset }: Props = $props();
+  let { workflowState, onReset }: Props = $props();
+  let isSaving = $state(false);
+  let isSaved = $state(false);
+  let saveError: string | null = $state(null);
   
   function downloadImage() {
-    if (!state.monsterImage?.imageUrl) return;
+    if (!workflowState.monsterImage?.imageUrl) return;
     
     const link = document.createElement('a');
-    link.href = state.monsterImage.imageUrl;
+    link.href = workflowState.monsterImage.imageUrl;
     link.download = `monster-${Date.now()}.png`;
     link.click();
   }
   
   function copyPrompt() {
-    if (!state.imagePrompt) return;
-    navigator.clipboard.writeText(state.imagePrompt);
+    if (!workflowState.imagePrompt) return;
+    navigator.clipboard.writeText(workflowState.imagePrompt);
     alert('Prompt copied to clipboard!');
   }
+  
+  async function saveToCollection() {
+    if (!workflowState.monsterImage || !workflowState.imageCaption || !workflowState.monsterConcept || !workflowState.imagePrompt) {
+      saveError = 'Missing monster data';
+      return;
+    }
+    
+    isSaving = true;
+    saveError = null;
+    
+    try {
+      // Extract monster name from concept (usually first line or after "Monster Name:")
+      let monsterName = 'Unknown Monster';
+      const conceptLines = workflowState.monsterConcept.split('\n');
+      for (const line of conceptLines) {
+        if (line.includes('Monster Name:') || line.includes('**Monster Name:**')) {
+          monsterName = line.replace(/\*\*Monster Name:\*\*|Monster Name:/g, '').trim();
+          break;
+        } else if (line.trim() && !line.includes(':')) {
+          // First non-empty line without colon might be the name
+          monsterName = line.trim();
+          break;
+        }
+      }
+      
+      await saveMonster({
+        name: monsterName,
+        imageUrl: workflowState.monsterImage.imageUrl,
+        imageCaption: workflowState.imageCaption,
+        concept: workflowState.monsterConcept,
+        imagePrompt: workflowState.imagePrompt
+      });
+      
+      isSaved = true;
+    } catch (err) {
+      console.error('Failed to save monster:', err);
+      saveError = 'Failed to save monster to collection';
+    } finally {
+      isSaving = false;
+    }
+  }
 </script>
 
 <div class="result-container">
   <h3>Your Monster Has Been Created!</h3>
   
-  {#if state.monsterImage}
+  {#if workflowState.monsterImage}
     <div class="monster-image-container">
       <img 
-        src={state.monsterImage.imageUrl} 
+        src={workflowState.monsterImage.imageUrl} 
         alt="Generated Monster" 
         class="monster-image"
       />
@@ -41,22 +86,22 @@
     <div class="result-section">
       <h4>Original Description</h4>
       <div class="result-content">
-        <p>{state.imageCaption || 'No caption available'}</p>
+        <p>{workflowState.imageCaption || 'No caption available'}</p>
       </div>
     </div>
     
     <div class="result-section">
       <h4>Monster Concept</h4>
       <div class="result-content">
-        <p>{state.monsterConcept || 'No concept available'}</p>
+        <p>{workflowState.monsterConcept || 'No concept available'}</p>
       </div>
     </div>
     
     <div class="result-section">
       <h4>Generation Prompt</h4>
       <div class="result-content">
-        <p>{state.imagePrompt || 'No prompt available'}</p>
-        {#if state.imagePrompt}
+        <p>{workflowState.imagePrompt || 'No prompt available'}</p>
+        {#if workflowState.imagePrompt}
           <button class="copy-button" onclick={copyPrompt}>
             <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
               <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2 0v8h8V2H6zM2 6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2h-2v2H2V8h2V6H2z"/>
@@ -75,6 +120,26 @@
       </svg>
       Download Monster
     </button>
+    <button 
+      class="action-button save" 
+      onclick={saveToCollection}
+      disabled={isSaving || isSaved}
+    >
+      {#if isSaving}
+        <div class="spinner-small"></div>
+        Saving...
+      {:else if isSaved}
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
+        </svg>
+        Saved!
+      {:else}
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
+        </svg>
+        Save to Collection
+      {/if}
+    </button>
     <button class="action-button reset" onclick={onReset}>
       <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
         <path d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.058 7.293a1 1 0 01-1.414 1.414l-2.35-2.35A1 1 0 011 5.648V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.943 13H13a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"/>
@@ -82,6 +147,10 @@
       Create Another Monster
     </button>
   </div>
+  
+  {#if saveError}
+    <div class="error-message">{saveError}</div>
+  {/if}
 </div>
 
 <style>
@@ -197,6 +266,42 @@
     background: #5a6268;
   }
   
+  .action-button.save {
+    background: #007bff;
+    color: white;
+  }
+  
+  .action-button.save:hover:not(:disabled) {
+    background: #0056b3;
+  }
+  
+  .action-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  .spinner-small {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #ffffff;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  
+  .error-message {
+    margin-top: 1rem;
+    padding: 0.5rem;
+    background: #f8d7da;
+    color: #721c24;
+    border-radius: 4px;
+    text-align: center;
+  }
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  
   @media (max-width: 768px) {
     .result-container {
       padding: 1rem;

src/lib/components/MonsterGenerator/todo.txt

@@ -0,0 +1,67 @@
+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>
+
+---
+
+Now I would also like the text generator to produce a JSON object based on the monster concept.
+This will be created with the following schema:
+- name: string
+- description: string
+- rarity: likert (very-low, low, medium, high, very-high)
+- HP: likert
+- defence: likert
+- attack: likert
+- 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)
+- disparage action description: string (lowers enemy stats/status)
+- special action description: string (powerful action with single use per battle)
+
+---
+
+```python
+import json
+
+from pydantic import BaseModel
+
+STRUCTURED_OUTPUT_FORMAT_INSTRUCTIONS = """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:
+```
+{schema}
+```"""
+
+
+class StructuredOutputParser(BaseModel):
+    pydantic_class: type[BaseModel]
+
+    def get_schema(self, indent: int = 2) -> str:
+        # Copy schema to avoid altering original Pydantic schema.
+        schema = self.pydantic_class.model_json_schema()
+        # Iterate over fields to remove from the schema
+        for field_name in ["title", "type"]:
+            if field_name in schema:
+                schema.pop(field_name)
+        return json.dumps(schema, indent=indent, ensure_ascii=False)
+
+    def get_format_instructions(self) -> str:
+        schema_str = self.get_schema()
+        # Ensure json in context is well-formed with double quotes.
+        return STRUCTURED_OUTPUT_FORMAT_INSTRUCTIONS.format(schema=schema_str)
+
+    def parse(self, json_string: str) -> BaseModel:
+        return self.pydantic_class.model_validate_json(json_string)
+```

src/lib/db/index.ts

@@ -0,0 +1,16 @@
+import Dexie, { type Table } from 'dexie';
+import type { Monster } from './schema';
+
+export class MonsterDatabase extends Dexie {
+  monsters!: Table<Monster>;
+
+  constructor() {
+    super('MonsterGeneratorDB');
+    
+    this.version(1).stores({
+      monsters: '++id, name, createdAt'
+    });
+  }
+}
+
+export const db = new MonsterDatabase();

src/lib/db/monsters.ts

@@ -0,0 +1,23 @@
+import { db } from './index';
+import type { Monster } from './schema';
+
+export async function saveMonster(monsterData: Omit<Monster, 'id' | 'createdAt'>): Promise<number> {
+  const monster: Omit<Monster, 'id'> = {
+    ...monsterData,
+    createdAt: new Date()
+  };
+  
+  return await db.monsters.add(monster);
+}
+
+export async function getAllMonsters(): Promise<Monster[]> {
+  return await db.monsters.toArray();
+}
+
+export async function getMonster(id: number): Promise<Monster | undefined> {
+  return await db.monsters.get(id);
+}
+
+export async function deleteMonster(id: number): Promise<void> {
+  await db.monsters.delete(id);
+}

src/lib/db/schema.ts

@@ -0,0 +1,9 @@
+export interface Monster {
+  id?: number;
+  name: string;
+  imageUrl: string;
+  imageCaption: string;
+  concept: string;
+  imagePrompt: string;
+  createdAt: Date;
+}