Hugging Face's logo

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

App Files Community
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>