152 lines
5.5 KiB
HTML
152 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>llama.cpp Model Manager</title>
|
|
<link rel="stylesheet" href="/ui/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<p class="eyebrow">llama.cpp wrapper</p>
|
|
<h1>Model Manager</h1>
|
|
<p class="lede">Curate models, tune runtime parameters, and keep llama.cpp responsive.</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="theme-toggle" class="ghost" type="button" aria-pressed="false">Dark</button>
|
|
<div class="quick-actions card">
|
|
<h2>Quick Add</h2>
|
|
<form id="download-form">
|
|
<label>
|
|
Model URL
|
|
<input type="url" id="model-url" placeholder="https://.../model.gguf" required />
|
|
</label>
|
|
<label>
|
|
Optional filename
|
|
<input type="text" id="model-filename" placeholder="custom-name.gguf" />
|
|
</label>
|
|
<button type="submit">Start Download</button>
|
|
<p id="download-error" class="error"></p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<section class="column">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Models</h3>
|
|
<button id="refresh-models" class="ghost">Refresh</button>
|
|
</div>
|
|
<div id="switch-status" class="status"></div>
|
|
<label class="config-wide">
|
|
Warmup prompt (one-time)
|
|
<textarea id="warmup-prompt" rows="3" placeholder="Optional warmup prompt for the next restart only"></textarea>
|
|
</label>
|
|
<ul id="models-list" class="list"></ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Downloads</h3>
|
|
<button id="refresh-downloads" class="ghost">Refresh</button>
|
|
</div>
|
|
<div id="downloads-list" class="downloads"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="column">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Runtime Parameters</h3>
|
|
<button id="refresh-config" class="ghost">Refresh</button>
|
|
</div>
|
|
<div id="config-status" class="status"></div>
|
|
<form id="config-form" class="config-grid">
|
|
<label>
|
|
ctx-size
|
|
<input type="text" id="cfg-ctx-size" placeholder="e.g. 8192" />
|
|
</label>
|
|
<label>
|
|
n-gpu-layers
|
|
<input type="text" id="cfg-n-gpu-layers" placeholder="e.g. 999" />
|
|
</label>
|
|
<label>
|
|
tensor-split
|
|
<input type="text" id="cfg-tensor-split" placeholder="e.g. 0.5,0.5" />
|
|
</label>
|
|
<label>
|
|
split-mode
|
|
<input type="text" id="cfg-split-mode" placeholder="e.g. layer" />
|
|
</label>
|
|
<label>
|
|
cache-type-k
|
|
<input type="text" id="cfg-cache-type-k" placeholder="e.g. q8_0" />
|
|
</label>
|
|
<label>
|
|
cache-type-v
|
|
<input type="text" id="cfg-cache-type-v" placeholder="e.g. q8_0" />
|
|
</label>
|
|
<label>
|
|
flash-attn
|
|
<input type="text" id="cfg-flash-attn" placeholder="on/off" />
|
|
</label>
|
|
<label>
|
|
temp
|
|
<input type="text" id="cfg-temp" placeholder="e.g. 0.7" />
|
|
</label>
|
|
<label>
|
|
top-k
|
|
<input type="text" id="cfg-top-k" placeholder="e.g. 40" />
|
|
</label>
|
|
<label>
|
|
top-p
|
|
<input type="text" id="cfg-top-p" placeholder="e.g. 0.9" />
|
|
</label>
|
|
<label>
|
|
repeat-penalty
|
|
<input type="text" id="cfg-repeat-penalty" placeholder="e.g. 1.1" />
|
|
</label>
|
|
<label>
|
|
repeat-last-n
|
|
<input type="text" id="cfg-repeat-last-n" placeholder="e.g. 256" />
|
|
</label>
|
|
<label>
|
|
frequency-penalty
|
|
<input type="text" id="cfg-frequency-penalty" placeholder="e.g. 0.1" />
|
|
</label>
|
|
<label>
|
|
presence-penalty
|
|
<input type="text" id="cfg-presence-penalty" placeholder="e.g. 0.0" />
|
|
</label>
|
|
<label class="config-wide">
|
|
extra args
|
|
<textarea id="cfg-extra-args" rows="3" placeholder="--mlock --no-mmap"></textarea>
|
|
</label>
|
|
<button type="submit" class="config-wide">Apply Parameters</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<section class="card logs-panel">
|
|
<div class="card-header">
|
|
<div>
|
|
<h3>llama.cpp Logs</h3>
|
|
<p class="lede small">Live tail from the llama.cpp container.</p>
|
|
</div>
|
|
<div class="log-actions">
|
|
<span id="logs-status" class="badge muted">Idle</span>
|
|
<button id="refresh-logs" class="ghost">Refresh</button>
|
|
</div>
|
|
</div>
|
|
<pre id="logs-output" class="log-output"></pre>
|
|
</section>
|
|
</div>
|
|
<script src="/ui/app.js"></script>
|
|
</body>
|
|
</html>
|