feat(tools): gateway-chat.html — auto-discover gateway models + image upload for vision smoke

Model field now pulls /v1/models (the ↻ control; new gateway models just appear) instead of a hardcoded stale list; 📎 attaches an image (base64 data: URL in image_url content) so the multimodal models (Qwopus, image-judge) can be smoked. Static-verified (JS syntax + element-id consistency); headless smoke was blocked by a shared-browser version skew in /opt/ms-playwright, not a tool defect.
2026-06-19 11:56:20 -07:00
parent 75bd4c3679
commit 4c40b9fac6
1 changed files with 73 additions and 18 deletions
@@ -11,6 +11,11 @@
  it directly. It deliberately NEVER sends a `tools` field, sidestepping the
  vLLM "tools must not be an empty array" bug that breaks the LiteLLM UI
  playground for vLLM-backed models. Settings persist in localStorage.
+
+  Built for SMOKING new models: the Model field auto-discovers every model on
+  the gateway (the ↻ control pulls /v1/models — new models just appear), and 📎
+  attaches an image so you can smoke multimodal/vision models (Qwopus,
+  image-judge, …) too. Image is sent as a base64 data: URL in image_url content.
 -->
 <style>
  :root{--bg:#0f1115;--panel:#171a21;--ink:#e6e9ef;--muted:#8b93a7;--acc:#5b8cff;--line:#262b36;--user:#1f6feb22;--warn:#ff6b6b}
@@ -38,6 +43,12 @@
  .err{color:var(--warn);font-family:ui-monospace,monospace;font-size:12px;white-space:pre-wrap}
  .hint{font-size:11px;color:var(--muted);margin-top:8px}
  code{font-family:ui-monospace,monospace}
+  #refresh{cursor:pointer;color:var(--acc);font-size:10px;letter-spacing:0}
+  #composer{align-items:flex-end}
+  #attach{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 12px;height:42px;font-size:18px}
+  #attached{display:none;align-items:center;gap:8px;font-size:11px;color:var(--muted);padding:6px 18px 0;background:var(--panel)}
+  #attached img{height:30px;border-radius:4px;border:1px solid var(--line)}
+  .msg .thumb{max-width:220px;max-height:220px;border-radius:6px;border:1px solid var(--line);margin-bottom:6px;display:block}
 </style>
 </head>
 <body>
@@ -47,18 +58,9 @@
    <input id="base" placeholder="http://10.250.50.70:4000/v1">
    <label>API key</label>
    <input id="key" type="password" placeholder="sk-…">
-    <label>Model</label>
-    <input id="model" list="models" placeholder="mistral-small-4">
-    <datalist id="models">
-      <option>granite-4.1-8b</option>
-      <option>mistral-small-4</option>
-      <option>mistral-small-4-reasoning</option>
-      <option>qwen3.6-35b-a3b</option>
-      <option>qwen3.6-35b-a3b-thinking</option>
-      <option>selene-1-mini-8b</option>
-      <option>glm-5.1</option>
-      <option>glm-4.7</option>
-    </datalist>
+    <label>Model <span id="refresh" title="Reload model list from /v1/models">↻ load</span></label>
+    <input id="model" list="models" placeholder="(pick or type — ↻ loads all gateway models)">
+    <datalist id="models"></datalist>
    <label>System prompt</label>
    <textarea id="sys" placeholder="You are a helpful assistant."></textarea>
    <div class="row">
@@ -69,7 +71,9 @@
  </aside>
  <main id="main">
    <div id="log"></div>
+    <div id="attached"></div>
    <div id="composer">
+      <label id="attach" class="ghost" title="Attach an image (smoke vision models)">📎<input id="img" type="file" accept="image/*" hidden></label>
      <textarea id="inp" placeholder="Message…  (Enter to send · Shift+Enter for newline)"></textarea>
      <button id="send">Send</button>
      <button id="reset" class="ghost" title="Clear conversation">Reset</button>
@@ -82,9 +86,45 @@ cfg.forEach(k => { const v = localStorage.getItem('gc_'+k); if (v !== null) $(k)
 if (!$('base').value) $('base').value = 'http://10.250.50.70:4000/v1';
 cfg.forEach(k => $(k).addEventListener('input', e => localStorage.setItem('gc_'+k, e.target.value)));

-let history = [];            // [{role:'user'|'assistant', content}]
+let history = [];            // [{role, content}]  content = string | multimodal array
+let attached = null;         // { url:dataURL, name } staged for the NEXT message
 const log = $('log');

+// --- model auto-discovery: fill the datalist from /v1/models (new models just appear) ---
+async function loadModels(){
+  try {
+    const res = await fetch($('base').value.replace(/\/+$/,'') + '/models',
+      { headers:{ 'Authorization':'Bearer ' + $('key').value } });
+    if (!res.ok){ $('refresh').textContent = '↻ ' + res.status; return; }
+    const ids = ((await res.json()).data || []).map(m => m.id).sort();
+    const dl = $('models'); dl.innerHTML = '';
+    for (const id of ids){ const o = document.createElement('option'); o.value = id; dl.append(o); }
+    $('refresh').textContent = '↻ ' + ids.length;
+  } catch (e){ $('refresh').textContent = '↻ offline'; }
+}
+$('refresh').addEventListener('click', loadModels);
+$('base').addEventListener('change', loadModels);
+$('key').addEventListener('change', loadModels);
+loadModels();
+
+// --- image attach (vision smoke): stage a base64 data: URL for the next send ---
+$('img').addEventListener('change', e => {
+  const f = e.target.files[0]; if (!f) return;
+  const r = new FileReader();
+  r.onload = () => { attached = { url:r.result, name:f.name }; showAttached(); };
+  r.readAsDataURL(f);
+});
+function showAttached(){
+  const a = $('attached');
+  if (!attached){ a.style.display = 'none'; a.innerHTML = ''; return; }
+  a.style.display = 'flex'; a.innerHTML = '';
+  const im = document.createElement('img'); im.src = attached.url;
+  const nm = document.createElement('span'); nm.textContent = attached.name;
+  const x = document.createElement('span'); x.textContent = '✕ remove'; x.style.cursor = 'pointer'; x.style.color = 'var(--warn)';
+  x.onclick = () => { attached = null; $('img').value = ''; showAttached(); };
+  a.append(im, nm, x);
+}
+
 function addMsg(who, cls){
  const wrap = document.createElement('div'); wrap.className = 'msg ' + cls;
  const h = document.createElement('div'); h.className = 'who'; h.textContent = who;
@@ -96,10 +136,25 @@ function addMsg(who, cls){
 function showErr(text){ const m = addMsg('error','err'); m.body.className = 'err'; m.body.textContent = text; }

 async function send(){
-  const text = $('inp').value.trim(); if (!text) return;
+  const text = $('inp').value.trim();
+  if (!text && !attached) return;
  $('inp').value = '';
-  history.push({ role:'user', content:text });
-  addMsg('you','user').body.textContent = text;
+
+  // multimodal array if an image is staged, else a plain string
+  let userContent;
+  if (attached){
+    userContent = [];
+    if (text) userContent.push({ type:'text', text });
+    userContent.push({ type:'image_url', image_url:{ url:attached.url } });
+  } else {
+    userContent = text;
+  }
+  history.push({ role:'user', content:userContent });
+
+  const u = addMsg('you','user');
+  if (attached){ const th = document.createElement('img'); th.className = 'thumb'; th.src = attached.url; u.body.append(th); }
+  u.body.append(document.createTextNode(text));
+  attached = null; $('img').value = ''; showAttached();

  const messages = [];
  const sys = $('sys').value.trim();
@@ -107,7 +162,7 @@ async function send(){
  messages.push(...history);

  const body = {
-    model: $('model').value.trim() || 'mistral-small-4',
+    model: $('model').value.trim() || 'gen',
    messages,
    temperature: parseFloat($('temp').value),
    max_tokens: parseInt($('max').value, 10),
@@ -150,7 +205,7 @@ async function send(){

 $('send').addEventListener('click', send);
 $('inp').addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); send(); } });
-$('reset').addEventListener('click', () => { history = []; log.innerHTML = ''; });
+$('reset').addEventListener('click', () => { history = []; log.innerHTML = ''; attached = null; $('img').value = ''; showAttached(); });
 </script>
 </body>
 </html>