<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MahiCenter API — AI Gateway Multi-Model</title>
<meta name="description" content="Gateway AI multi-model: satu endpoint OpenAI-compatible untuk belasan model. Pantau pemakaian token, katalog model, dan status kunci secara real-time.">
<link rel="icon" type="image/svg+xml" href="icon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css?v=20261025c">
</head>
<body>
<div class="bg-grid" aria-hidden="true"></div>

<!-- ================= NAVBAR ================= -->
<header class="nav">
  <div class="nav-inner">
    <a class="brand" href="/">
      <span class="brand-mark" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M12 2 21 7v10l-9 5-9-5V7l9-5z"/><path d="M12 22V12"/><path d="m3 7 9 5 9-5"/></svg>
      </span>
      <span class="brand-name">MahiCenter <b>API</b></span>
    </a>

    <div class="nav-right">
      <span class="status-pill" id="statusPill" title="Status gateway">
        <span class="dot dot-loading" id="statusDot"></span>
        <span id="statusText">Menghubungkan…</span>
      </span>
      <button class="endpoint-chip mono" onclick="copyText('https://api2.mahicenter.cloud/v1','Base URL disalin')" title="Salin base URL">
        api2.mahicenter.cloud/v1
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
      </button>
      <a class="btn btn-ghost" href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.52 2.77-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/></svg>
        Bot Telegram
      </a>
    </div>
  </div>
</header>

<!-- ================= HERO ================= -->
<section class="hero">
  <div class="hero-glow" aria-hidden="true"></div>
  <div class="container hero-inner">
    <div class="hero-grid">
      <div class="hero-left">
        <div class="hero-eyebrow mono">OPENAI-COMPATIBLE &nbsp;·&nbsp; MULTI-MODEL &nbsp;·&nbsp; FAILOVER OTOMATIS</div>
        <h1>Satu endpoint,<br>belasan model AI.</h1>
        <p class="hero-sub">Ganti model tanpa mengubah kode. MahiCenter meneruskan request OpenAI-compatible ke pool upstream dengan failover multi-key, pencatatan token per pengguna, dan metrik yang selalu real-time.</p>
        <div class="hero-actions">
          <a class="btn btn-primary btn-lg" href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener">Dapatkan Kunci API</a>
          <a class="btn btn-ghost btn-lg" href="#quickstart">Lihat Quickstart</a>
        </div>
        <div class="hero-meta mono">
          <span class="hero-meta-item"><span class="dot dot-ok"></span>latensi inferensi rata-rata <b id="heroLatency">—</b></span>
          <span class="hero-meta-sep">·</span>
          <span class="hero-meta-item"><b id="heroModels">—</b> model aktif</span>
          <span class="hero-meta-sep">·</span>
          <span class="hero-meta-item">sinkron <b id="heroUpdated">baru saja</b></span>
        </div>
      </div>
      <div class="hero-right" aria-hidden="true">
        <div class="hero-code">
          <div class="hero-code-head mono">
            <span class="hc-dot"></span><span class="hc-dot"></span><span class="hc-dot"></span>
            <span class="hc-title">chat.http</span>
          </div>
          <pre class="hero-code-body mono"><span class="c-url">POST https://api2.mahicenter.cloud/v1/chat/completions</span>
<span class="c-cmt">Authorization: Bearer mahi-rtr-…</span>

{
  <span class="c-str">"model"</span>: <span class="c-str">"mahi/qwen-3.8-27b"</span>,
  <span class="c-str">"messages"</span>: [{ <span class="c-str">"role"</span>: <span class="c-str">"user"</span>, <span class="c-str">"content"</span>: <span class="c-str">"Halo"</span> }],
  <span class="c-str">"stream"</span>: <span class="c-key">true</span>
}

<span class="c-cmt"># Respons (server-sent events)</span>
<span class="c-url">data:</span> {<span class="c-str">"choices"</span>[{<span class="c-str">"delta"</span>:{<span class="c-str">"content"</span>:<span class="c-str">"Halo! Ada yang bisa saya bantu?"</span>}}]} <span class="c-cmt">…</span></pre>
          <div class="hero-code-foot mono">
            <span class="badge-live"><span class="dot dot-ok"></span>200 OK</span>
            <span id="heroCodeStats">— tok · — req</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ================= KPI ================= -->
<section class="container kpi-grid" id="kpiGrid">
  <div class="kpi-card">
    <div class="kpi-label mono">TOKEN DIPROSES</div>
    <div class="kpi-value mono" id="kpiTokens"><span class="skel sk-lg"></span></div>
    <div class="kpi-sub">Akumulasi seluruh pengguna</div>
  </div>
  <div class="kpi-card">
    <div class="kpi-label mono">PERMINTAAN</div>
    <div class="kpi-value mono" id="kpiRequests"><span class="skel sk-md"></span></div>
    <div class="kpi-sub">Inferensi tercatat</div>
  </div>
  <div class="kpi-card">
    <div class="kpi-label mono">PENGGUNA</div>
    <div class="kpi-value mono" id="kpiUsers"><span class="skel sk-md"></span></div>
    <div class="kpi-sub" id="kpiUsersSub">—</div>
  </div>
  <div class="kpi-card">
    <div class="kpi-label mono">LATENSI RATA-RATA</div>
    <div class="kpi-value mono" id="kpiLatency"><span class="skel sk-sm"></span></div>
    <div class="kpi-sub">Seluruh request · failover multi-key</div>
  </div>
</section>

<!-- ================= MODELS ================= -->
<section class="container section" id="models">
  <div class="section-head">
    <div>
      <h2>Katalog Model</h2>
      <p class="section-desc">Langsung dari <code class="mono">GET /v1/models</code> — bukan daftar statis.</p>
    </div>
    <div class="section-tools">
      <input type="search" id="modelSearch" class="input" placeholder="Cari model…" oninput="renderModels()">
    </div>
  </div>
  <div class="chip-row" id="modelChips"></div>
  <div class="model-grid" id="modelGrid">
    <div class="model-card skeleton-card"></div>
    <div class="model-card skeleton-card"></div>
    <div class="model-card skeleton-card"></div>
    <div class="model-card skeleton-card"></div>
    <div class="model-card skeleton-card"></div>
    <div class="model-card skeleton-card"></div>
  </div>
  <div class="section-foot mono" id="modelFoot"></div>
</section>

<!-- ================= QUICKSTART ================= -->
<section class="container section" id="quickstart">
  <div class="section-head">
    <div>
      <h2>Quickstart</h2>
      <p class="section-desc">Drop-in replacement untuk OpenAI SDK. Ganti base URL, pakai kunci MahiCenter.</p>
    </div>
  </div>
  <div class="code-panel">
    <div class="code-tabs">
      <button class="code-tab active" data-snippet="curl" onclick="switchSnippet('curl')">cURL</button>
      <button class="code-tab" data-snippet="python" onclick="switchSnippet('python')">Python</button>
      <button class="code-tab" data-snippet="node" onclick="switchSnippet('node')">Node.js</button>
      <button class="code-copy" onclick="copySnippet()" title="Salin snippet">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
        Salin
      </button>
    </div>
    <pre class="code-block mono" id="codeBlock"></pre>
  </div>
</section>

<!-- ================= LEADERBOARD ================= -->
<section class="container section" id="leaderboard">
  <div class="section-head">
    <div>
      <h2>Peringkat Pemakaian Token</h2>
      <p class="section-desc">Hanya akun dengan pemakaian tercatat. Diambil dari request log riil, diperbarui otomatis.</p>
    </div>
    <div class="section-tools">
      <input type="search" id="lbSearch" class="input" placeholder="Cari pengguna…" oninput="renderLeaderboardRows()">
      <button class="btn btn-ghost" onclick="loadLeaderboard(true)" title="Muat ulang">Muat Ulang</button>
    </div>
  </div>

  <div class="podium-grid" id="podiumGrid"></div>

  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th class="col-rank">RANK</th><th>PENGGUNA</th><th>TELEGRAM</th>
          <th class="num">TOTAL TOKEN</th><th class="num">REQUEST</th><th>STATUS</th>
        </tr>
      </thead>
      <tbody id="lbTbody">
        <tr><td colspan="6" class="cell-center"><span class="skel skel-row"></span></td></tr>
        <tr><td colspan="6" class="cell-center"><span class="skel skel-row"></span></td></tr>
      </tbody>
    </table>
  </div>
</section>

<!-- ================= KEY CHECK ================= -->
<section class="container section" id="check">
  <div class="section-head">
    <div>
      <h2>Cek Kunci API</h2>
      <p class="section-desc">Verifikasi status kunci, posisi peringkat, dan statistik pemakaian Anda.</p>
    </div>
  </div>
  <div class="check-panel">
    <div class="check-input-row">
      <input type="password" id="keyInput" class="input input-mono" placeholder="mahi-rtr-…" autocomplete="off" spellcheck="false" onkeydown="if(event.key==='Enter')checkKey()">
      <button class="btn btn-primary" id="keyBtn" onclick="checkKey()">Verifikasi</button>
    </div>
    <p class="check-hint">Kunci hanya dikirim ke gateway ini untuk verifikasi — tidak disimpan server web. Masa aktif & detail tampil setelah kunci valid.</p>
    <div id="keyResult" class="key-result" style="display:none"></div>
  </div>
</section>

<!-- ================= FOOTER ================= -->
<footer class="footer">
  <div class="container footer-inner">
    <div>
      <div class="brand footer-brand">
        <span class="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M12 2 21 7v10l-9 5-9-5V7l9-5z"/><path d="M12 22V12"/><path d="m3 7 9 5 9-5"/></svg>
        </span>
        <span class="brand-name">MahiCenter <b>API</b></span>
      </div>
      <p class="footer-desc">Gateway AI multi-model · OpenAI-compatible · Frankfurt, DE</p>
    </div>
    <div class="footer-links">
      <a href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener">Bot Telegram</a>
      <a href="/v1/models">/v1/models</a>
      <a href="/api/public/summary">/api/public/summary</a>
    </div>
  </div>
  <div class="container footer-base mono">
    <span>endpoint&nbsp;<code>https://api2.mahicenter.cloud/v1</code></span>
    <span id="footerClock"></span>
  </div>
</footer>

<div class="toast" id="toast" role="status"></div>
<script src="app.js?v=20261025c"></script>
</body>
</html>
