update dist bundle (2)

index.html

@@ -36,6 +36,21 @@
   button:disabled { opacity: .45; cursor: default; }
   #bar { height: 8px; background: #0d0f12; border: 1px solid #2a2f37; border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
   #barFill { height: 100%; width: 0%; background: linear-gradient(90deg, #2f6fed, #5aa0ff); transition: width .15s linear; }
+
+  /* --- model ingest (Models tab) ---------------------------------------- */
+  /* separate from the engine bar on purpose: getting bytes into the library
+     and starting a context are different operations with different outcomes */
+  #ingest { border: 1px solid #2a2f37; border-radius: 8px; background: #171a1f;
+            padding: 9px 11px; margin: 0 0 12px; }
+  #ingest.error { border-color: #5a2530; }
+  .ingest-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
+                 font-size: 12px; color: #cfd4da; margin-bottom: 7px; }
+  #ingestPercent { color: #8a8f98; font-size: 11px; }
+  #ingestBar { height: 8px; background: #0d0f12; border: 1px solid #2a2f37;
+               border-radius: 999px; overflow: hidden; }
+  #ingestFill { height: 100%; width: 0%; background: linear-gradient(90deg, #6752c8, #a98bff);
+                transition: width .15s linear; }
+  #ingest.error #ingestFill { background: #c05050; }
   #status { color: #9aa1ab; font-size: 13px; min-height: 20px; }
   #out { white-space: pre-wrap; word-break: break-word; background: #0d0f12; border: 1px solid #2a2f37;
          border-radius: 6px; padding: 12px; min-height: 140px; }
@@ -44,16 +59,39 @@
   summary { cursor: pointer; color: #9aa1ab; font-size: 13px; }
   #log { max-height: 180px; overflow: auto; background: #0d0f12; border: 1px solid #2a2f37; border-radius: 6px;
          padding: 8px 10px; margin-top: 8px; font-size: 12px; color: #8a8f98; white-space: pre-wrap; }
+  #log .logline { display: block; }
+  #log .warn { color: #d8b25f; }
+  #log .err { color: #e07070; }
   .pill { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #23303f; color: #9cc3ff;
           font-size: 11px; margin-left: 6px; }
 
   /* --- top bar ---------------------------------------------------------- */
   .appbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
   .appbar label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a8f98; }
-  .appbar select { flex: 1 1 260px; width: auto; }
+  /* a flex item refuses to shrink below its longest option, so a long model name
+     would push the whole page sideways on a phone; min-width lets it ellipsize */
+  .appbar select { flex: 1 1 260px; width: auto; min-width: 0; max-width: 100%; }
   .appbar button { padding: 7px 12px; font-size: 13px; }
   #currentModel { flex: 1 1 100%; font-size: 12px; }
 
+  /* --- engine launch row (top bar) -------------------------------------- */
+  .enginebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px;
+               padding: 7px 10px; border: 1px solid #2a2f37; border-radius: 8px; background: #171a1f; }
+  .enginebar-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a8f98; }
+  .ef { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #bfc5cd; white-space: nowrap; }
+  .ef input[type=number] { width: 66px; background: #0d0f12; color: #e6e6e6; border: 1px solid #2a2f37;
+        border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; }
+  .ef select { width: auto; background: #0d0f12; color: #e6e6e6; border: 1px solid #2a2f37;
+        border-radius: 6px; padding: 3px 5px; font: inherit; font-size: 12px; }
+  .enginebar #mmprojSelect { width: 118px; font-size: 12px; }
+  .ef.check { gap: 5px; }
+  .ef input[type=checkbox] { margin: 0; }
+  #threadsHint { flex: 1 1 100%; margin: 0; font-size: 11px; }
+  .enginebar details { flex: 1 1 100%; margin: 0; }
+  .enginebar summary { font-size: 11px; }
+  .enginebar details p { margin: 6px 0 0; }
+  .enginebar .hint { margin: 0; }
+
   /* --- tabs ------------------------------------------------------------- */
   .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 0; border-bottom: 1px solid #2a2f37; }
   .tab { background: transparent; color: #9aa1ab; border: 1px solid transparent; border-bottom: 0;
@@ -186,6 +224,43 @@ downloaded from a URL or read straight off your disk — never both.</small>
   <button id="stop" class="danger" disabled title="stop generating, keeping what has arrived">Stop</button>
   <div id="currentModel" class="muted"></div>
 </div>
+<div class="enginebar" role="group" aria-label="engine launch parameters">
+  <span class="enginebar-title">engine <span class="pill" title="fixed when the context is created">launch</span></span>
+  <label class="ef" title="context length in tokens; KV memory grows with this">ctx
+    <input type="number" id="ctxSize" value="1024" step="256" min="128" max="16384"
+           aria-label="context length"></label>
+  <label class="ef">KV K <select id="kvTypeK" aria-label="KV cache type for K">
+    <option value="f16" selected>f16</option>
+    <option value="q8_0">q8_0</option>
+    <option value="q4_0">q4_0</option>
+  </select></label>
+  <label class="ef">KV V <select id="kvTypeV" aria-label="KV cache type for V">
+    <option value="f16" selected>f16</option>
+    <option value="q8_0">q8_0</option>
+    <option value="q4_0">q4_0</option>
+  </select></label>
+  <label class="ef">flash <select id="flashAttn" aria-label="flash attention">
+    <option value="-1" selected>auto</option>
+    <option value="0">off</option>
+    <option value="1">on</option>
+  </select></label>
+  <label class="ef">threads <input type="number" id="threads" min="1" max="16" step="1" value="1"
+    aria-label="CPU threads"></label>
+  <label class="ef check"><input type="checkbox" id="kvUnified" checked> unified KV</label>
+  <label class="ef check"><input type="checkbox" id="useMmproj"> mmproj</label>
+  <label class="ef">projector <select id="mmprojSelect" aria-label="multimodal projector" disabled></select></label>
+  <p class="hint" id="threadsHint"></p>
+  <details>
+    <summary>how launch settings apply</summary>
+    <p class="hint">Applied when a model loads — press <b>Reload engine</b> after changing them.
+      One parallel sequence: extra slots would only duplicate a cache a single user cannot fill.
+      A quantized V cache needs flash attention; asking for one switches it on. KV memory grows
+      with context length.</p>
+    <p class="hint">Flag a GGUF as <b>mmproj</b> in the model library to choose it here. Then attach
+      images to a message (button or drag &amp; drop); the image goes into the prompt as the
+      projector's media marker.</p>
+  </details>
+</div>
 <div id="bar"><div id="barFill"></div></div>
 <div id="status">idle</div>
 
@@ -239,38 +314,6 @@ downloaded from a URL or read straight off your disk — never both.</small>
     </div>
 
     <aside class="params" id="paramsRail">
-      <h2>engine <span class="pill" title="fixed when the context is created">launch</span></h2>
-      <label class="field">context length <input type="number" id="ctxSize" value="1024" step="256"
-             min="128" max="16384" title="tokens; KV memory grows with this"></label>
-      <label class="field">KV cache K <select id="kvTypeK" aria-label="KV cache type for K">
-        <option value="f16" selected>f16</option>
-        <option value="q8_0">q8_0</option>
-        <option value="q4_0">q4_0</option>
-      </select></label>
-      <label class="field">KV cache V <select id="kvTypeV" aria-label="KV cache type for V">
-        <option value="f16" selected>f16</option>
-        <option value="q8_0">q8_0</option>
-        <option value="q4_0">q4_0</option>
-      </select></label>
-      <label class="field">flash attention <select id="flashAttn" aria-label="flash attention">
-        <option value="-1" selected>auto</option>
-        <option value="0">off</option>
-        <option value="1">on</option>
-      </select></label>
-      <label class="field">threads <input type="number" id="threads" min="1" max="16" step="1" value="1"
-        aria-label="CPU threads"></label>
-      <p class="hint" id="threadsHint" style="margin-top:-4px"></p>
-      <label class="row"><input type="checkbox" id="kvUnified" checked> unified KV cache</label>
-      <label class="row"><input type="checkbox" id="useMmproj"> load multimodal projector</label>
-      <label class="field">mmproj <select id="mmprojSelect" aria-label="multimodal projector" disabled></select></label>
-      <p class="hint" style="margin-top:6px">Flag a GGUF as <b>mmproj</b> in the model library to
-        choose it here. Then attach images to a message (button or drag &amp; drop); the image goes
-        into the prompt as the projector's media marker.</p>
-      <p class="hint" style="margin-top:6px">Applied when a model loads \u2014 press
-        <b>Reload engine</b> after changing them. One parallel sequence: extra slots would only
-        duplicate a cache a single user cannot fill. A quantized V cache needs flash attention;
-        asking for one switches it on. KV memory grows with context length.</p>
-
       <h2>sampling</h2>
       <label class="field">temperature <input type="number" id="temp" value="0.7" step="0.05" min="0" max="2"></label>
       <label class="field">top_p <input type="number" id="topP" value="0.9" step="0.05" min="0" max="1"></label>
@@ -284,17 +327,38 @@ downloaded from a URL or read straight off your disk — never both.</small>
       <label class="field wide">stop sequences
         <textarea id="stopSequences" spellcheck="false" placeholder="one per line (&#92;n and &#92;t are expanded)"></textarea>
       </label>
-      <h2>tools</h2>
-      <label class="field wide">tool definitions (OpenAI JSON)
+      <h2>constrained output</h2>
+      <label class="field wide">constrain the reply with
+        <select id="constrain">
+          <option value="off">nothing (free text)</option>
+          <option value="tools" selected>tool calls (definitions below)</option>
+          <option value="json_schema">JSON schema</option>
+          <option value="grammar">GBNF grammar</option>
+        </select>
+      </label>
+      <label class="field wide" id="toolsWrap">tool definitions (OpenAI JSON)
         <textarea id="tools" spellcheck="false" placeholder='[{"type":"function","function":{"name":"get_weather","parameters":{"type":"object","properties":{"city":{"type":"string"}}}}}]'></textarea>
       </label>
-      <p class="hint" style="margin-top:8px">Handed to the chat template. A reply that calls a tool is
-        parsed by the model's own parser and shown as JSON next to the assistant turn.</p>
-
-      <h2>thinking</h2>
+      <label class="field wide" id="schemaWrap" hidden>JSON schema
+        <textarea id="jsonSchema" spellcheck="false" placeholder='{"type":"object","properties":{"name":{"type":"string"}},"required":["name"]}'></textarea>
+      </label>
+      <label class="field wide" id="grammarWrap" hidden>GBNF grammar
+        <textarea id="grammar" spellcheck="false" placeholder='root ::= "yes" | "no"'></textarea>
+      </label>
+      <p class="hint" style="margin-top:8px">Tool definitions go to the chat template and the reply
+        is parsed by the model's own parser. A JSON schema or grammar instead constrains the reply
+        text itself, and replaces any grammar the template would have used. One constraint at a time.</p>
+
+      <h2>template</h2>
+      <label class="field wide">extra template arguments (JSON)
+        <textarea id="runTemplateKwargs" spellcheck="false"
+                  placeholder='{"enable_thinking": true}'></textarea>
+      </label>
       <label class="row"><input type="checkbox" id="enableThinking"> enable_thinking</label>
-      <p class="hint" style="margin-top:6px">Writes the <code>enable_thinking</code> template parameter into
-        the parameters JSON on the Chat template tab.</p>
+      <p class="hint" style="margin-top:6px">The same object as <em>parameters JSON</em> on the Chat template
+        tab: edit it in either place — preview and generation both use it for the next turn.
+        <em>enable_thinking</em> only sets the template variable; whether reasoning is emitted and
+        separated into <code>reasoning_content</code> depends on the model's template and parser.</p>
     </aside>
   </div>
 
@@ -331,6 +395,11 @@ downloaded from a URL or read straight off your disk — never both.</small>
   <section class="panel" id="panel-models" hidden>
     <h2>model library</h2>
 
+    <div id="ingest" hidden>
+      <div class="ingest-head"><span id="ingestLabel">preparing…</span><span id="ingestPercent"></span></div>
+      <div id="ingestBar"><div id="ingestFill"></div></div>
+    </div>
+
     <div class="add">
       <h3>from a URL</h3>
       <div class="addrow">
@@ -394,16 +463,53 @@ downloaded from a URL or read straight off your disk — never both.</small>
   const pct = (loaded, total) => (total ? Math.min(100, (loaded / total) * 100) : 0);
 
   const statusText = (t) => { $("status").textContent = t; };
-  const log = (t) => {
+  // llama.cpp log levels: 1 debug, 2 info, 3 warn, 4 error, 5 continuation.
+  // Only warn/error are coloured; info is llama.cpp's own progress chatter
+  // (every image batch logs one line) and must not read as a failure.
+  const log = (t, level = 0) => {
     const el = $("log");
-    el.textContent += t.endsWith("\n") ? t : t + "\n";
+    const text = t.endsWith("\n") ? t : t + "\n";
+    if (level >= 3) {
+      const line = document.createElement("span");
+      line.className = "logline " + (level >= 4 ? "err" : "warn");
+      line.textContent = text;
+      el.appendChild(line);
+    } else {
+      el.appendChild(document.createTextNode(text));
+    }
     el.scrollTop = el.scrollHeight;
   };
   const setBar = (loaded, total) => { $("barFill").style.width = pct(loaded, total).toFixed(1) + "%"; };
+  const resetBar = () => { $("barFill").style.width = "0%"; };
+
+  // Model ingest (download / copy into IndexedDB) has its own bar in the Models
+  // tab. The top bar tracks engine startup only; one bar for both made a finished
+  // download look like a starting engine and vice versa.
+  const showIngest = (label, loaded = 0, total = 0) => {
+    const box = $("ingest");
+    box.hidden = false;
+    box.classList.remove("error");
+    $("ingestLabel").textContent = label;
+    $("ingestPercent").textContent = total ? pct(loaded, total).toFixed(1) + "%" : "";
+    $("ingestFill").style.width = pct(loaded, total).toFixed(1) + "%";
+  };
+  const hideIngest = () => {
+    $("ingest").hidden = true;
+    $("ingest").classList.remove("error");
+    $("ingestFill").style.width = "0%";
+  };
+  const labelIngest = (label) => { if (!$("ingest").hidden) $("ingestLabel").textContent = label; };
+  const failIngest = (why) => {
+    $("ingest").hidden = false;
+    $("ingest").classList.add("error");
+    $("ingestLabel").textContent = "error: " + why;
+    $("ingestPercent").textContent = "";
+  };
 
   let app = null;
   let models = [];
   let loadedId = null;        // model currently in the wasm instance
+  let ingestingProjector = null;   // name while an mmproj URL is being downloaded
   let currentId = null;       // model the user last asked to load
   let pendingFile = null;     // file picked for the "add" form
   let reattachFor = null;     // model id waiting for its file to be re-picked
@@ -517,6 +623,10 @@ downloaded from a URL or read straight off your disk — never both.</small>
       stop: stopList(),
       chat_template_source: templateOverride(),
       tools: $("tools").value.trim(),
+      // the tool path above is untouched: these stay empty unless the picker
+      // selects them, and a caller grammar wins over the template's own
+      json_schema: $("constrain").value === "json_schema" ? $("jsonSchema").value.trim() : "",
+      grammar: $("constrain").value === "grammar" ? $("grammar").value.trim() : "",
       template_kwargs: $("templateKwargs").value.trim() || "{}",
     };
   }
@@ -553,7 +663,9 @@ downloaded from a URL or read straight off your disk — never both.</small>
           parent.postMessage({ type: "llmjs:ready", model: m.name,
             n_ctx: info.n_ctx, threads: info.threads || 1 }, "*");
         }
-        setBar(1, 1);
+        // the bar belongs to the startup, not to the loaded state
+        resetBar();
+        hideIngest();
         setState("ready");
         refreshModels();
       },
@@ -631,31 +743,53 @@ downloaded from a URL or read straight off your disk — never both.</small>
           chatRow.querySelector(".content").readOnly = false;
           chatRow = null;
         }
-        statusText("error: " + err);
+        // an ingest failure belongs to the library surface, not the engine one
+        if (uiState === "downloading" || uiState === "copying" || ingestingProjector) {
+          failIngest(String(err));
+          ingestingProjector = null;
+          statusText("engine idle — the model library reported an error");
+        } else {
+          statusText("error: " + err);
+        }
         log("ERROR: " + err);
         setState(loadedId ? "ready" : "idle");
       },
       (p) => {
+        const done = p.total > 0 && p.loaded >= p.total;
         if (p.phase === "download") {
+          // library work: the engine bar stays at zero until the bytes are here
           setState("downloading");
-          statusText(p.complete ? "downloaded, preparing…"
-            : `downloading ${fmt(p.loaded)} / ${fmt(p.total)} (${pct(p.loaded, p.total).toFixed(1)}%)`);
-          setBar(p.loaded, p.total);
+          resetBar();
+          showIngest(p.complete || done ? "downloaded — starting the engine…"
+            : `downloading ${fmt(p.loaded)} / ${fmt(p.total)}`, p.loaded, p.total);
         } else if (p.phase === "copy") {
           setState("copying");
-          statusText(`copying into browser storage ${fmt(p.loaded)} / ${fmt(p.total)}`);
-          setBar(p.loaded, p.total);
+          resetBar();
+          if (done) hideIngest();
+          else showIngest(`copying into browser storage ${fmt(p.loaded)} / ${fmt(p.total)}`,
+                          p.loaded, p.total);
         } else if (p.phase === "hash") {
           setState("hashing");
-          statusText(`sha256 ${pct(p.loaded, p.total).toFixed(0)}% of ${fmt(p.total)}`);
-          setBar(p.loaded, p.total);
+          if (ingestingProjector) {
+            // no engine is starting: the projector is library content
+            resetBar();
+            showIngest(`verifying the projector (sha256 ${pct(p.loaded, p.total).toFixed(0)}%)`,
+                       p.loaded, p.total);
+            statusText("engine idle — verifying the projector");
+          } else {
+            // the bytes are in the library; this is startup work
+            hideIngest();
+            statusText(`engine starting · verifying model bytes (sha256 ${pct(p.loaded, p.total).toFixed(0)}%)`);
+            setBar(p.loaded, p.total);
+          }
         } else if (p.phase === "load") {
+          hideIngest();
           setState("loading");
-          statusText(`loading into wasm ${fmt(p.loaded)} / ${fmt(p.total)}`);
+          statusText(`engine starting · loading into wasm ${fmt(p.loaded)} / ${fmt(p.total)}`);
           setBar(p.loaded, p.total);
         }
       },
-      (line) => log(line.trimEnd()),
+      (line, level) => log(line.trimEnd(), level ?? 0),
     );
 
     app.on_event = (msg) => {
@@ -667,17 +801,27 @@ downloaded from a URL or read straight off your disk — never both.</small>
           $("fileLabel").value = "";
           $("urlMmproj").checked = false;
           $("fileMmproj").checked = false;
+          syncIngestButtons();
           // adding a projector does not load anything, so nothing reports INITIALIZED
           setState(loadedId ? "ready" : "idle");
           refreshModels();
           break;
 
         case action.MODEL_UPDATED:
+          if (ingestingProjector) {
+            const name = ingestingProjector;
+            ingestingProjector = null;
+            hideIngest();
+            resetBar();
+            statusText(`${name} added to the model library — pick it in the engine row`);
+            setState(loadedId ? "ready" : "idle");
+          }
           refreshModels();
           break;
 
         case action.PAUSED:
-          statusText("paused — progress is saved, press Resume to continue");
+          labelIngest("paused — press Resume to continue");
+          statusText("engine idle — the download is paused");
           setState("paused");
           refreshModels();
           break;
@@ -1039,7 +1183,7 @@ downloaded from a URL or read straight off your disk — never both.</small>
 
   function startLoad(m) {
     if (m.multimodal) {
-      statusText(`${m.name} is an mmproj — tick "load multimodal projector" in the rail and pick it there`);
+      statusText(`${m.name} is an mmproj — tick mmproj in the engine row and pick it there`);
       return;
     }
     // a local file that was never copied needs its File again after a reload
@@ -1062,7 +1206,17 @@ downloaded from a URL or read straight off your disk — never both.</small>
     currentId = m.id;
     $("out").textContent = "";
     $("stats").textContent = "";
-    statusText("starting…");
+    resetBar();
+    // a URL model that never finished is an ingest job first; its progress is
+    // reported in the model library, and the engine bar starts at zero
+    if (m.source === "url" && !m.complete) {
+      showTab("models");
+      showIngest("preparing download…");
+      statusText("engine idle — download progress is in the model library");
+    } else {
+      hideIngest();
+      statusText("starting…");
+    }
     setState("starting");
     app.post({
       event: action.LOAD,
@@ -1082,6 +1236,8 @@ downloaded from a URL or read straight off your disk — never both.</small>
     if (!app || !currentId) return;
     $("out").textContent = "";
     $("stats").textContent = "";
+    hideIngest();
+    resetBar();
     statusText("freeing the model and reloading the engine…");
     setState("starting");
     const mpId = engineParams().mmproj_id;
@@ -1118,7 +1274,19 @@ downloaded from a URL or read straight off your disk — never both.</small>
     ensureApp();
     $("out").textContent = "";
     $("stats").textContent = "";
-    statusText("starting…");
+    resetBar();
+    hideIngest();
+    const copy = $("keepCopy").checked;
+    const projector = $("fileMmproj").checked;
+    if (projector) {
+      statusText(`adding ${file.name} to the model library…`);
+      if (copy) showIngest("copying the projector into the library…");
+    } else if (copy) {
+      showIngest("copying the file into the library…");
+      statusText("engine idle — copy progress is in the model library");
+    } else {
+      statusText("starting…");
+    }
     setState("starting");
     app.post({
       event: action.ADD_FILE,
@@ -1137,7 +1305,15 @@ downloaded from a URL or read straight off your disk — never both.</small>
     ensureApp();
     $("out").textContent = "";
     $("stats").textContent = "";
-    statusText("starting…");
+    resetBar();
+    hideIngest();
+    // progress lives in the library, so that is where the download happens
+    showTab("models");
+    // a projector is downloaded into the library and nothing is started: it
+    // becomes a launch parameter of the next model load
+    if (mmproj) ingestingProjector = name || url.split("/").pop() || "projector";
+    showIngest("preparing download…");
+    statusText("engine idle — download progress is in the model library");
     setState("starting");
     app.post({
       event: action.ADD_URL,
@@ -1281,12 +1457,13 @@ downloaded from a URL or read straight off your disk — never both.</small>
   }
 
   $("pause").onclick = () => {
-    if (app) { app.pause(); statusText("pausing…"); }
+    if (app) { app.pause(); labelIngest("pausing…"); statusText("engine idle — pausing the download…"); }
   };
 
   $("resume").onclick = () => {
     if (!app) return;
-    statusText("resuming…");
+    labelIngest("resuming…");
+    statusText("engine idle — resuming the download…");
     setState("downloading");
     app.resume();
   };
@@ -1316,6 +1493,16 @@ downloaded from a URL or read straight off your disk — never both.</small>
     syncTemplateUI();
   };
 
+  // one constraint at a time: the picker reveals only the box it applies to
+  function syncConstrain() {
+    const mode = $("constrain").value;
+    $("toolsWrap").hidden = mode !== "tools";
+    $("schemaWrap").hidden = mode !== "json_schema";
+    $("grammarWrap").hidden = mode !== "grammar";
+  }
+  $("constrain").onchange = syncConstrain;
+  syncConstrain();
+
   $("previewTemplate").onclick = () => {
     if (!app) { statusText("load a model first"); return; }
     $("templatePreview").textContent = "rendering…";
@@ -1538,15 +1725,26 @@ downloaded from a URL or read straight off your disk — never both.</small>
     }
   }
 
+  // One object, two editors: the Chat template tab (for experiments with the
+  // preview) and the inference rail (per-turn config). They mirror each other,
+  // so whichever place the user edits, preview and generation both see it.
+  const kwargBoxes = [$("templateKwargs"), $("runTemplateKwargs")];
+  const syncKwargs = (src) => {
+    for (const box of kwargBoxes) if (box !== src) box.value = src.value;
+  };
+  for (const box of kwargBoxes) box.addEventListener("input", () => syncKwargs(box));
+
+  $("templateKwargs").value = "{}";
+  syncKwargs($("templateKwargs"));
+
   $("enableThinking").onchange = () => {
     const kw = readKwargs();
     if ($("enableThinking").checked) kw.enable_thinking = true;
     else delete kw.enable_thinking;
     $("templateKwargs").value = JSON.stringify(kw, null, 2);
+    syncKwargs($("templateKwargs"));
   };
 
-  $("templateKwargs").value = "{}";
-
   $("useMmproj").onchange = () => {
     $("mmprojSelect").disabled = !$("useMmproj").checked || !models.some((m) => m.multimodal);
     statusText($("useMmproj").checked
@@ -1554,6 +1752,16 @@ downloaded from a URL or read straight off your disk — never both.</small>
       : "no multimodal projector will be loaded");
   };
 
+  // The button says what actually happens: a text model is downloaded and then
+  // loaded, a projector is only put into the library (nothing to start).
+  function syncIngestButtons() {
+    $("addUrl").textContent = $("urlMmproj").checked ? "Download projector" : "Download & load";
+    $("addFile").textContent = $("fileMmproj").checked ? "Add to library" : "Add & load";
+  }
+  $("urlMmproj").onchange = syncIngestButtons;
+  $("fileMmproj").onchange = syncIngestButtons;
+  syncIngestButtons();
+
   // The threaded module needs SharedArrayBuffer, i.e. a cross-origin isolated
   // page. Without COOP/COEP the single-thread module is what the worker loads,
   // and asking for threads would only be a lie.

llm.js

@@ -95,7 +95,9 @@ class LLM {
                     break;
 
                 case action.LOG:
-                    if (this.on_log_callback) this.on_log_callback(data.line);
+                    // the level decides what is an error and what is llama.cpp
+                    // chatter: dropping it made INFO lines look like failures
+                    if (this.on_log_callback) this.on_log_callback(data.line, data.level ?? 0);
                     break;
 
                 case action.ERROR:

wasm/llm-wasm-mt.build.txt

@@ -1,4 +1,4 @@
 llama.cpp commit: f7591a6a01f9273de03331732bdc0b39721168be
 llama.cpp subject: sycl: add f16 support for SWIGLU_OAI (#30857)
 emcc: emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 7.0.0 (777e6e5db7b4990bcaeb1b9998ed642cc84e6629)
-built: 2026-11-09T17:00:27Z
+built: 2026-11-10T16:49:06Z

wasm/llm-wasm-mt.wasm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:79a668b5a3846abb512c5ebe90d3b32fa8801c04ba8cb7fafa5a4683795fd05d
-size 6922172
+oid sha256:1d34dbe1230fdb116e0aede29c9559e09195a93987883f288de06bae3e5908c3
+size 7040863

worker.js

@@ -115,7 +115,11 @@ async function ensureModule() {
                 }
             }
             if (!factory) factory = (await import("./wasm/llm-wasm.js")).default;
-            module = await factory();
+            // emscripten writes to stdout/stderr for anything that does not go
+            // through our log callback; that is chatter, not a failure, so it
+            // must not land in the console as an error
+            const print = (text) => self.llmjs_on_log(2, String(text).replace(/\n?$/, "\n"));
+            module = await factory({ print, printErr: print });
             module._llmjs_init();
             log(`llama.cpp ${module.UTF8ToString(module._llmjs_version())}` +
                 (THREADED ? " (threaded build)" : " (single-thread build)"));
@@ -255,7 +259,11 @@ async function loadIntoFS(model, target = "/models/model.gguf") {
     return written;
 }
 
-async function start({ id, file, mmproj_file, context_size, kv, mmproj_id, threads }) {
+// `ingest_only` stops after the bytes are in the library (download + hash): a
+// projector is not something the engine can "start", it is picked as a launch
+// parameter of the next model load.
+async function start({ id, file, mmproj_file, context_size, kv, mmproj_id, threads,
+                       ingest_only = false }) {
     if (busy) {
         fail(new Error("a load is already running"));
         return;
@@ -270,25 +278,13 @@ async function start({ id, file, mmproj_file, context_size, kv, mmproj_id, threa
 
     busy = true;
     abort = new AbortController();
-    lastRequest = { id, context_size, kv: { ...currentKv }, mmproj_id, threads: currentThreads };
+    lastRequest = { id, context_size, kv: { ...currentKv }, mmproj_id, threads: currentThreads,
+                    ingest_only };
 
     try {
-        await ensureModule();
-        // older single-thread modules predate this export; they clamp to 1 anyway
-        if (module._llmjs_set_threads) {
-            module.ccall("llmjs_set_threads", null, ["number"], [currentThreads]);
-        }
-
         let model = await getModel(id);
         if (!model) throw new Error(`unknown model ${id}`);
 
-        // the wasm instance can only hold one model at a time
-        if (loaded && loadedId !== id) {
-            module._llmjs_free();
-            loaded = false;
-            loadedId = null;
-        }
-
         // 1. get the bytes into the browser (url models only; a local file is
         //    already where it needs to be)
         if (model.source === "url" && !model.complete) {
@@ -305,7 +301,26 @@ async function start({ id, file, mmproj_file, context_size, kv, mmproj_id, threa
         // 2. identify the bytes once
         if (!model.sha256) model = await hashModel(model);
 
+        if (ingest_only) {
+            busy = false;
+            post({ event: action.MODEL_UPDATED, model });
+            return;
+        }
+
         // 3. into the wasm FS, then load
+        await ensureModule();
+        // older single-thread modules predate this export; they clamp to 1 anyway
+        if (module._llmjs_set_threads) {
+            module.ccall("llmjs_set_threads", null, ["number"], [currentThreads]);
+        }
+
+        // the wasm instance can only hold one model at a time
+        if (loaded && loadedId !== id) {
+            module._llmjs_free();
+            loaded = false;
+            loadedId = null;
+        }
+
         const bytes = await loadIntoFS(model);
         if (model.received && bytes !== model.received) {
             log(`stored model size ${bytes} != expected ${model.received}`);
@@ -399,6 +414,7 @@ async function run(opts) {
         tools = "[]",
         template_kwargs = "{}",
         grammar = "",
+        json_schema = "",
         images = [],
     } = opts;
 
@@ -411,6 +427,18 @@ async function run(opts) {
         return;
     }
 
+    // structured output: only when the page chose a schema. The tool-call path
+    // sends neither, so it runs exactly as before.
+    if (!grammar && json_schema && json_schema.trim()) {
+        const asGrammar = module.ccall("llmjs_grammar_from_schema", "string",
+                                       ["string"], [json_schema]);
+        if (!asGrammar) {
+            fail(new Error(`could not use the JSON schema: ${module.UTF8ToString(module._llmjs_last_error())}`));
+            return;
+        }
+        grammar = asGrammar;
+    }
+
     if (createContext(context_size || currentNctx) < 0) {
         fail(new Error("could not create the inference context"));
         return;
@@ -450,7 +478,10 @@ async function run(opts) {
         );
     }
     if (rc < 0) {
-        fail(new Error(`could not start generation (${rc})`));
+        // the engine knows why: an image larger than the context, a marker/image
+        // mismatch, no projector … - "(-1)" alone tells the user nothing
+        const why = module.UTF8ToString(module._llmjs_last_error());
+        fail(new Error(`could not start generation (${rc})${why ? `: ${why}` : ""}`));
         return;
     }
 
@@ -508,10 +539,11 @@ self.addEventListener("message", (e) => {
         case action.ADD_URL:
             (async () => {
                 const id = await addUrlModel(msg);
-                // a projector is not a model to run: it is picked in the engine
-                // parameters and loaded next to whatever model is selected
-                if (msg.mmproj) return;
-                await start({ id, context_size: msg.context_size, kv: msg.kv, threads: msg.threads });
+                // a projector is not a model to run: download its bytes into the
+                // library, then stop - it is picked in the engine parameters and
+                // loaded next to whatever model is selected
+                await start({ id, context_size: msg.context_size, kv: msg.kv, threads: msg.threads,
+                              ingest_only: !!msg.mmproj });
             })().catch(fail);
             break;