v0.2.3 - Per-model Advanced settings + catalog-add for downloaded models

Backend:
- overrides.py: read/write /data/models-overrides.yaml (knobs + custom entries)
- apply_knobs_to_args(): strip matching flags from bundled vllm_args and append knob values, so knob changes properly override bundled defaults
- extract_knobs_from_args(): seed UI knob values from bundled args so the Advanced dialog has correct starting state
- models.py: load_catalog merges overrides on top of bundled yaml
- GET /api/models returns effective_knobs per model
- PUT /api/models/{key}/knobs persists knob changes
- POST /api/models adds a custom catalog entry
- DELETE /api/models/{key} removes a custom entry (bundled models cannot be deleted)
- swap_manager.reload_catalog() called after each mutation so swaps see latest

Frontend:
- New 'Advanced' button on every card opens a modal dialog: max-model-len input, gpu-memory-utilization slider, three optimization checkboxes (fastsafetensors, prefix caching, FP8 KV cache). Save persists; Cancel discards. Custom models also have a Delete button.
- After a successful download, automatically open the 'Add to catalog' dialog pre-filled with the repo, with the same knob defaults — user just enters key, display name, and clicks Save.
- Custom catalog entries are tagged with a blue 'custom' pill on the card.

Package: bump 0.2.3:0; main.ts sets MODELS_OVERRIDES=/data/models-overrides.yaml so overrides persist on the StartOS volume.
This commit is contained in:
Grant
2026-05-12 11:30:47 -05:00
parent 474417b458
commit 75fd0846b4
8 changed files with 490 additions and 12 deletions
+57
View File
@@ -217,6 +217,57 @@ main {
word-break: break-word;
}
/* ===== Modal dialogs (Advanced / Add to catalog) ===== */
.modal {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0;
max-width: 520px;
width: 92vw;
}
.modal::backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
}
.modal-form { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.modal-form h3 { margin: 0; font-size: 17px; }
.modal-row {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--muted);
}
.modal-row.inline { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
.modal-row > span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.modal-row input[type='text'],
.modal-row input[type='number'],
.modal-row textarea,
.modal-row select {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
padding: 7px 10px;
border-radius: 6px;
font: 13px ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.modal-row textarea { font-family: inherit; resize: vertical; }
.modal-row input:focus, .modal-row textarea:focus, .modal-row select:focus { outline: 1px solid var(--info); border-color: var(--info); }
.modal-row input[type='range'] { padding: 0; flex: 1; }
.modal-fieldset {
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px 14px 4px;
display: flex;
flex-direction: column;
gap: 10px;
}
.modal-fieldset legend { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 6px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; align-items: center; }
/* ===== Update banner ===== */
.update-banner {
@@ -436,7 +487,13 @@ main {
.btn.primary { background: var(--accent); color: #052e16; border-color: var(--accent); }
.btn.primary:hover:not(:disabled) { background: #6ee19a; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.danger { color: var(--error); border-color: rgba(239, 68, 68, 0.3); }
.btn.danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.08); border-color: var(--error); }
.card.active .btn { background: rgba(74, 222, 128, 0.12); color: var(--accent); border-color: rgba(74, 222, 128, 0.4); }
.card-actions { display: flex; gap: 6px; }
.card-actions .btn.primary { flex: 1; }
.card .adv-btn { padding: 8px 12px; font-size: 12px; }
.card .custom-pill { color: var(--info); border-color: rgba(96, 165, 250, 0.4); }
.footer {
margin-top: 28px;