Add suspect profile image prompts and metadata for rendering

TODO.md

@@ -5,13 +5,15 @@
 - players can't know there's more suspects down the list as we removed the scroll bar, can you scroll a bit down by default to show there's more cards down
 - find the texture missing
 - typing effect
+- pre-generate suspects cartoony potraits
 
 
 # Doing
+- bottom gradio box to see internal MCP tools calls out/in
+- add ai
 - mode selection
 - numbered steps to launch game
 
-- pre-generate suspects cartoony potraits
 - sound/music
 - eleven labs tts/voice
 - video embeded

prompts/image_generation.md

@@ -0,0 +1,36 @@
+# Suspect Profile Image Prompts
+## Model: Nano Banana (or standard SDXL)
+## Style: Noir Graphic Novel, Digital Art, Semi-Realistic Game Asset
+## Note: Square aspect ratio (1:1). NO polaroid frames in the image itself.
+
+Use these prompts to generate profile images. Replace `{gender}` with "man" or "woman".
+
+### 1. Executive (Archetype: "executive")
+> **Prompt:**
+> close up portrait of a {gender} corporate executive, sharp business suit, looking tired and stressed, office background, noir graphic novel style, digital painting, high contrast, dramatic lighting, detailed face, 8k, no frame
+
+### 2. Worker (Archetype: "worker")
+> **Prompt:**
+> close up portrait of a {gender} blue collar worker, janitor uniform or apron, rough skin texture, suspicious eyes, dark alley or kitchen background, noir style, gritty, sepia tone, shadow over face, digital art, game asset, no frame
+
+### 3. Socialite (Archetype: "socialite")
+> **Prompt:**
+> close up portrait of a wealthy {gender} socialite, elegant evening wear, pearl necklace or tuxedo, arrogant expression, luxury interior background, noir style, dramatic shadows, vintage aesthetic, digital painting, 8k, no frame
+
+### 4. Artist (Archetype: "artist")
+> **Prompt:**
+> close up portrait of a {gender} artist, bohemian style, messy hair, scarf, intense stare, art studio background, noir graphic novel style, high contrast, black and white with red accent, digital art, no frame
+
+### 5. Criminal / Suspect (Archetype: "criminal")
+> **Prompt:**
+> close up portrait of a {gender} suspect, hoodie or leather jacket, face partially shadowed, street background, noir detective style, gritty, mystery game character, digital painting, 8k, no frame
+
+### 6. Detective / Private Eye (Archetype: "detective")
+> **Prompt:**
+> close up portrait of a {gender} detective, trench coat, fedora, rainy background, noir style, gritty, cynical expression, digital art, game asset, high contrast, no frame
+
+---
+**Instructions:**
+1. Generate 2-3 variations for each archetype (Male and Female).
+2. Save as `suspect_1.jpg`, `suspect_2.jpg`, etc.
+3. Update `metadata.json` with the filename, gender, and archetype.

ui/static/assets/suspects/metadata.json

@@ -0,0 +1,15 @@
+[
+    {"id": "suspect_10.png", "gender": "male", "archetype": "detective"},
+    {"id": "suspect_11.png", "gender": "female", "archetype": "socialite"},
+    {"id": "suspect_9.png", "gender": "male", "archetype": "socialite"},
+    {"id": "suspect_3.png", "gender": "female", "archetype": "executive"},
+    {"id": "suspect_5.png", "gender": "male", "archetype": "executive"},
+    {"id": "suspect_4.png", "gender": "female", "archetype": "artist"},
+    {"id": "suspect_1.png", "gender": "male", "archetype": "artist"},
+    {"id": "suspect_7.png", "gender": "male", "archetype": "worker"},
+    {"id": "suspect_2.png", "gender": "female", "archetype": "worker"},
+    {"id": "suspect_6.png", "gender": "male", "archetype": "criminal"},
+    {"id": "suspect_8.png", "gender": "female", "archetype": "criminal"},
+    {"id": "suspect_12.png", "gender": "female", "archetype": "customer"},
+    {"id": "suspect_13.png", "gender": "male", "archetype": "customer"}
+]

ui/static/js/game_logic.js

@@ -11,7 +11,8 @@ let gameState = {
     nextEvidenceSlot: 0, // Track grid position for new cards
     availableCameras: [],
     dnaMap: {},
-    unlockedEvidence: []
+    unlockedEvidence: [],
+    imageMetadata: []
 };
 
 // --- Bridge: Communication with Parent (Python/Gradio) ---
@@ -114,7 +115,19 @@ function updateStatus(data) {
 
 function initializeGame(data) {
     gameState = data;
-    renderSuspects();
+    
+    // Fetch image metadata then render
+    fetch('/static/assets/suspects/metadata.json')
+        .then(res => res.json())
+        .then(metadata => {
+            gameState.imageMetadata = metadata;
+            renderSuspects();
+        })
+        .catch(err => {
+            console.error("Failed to load image metadata:", err);
+            renderSuspects(); // Fallback
+        });
+
     document.getElementById('loading-overlay').style.opacity = 0;
     setTimeout(() => {
         document.getElementById('loading-overlay').style.display = 'none';
@@ -244,7 +257,7 @@ function renderSuspects() {
     
     if (!gameState.scenario || !gameState.scenario.suspects) return;
 
-    gameState.scenario.suspects.forEach(suspect => {
+    gameState.scenario.suspects.forEach((suspect, index) => {
         const card = document.createElement('div');
         card.className = 'suspect-card';
         card.dataset.id = suspect.id;
@@ -253,8 +266,47 @@ function renderSuspects() {
         // Placeholder Avatar (Initials)
         const initials = suspect.name.split(' ').map(n => n[0]).join('');
         
+        // Select Image based on Gender & Archetype
+        let imgFilename = `suspect_${(index % 8) + 1}.jpg`; // Default fallback
+        
+        if (gameState.imageMetadata && gameState.imageMetadata.length > 0 && suspect.gender) {
+            // 1. Filter by Gender
+            const genderMatches = gameState.imageMetadata.filter(img => img.gender === suspect.gender.toLowerCase());
+            
+            if (genderMatches.length > 0) {
+                // 2. Try to match Archetype
+                const role = suspect.role.toLowerCase();
+                let targetArchetype = "detective"; // default
+                
+                if (role.includes("ceo") || role.includes("cfo") || role.includes("manager") || role.includes("dealer")) targetArchetype = "executive";
+                else if (role.includes("janitor") || role.includes("chef") || role.includes("caterer")) targetArchetype = "worker";
+                else if (role.includes("artist") || role.includes("curator")) targetArchetype = "artist";
+                else if (role.includes("heir") || role.includes("collector") || role.includes("sister") || role.includes("socialite")) targetArchetype = "socialite";
+                else if (role.includes("ex-")) targetArchetype = "criminal";
+                else if (role.includes("customer")) targetArchetype = "customer"; // Rough/casual look
+                
+                const archetypeMatches = genderMatches.filter(img => img.archetype === targetArchetype);
+                
+                // Use archetype matches if available, otherwise use all gender matches
+                const pool = archetypeMatches.length > 0 ? archetypeMatches : genderMatches;
+                
+                // Deterministic pick based on name
+                let hash = 0;
+                for (let i = 0; i < suspect.name.length; i++) {
+                    hash = ((hash << 5) - hash) + suspect.name.charCodeAt(i);
+                    hash |= 0; 
+                }
+                const selected = pool[Math.abs(hash) % pool.length];
+                imgFilename = selected.id;
+            }
+        }
+        
         card.innerHTML = `
-            <div class="suspect-img">${initials}</div>
+            <div class="suspect-img">
+                <img src="/static/assets/suspects/${imgFilename}" 
+                     style="width:100%; height:100%; object-fit:cover; display:block;" 
+                     onerror="this.style.display='none'; this.parentElement.innerText='${initials}'; this.parentElement.style.display='flex'; this.parentElement.style.alignItems='center'; this.parentElement.style.justifyContent='center';">
+            </div>
             <div class="suspect-name">${suspect.name}</div>
             <div class="suspect-role">${suspect.role}</div>
             <div class="suspect-phone" title="Click to copy" onclick="event.stopPropagation(); copyToClipboard('${suspect.phone_number}')">