Merge pull request 'fix modals not being in dark mode' (#2) from reese/fix-playground into main

Reviewed-on: #2

css/style.css

@@ -446,6 +446,14 @@ footer {
   --shadow-color: rgba(255,20,147,0.15);
   --shadow-lg-color: rgba(255,20,147,0.2);
   --hero-overlay: rgba(13,13,13,0.3);
+  --white: #16213e;
+  --pink-100: #2a1a2e;
+  --pink-200: #3a2a3e;
+  --pink-300: #e91082;
+  --pink-500: #ff69b4;
+  --pink-600: #ffb6d9;
+  --pink-700: #ffa8c8;
+  --pink-900: #ffcce0;
 }
 
 [data-theme="dark"] body {

lib/llm.js

@@ -1,4 +1,4 @@
-var Search = (function() {
+var LLM = (function() {
   var defaultApiUrl = 'https://llama-instruct.reeselink.com/v1';
   var defaultModel = 'instruct';
 

pages/chat.html

@@ -123,6 +123,7 @@
 
 <script src="../lib/search.js"></script>
 <script>Search.init();</script>
+<script src="../lib/marked.min.js"></script>
 
 <script>
 (function(){
@@ -134,6 +135,12 @@
     var apiTokenInput = document.getElementById('apiToken');
     var modelNameInput = document.getElementById('modelName');
 
+  // Parse markdown in initial welcome message
+  var initialBubble = chatMessages.querySelector('.message-bubble p');
+  if(initialBubble) {
+    initialBubble.innerHTML = marked.parseInline(initialBubble.textContent);
+  }
+
     // Restore saved settings
     var savedToken = localStorage.getItem('apiToken');
     if(savedToken) apiTokenInput.value = savedToken;
@@ -158,7 +165,11 @@
 
     var p = document.createElement('p');
     p.className = 'message-content';
-    p.textContent = content;
+    if(role === 'assistant') {
+      p.innerHTML = marked.parse(content);
+    } else {
+      p.textContent = content;
+    }
     bubble.appendChild(p);
 
     msgDiv.appendChild(avatar);
@@ -276,7 +287,7 @@
                 var delta = json.choices && json.choices[0] && json.choices[0].delta;
                 if(delta && delta.content) {
                   streamContent += delta.content;
-                  contentEl.textContent = streamContent;
+                  contentEl.innerHTML = marked.parse(streamContent);
                   chatMessages.scrollTop = chatMessages.scrollHeight;
                 }
               } catch(e) {
@@ -318,7 +329,7 @@
     chatMessages.innerHTML = '';
     var welcomeMsg = document.createElement('div');
     welcomeMsg.className = 'message assistant-message';
-    welcomeMsg.innerHTML = '<div class="message-avatar">AI</div><div class="message-bubble"><p>Hello! Chat cleared. How can I help you?</p></div>';
+    welcomeMsg.innerHTML = '<div class="message-avatar">AI</div><div class="message-bubble"><p>' + marked.parse('Hello! Chat cleared. How can I help you?') + '</p></div>';
     chatMessages.appendChild(welcomeMsg);
   });
 

pages/image-gen.html

@@ -287,7 +287,7 @@
         prompt: prompt,
         model: model,
         n: 1,
-        size: '1024x1024'
+        size: '512x512'
       })
     })
     .then(function(response) {

pages/prompts.html

@@ -95,13 +95,14 @@
   </div>
   <div class="prompt-block">
     <span class="label">Few-Shot</span>
-    <h3>Show examples to guide behavior</h3>
+    <h3>Show examples to teach a pattern</h3>
-    <p>Include a few input-output examples in the prompt to teach the model the desired format or style.</p>
+    <p>Include a few input-output examples so the model infers a pattern it couldn't know from instructions alone.</p>
     <div class="example"><strong>Prompt:</strong><br>
-      "Classify the sentiment:<br>
+      "Convert words to star code:<br>
-      'I love this!' → Positive<br>
+      'hello world' → ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐⭐<br>
-      'This is terrible.' → Negative<br>
+      'cat' → ⭐⭐⭐<br>
-      'It's okay, I guess.' → ?"</div>
+      'I am happy' → ⭐ ⭐⭐ ⭐⭐⭐⭐⭐<br>
+      'The cat eats' → ?"</div>
   </div>
   <div class="prompt-block">
     <span class="label">Chain-of-Thought</span>
@@ -226,6 +227,11 @@
       <div style="margin-bottom: 0.8rem;">
         <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Your prompt</label>
         <textarea class="llm-mini-chat-input" id="prompt-input" rows="4" placeholder="Enter your prompt here..."></textarea>
+        <div id="prompt-hint" style="font-size: 0.78rem; color: var(--pink-500); margin-top: 0.3rem;"></div>
+      </div>
+      <div style="margin-bottom: 0.8rem;">
+        <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Full prompt that will be sent</label>
+        <pre id="prompt-preview" style="font-size: 0.78rem; white-space: pre-wrap; background: var(--pink-50); border: 2px solid var(--pink-200); border-radius: 10px; padding: 0.6rem 0.8rem; color: var(--pink-800); min-height: 2rem; max-height: 10rem; overflow-y: auto; font-family: var(--font-mono);"></pre>
       </div>
       <button class="llm-mini-chat-send" onclick="testPrompt()" style="width: 100%; padding: 0.7rem;">Send to LLM</button>
       <div class="llm-mini-chat-output" id="prompt-output" style="margin-top: 0.8rem;"></div>
@@ -245,13 +251,41 @@
 <script>
 (function(){
   var techniquePrompts = {
-    'zero-shot': 'Perform the task I describe. Do not add examples. Just answer directly.',
+    'zero-shot': '{task}',
-    'few-shot': 'Classify the sentiment of the following text. Here are examples:\n\n"I love this!" → Positive\n"This is terrible." → Negative\n"It\'s okay, I guess." → ?\n\n{text}\n→',
+    'few-shot': 'Convert each sentence into a "secret code" where every word is replaced by a number of stars equal to the word\'s length.\n\nExamples:\nhello world → ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐⭐\ncat → ⭐⭐⭐\nI am happy → ⭐ ⭐⭐ ⭐⭐⭐⭐⭐\n\n{task}',
     'chain-of-thought': 'Solve this step by step. Think through each step carefully before giving your final answer.\n\n{task}',
     'role': 'You are an expert in {domain}. {task}',
     'structured': 'Analyze the following text and return results as JSON with these keys: summary, sentiment, key_topics, action_items.\n\n{text}'
   };
 
+  var techniqueHints = {
+    'zero-shot': 'Try a direct question or request. The model answers without examples.',
+    'few-shot': 'Type any sentence. The model must infer the star-length rule from the examples alone.',
+    'chain-of-thought': 'Try a math or logic problem. Step-by-step reasoning beats direct answers.',
+    'role': 'Try asking for code review, writing advice, or expert analysis in any domain.',
+    'structured': 'Paste any text with products, data, or items to extract into JSON.'
+  };
+
+  (function() {
+    var select = document.getElementById('prompt-technique');
+    var hint = document.getElementById('prompt-hint');
+    var preview = document.getElementById('prompt-preview');
+    var input = document.getElementById('prompt-input');
+    function update() {
+      hint.textContent = techniqueHints[select.value] || '';
+      var base = techniquePrompts[select.value];
+      var user = input.value.trim();
+      if (!user) {
+        preview.textContent = base;
+      } else {
+        preview.textContent = base.replace('{text}', user).replace('{task}', user).replace('{domain}', 'general');
+      }
+    }
+    select.addEventListener('change', update);
+    input.addEventListener('input', update);
+    update();
+  })();
+
   function applyTechnique() {
     var technique = document.getElementById('prompt-technique').value;
     var basePrompt = techniquePrompts[technique];