Add markdown rendering (marked.js + highlight.js)

chat.html

@@ -4,34 +4,55 @@
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>Gemma-4-E4B Uncensored — Chat</title>
+<script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github-dark.min.css"/>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/core.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/python.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/javascript.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/bash.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/json.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/cpp.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/typescript.min.js"></script>
 <style>
-  :root { --bg:#0b0f19; --panel:#141a2a; --bubble-u:#2563eb; --bubble-a:#1f2839; --text:#e5e7eb; --muted:#9ca3af; --border:#27304a; }
+  :root { --bg:#0b0f19; --panel:#141a2a; --bubble-u:#2563eb; --bubble-a:#1f2839; --text:#e5e7eb; --muted:#9ca3af; --border:#27304a; --code-bg:#0d1117; }
   * { box-sizing:border-box; }
   body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; flex-direction:column; }
-  header { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
+  header { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0; }
   header h1 { font-size:15px; margin:0; font-weight:600; }
-  header .dot { width:9px; height:9px; border-radius:50%; background:#6b7280; }
+  header .dot { width:9px; height:9px; border-radius:50%; background:#6b7280; flex-shrink:0; }
   header .dot.ok { background:#22c55e; }
   header .dot.err { background:#ef4444; }
   header .spacer { flex:1; }
   header a { color:var(--muted); font-size:12px; text-decoration:none; }
   header a:hover { color:var(--text); }
   #chat { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
-  .msg { max-width:760px; width:fit-content; padding:10px 14px; border-radius:12px; white-space:pre-wrap; word-wrap:break-word; line-height:1.5; }
-  .msg.user { align-self:flex-end; background:var(--bubble-u); color:#fff; }
-  .msg.assistant { align-self:flex-start; background:var(--bubble-a); border:1px solid var(--border); }
+  .msg { max-width:780px; width:fit-content; padding:10px 14px; border-radius:12px; line-height:1.6; }
+  .msg.user { align-self:flex-end; background:var(--bubble-u); color:#fff; white-space:pre-wrap; word-wrap:break-word; }
+  .msg.assistant { align-self:flex-start; background:var(--bubble-a); border:1px solid var(--border); min-width:120px; }
+  .answer p { margin:0 0 8px; } .answer p:last-child { margin-bottom:0; }
+  .answer h1,.answer h2,.answer h3,.answer h4 { margin:12px 0 6px; font-weight:600; }
+  .answer h1 { font-size:1.2em; } .answer h2 { font-size:1.1em; } .answer h3 { font-size:1em; }
+  .answer ul,.answer ol { margin:4px 0 8px 20px; padding:0; } .answer li { margin-bottom:2px; }
+  .answer a { color:#60a5fa; }
+  .answer blockquote { border-left:3px solid var(--border); margin:0 0 8px; padding-left:10px; color:var(--muted); }
+  .answer table { border-collapse:collapse; margin-bottom:8px; font-size:13px; }
+  .answer th,.answer td { border:1px solid var(--border); padding:4px 8px; } .answer th { background:#10182a; }
+  .answer code { background:var(--code-bg); border-radius:4px; padding:1px 5px; font-family:"JetBrains Mono",Consolas,"Courier New",monospace; font-size:13px; }
+  .answer pre { background:var(--code-bg); border-radius:8px; margin:0 0 8px; overflow-x:auto; position:relative; }
+  .answer pre code { background:none; padding:12px; display:block; font-size:13px; }
+  .copy-btn { position:absolute; top:6px; right:6px; background:#27304a; border:none; color:var(--muted); font-size:11px; padding:3px 8px; border-radius:4px; cursor:pointer; opacity:0; transition:opacity 0.15s; }
+  .answer pre:hover .copy-btn { opacity:1; } .copy-btn:hover { color:var(--text); }
   .think-box { margin-bottom:8px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
   .think-box summary { cursor:pointer; padding:6px 10px; font-size:12px; color:var(--muted); background:#10182a; user-select:none; }
   .think-box summary::marker { color:var(--muted); }
-  .think-body { padding:8px 10px; color:var(--muted); font-style:italic; font-size:13px; white-space:pre-wrap; border-top:1px solid var(--border); }
-  .answer { white-space:pre-wrap; }
+  .think-body { padding:8px 10px; color:var(--muted); font-style:italic; font-size:13px; white-space:pre-wrap; border-top:1px solid var(--border); max-height:300px; overflow-y:auto; }
   .empty { color:var(--muted); text-align:center; margin-top:40px; font-size:14px; }
-  footer { border-top:1px solid var(--border); padding:12px 16px; }
+  footer { border-top:1px solid var(--border); padding:12px 16px; flex-shrink:0; }
   .row { display:flex; gap:8px; max-width:900px; margin:0 auto; }
   textarea { flex:1; resize:none; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; min-height:44px; max-height:160px; }
   textarea:focus { outline:none; border-color:var(--bubble-u); }
-  button { background:var(--bubble-u); color:#fff; border:none; border-radius:10px; padding:0 18px; font-size:14px; font-weight:600; cursor:pointer; }
-  button:disabled { background:#374151; cursor:not-allowed; }
+  button#send { background:var(--bubble-u); color:#fff; border:none; border-radius:10px; padding:0 18px; font-size:14px; font-weight:600; cursor:pointer; }
+  button#send:disabled { background:#374151; cursor:not-allowed; }
   .hint { max-width:900px; margin:6px auto 0; color:var(--muted); font-size:11px; text-align:center; }
 </style>
 </head>
@@ -42,140 +63,44 @@
   <span class="spacer"></span>
   <a href="/v1/models" target="_blank">API · /v1/models</a>
 </header>
-<div id="chat"><div class="empty">Type a message to start. Reasoning is on — the model's thinking streams into a collapsible box, then the answer. (CPU model — slow but streams live.)</div></div>
+<div id="chat"><div class="empty">Type a message to start. Markdown renders — code, tables, lists all work. Reasoning streams into a collapsible box. (CPU — slow but streams live.)</div></div>
 <footer>
   <div class="row">
     <textarea id="input" placeholder="Send a message…  (Enter to send, Shift+Enter for newline)"></textarea>
     <button id="send">Send</button>
   </div>
-  <div class="hint">OpenAI-compatible API at <code>/v1/chat/completions</code> — reasoning streams as the <code>reasoning_content</code> delta field.</div>
+  <div class="hint">OpenAI-compatible API at <code>/v1/chat/completions</code> · reasoning streams as <code>reasoning_content</code></div>
 </footer>
-
 <script>
-const chatEl = document.getElementById('chat');
-const inputEl = document.getElementById('input');
-const sendBtn = document.getElementById('send');
-const statusEl = document.getElementById('status');
-const history = [];
-let busy = false;
-
-fetch('/v1/models').then(r => r.ok ? statusEl.classList.add('ok') : statusEl.classList.add('err'))
-                    .catch(() => statusEl.classList.add('err'));
-
-function addUser(text) {
-  const empty = chatEl.querySelector('.empty');
-  if (empty) empty.remove();
-  const d = document.createElement('div');
-  d.className = 'msg user';
-  d.textContent = text;
-  chatEl.appendChild(d);
-  chatEl.scrollTop = chatEl.scrollHeight;
-}
-
-function addAssistant() {
-  const empty = chatEl.querySelector('.empty');
-  if (empty) empty.remove();
-  const wrap = document.createElement('div');
-  wrap.className = 'msg assistant';
-
-  const details = document.createElement('details');
-  details.className = 'think-box';
-  details.open = true;
-  details.style.display = 'none';
-  const summary = document.createElement('summary');
-  summary.textContent = 'Thinking…';
-  const thinkBody = document.createElement('div');
-  thinkBody.className = 'think-body';
-  details.appendChild(summary);
-  details.appendChild(thinkBody);
-
-  const answer = document.createElement('div');
-  answer.className = 'answer';
-  answer.textContent = '…';
-
-  wrap.appendChild(details);
-  wrap.appendChild(answer);
-  chatEl.appendChild(wrap);
-  chatEl.scrollTop = chatEl.scrollHeight;
-  return { wrap, details, summary, thinkBody, answer };
-}
-
-async function send() {
-  if (busy) return;
-  const text = inputEl.value.trim();
-  if (!text) return;
-  inputEl.value = '';
-  busy = true; sendBtn.disabled = true;
-
-  addUser(text);
-  history.push({ role: 'user', content: text });
-
-  const ui = addAssistant();
-  let reasoning = '', answer = '';
-
-  try {
-    const resp = await fetch('/v1/chat/completions', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ model: 'gemma', messages: history, max_tokens: 2048, stream: true })
-    });
-    if (!resp.ok || !resp.body) throw new Error('HTTP ' + resp.status);
-
-    const reader = resp.body.getReader();
-    const dec = new TextDecoder();
-    let buf = '';
-    while (true) {
-      const { value, done } = await reader.read();
-      if (done) break;
-      buf += dec.decode(value, { stream: true });
-      const lines = buf.split('\n');
-      buf = lines.pop();
-      for (const line of lines) {
-        const s = line.trim();
-        if (!s.startsWith('data:')) continue;
-        const data = s.slice(5).trim();
-        if (data === '[DONE]') continue;
-        try {
-          const j = JSON.parse(data);
-          const delta = j.choices?.[0]?.delta || {};
-          if (delta.reasoning_content) {
-            reasoning += delta.reasoning_content;
-            ui.details.style.display = '';
-            ui.thinkBody.textContent = reasoning;
-          }
-          if (delta.content) {
-            answer += delta.content;
-            ui.answer.textContent = answer;
-            if (ui.details.open) { ui.details.open = false; ui.summary.textContent = 'Thinking (done) — click to expand'; }
-          }
-          chatEl.scrollTop = chatEl.scrollHeight;
-        } catch (_) {}
-      }
-    }
-    // Fallback: inline <think> tags
-    if (!reasoning && answer.includes('</think>')) {
-      const m = answer.match(/^([\s\S]*?)<\/think>([\s\S]*)$/);
-      reasoning = m[1].replace(/^<think>/, '').trim();
-      answer = m[2].trim();
-      ui.details.style.display = ''; ui.details.open = false;
-      ui.summary.textContent = 'Thinking (done) — click to expand';
-      ui.thinkBody.textContent = reasoning;
-      ui.answer.textContent = answer;
-    }
-    if (!answer) ui.answer.textContent = '(no answer text returned)';
-    history.push({ role: 'assistant', content: answer });
-  } catch (e) {
-    ui.answer.textContent = 'Error: ' + e.message;
-  } finally {
-    busy = false; sendBtn.disabled = false;
-    inputEl.focus();
-  }
-}
-
-sendBtn.addEventListener('click', send);
-inputEl.addEventListener('keydown', e => {
-  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
-});
+marked.setOptions({ breaks: true, gfm: true });
+const renderer = new marked.Renderer();
+const origCode = renderer.code.bind(renderer);
+renderer.code = function(code, lang) { return origCode(code,lang).replace('<pre>','<pre><button class="copy-btn" onclick="copyCode(this)">copy</button>'); };
+marked.use({ renderer });
+function copyCode(btn){navigator.clipboard.writeText(btn.parentElement.querySelector('code').innerText).then(()=>{btn.textContent='copied!';setTimeout(()=>btn.textContent='copy',1500);});}
+function renderMd(text){const div=document.createElement('div');div.innerHTML=marked.parse(text||'');div.querySelectorAll('pre code').forEach(b=>hljs.highlightElement(b));return div;}
+const chatEl=document.getElementById('chat'),inputEl=document.getElementById('input'),sendBtn=document.getElementById('send'),statusEl=document.getElementById('status');
+const history=[];let busy=false;
+fetch('/v1/models').then(r=>r.ok?statusEl.classList.add('ok'):statusEl.classList.add('err')).catch(()=>statusEl.classList.add('err'));
+function addUser(t){chatEl.querySelector('.empty')?.remove();const d=document.createElement('div');d.className='msg user';d.textContent=t;chatEl.appendChild(d);chatEl.scrollTop=chatEl.scrollHeight;}
+function addAssistant(){chatEl.querySelector('.empty')?.remove();const wrap=document.createElement('div');wrap.className='msg assistant';const details=document.createElement('details');details.className='think-box';details.open=true;details.style.display='none';const summary=document.createElement('summary');summary.textContent='Thinking…';const thinkBody=document.createElement('div');thinkBody.className='think-body';details.appendChild(summary);details.appendChild(thinkBody);const answer=document.createElement('div');answer.className='answer';answer.textContent='…';wrap.appendChild(details);wrap.appendChild(answer);chatEl.appendChild(wrap);chatEl.scrollTop=chatEl.scrollHeight;return{wrap,details,summary,thinkBody,answer};}
+async function send(){if(busy)return;const text=inputEl.value.trim();if(!text)return;inputEl.value='';busy=true;sendBtn.disabled=true;addUser(text);history.push({role:'user',content:text});const ui=addAssistant();let reasoning='',answer='';
+try{const resp=await fetch('/v1/chat/completions',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({messages:history,max_tokens:2048,stream:true})});
+if(!resp.ok||!resp.body)throw new Error('HTTP '+resp.status);
+const reader=resp.body.getReader();const dec=new TextDecoder();let buf='';
+while(true){const{value,done}=await reader.read();if(done)break;buf+=dec.decode(value,{stream:true});const lines=buf.split('\n');buf=lines.pop();
+for(const line of lines){const s=line.trim();if(!s.startsWith('data:'))continue;const data=s.slice(5).trim();if(data==='[DONE]')continue;
+try{const j=JSON.parse(data);const delta=j.choices?.[0]?.delta||{};
+if(delta.reasoning_content){reasoning+=delta.reasoning_content;ui.details.style.display='';ui.thinkBody.textContent=reasoning;ui.thinkBody.scrollTop=ui.thinkBody.scrollHeight;}
+if(delta.content){answer+=delta.content;ui.answer.innerHTML='';ui.answer.appendChild(renderMd(answer));if(ui.details.open){ui.details.open=false;ui.summary.textContent='Thinking (done) — click to expand';}}
+chatEl.scrollTop=chatEl.scrollHeight;}catch(_){}}}
+if(!reasoning&&answer.includes('</think>')){const m=answer.match(/^([\s\S]*?)<\/think>([\s\S]*)$/);if(m){reasoning=m[1].replace(/^<think>/,'').trim();answer=m[2].trim();ui.details.style.display='';ui.details.open=false;ui.summary.textContent='Thinking (done) — click to expand';ui.thinkBody.textContent=reasoning;ui.answer.innerHTML='';ui.answer.appendChild(renderMd(answer));}}
+if(!answer)ui.answer.textContent='(no answer text returned)';history.push({role:'assistant',content:answer});}
+catch(e){ui.answer.textContent='Error: '+e.message;}
+finally{busy=false;sendBtn.disabled=false;inputEl.focus();}}
+sendBtn.addEventListener('click',send);
+inputEl.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();send();}});
+inputEl.addEventListener('input',()=>{inputEl.style.height='auto';inputEl.style.height=Math.min(inputEl.scrollHeight,160)+'px';});
 </script>
 </body>
 </html>