Fix Game of Life implementation issues

llm-feedback/index.html

@@ -44,6 +44,15 @@
             line-height: 1.1;
             letter-spacing: 0.02em;
         }
+        .state-block {
+            border: 2px solid #ccc;
+            border-radius: 4px;
+            padding: 10px;
+            margin: 20px 0;
+            background: white;
+            display: inline-block;
+            min-width: min-content;
+        }
         textarea, select {
             width: 100%;
             padding: 8px;
@@ -71,6 +80,8 @@
         .history-item {
             padding: 10px;
             border-bottom: 1px solid #eee;
+            width: auto;
+            height: auto;
         }
         label {
             display: block;
@@ -112,6 +123,7 @@ <h1>LLM ASCII Art Evolution</h1>
     <div class="container">
         <label for="preset-select">Select Preset:</label>
         <select id="preset-select">
+            <option value="conway">Conway's Game of Life</option>
             <option value="calligram">Calligrammatic Style (Apollinaire)</option>
             <option value="fragments">Fragmented Minimalism (Mallarmé)</option>
             <option value="futurism">Dynamic Explosions (Futurism)</option>
@@ -138,7 +150,7 @@ <h1>LLM ASCII Art Evolution</h1>
             </div>
             <div style="display: flex; align-items: center; gap: 10px;">
                 <label for="seed">Seed:</label>
-                <input type="number" id="seed" value="-1">
+                <input type="number" id="seed" value="42">
             </div>
         </div>
 
@@ -163,6 +175,43 @@ <h2>History</h2>
     <script>
         // Simplified presets
         const presets = {
+            conway: {
+                prompt: `Simulate one generation of Conway's Game of Life on a 30x15 grid.
+Initial state (O = alive, . = dead):
+
+\`\`\`
+Gen #001
+..............................
+..............................
+..............................
+..............................
+..............................
+...........OOO..................
+..............................
+..............................
+..............................
+..............................
+..............................
+..............................
+..............................
+..............................
+..............................
+\`\`\`
+
+Apply Conway's Game of Life rules:
+1. Any live cell with 2-3 live neighbors survives
+2. Any dead cell with exactly 3 live neighbors becomes alive
+3. All other cells die or stay dead
+
+- Simulate a 30x15 grid to match the display dimensions
+- If no state is provided below the prompt, simply return the initial state
+- Display and increment the generation number on each response
+- Your response must start with 'Gen #' followed by a three-digit number
+- Maintain the exact grid dimensions in your response
+- Each state should be wrapped in code blocks
+`,
+                temperature: 0.1
+            },
             calligram: {
                 prompt: "Guillaume Apollinaire's Calligrammes: Interconnected ASCII designs where words and letters flow into abstract or figurative forms. Words and shapes merge into visual poetry, balanced and meaningful, like a fountain, starburst, or tree.",
                 temperature: 0.8
@@ -249,8 +298,27 @@ <h2>History</h2>
         }
 
         function extractDisplayContent(text) {
-            const match = text.match(/```([\s\S]*?)```/);
-            return match ? match[1] : text;
+            // First remove any think tags and their content
+            const thinkPattern = /<think>[\s\S]*?<\/think>/g;
+            text = text.replace(thinkPattern, '').trim();
+
+            // Extract content from code blocks
+            const codeMatch = text.match(/```([\s\S]*?)```/);
+            if (codeMatch) {
+                const content = codeMatch[1].trim();
+
+                // For Conway's Game of Life, validate generation number format
+                if (getSelectedPreset() === 'conway') {
+                    if (!content.startsWith('Gen #')) {
+                        console.warn('Invalid Game of Life format: missing generation number');
+                        return content;
+                    }
+                }
+                return content;
+            }
+
+            // If no code blocks found, return the cleaned text
+            return text;
         }
 
         function startPreviewAnimation() {
@@ -282,29 +350,35 @@ <h2>History</h2>
 
                 elements.start.textContent = 'Generating...';
 
+                // Use a random seed by default, or the specified seed value
                 let seed = elements.seed.value && elements.seed.value !== '-1' ? 
                     parseInt(elements.seed.value) : 
                     Math.floor(Math.random() * 1000000);
 
-                const messages = [
-                    {
+                const model = getSelectedModel();
+                const messages = model === 'deepseek-r1' ? 
+                    [{
+                        role: "user",
+                        content: formatInstructions + "\n\n# Current State\n\n" + currentState
+                    }] : 
+                    [{
                         role: "system",
                         content: formatInstructions
                     },
                     {
                         role: "user",
                         content: currentState
-                    }
-                ];
+                    }];
 
+
                 const response = await fetch('https://text.pollinations.ai/', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({
                         messages: messages,
-                        model: getSelectedModel(),
+                        model: model,
                         temperature: parseFloat(elements.temperature.value),
                         seed: seed
                     })
@@ -364,10 +438,21 @@ <h2>History</h2>
                     currentState = text; // Keep full text for LLM context
                     console.log('State updated, frame count:', frames.length);
 
+                    const container = document.createElement('div');
+                    container.style.marginBottom = '30px';
+
+                    const iterationLabel = document.createElement('div');
+                    iterationLabel.style.marginBottom = '5px';
+                    iterationLabel.style.color = '#666';
+                    iterationLabel.textContent = `Iteration ${frames.length}`;
+
                     const historyItem = document.createElement('div');
-                    historyItem.className = 'history-item mono';
+                    historyItem.className = 'history-item state-block mono';
                     historyItem.textContent = text;
-                    elements.history.insertBefore(historyItem, elements.history.firstChild);
+
+                    container.appendChild(iterationLabel);
+                    container.appendChild(historyItem);
+                    elements.history.insertBefore(container, elements.history.firstChild);
 
                     console.log('UI updated');
 
@@ -423,8 +508,8 @@ <h2>History</h2>
         });
 
         // Initialize
-        elements.preset.value = 'calligram';
-        elements.prompt.value = presets.calligram.prompt;
+        elements.preset.value = 'conway';
+        elements.prompt.value = presets.conway.prompt;
         startPreviewAnimation();
 
         // No need for cleanup of preview interval since it runs for the lifetime of the page