Norbert
3366d6d9ec
Simple web UI to toggle OpenClaw agents between work mode (qwen3 on ollama) and lab mode (groq cloud fallback), giving the lab agent exclusive GPU access. Features: - One-click mode switching - Real-time agent status - Lab model selector - Direct config file patching + gateway restart
411 lines
9.9 KiB
HTML
411 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ollama GPU Switcher</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0d1117;
|
|
--surface: #161b22;
|
|
--border: #30363d;
|
|
--text: #e6edf3;
|
|
--text-dim: #8b949e;
|
|
--green: #3fb950;
|
|
--green-dim: #238636;
|
|
--orange: #d29922;
|
|
--orange-dim: #9e6a03;
|
|
--blue: #58a6ff;
|
|
--red: #f85149;
|
|
--purple: #bc8cff;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--text-dim);
|
|
font-size: 0.875rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card h2 {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-dim);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Mode indicator */
|
|
.mode-display {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.mode-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mode-dot.work { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
|
.mode-dot.lab { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
|
|
.mode-dot.mixed { background: var(--purple); box-shadow: 0 0 8px var(--purple); }
|
|
|
|
.mode-label {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Toggle switch */
|
|
.toggle-container {
|
|
display: flex;
|
|
gap: 0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.toggle-btn {
|
|
flex: 1;
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-dim);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.toggle-btn:hover { background: rgba(255,255,255,0.05); }
|
|
|
|
.toggle-btn.active-work {
|
|
background: var(--green-dim);
|
|
color: white;
|
|
}
|
|
|
|
.toggle-btn.active-lab {
|
|
background: var(--orange-dim);
|
|
color: white;
|
|
}
|
|
|
|
.toggle-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: wait;
|
|
}
|
|
|
|
/* Agent list */
|
|
.agent-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.agent-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.agent-item:last-child { border-bottom: none; }
|
|
|
|
.agent-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.agent-model {
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
|
}
|
|
|
|
.agent-model.ollama { color: var(--green); }
|
|
.agent-model.groq { color: var(--blue); }
|
|
|
|
/* Lab model selector */
|
|
.lab-model-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.lab-model-row select {
|
|
flex: 1;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 0.85rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.lab-model-row button {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.lab-model-row button:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
/* Status bar */
|
|
.status-bar {
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
margin-top: 1rem;
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
.status-bar.error { color: var(--red); }
|
|
.status-bar.success { color: var(--green); }
|
|
|
|
/* Loading */
|
|
.loading {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--blue);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-right: 0.5rem;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>🔀 Ollama GPU Switcher</h1>
|
|
<p class="subtitle">Toggle agents between work mode and lab experiments</p>
|
|
|
|
<div class="card">
|
|
<h2>Current Mode</h2>
|
|
<div class="mode-display">
|
|
<div id="mode-dot" class="mode-dot"></div>
|
|
<span id="mode-label" class="mode-label">Loading...</span>
|
|
</div>
|
|
<div class="toggle-container">
|
|
<button id="btn-work" class="toggle-btn" onclick="switchMode('work')">
|
|
🛠️ Work Mode
|
|
</button>
|
|
<button id="btn-lab" class="toggle-btn" onclick="switchMode('lab')">
|
|
🧪 Lab Mode
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>GPU Agents</h2>
|
|
<ul id="agent-list" class="agent-list">
|
|
<li class="loading"><span class="spinner"></span> Loading...</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Lab Agent (Eric)</h2>
|
|
<div id="lab-info" style="margin-bottom: 0.5rem;">
|
|
<span class="agent-model">loading...</span>
|
|
</div>
|
|
<div class="lab-model-row">
|
|
<select id="lab-model-select">
|
|
<option value="ollama/granite4:32b-a9b-h">granite4:32b-a9b-h</option>
|
|
<option value="ollama/qwen3-128k:14b">qwen3-128k:14b</option>
|
|
<option value="ollama/qwen3:14b">qwen3:14b</option>
|
|
<option value="ollama/gpt-oss:20b">gpt-oss:20b</option>
|
|
<option value="ollama/gpt-oss:20b-64k">gpt-oss:20b-64k</option>
|
|
<option value="ollama/gemma3:27b">gemma3:27b</option>
|
|
<option value="ollama/gemma3:12b">gemma3:12b</option>
|
|
<option value="ollama/granite3.3:latest">granite3.3:latest</option>
|
|
<option value="groq/llama-3.3-70b-versatile">groq (cloud)</option>
|
|
</select>
|
|
<button onclick="setLabModel()">Apply</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status-bar" class="status-bar"></div>
|
|
|
|
<script>
|
|
let currentMode = 'unknown';
|
|
let switching = false;
|
|
|
|
async function fetchStatus() {
|
|
try {
|
|
const r = await fetch('/api/status');
|
|
const data = await r.json();
|
|
if (!data.ok) throw new Error(data.error);
|
|
updateUI(data);
|
|
} catch (e) {
|
|
showStatus('Failed to fetch status: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
function updateUI(data) {
|
|
currentMode = data.mode;
|
|
|
|
// Mode indicator
|
|
const dot = document.getElementById('mode-dot');
|
|
const label = document.getElementById('mode-label');
|
|
dot.className = 'mode-dot ' + data.mode;
|
|
|
|
const modeNames = {
|
|
work: '🛠️ Work Mode — Agents on qwen3',
|
|
lab: '🧪 Lab Mode — Agents on groq, GPU free',
|
|
mixed: '⚠️ Mixed — Check agent config',
|
|
};
|
|
label.textContent = modeNames[data.mode] || data.mode;
|
|
|
|
// Toggle buttons
|
|
const btnWork = document.getElementById('btn-work');
|
|
const btnLab = document.getElementById('btn-lab');
|
|
btnWork.className = 'toggle-btn' + (data.mode === 'work' ? ' active-work' : '');
|
|
btnLab.className = 'toggle-btn' + (data.mode === 'lab' ? ' active-lab' : '');
|
|
|
|
// Agent list
|
|
const list = document.getElementById('agent-list');
|
|
list.innerHTML = data.agents.map(a => {
|
|
const isOllama = a.model.includes('ollama/');
|
|
const cls = isOllama ? 'ollama' : 'groq';
|
|
const shortModel = a.model.replace('ollama/', '').replace('groq/', '');
|
|
return `<li class="agent-item">
|
|
<span class="agent-name">${a.name}</span>
|
|
<span class="agent-model ${cls}">${shortModel}</span>
|
|
</li>`;
|
|
}).join('');
|
|
|
|
// Lab info
|
|
const labInfo = document.getElementById('lab-info');
|
|
const shortLab = data.lab.model.replace('ollama/', '').replace('groq/', '');
|
|
const labCls = data.lab.model.includes('ollama/') ? 'ollama' : 'groq';
|
|
labInfo.innerHTML = `Current: <span class="agent-model ${labCls}">${shortLab}</span>`;
|
|
|
|
// Set select to current value
|
|
const select = document.getElementById('lab-model-select');
|
|
for (let opt of select.options) {
|
|
if (opt.value === data.lab.model) {
|
|
opt.selected = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function switchMode(mode) {
|
|
if (switching) return;
|
|
if (mode === currentMode) return;
|
|
|
|
switching = true;
|
|
const btns = document.querySelectorAll('.toggle-btn');
|
|
btns.forEach(b => b.disabled = true);
|
|
|
|
showStatus('Switching to ' + mode + ' mode...', '');
|
|
|
|
try {
|
|
const r = await fetch('/api/switch', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({mode}),
|
|
});
|
|
const data = await r.json();
|
|
if (!data.ok) throw new Error(data.error);
|
|
|
|
showStatus('Switched to ' + mode + ' mode. Gateway restarting...', 'success');
|
|
|
|
// Wait for gateway to restart, then refresh
|
|
setTimeout(async () => {
|
|
await fetchStatus();
|
|
switching = false;
|
|
btns.forEach(b => b.disabled = false);
|
|
}, 3000);
|
|
} catch (e) {
|
|
showStatus('Switch failed: ' + e.message, 'error');
|
|
switching = false;
|
|
btns.forEach(b => b.disabled = false);
|
|
}
|
|
}
|
|
|
|
async function setLabModel() {
|
|
const select = document.getElementById('lab-model-select');
|
|
const model = select.value;
|
|
|
|
showStatus('Setting lab model to ' + model + '...', '');
|
|
|
|
try {
|
|
const r = await fetch('/api/lab-model', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({model}),
|
|
});
|
|
const data = await r.json();
|
|
if (!data.ok) throw new Error(data.error);
|
|
|
|
showStatus('Lab model updated. Gateway restarting...', 'success');
|
|
setTimeout(fetchStatus, 3000);
|
|
} catch (e) {
|
|
showStatus('Failed: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
function showStatus(msg, type) {
|
|
const bar = document.getElementById('status-bar');
|
|
bar.textContent = msg;
|
|
bar.className = 'status-bar' + (type ? ' ' + type : '');
|
|
}
|
|
|
|
// Init
|
|
fetchStatus();
|
|
// Auto-refresh every 30s
|
|
setInterval(fetchStatus, 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|