lattice-orchestrator 0.7.0

package/dist/routes/prototype.routes.js

@@ -0,0 +1,757 @@
+/**
+ * Prototype routes - experimental features for testing and development.
+ *
+ * In production builds, these routes are gated and return 404 by default.
+ * They can be enabled by setting CLAUDIA_ENABLE_PROTOTYPES=true.
+ */
+import { Router } from 'express';
+import sharp from 'sharp';
+import Anthropic from '@anthropic-ai/sdk';
+import { createLogger } from '../services/infrastructure/logger.js';
+import { GoogleGenAI } from '@google/genai';
+import { ConfigService } from '../services/infrastructure/config-service.js';
+import { readFileSync, existsSync } from 'fs';
+const logger = createLogger('PrototypeRoutes');
+/**
+ * Middleware to gate prototype routes in production.
+ * Returns 404 unless CLAUDIA_ENABLE_PROTOTYPES=true.
+ */
+function prototypeGate(req, res, next) {
+    const isProduction = process.env.NODE_ENV === 'production';
+    const prototypesEnabled = process.env.CLAUDIA_ENABLE_PROTOTYPES === 'true';
+    if (isProduction && !prototypesEnabled) {
+        logger.debug('Prototype route blocked in production', {
+            path: req.path,
+            method: req.method,
+        });
+        res.status(404).json({ error: 'Not found' });
+        return;
+    }
+    next();
+}
+// Rich color palette for diverse banners
+const COLORS = [
+    'electric blue', 'hot pink', 'lime green', 'golden yellow', 'coral orange',
+    'deep purple', 'cyan', 'magenta', 'mint green', 'amber',
+    'crimson red', 'teal', 'lavender', 'peach', 'electric violet',
+    'neon orange', 'sky blue', 'rose pink', 'chartreuse', 'copper'
+];
+// Style seeds - different visual languages
+const STYLE_SEEDS = [
+    'flowing and organic',
+    'sharp and angular',
+    'scattered particles',
+    'layered waves',
+    'crystalline shards',
+    'soft gradients',
+    'circuit-like traces',
+    'bold geometric',
+    'wispy and ethereal',
+    'dense and textured',
+    'minimal and sparse',
+    'dynamic and energetic'
+];
+// Composition hints
+const COMPOSITIONS = [
+    'asymmetric, weighted left',
+    'asymmetric, weighted right',
+    'centered focal point',
+    'scattered across the frame',
+    'diagonal flow',
+    'horizontal bands',
+    'clustered elements'
+];
+function pickRandom(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+}
+function pickTwo(arr) {
+    const first = pickRandom(arr);
+    let second = pickRandom(arr);
+    while (second === first && arr.length > 1) {
+        second = pickRandom(arr);
+    }
+    return [first, second];
+}
+// Prompt templates for banner generation
+const PROMPT_TEMPLATES = {
+    neonSymbol: (mission, color) => `Add a glowing neon icon to this black image.
+
+TASK: ${mission}
+COLOR: ${color} glow
+
+Requirements:
+- Single bold central symbol
+- Neon glow effect
+- Keep the black background intact
+- No text, no faces
+- Tech/circuit aesthetic optional`,
+    horizontalNeon: (mission, color) => `Add a horizontal neon design element to this wide black banner.
+
+TASK: ${mission}
+COLOR: ${color} neon glow
+
+Requirements:
+- Design should flow horizontally across the banner
+- Could be: flowing lines, circuit traces, abstract waves, or a stretched icon
+- Strong neon glow effect with ${color} color
+- Keep the black background
+- No text, no faces
+- Subtle tech/digital aesthetic`,
+    minimalGlyph: (mission, color) => `Add a minimal glowing glyph to this black banner.
+
+TASK: ${mission}
+COLOR: ${color} glow
+
+Create a single, abstract symbol that represents the essence of this work.
+- Centered in the horizontal space
+- Bold but simple - 1-3 strokes maximum
+- Strong ${color} neon glow
+- Pure black background
+- No text`,
+    abstractWave: (mission, color) => `Add an abstract wave pattern to this black banner.
+
+TASK: ${mission}
+COLOR: ${color}
+
+Create a flowing horizontal wave or energy pattern:
+- Spans the full width of the banner
+- ${color} glowing effect
+- Abstract, not literal
+- Subtle gradient from edges to center
+- Pure black background`,
+    circuitTrace: (mission, color) => `Add circuit board trace patterns to this black banner.
+
+TASK: ${mission}
+COLOR: ${color}
+
+Design specifications:
+- Horizontal circuit traces flowing left to right
+- Small nodes/points at intersections
+- ${color} neon glow
+- Technical, digital aesthetic
+- Black background`,
+};
+export function createPrototypeRoutes() {
+    const router = Router();
+    // Apply gate to all prototype routes
+    router.use(prototypeGate);
+    // Generate a banner image with custom dimensions and prompt
+    router.post('/generate-banner', async (req, res) => {
+        const requestId = req.requestId;
+        const { mission, color, template, width, height, customPrompt } = req.body;
+        logger.info('Generate banner request', {
+            requestId,
+            mission: mission?.slice(0, 50),
+            color,
+            template,
+            width,
+            height,
+            hasCustomPrompt: !!customPrompt
+        });
+        try {
+            // Validate inputs
+            if (!width || !height) {
+                res.status(400).json({ error: 'Missing required fields: width, height' });
+                return;
+            }
+            let prompt;
+            if (customPrompt) {
+                // Use custom prompt directly
+                prompt = customPrompt;
+            }
+            else {
+                // Use template-based prompt
+                if (!mission || !color || !template) {
+                    res.status(400).json({ error: 'Missing required fields: mission, color, template (or provide customPrompt)' });
+                    return;
+                }
+                const promptFn = PROMPT_TEMPLATES[template];
+                if (!promptFn) {
+                    res.status(400).json({ error: `Unknown template: ${template}` });
+                    return;
+                }
+                prompt = promptFn(mission, color);
+            }
+            // Get Gemini API key
+            const config = ConfigService.getInstance().getConfig();
+            const apiKey = config.gemini?.apiKey || process.env.GOOGLE_API_KEY;
+            if (!apiKey) {
+                res.status(500).json({ error: 'Gemini API key not configured' });
+                return;
+            }
+            // Create black canvas at higher resolution (will resize after)
+            // Use 2x or 3x for quality, scaled to max 1024 on any dimension
+            const scale = Math.min(3, 1024 / Math.max(width, height));
+            const canvasWidth = Math.round(width * scale);
+            const canvasHeight = Math.round(height * scale);
+            logger.debug('Creating black canvas', { canvasWidth, canvasHeight, scale });
+            const blackCanvas = await sharp({
+                create: {
+                    width: canvasWidth,
+                    height: canvasHeight,
+                    channels: 3,
+                    background: { r: 0, g: 0, b: 0 }
+                }
+            }).png().toBuffer();
+            const blackCanvasBase64 = blackCanvas.toString('base64');
+            // Call Gemini image generation
+            const genAI = new GoogleGenAI({ apiKey });
+            logger.debug('Calling Gemini image generation', { prompt: prompt.slice(0, 100) });
+            const response = await genAI.models.generateContent({
+                model: 'gemini-3-pro-image-preview',
+                contents: [
+                    {
+                        role: 'user',
+                        parts: [
+                            { inlineData: { mimeType: 'image/png', data: blackCanvasBase64 } },
+                            { text: prompt }
+                        ]
+                    }
+                ],
+                config: {
+                    responseModalities: ['TEXT', 'IMAGE'],
+                }
+            });
+            // Extract image from response
+            if (response.candidates?.[0]?.content?.parts) {
+                for (const part of response.candidates[0].content.parts) {
+                    if (part.inlineData) {
+                        const rawImageBuffer = Buffer.from(part.inlineData.data, 'base64');
+                        // Resize to target dimensions
+                        const resizedBuffer = await sharp(rawImageBuffer)
+                            .resize(width, height, { fit: 'cover' })
+                            .jpeg({ quality: 85 })
+                            .toBuffer();
+                        const resizedBase64 = resizedBuffer.toString('base64');
+                        logger.info('Banner generated successfully', {
+                            requestId,
+                            originalSize: rawImageBuffer.length,
+                            resizedSize: resizedBuffer.length,
+                            dimensions: `${width}x${height}`
+                        });
+                        res.json({
+                            imageData: resizedBase64,
+                            mimeType: 'image/jpeg',
+                            dimensions: { width, height }
+                        });
+                        return;
+                    }
+                }
+            }
+            res.status(500).json({ error: 'No image was generated in the response' });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            logger.error('Banner generation failed', {
+                requestId,
+                errorMessage,
+                errorType: error?.constructor?.name
+            });
+            res.status(500).json({ error: `Generation failed: ${errorMessage}` });
+        }
+    });
+    // Full semantic pipeline: extract visual concepts from session context, then generate banner
+    router.post('/semantic-banner', async (req, res) => {
+        const requestId = req.requestId;
+        const { mission, theme, project } = req.body;
+        logger.info('Semantic banner pipeline request', {
+            requestId,
+            mission: mission?.slice(0, 50),
+            theme,
+            project
+        });
+        try {
+            if (!mission) {
+                res.status(400).json({ error: 'Missing required field: mission' });
+                return;
+            }
+            // Get config early since we need API keys
+            const config = ConfigService.getInstance().getConfig();
+            // Step 1: Extract visual concepts using Claude
+            const extractionPrompt = `You are helping generate a visual identity banner for a coding session. Given the session context below, extract visual concepts that could represent this work.
+
+<session_context>
+Mission: ${mission}
+Theme: ${theme || 'implementing'}
+Project: ${project || 'Unknown'}
+</session_context>
+
+Analyze what this session is fundamentally about and output a JSON object with:
+
+1. "primary_metaphor": A concrete visual metaphor for the core work (e.g., "a lock being examined" for auth debugging, "flowing streams merging" for data pipeline work, "tangled wires being organized" for refactoring)
+
+2. "visual_elements": 2-3 specific visual elements that could appear in a horizontal banner (e.g., "diagnostic scan lines", "glowing nodes", "geometric shapes reorganizing")
+
+3. "mood": The emotional/energy quality (e.g., "urgent and focused", "methodical and precise", "creative and exploratory")
+
+4. "color_suggestion": A neon color that fits the mood (choose from: cyan/blue, amber/orange, green/emerald, purple/violet, magenta/pink, gold/yellow)
+
+5. "icon_hint": A single simple icon/symbol that captures the essence (e.g., "magnifying glass", "shield", "gear", "lightning bolt", "compass", "lock", "branch", "pulse")
+
+Output ONLY the JSON object, no other text.`;
+            logger.debug('Extracting visual concepts', { requestId });
+            // Get Anthropic API key
+            const anthropicApiKey = config.anthropic?.apiKey || process.env.ANTHROPIC_API_KEY;
+            if (!anthropicApiKey) {
+                res.status(500).json({ error: 'Anthropic API key not configured' });
+                return;
+            }
+            const anthropic = new Anthropic({ apiKey: anthropicApiKey });
+            const extractionResponse = await anthropic.messages.create({
+                model: 'claude-haiku-4-5-20251001',
+                max_tokens: 500,
+                messages: [{ role: 'user', content: extractionPrompt }],
+            });
+            const extractionText = extractionResponse.content[0].type === 'text'
+                ? extractionResponse.content[0].text
+                : '';
+            // Parse concepts
+            let concepts;
+            try {
+                concepts = JSON.parse(extractionText);
+            }
+            catch {
+                const jsonMatch = extractionText.match(/\{[\s\S]*\}/);
+                if (jsonMatch) {
+                    concepts = JSON.parse(jsonMatch[0]);
+                }
+                else {
+                    throw new Error(`Failed to parse concepts: ${extractionText.slice(0, 200)}`);
+                }
+            }
+            logger.info('Visual concepts extracted', {
+                requestId,
+                metaphor: concepts.primary_metaphor,
+                color: concepts.color_suggestion,
+                icon: concepts.icon_hint
+            });
+            // Step 2: Build image prompt from concepts
+            const imagePrompt = `Add a glowing neon design to this black banner image.
+
+VISUAL CONCEPT: ${concepts.primary_metaphor}
+
+Elements to include:
+${concepts.visual_elements.map(e => `- ${e}`).join('\n')}
+
+Style:
+- ${concepts.mood}
+- ${concepts.color_suggestion} neon glow
+- Consider incorporating a ${concepts.icon_hint} motif
+- Horizontal composition flowing across the banner
+- Pure black background
+- No text, no faces
+- Abstract/stylized, not photorealistic`;
+            // Step 3: Generate the image
+            const apiKey = config.gemini?.apiKey || process.env.GOOGLE_API_KEY;
+            if (!apiKey) {
+                res.status(500).json({ error: 'Gemini API key not configured' });
+                return;
+            }
+            const width = 401;
+            const height = 64;
+            const scale = Math.min(3, 1024 / Math.max(width, height));
+            const canvasWidth = Math.round(width * scale);
+            const canvasHeight = Math.round(height * scale);
+            const blackCanvas = await sharp({
+                create: {
+                    width: canvasWidth,
+                    height: canvasHeight,
+                    channels: 3,
+                    background: { r: 0, g: 0, b: 0 }
+                }
+            }).png().toBuffer();
+            const blackCanvasBase64 = blackCanvas.toString('base64');
+            const genAI = new GoogleGenAI({ apiKey });
+            logger.debug('Generating image with Gemini', { requestId });
+            const imageResponse = await genAI.models.generateContent({
+                model: 'gemini-3-pro-image-preview',
+                contents: [
+                    {
+                        role: 'user',
+                        parts: [
+                            { inlineData: { mimeType: 'image/png', data: blackCanvasBase64 } },
+                            { text: imagePrompt }
+                        ]
+                    }
+                ],
+                config: {
+                    responseModalities: ['TEXT', 'IMAGE'],
+                }
+            });
+            // Extract image from response
+            if (imageResponse.candidates?.[0]?.content?.parts) {
+                for (const part of imageResponse.candidates[0].content.parts) {
+                    if (part.inlineData) {
+                        const rawImageBuffer = Buffer.from(part.inlineData.data, 'base64');
+                        const resizedBuffer = await sharp(rawImageBuffer)
+                            .resize(width, height, { fit: 'cover' })
+                            .jpeg({ quality: 85 })
+                            .toBuffer();
+                        const resizedBase64 = resizedBuffer.toString('base64');
+                        logger.info('Semantic banner generated successfully', {
+                            requestId,
+                            dimensions: `${width}x${height}`
+                        });
+                        res.json({
+                            imageData: resizedBase64,
+                            mimeType: 'image/jpeg',
+                            dimensions: { width, height },
+                            concepts,
+                            imagePrompt,
+                        });
+                        return;
+                    }
+                }
+            }
+            res.status(500).json({ error: 'No image was generated in the response' });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            logger.error('Semantic banner pipeline failed', {
+                requestId,
+                errorMessage,
+                errorType: error?.constructor?.name
+            });
+            res.status(500).json({ error: `Pipeline failed: ${errorMessage}` });
+        }
+    });
+    // New diversity-focused banner generation
+    router.post('/diverse-banner', async (req, res) => {
+        const requestId = req.requestId;
+        const { context } = req.body;
+        // Pick random visual parameters
+        const [primaryColor, accentColor] = pickTwo(COLORS);
+        const style = pickRandom(STYLE_SEEDS);
+        const composition = pickRandom(COMPOSITIONS);
+        logger.info('Diverse banner generation request', {
+            requestId,
+            primaryColor,
+            accentColor,
+            style,
+            composition,
+            context: context?.slice(0, 50)
+        });
+        try {
+            const config = ConfigService.getInstance().getConfig();
+            const apiKey = config.gemini?.apiKey || process.env.GOOGLE_API_KEY;
+            if (!apiKey) {
+                res.status(500).json({ error: 'Gemini API key not configured' });
+                return;
+            }
+            const prompt = `Create a unique abstract banner on this black background. No text, no faces, no realistic objects.
+
+Colors: ${primaryColor} as primary, ${accentColor} as accent
+Style: ${style}
+Composition: ${composition}
+
+${context ? `Inspiration (interpret freely, don't be literal): ${context}` : ''}
+
+Be creative and make this visually distinctive. Pure black background must be preserved.`;
+            const width = 401;
+            const height = 64;
+            const scale = Math.min(3, 1024 / Math.max(width, height));
+            const canvasWidth = Math.round(width * scale);
+            const canvasHeight = Math.round(height * scale);
+            const blackCanvas = await sharp({
+                create: {
+                    width: canvasWidth,
+                    height: canvasHeight,
+                    channels: 3,
+                    background: { r: 0, g: 0, b: 0 }
+                }
+            }).png().toBuffer();
+            const blackCanvasBase64 = blackCanvas.toString('base64');
+            const genAI = new GoogleGenAI({ apiKey });
+            const response = await genAI.models.generateContent({
+                model: 'gemini-3-pro-image-preview',
+                contents: [
+                    {
+                        role: 'user',
+                        parts: [
+                            { inlineData: { mimeType: 'image/png', data: blackCanvasBase64 } },
+                            { text: prompt }
+                        ]
+                    }
+                ],
+                config: {
+                    responseModalities: ['TEXT', 'IMAGE'],
+                }
+            });
+            if (response.candidates?.[0]?.content?.parts) {
+                for (const part of response.candidates[0].content.parts) {
+                    if (part.inlineData) {
+                        const rawImageBuffer = Buffer.from(part.inlineData.data, 'base64');
+                        const resizedBuffer = await sharp(rawImageBuffer)
+                            .resize(width, height, { fit: 'cover' })
+                            .jpeg({ quality: 90 })
+                            .toBuffer();
+                        const resizedBase64 = resizedBuffer.toString('base64');
+                        logger.info('Diverse banner generated successfully', {
+                            requestId,
+                            dimensions: `${width}x${height}`,
+                            primaryColor,
+                            accentColor,
+                            style
+                        });
+                        res.json({
+                            imageData: resizedBase64,
+                            mimeType: 'image/jpeg',
+                            dimensions: { width, height },
+                            params: { primaryColor, accentColor, style, composition, context }
+                        });
+                        return;
+                    }
+                }
+            }
+            res.status(500).json({ error: 'No image was generated in the response' });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            logger.error('Diverse banner generation failed', {
+                requestId,
+                errorMessage,
+                errorType: error?.constructor?.name
+            });
+            res.status(500).json({ error: `Generation failed: ${errorMessage}` });
+        }
+    });
+    // Serve demo walkthrough data
+    router.get('/walkthrough/demo', (_req, res) => {
+        const demoPath = '/tmp/walkthrough-demo.json';
+        if (!existsSync(demoPath)) {
+            res.status(404).json({ error: 'Demo walkthrough not found. Generate with: npx tsx scripts/generate-walkthrough.ts <session.jsonl> > /tmp/walkthrough-demo.json' });
+            return;
+        }
+        try {
+            const data = JSON.parse(readFileSync(demoPath, 'utf-8'));
+            res.json(data);
+        }
+        catch (_err) {
+            res.status(500).json({ error: 'Failed to read demo walkthrough' });
+        }
+    });
+    // Serve the image experiment gallery page
+    router.get('/image-gallery', (_req, res) => {
+        const html = `<!DOCTYPE html>
+<html>
+<head>
+  <title>Banner Diversity Experiment</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      background: #0a0a0a;
+      color: #eee;
+      font-family: system-ui, -apple-system, sans-serif;
+      padding: 2rem;
+      margin: 0;
+    }
+    h1 {
+      text-align: center;
+      margin-bottom: 0.5rem;
+      font-weight: 400;
+      font-size: 1.5rem;
+    }
+    .subtitle {
+      text-align: center;
+      color: #666;
+      margin-bottom: 2rem;
+      font-size: 0.9rem;
+    }
+    .controls {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      margin-bottom: 2rem;
+      flex-wrap: wrap;
+    }
+    button {
+      background: #222;
+      color: #eee;
+      border: 1px solid #444;
+      padding: 0.75rem 1.5rem;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      transition: all 0.15s;
+    }
+    button:hover {
+      background: #333;
+      border-color: #666;
+    }
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+      gap: 1rem;
+      max-width: 1800px;
+      margin: 0 auto;
+    }
+    .card {
+      background: #151515;
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid #252525;
+    }
+    .card img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+    .card.loading {
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .card.loading::after {
+      content: 'Generating...';
+      color: #555;
+      font-size: 0.85rem;
+    }
+    .info {
+      padding: 0.75rem;
+    }
+    .params {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.4rem;
+    }
+    .param {
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      background: #222;
+      color: #888;
+    }
+    .param.color {
+      color: #000;
+      font-weight: 500;
+    }
+    .context {
+      margin-top: 0.5rem;
+      font-size: 0.8rem;
+      color: #666;
+      font-style: italic;
+    }
+    .context-input {
+      width: 100%;
+      max-width: 500px;
+      padding: 0.5rem 0.75rem;
+      background: #1a1a1a;
+      border: 1px solid #333;
+      border-radius: 6px;
+      color: #eee;
+      font-size: 0.9rem;
+    }
+    .context-input::placeholder {
+      color: #555;
+    }
+  </style>
+</head>
+<body>
+  <h1>Banner Diversity Experiment</h1>
+  <p class="subtitle">Random colors + styles + loose context = distinctive banners</p>
+
+  <div class="controls">
+    <input type="text" class="context-input" id="contextInput" placeholder="Optional context (e.g., 'debugging auth flow')">
+    <button onclick="generateOne()">Generate 1</button>
+    <button onclick="generateBatch(5)">Generate 5</button>
+    <button onclick="generateBatch(10)">Generate 10</button>
+    <button onclick="clearGallery()">Clear</button>
+  </div>
+
+  <div class="gallery" id="gallery"></div>
+
+  <script>
+    const gallery = document.getElementById('gallery');
+    const contextInput = document.getElementById('contextInput');
+
+    const colorMap = {
+      'electric blue': '#0066ff',
+      'hot pink': '#ff1493',
+      'lime green': '#32cd32',
+      'golden yellow': '#ffd700',
+      'coral orange': '#ff7f50',
+      'deep purple': '#673ab7',
+      'cyan': '#00bcd4',
+      'magenta': '#e91e63',
+      'mint green': '#98ff98',
+      'amber': '#ffbf00',
+      'crimson red': '#dc143c',
+      'teal': '#008080',
+      'lavender': '#b57edc',
+      'peach': '#ffcba4',
+      'electric violet': '#8f00ff',
+      'neon orange': '#ff6600',
+      'sky blue': '#87ceeb',
+      'rose pink': '#ff66b2',
+      'chartreuse': '#7fff00',
+      'copper': '#b87333'
+    };
+
+    async function generateOne() {
+      const card = document.createElement('div');
+      card.className = 'card loading';
+      gallery.prepend(card);
+
+      try {
+        const context = contextInput.value.trim() || undefined;
+        const response = await fetch('/api/prototype/diverse-banner', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ context })
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+          card.innerHTML = '<div class="info" style="color: #f55;">' + data.error + '</div>';
+          card.classList.remove('loading');
+          return;
+        }
+
+        const primaryCss = colorMap[data.params.primaryColor] || '#888';
+        const accentCss = colorMap[data.params.accentColor] || '#888';
+
+        card.innerHTML = \`
+          <img src="data:\${data.mimeType};base64,\${data.imageData}" alt="Generated banner">
+          <div class="info">
+            <div class="params">
+              <span class="param color" style="background: \${primaryCss}">\${data.params.primaryColor}</span>
+              <span class="param color" style="background: \${accentCss}">\${data.params.accentColor}</span>
+              <span class="param">\${data.params.style}</span>
+              <span class="param">\${data.params.composition}</span>
+            </div>
+            \${data.params.context ? '<div class="context">' + data.params.context + '</div>' : ''}
+          </div>
+        \`;
+        card.classList.remove('loading');
+      } catch (err) {
+        card.innerHTML = '<div class="info" style="color: #f55;">Error: ' + err.message + '</div>';
+        card.classList.remove('loading');
+      }
+    }
+
+    async function generateBatch(count) {
+      for (let i = 0; i < count; i++) {
+        generateOne();
+        if (i < count - 1) {
+          await new Promise(r => setTimeout(r, 500));
+        }
+      }
+    }
+
+    function clearGallery() {
+      gallery.innerHTML = '';
+    }
+  </script>
+</body>
+</html>`;
+        res.type('html').send(html);
+    });
+    return router;
+}
+//# sourceMappingURL=prototype.routes.js.map