godmod3-api

Sleeping

File size: 14,410 Bytes

<!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>