Hugging Face's logo

Spaces:
pliny-the-prompter
/
godmod3-api
Running

App Files Community
1
godmod3-api / api /public /index.html
pliny-the-prompter's picture
pliny-the-prompter
Upload 22 files
6a96e0a verified
Raw
History Blame Contribute Delete
14.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>G0DM0D3 — ULTRAPLINIAN</title>
<style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body {
 font-family: 'Courier New', monospace;
 background: #0a0a0a;
 color: #e0e0e0;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 2rem 1rem;
 }
 h1 {
 font-size: 2.2rem;
 color: #00ff88;
 text-shadow: 0 0 20px rgba(0,255,136,0.3);
 margin-bottom: 0.15rem;
 }
 .subtitle { color: #555; font-size: 0.8rem; margin-bottom: 1.5rem; }
 .container { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 1rem; }
 .field { display: flex; flex-direction: column; gap: 0.3rem; }
 label { color: #666; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
 input, textarea {
 background: #111;
 border: 1px solid #222;
 color: #e0e0e0;
 padding: 0.6rem 0.8rem;
 border-radius: 6px;
 font-family: inherit;
 font-size: 0.9rem;
 outline: none;
 transition: border-color 0.2s;
 }
 input:focus, textarea:focus { border-color: #00ff88; }
 textarea { resize: vertical; min-height: 80px; }
 /* ── Tier selector ── */
 .tiers { display: flex; gap: 0.5rem; }
 .tier-btn {
 flex: 1;
 background: #111;
 border: 1px solid #222;
 color: #666;
 padding: 0.6rem 0.5rem;
 border-radius: 6px;
 font-family: inherit;
 font-size: 0.8rem;
 cursor: pointer;
 text-align: center;
 transition: all 0.2s;
 }
 .tier-btn:hover { border-color: #444; color: #aaa; }
 .tier-btn.active { border-color: #00ff88; color: #00ff88; background: rgba(0,255,136,0.05); }
 .tier-btn .tier-name { font-weight: bold; font-size: 0.9rem; display: block; margin-bottom: 0.15rem; }
 .tier-btn .tier-meta { font-size: 0.7rem; color: #555; }
 .tier-btn.active .tier-meta { color: #00aa66; }
 /* ── Send button ── */
 .send-btn {
 background: #00ff88;
 color: #0a0a0a;
 border: none;
 padding: 0.75rem 1.5rem;
 border-radius: 6px;
 font-family: inherit;
 font-size: 1rem;
 font-weight: bold;
 cursor: pointer;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 transition: opacity 0.2s;
 }
 .send-btn:hover { opacity: 0.85; }
 .send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
 /* ── Race status bar ── */
 .race-bar {
 display: none;
 background: #0f0f0f;
 border: 1px solid #1a1a1a;
 border-radius: 6px;
 padding: 0.6rem 0.8rem;
 font-size: 0.8rem;
 gap: 0.5rem;
 flex-direction: column;
 }
 .race-bar.visible { display: flex; }
 .race-bar .race-header { display: flex; justify-content: space-between; align-items: center; }
 .race-bar .race-label { color: #ff8800; }
 .race-bar .race-progress { color: #888; }
 .race-bar .race-leader { color: #00ff88; font-size: 0.75rem; }
 .race-bar .race-leader span { color: #ffaa00; }
 /* ── Progress bar ── */
 .progress-track {
 height: 3px;
 background: #1a1a1a;
 border-radius: 2px;
 overflow: hidden;
 }
 .progress-fill {
 height: 100%;
 background: linear-gradient(90deg, #00ff88, #ffaa00);
 width: 0%;
 transition: width 0.3s ease;
 }
 /* ── Output area ── */
 .output {
 background: #0f0f0f;
 border: 1px solid #1a1a1a;
 border-radius: 6px;
 padding: 1rem;
 min-height: 180px;
 max-height: 600px;
 overflow-y: auto;
 white-space: pre-wrap;
 word-break: break-word;
 font-size: 0.85rem;
 line-height: 1.6;
 color: #ccc;
 }
 .output.empty { color: #333; font-style: italic; }
 /* ── Upgrade flash ── */
 .upgrade-flash {
 display: inline-block;
 color: #ffaa00;
 font-weight: bold;
 font-size: 0.8rem;
 margin-bottom: 0.5rem;
 animation: flash 0.4s ease;
 }
 @keyframes flash {
 0% { opacity: 0; transform: translateY(-4px); }
 100% { opacity: 1; transform: translateY(0); }
 }
 /* ── Race summary ── */
 .race-summary {
 background: #0d0d0d;
 border: 1px solid #1a1a1a;
 border-radius: 6px;
 padding: 0.75rem;
 font-size: 0.75rem;
 color: #555;
 display: none;
 }
 .race-summary.visible { display: block; }
 .race-summary .winner-line { color: #00ff88; font-weight: bold; margin-bottom: 0.3rem; }
 .race-summary .ranking { color: #444; }
 .race-summary .ranking .model-name { color: #666; }
 .race-summary .ranking .score { color: #888; }
 .footer { text-align: center; margin-top: 1rem; font-size: 0.75rem; }
 .footer a { color: #333; text-decoration: none; }
 .footer a:hover { color: #00ff88; }
 /* ── Spinner ── */
 @keyframes spin { to { transform: rotate(360deg); } }
 .spinner {
 display: inline-block;
 width: 12px; height: 12px;
 border: 2px solid #333;
 border-top-color: #ff8800;
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
 vertical-align: middle;
 margin-right: 6px;
 }
</style>
</head>
<body>
<h1>G0DM0D3</h1>
<p class="subtitle">ULTRAPLINIAN Multi-Model Racing &mdash; Liquid Response</p>
<div class="container">
<div class="field">
 <label>API Key</label>
 <input type="password" id="apiKey" placeholder="Bearer token (leave blank if server has no GODMODE_API_KEY)" />
 </div>
<div class="field">
 <label>Prompt</label>
 <textarea id="prompt" rows="3" placeholder="Ask anything...">Explain quantum entanglement in simple terms.</textarea>
 </div>
<div class="field">
 <label>Speed Tier</label>
 <div class="tiers">
 <button class="tier-btn active" data-tier="fast" onclick="selectTier(this)">
 <span class="tier-name">FAST</span>
 <span class="tier-meta">11 models &middot; ~10-15s</span>
 </button>
 <button class="tier-btn" data-tier="standard" onclick="selectTier(this)">
 <span class="tier-name">BALANCED</span>
 <span class="tier-meta">20 models &middot; ~15-25s</span>
 </button>
 <button class="tier-btn" data-tier="full" onclick="selectTier(this)">
 <span class="tier-name">SMART</span>
 <span class="tier-meta">27 models &middot; ~25-40s</span>
 </button>
 </div>
 </div>
<button class="send-btn" id="sendBtn" onclick="send()">ULTRAPLINIAN</button>
<!-- Race progress bar -->
 <div class="race-bar" id="raceBar">
 <div class="race-header">
 <span class="race-label"><span class="spinner"></span>RACING</span>
 <span class="race-progress" id="raceProgress">0 / 0 models</span>
 </div>
 <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
 <div class="race-leader" id="raceLeader"></div>
 </div>
<!-- Live response output -->
 <div class="output empty" id="output">Response appears here — Liquid Response will upgrade it live as better models finish.</div>
<!-- Post-race summary -->
 <div class="race-summary" id="raceSummary"></div>
<div class="footer">
 <a href="/v1/info" target="_blank">API Info</a>
 &nbsp;&middot;&nbsp;
 <a href="https://github.com/LYS10S/G0DM0D3" target="_blank">GitHub</a>
 </div>
</div>
<script>
const $ = id => document.getElementById(id);
let selectedTier = 'fast';
let racing = false;
let abortController = null;
function selectTier(el) {
 document.querySelectorAll('.tier-btn').forEach(b => b.classList.remove('active'));
 el.classList.add('active');
 selectedTier = el.dataset.tier;
}
function headers() {
 const h = { 'Content-Type': 'application/json' };
 const key = $('apiKey').value.trim();
 if (key) h['Authorization'] = 'Bearer ' + key;
 return h;
}
async function send() {
 if (racing) {
 // Abort current race
 if (abortController) abortController.abort();
 resetUI();
 return;
 }
 const prompt = $('prompt').value.trim();
 if (!prompt) return;
 const body = {
 messages: [{ role: 'user', content: prompt }],
 tier: selectedTier,
 stream: true,
 liquid_min_delta: 8,
 godmode: true,
 autotune: true,
 parseltongue: true,
 };
 // UI → racing state
 racing = true;
 $('sendBtn').textContent = 'ABORT';
 $('sendBtn').style.background = '#ff4444';
 $('output').textContent = '';
 $('output').classList.remove('empty');
 $('raceBar').classList.add('visible');
 $('raceSummary').classList.remove('visible');
 $('raceSummary').innerHTML = '';
 $('raceProgress').textContent = '0 / ? models';
 $('progressFill').style.width = '0%';
 $('raceLeader').textContent = '';
 abortController = new AbortController();
 let modelsTotal = 0;
 let modelsResponded = 0;
 let currentLeader = null;
 let upgradeCount = 0;
 try {
 const res = await fetch('/v1/ultraplinian/completions', {
 method: 'POST',
 headers: headers(),
 body: JSON.stringify(body),
 signal: abortController.signal,
 });
 if (!res.ok) {
 const errText = await res.text();
 $('output').textContent = 'Error ' + res.status + ': ' + errText;
 resetUI();
 return;
 }
 const reader = res.body.getReader();
 const decoder = new TextDecoder();
 let buf = '';
 let currentEvent = ''; // track the "event:" field for named SSE events
 while (true) {
 const { done, value } = await reader.read();
 if (done) break;
 buf += decoder.decode(value, { stream: true });
 const lines = buf.split('\n');
 buf = lines.pop();
 for (const line of lines) {
 // SSE "event:" line — remember it for the next "data:" line
 if (line.startsWith('event: ')) {
 currentEvent = line.slice(7).trim();
 continue;
 }
 if (!line.startsWith('data: ')) continue;
 const raw = line.slice(6).trim();
 if (raw === '[DONE]') continue;
 let evt;
 try { evt = JSON.parse(raw); } catch { continue; }
 // Use the SSE event name (from "event:" line), fall back to evt.type
 const eventType = currentEvent || evt.type || '';
 currentEvent = ''; // reset for next event
 // ── race:start ──
 if (eventType === 'race:start') {
 modelsTotal = evt.models_queried || 0;
 $('raceProgress').textContent = '0 / ' + modelsTotal + ' models';
 $('output').textContent = 'Racing ' + modelsTotal + ' models (' + (evt.tier || selectedTier).toUpperCase() + ')...';
 }
 // ── race:model ── (progress tick)
 else if (eventType === 'race:model') {
 modelsResponded = evt.models_responded || (modelsResponded + 1);
 modelsTotal = evt.models_total || modelsTotal;
 const pct = modelsTotal > 0 ? Math.round((modelsResponded / modelsTotal) * 100) : 0;
 $('raceProgress').textContent = modelsResponded + ' / ' + modelsTotal + ' models';
 $('progressFill').style.width = pct + '%';
 // Show model result in leader bar
 const name = (evt.model || '').split('/').pop();
 const ok = evt.success !== false;
 if (name) {
 const icon = ok ? '✓' : '✗';
 $('raceLeader').innerHTML = (currentLeader
 ? 'Leader: <span>' + currentLeader.name + '</span> (score ' + currentLeader.score + ') &mdash; '
 : '') + icon + ' ' + name + (ok && evt.score != null ? ' (' + evt.score + ')' : '');
 }
 }
 // ── race:leader ── (liquid upgrade!)
 else if (eventType === 'race:leader') {
 upgradeCount++;
 const name = (evt.model || '').split('/').pop();
 currentLeader = { name, score: evt.score, model: evt.model };
 // Replace output content with new leader
 const upgradeTag = upgradeCount > 1
 ? '<div class="upgrade-flash">⚡ LIQUID UPGRADE #' + (upgradeCount - 1) + ' → ' + name + ' (score ' + evt.score + ')</div>'
 : '';
 $('output').innerHTML = upgradeTag + escapeHtml(evt.content || '');
 $('raceLeader').innerHTML = 'Leader: <span>' + name + '</span> (score ' + evt.score + ')';
 }
 // ── race:complete ──
 else if (eventType === 'race:complete') {
 // Final response
 if (evt.response) {
 $('output').innerHTML = escapeHtml(evt.response);
 }
 // Build summary
 let html = '';
 if (evt.winner) {
 const wName = (evt.winner.model || '').split('/').pop();
 html += '<div class="winner-line">Winner: ' + wName + ' — score ' + evt.winner.score + ' in ' + (evt.winner.duration_ms / 1000).toFixed(1) + 's</div>';
 }
 if (evt.race?.rankings) {
 html += '<div class="ranking">';
 evt.race.rankings.slice(0, 10).forEach((r, i) => {
 const mName = (r.model || '').split('/').pop();
 const s = r.success !== false
 ? '<span class="score">' + r.score + '</span>'
 : '<span style="color:#ff4444">failed</span>';
 html += (i + 1) + '. <span class="model-name">' + mName + '</span> — ' + s + '<br/>';
 });
 if (evt.race.rankings.length > 10) html += '... and ' + (evt.race.rankings.length - 10) + ' more';
 html += '</div>';
 }
 $('raceSummary').innerHTML = html;
 $('raceSummary').classList.add('visible');
 // Fill progress to 100%
 $('progressFill').style.width = '100%';
 $('raceProgress').textContent = 'Complete';
 $('raceLeader').innerHTML = currentLeader
 ? 'Winner: <span>' + currentLeader.name + '</span> (score ' + currentLeader.score + ')'
 : 'Complete';
 resetUI();
 }
 // ── race:error ──
 else if (eventType === 'race:error') {
 $('output').textContent = 'Race error: ' + (evt.error || 'Unknown error');
 resetUI();
 }
 }
 }
 } catch (e) {
 if (e.name !== 'AbortError') {
 $('output').textContent = 'Connection error: ' + e.message;
 }
 resetUI();
 }
}
function resetUI() {
 racing = false;
 abortController = null;
 $('sendBtn').textContent = 'ULTRAPLINIAN';
 $('sendBtn').style.background = '#00ff88';
}
function escapeHtml(text) {
 const div = document.createElement('div');
 div.textContent = text;
 return div.innerHTML;
}
</script>
</body>
</html>