llm-tuner 0.1.0 → 0.2.0

package/src/web/public/app.js

@@ -202,6 +202,7 @@ async function chooseEngine(e) {
   step('model');
   $('#model').innerHTML = `<option>${esc(t('web.readingModels'))}</option>`;
   const { models } = await api(`/api/models?engine=${e.id}`);
+  models.sort((a, b) => (a.sizeBytes ?? 0) - (b.sizeBytes ?? 0) || (a.name || '').localeCompare(b.name || ''));
   $('#model').innerHTML = models.length
     ? models.map((m) => `<option value="${esc(m.key)}">${esc(m.name)} · ${gb(m.sizeBytes)}${m.quant ? ' · ' + esc(m.quant) : ''}</option>`).join('')
     : `<option value="">${esc(t('web.noModels'))}</option>`;
@@ -386,6 +387,59 @@ function onCtxChange() {
 }
 $('#ctx').oninput = onCtxChange;
 
+function updateTelemetry(e) {
+  const panel = $('#telemetry-panel');
+  if (!panel || !e) return;
+  panel.hidden = false;
+
+  if (e.cpu) {
+    const cpuVal = $('#telemetry-cpu-val');
+    const cpuFill = $('#telemetry-cpu-fill');
+    if (cpuVal) cpuVal.textContent = `${e.cpu.percent}%`;
+    if (cpuFill) cpuFill.style.width = `${Math.min(100, Math.max(0, e.cpu.percent))}%`;
+  }
+
+  if (e.ram) {
+    const ramVal = $('#telemetry-ram-val');
+    const ramFill = $('#telemetry-ram-fill');
+    if (ramVal) ramVal.textContent = `${gb(e.ram.usedBytes)} / ${gb(e.ram.totalBytes)} (${e.ram.percent}%)`;
+    if (ramFill) ramFill.style.width = `${Math.min(100, Math.max(0, e.ram.percent))}%`;
+  }
+
+  if (e.gpus) {
+    const box = $('#telemetry-gpus');
+    if (box) {
+      box.innerHTML = e.gpus.map((g) => {
+        const name = g.name.replace(/^NVIDIA GeForce /, '');
+        return `<div class="telemetry-card">
+          <div class="telemetry-header"><span>GPU ${g.index} (${esc(name)})</span> <strong>${gb(g.usedBytes)} / ${gb(g.totalBytes)} (${g.percent}%)</strong></div>
+          <div class="meter-bar"><div class="meter-fill" style="width: ${Math.min(100, Math.max(0, g.percent))}%"></div></div>
+        </div>`;
+      }).join('');
+    }
+  }
+}
+
+function updateProgress(p, label) {
+  const wrap = $('#load-progress-wrap');
+  if (!wrap || !p) return;
+  wrap.hidden = false;
+
+  const bar = $('#load-progress-bar');
+  const pct = $('#load-progress-pct');
+  const lbl = $('#load-progress-label');
+
+  if (pct) pct.textContent = `${p.pct}%`;
+  if (bar) bar.style.width = `${p.pct}%`;
+  if (lbl && label !== undefined) {
+    let text = label || '';
+    if (p.phase === 'bench' && p.current && p.total) {
+      text = `[${p.current}/${p.total}] ${text}`.trim();
+    }
+    lbl.textContent = text;
+  }
+}
+
 // ---------- Load ----------
 $('#load-btn').onclick = async () => {
   const model = $('#model').value;
@@ -407,6 +461,17 @@ $('#load-btn').onclick = async () => {
   $('#load-result').innerHTML = '';
   const log = $('#load-log');
   log.textContent = '';
+  // Reset progress and telemetry
+  $('#load-progress-wrap').hidden = false;
+  $('#load-progress-bar').style.width = '0%';
+  $('#load-progress-pct').textContent = '0%';
+  $('#load-progress-label').textContent = '';
+  $('#telemetry-panel').hidden = false;
+  $('#telemetry-cpu-val').textContent = '0%';
+  $('#telemetry-cpu-fill').style.width = '0%';
+  $('#telemetry-ram-val').textContent = '0 / 0 GB (0%)';
+  $('#telemetry-ram-fill').style.width = '0%';
+  $('#telemetry-gpus').innerHTML = '';
   // One element per line, so a warning can be styled on its own.
   const addLog = (s, level = 'note') => {
     const line = document.createElement('span');
@@ -424,6 +489,17 @@ $('#load-btn').onclick = async () => {
     // Progress event before the current one: a fallback that repeats its reason is not logged twice.
     let previous = null;
     const done = await follow(jobId, (e) => {
+      if (e.type === 'telemetry') {
+        updateTelemetry(e);
+        return;
+      }
+      if (e.progress) {
+        let label = '';
+        if (e.type === 'status' && e.code) label = t(e.code, e.params);
+        else if (e.type === 'candidate-start') label = describe(e.candidate);
+        else if (e.type === 'bench-progress' && e.phase) label = e.phase === 'deep' ? t('common.longPrompt', { tokens: e.promptTokens }) : '';
+        updateProgress(e.progress, label);
+      }
       if (e.type === 'variant-picked' || e.type === 'profile-fallback') {
         for (const line of profileEventLines(e, t, { engineName: state.engine.name, previous })) addLog(line.text, line.level);
       }
@@ -456,6 +532,8 @@ $('#load-btn').onclick = async () => {
       const loaded = done.result?.loaded;
       throw new Error(done.code || done.error ? errText(done) : loaded && !loaded.ok ? benchErr(loaded) : t('bench.loadFailed'));
     }
+    updateProgress({ pct: 100, phase: 'done' });
+
     const r = done.result;
     if (r.report?.best) {
       const idx = r.report.results.findIndex((x) => x.candidate.id === r.report.best.candidate.id);

package/src/web/public/index.html

@@ -75,6 +75,26 @@
 
     <section id="sec-load" class="panel" hidden>
       <header><h2 id="load-title" data-i18n="web.loading">Loading</h2><span class="pill" id="load-status" data-i18n="web.inProgress">in progress</span></header>
+      <div id="load-progress-wrap" class="progress-wrap" hidden>
+        <div class="progress-bar-track">
+          <div id="load-progress-bar" class="progress-bar-fill" style="width: 0%"></div>
+        </div>
+        <div class="progress-meta">
+          <span id="load-progress-label"></span>
+          <span id="load-progress-pct">0%</span>
+        </div>
+      </div>
+      <div id="telemetry-panel" class="telemetry-panel" hidden>
+        <div class="telemetry-card">
+          <div class="telemetry-header"><span data-i18n="web.telemetryCpu">CPU</span> <strong id="telemetry-cpu-val">0%</strong></div>
+          <div class="meter-bar"><div id="telemetry-cpu-fill" class="meter-fill" style="width: 0%"></div></div>
+        </div>
+        <div class="telemetry-card">
+          <div class="telemetry-header"><span data-i18n="web.telemetryRam">RAM</span> <strong id="telemetry-ram-val">0 / 0 GB (0%)</strong></div>
+          <div class="meter-bar"><div id="telemetry-ram-fill" class="meter-fill" style="width: 0%"></div></div>
+        </div>
+        <div id="telemetry-gpus" class="telemetry-gpus"></div>
+      </div>
       <div id="bench" hidden>
         <p class="muted small" data-i18n="web.benchIntro">There is no preset for this context and profile: several configurations are tested on your hardware. It takes a few minutes and only happens once.</p>
         <div class="table-wrap">

package/src/web/public/style.css

@@ -328,3 +328,19 @@ td .err { color: var(--bad); white-space: normal; }
 .chat-form input { flex: 1; min-width: 0; }
 .chat-form button { flex-shrink: 0; }
 
+/* Progress bar and real-time telemetry */
+.progress-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+.progress-bar-track { width: 100%; height: 8px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
+.progress-bar-fill { height: 100%; background: var(--accent); transition: width .2s ease; }
+.progress-meta { display: flex; justify-content: space-between; align-items: center; font: 500 .8rem var(--mono); color: var(--muted); }
+.progress-meta strong { color: var(--ink); }
+
+.telemetry-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
+.telemetry-card { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
+.telemetry-header { display: flex; justify-content: space-between; align-items: center; font: 500 .8rem var(--mono); color: var(--muted); }
+.telemetry-header strong { color: var(--ink); }
+.telemetry-gpus { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
+.meter-bar { width: 100%; height: 8px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
+.meter-fill { height: 100%; background: var(--gpu); transition: width .2s ease; }
+#telemetry-cpu-fill { background: var(--accent); }
+