Hitonabi/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: massive UX and beginner refactoring (Cookbook, Dashboard, Layout, Wording)

Browse Source
This commit is contained in:
Hitonabi
2026-06-20 22:06:04 +02:00
parent 9d05b2d011
commit e3be7fbfb5
11 changed files with 359 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/panels/models.js
+11 -6
View File
@@ -1,7 +1,7 @@
// models.js — "Modelle"-Ansicht: Download + Einpflegen, Schnelltest-Chat, Modell-Tabelle.
import { api } from "../core/api.js";
import { $, badge, esc, toast } from "../core/ui.js";
import { $, badge, esc, toast, icon } from "../core/ui.js";
function refreshSoon() { document.dispatchEvent(new Event("mc:refresh")); }
@@ -18,6 +18,9 @@ function mount() {
$("#m-table").innerHTML = `
<div class="card-h"><h3>Modelle &amp; Ports</h3><span class="meta" id="m-count"></span></div>
<div class="hint" style="margin-bottom: 16px;">
💡 <b>Modelle werden automatisch geladen</b>, sobald eine Chat-Anfrage (z.B. über OpenWebUI oder Cursor) an sie gestellt wird. Du musst sie hier nicht manuell starten.
</div>
<table>
<thead><tr><th>Modell</th><th>Fähigkeiten</th><th>Details</th><th>Status</th><th>Port</th><th style="text-align:right">Aktion</th></tr></thead>
<tbody id="models"></tbody>
@@ -44,9 +47,9 @@ function onStatus(s) {
let capsHtml = "–";
if (m.meta && m.meta.caps) {
capsHtml = m.meta.caps.map(c => {
if (c === "Text") return `<span class="meta" title="Text">T</span>`;
if (c === "Code") return `<strong style="color:var(--blue)" title="Code">{ }</strong>`;
if (c === "Bild") return `<strong style="color:var(--purple)" title="Vision">👁</strong>`;
if (c === "Text") return `<span class="meta" title="Text" style="display:inline-block;width:18px">${icon("search")}</span>`;
if (c === "Code") return `<strong style="color:var(--blue);display:inline-block;width:18px" title="Code">${icon("code")}</strong>`;
if (c === "Bild") return `<strong style="color:var(--purple);display:inline-block;width:18px" title="Vision">${icon("eye")}</strong>`;
return "";
}).join(" ");
}
@@ -61,12 +64,14 @@ function onStatus(s) {
const perfHtml = m.state === "running" ? `<br><small class="meta" style="font-size:0.75em">n/a t/s</small>` : "";
tr.innerHTML = `<td class="mid" style="font-weight:500">${esc(m.name)}</td>
const filenameHtml = m.meta?.filename ? `<br><small class="meta" style="font-size:0.8em">${esc(m.meta.filename)}</small>` : "";
tr.innerHTML = `<td class="mid" style="font-weight:500">${esc(m.name)}${filenameHtml}</td>
<td>${capsHtml}</td>
<td>${detailsHtml}</td>
<td>${badge(m.state)}${perfHtml}</td>
<td class="port">${m.port ?? "auto"}</td>
<td style="text-align:right"><button class="ghost" data-unload="${esc(m.name)}">Entladen</button></td>`;
<td style="text-align:right"><button class="ghost" data-unload="${esc(m.name)}">Aus dem VRAM entfernen</button></td>`;
tb.appendChild(tr);
sel.insertAdjacentHTML("beforeend", `<option>${esc(m.name)}</option>`);
}