llm feedback: model selector (#93)

* Simplify LLM feedback code while maintaining core functionality

- Streamlined UI with cleaner layout and better visual hierarchy
- Reduced CSS by 70% using a simpler container-based approach
- Simplified JavaScript from ~400 lines to ~130 lines
- Improved state management and evolution logic
- Maintained all core functionality including art generation, preview, and history

Closes #91

Mentat precommits passed. Log: https://mentat.ai/log/ccb24099-4857-47b7-b5d7-d856a21c9041

* Update .gitignore with additional common patterns

Added patterns for:
- Yarn PnP files
- Additional build output directory (out/)
- General debug logs
- OS-specific files (DS_Store, Thumbs.db)

Mentat precommits passed. Log: https://mentat.ai/log/75248827-ef9b-4de6-9167-557d758749fb

* Make .gitignore more comprehensive for all app types

- Removed wildcard prefixes to work recursively at any depth
- Added patterns for various build tools and frameworks
- Added web-specific patterns for compiled assets
- Added testing and temporary file patterns
- Improved organization and categorization

Mentat precommits passed. Log: https://mentat.ai/log/9478638d-b20e-4b73-a8ec-7dc7c7cfd202

* Update .gitignore to better handle subfolder apps

- Added `**/` prefix to match files at any directory depth
- Added patterns for Yarn 2+ cache files
- Included vanilla HTML/JS specific patterns
- Added more build output and test directories
- Improved handling of OS-specific files at all levels

Mentat precommits passed. Log: https://mentat.ai/log/4786f47d-56c8-44b6-bb53-1e2e7696062a

* Revert "Make .gitignore more comprehensive for all app types"

This reverts commit a424654.

* enhance visual poetry UI and generation

enhance visual poetry UI and generation

- Update presets to focus on visual poetry styles (Apollinaire, Mallarmé, etc)
- Improve monospace text display with better styling and dimensions
- Add seed parameter for reproducible generations
- Remove separate current art window in favor of preview
- Enhance generation logic with better state management
- Improve error handling and logging

* Tweaks more prompts

* add model selector

---------

Co-authored-by: MentatBot <160964065+MentatBot@users.noreply.github.com>

Author: voodoohop

llm-feedback/index.html

@@ -20,6 +20,14 @@
             margin-bottom: 20px;
             box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
+        select {
+            width: 100%;
+            padding: 8px;
+            margin-bottom: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 16px;
+        }
         .mono {
             font-family: 'Courier New', Courier, monospace;
             white-space: pre;
@@ -74,6 +82,7 @@
     <h1>LLM ASCII Art Evolution</h1>
 
     <div class="container">
+        <label for="preset-select">Select Preset:</label>
         <select id="preset-select">
             <option value="calligram">Calligrammatic Style (Apollinaire)</option>
             <option value="fragments">Fragmented Minimalism (Mallarmé)</option>
@@ -87,20 +96,18 @@ <h1>LLM ASCII Art Evolution</h1>
             <option value="weather">Weather System Patterns</option>
         </select>
 
-        <label>
-            Animation Prompt:
-            <textarea id="base-prompt" rows="4"></textarea>
-        </label>
+        <label for="base-prompt">Animation Prompt:</label>
+        <textarea id="base-prompt" rows="4"></textarea>
 
         <div>
             <button id="startBtn">Start Evolution</button>
             <button id="stopBtn" disabled>Stop Evolution</button>
         </div>
 
-        <label>
-            Temperature: 
-            <input type="number" id="temperature" value="0.8" min="0.1" max="2" step="0.1">
-        </label>
+        <select id="model-select"></select>
+        
+        <label for="temperature">Temperature:</label>
+        <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.8">
 
         <label>
             Seed (optional): 
@@ -172,9 +179,25 @@ <h2>History</h2>
             history: document.getElementById('history'),
             preset: document.getElementById('preset-select'),
             prompt: document.getElementById('base-prompt'),
-            preview: document.getElementById('preview-window')
+            preview: document.getElementById('preview-window'),
+            modelSelect: document.getElementById('model-select')
         };
 
+        // Initialize model selector
+        fetch('https://text.pollinations.ai/models')
+            .then(r => r.json())
+            .then(models => {
+                elements.modelSelect.innerHTML = models
+                    .map(m => `<option value="${m.name}" ${m.name === 'openai' ? 'selected' : ''}>${m.name} - ${m.description}</option>`)
+                    .join('');
+            })
+            .catch(() => elements.modelSelect.innerHTML = '<option value="openai" selected>OpenAI (Default)</option>');
+
+        // Get selected model
+        function getSelectedModel() {
+            return elements.modelSelect.value;
+        }
+
         // State
         let isRunning = false;
         let frames = [];
@@ -229,7 +252,7 @@ <h2>History</h2>
                 let seed = elements.seed.value ? parseInt(elements.seed.value) : Math.floor(Math.random() * 10);
                 elements.seed.value = seed; // Update input with chosen seed
 
-                const url = `https://text.pollinations.ai/${encodedPrompt}?system=${encodedSystem}&seed=${seed}`;
+                const url = `https://text.pollinations.ai/${encodedPrompt}?system=${encodedSystem}&seed=${seed}&model=${getSelectedModel()}`;
                 console.log('Request URL:', url);
 
                 console.log('Fetching...');