Spaces:
Sleeping
Sleeping
| <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 — 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 · ~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 · ~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 · ~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> | |
| · | |
| <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 + ') — ' | |
| : '') + 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> | |