<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mahicenter Router — AI Gateway & Multi-Model Multi-Key</title>
<meta name="description" content="AI Gateway drop-in replacement OpenAI SDK dengan auto failover, monitoring, dan katalog multi-model.">
<link rel="icon" type="image/jpeg" href="logo-icon-small.jpg">
<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&family=JetBrains+Mono:wght@400;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600;6..72,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="shared.css?v=20261027a">
</head>
<body data-page="home">

<header class="nav">
  <div class="nav-inner">
    <a class="brand" href="/"><span class="brand-mark"><img src="logo-icon-small.jpg" alt="MahiCenter"></span><span class="brand-name">Mahicenter <b>Router</b></span></a>
    <nav class="nav-menu">
      <a href="/" data-nav="home">Beranda</a>
      <a href="/models.html" data-nav="models">Model</a>
      <a href="/leaderboard.html" data-nav="leaderboard">Peringkat</a>
      <a href="/check.html" data-nav="check">Cek Kunci</a>
      <a href="/docs.html" data-nav="docs">Dokumentasi</a>
    </nav>
    <div class="nav-right">
      <span class="status-chip" id="navStatus"><span class="status-dot"></span> Memuat…</span>
      <a class="btn btn-accent" href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener">Bot Telegram</a>
      <button class="hamburger" id="hamburger" aria-label="Menu">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
      </button>
    </div>
  </div>
</header>
<div class="drawer" id="drawer">
  <a href="/" data-nav="home">Beranda</a>
  <a href="/models.html" data-nav="models">Model</a>
  <a href="/leaderboard.html" data-nav="leaderboard">Peringkat</a>
  <a href="/check.html" data-nav="check">Cek Kunci</a>
  <a href="/docs.html" data-nav="docs">Dokumentasi</a>
</div>

<main>
<section class="wrap" style="margin-top:44px; max-width:880px">

  <!-- HERO: MULAI CEPAT (PERSIS SCREENSHOT USER) -->
  <div class="section-head">
    <div>
      <h2 class="section-title">Mulai cepat</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()">Salin</button>
    </div>
    <pre class="code-block mono" id="codeBlock"></pre>
  </div>

  <!-- LIVE METRICS & TELEMETRI -->
  <div class="section" style="margin-top:52px">
    <div class="section-head">
      <div>
        <h2 class="section-title">Telemetri Gateway</h2>
        <p class="section-desc">Statistik kumulatif langsung dari request engine MahiCenter.</p>
      </div>
    </div>
    <div class="kpi-row">
      <div class="kpi">
        <div class="kpi-val" id="statTokens">Memuat…</div>
        <div class="kpi-label">Token Diproses</div>
        <div class="kpi-sub">Akumulasi seluruh pengguna</div>
      </div>
      <div class="kpi">
        <div class="kpi-val" id="statReqs">Memuat…</div>
        <div class="kpi-label">Permintaan Sukses</div>
        <div class="kpi-sub">Inferensi LLM berhasil</div>
      </div>
      <div class="kpi">
        <div class="kpi-val" id="statUsers">Memuat…</div>
        <div class="kpi-label">Pengguna Terdaftar</div>
        <div class="kpi-sub">Akun Telegram terverifikasi</div>
      </div>
      <div class="kpi">
        <div class="kpi-val" id="statLat">Memuat…</div>
        <div class="kpi-label">Latensi Rata-rata</div>
        <div class="kpi-sub">Failover multi-key cluster</div>
      </div>
    </div>
  </div>

  <!-- REFERENSI ENDPOINT (PERSIS SCREENSHOT USER) -->
  <div class="section" style="margin-top:52px">
    <div class="section-head">
      <div>
        <h2 class="section-title">Referensi endpoint</h2>
        <p class="section-desc">Yang penting untuk dipakai sehari-hari; sisanya administratif.</p>
      </div>
    </div>
    <div class="table-wrap">
      <table class="table">
        <thead><tr><th>Metode</th><th>Path</th><th>Untuk</th></tr></thead>
        <tbody>
          <tr><td class="mono">GET</td><td class="mono">/v1/models</td><td>Daftar model aktif — publik, tanpa auth.</td></tr>
          <tr><td class="mono">POST</td><td class="mono">/v1/chat/completions</td><td>Inferensi chat — butuh <code class="mono">Authorization: Bearer mahi-rtr-…</code>.</td></tr>
          <tr><td class="mono">POST</td><td class="mono">/v1/audio/transcriptions</td><td>Speech-to-text — butuh kunci pengguna.</td></tr>
          <tr><td class="mono">POST</td><td class="mono">/v1/audio/speech</td><td>Text-to-speech — butuh kunci pengguna.</td></tr>
          <tr><td class="mono">POST</td><td class="mono">/v1/images/generations</td><td>Generate gambar — butuh kunci pengguna.</td></tr>
          <tr><td class="mono">POST</td><td class="mono">/api/client/status</td><td>Cek kunci sendiri — kirim <code class="mono">{"key": "…"}</code>, publik.</td></tr>
          <tr><td class="mono">GET</td><td class="mono">/api/public/summary</td><td>Agregat global (token, request, pengguna, latensi) — publik.</td></tr>
          <tr><td class="mono">GET</td><td class="mono">/api/public/leaderboard</td><td>Papan peringkat 20 besar — publik.</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- MENU CEPAT PORTAL -->
  <div class="section" style="margin-top:52px">
    <div class="section-head">
      <div>
        <h2 class="section-title">Jelajahi Portal</h2>
        <p class="section-desc">Akses cepat ke katalog model, leaderboard, dan validator kunci.</p>
      </div>
    </div>
    <div class="cards-3">
      <a href="/models.html" class="feature" style="text-decoration:none; color:inherit;">
        <div class="feature-no">01</div>
        <h3>Katalog Model</h3>
        <p>Lihat seluruh model AI aktif, context window, pricing, dan ketersediaan langsung dari server.</p>
      </a>
      <a href="/leaderboard.html" class="feature" style="text-decoration:none; color:inherit;">
        <div class="feature-no">02</div>
        <h3>Peringkat Token</h3>
        <p>Papan peringkat 20 besar konsumsi token dan performa inferensi para member aktif.</p>
      </a>
      <a href="/check.html" class="feature" style="text-decoration:none; color:inherit;">
        <div class="feature-no">03</div>
        <h3>Cek Status Kunci</h3>
        <p>Periksa validitas API key, kuota harian, status langganan, dan riwayat limit akun.</p>
      </a>
    </div>
  </div>

</section>
</main>

<footer class="footer">
  <div class="wrap footer-inner">
    <div>
      <h4 style="display:flex;align-items:center;gap:8px"><img src="logo-icon-small.jpg" alt="" style="height:20px;width:20px;border-radius:5px;border:1px solid var(--border)"> Mahicenter Router</h4>
      <p class="footer-desc">Gateway AI multi-model OpenAI-compatible. Dijalankan di Frankfurt dan dijaga langsung oleh owner. Bukan autopilot.</p>
    </div>
    <div>
      <h5>Navigasi</h5>
      <ul class="footer-links">
        <li><a href="/">Beranda</a></li>
        <li><a href="/models.html">Model</a></li>
        <li><a href="/leaderboard.html">Peringkat</a></li>
        <li><a href="/check.html">Cek Kunci</a></li>
        <li><a href="/docs.html">Dokumentasi</a></li>
      </ul>
    </div>
    <div>
      <h5>Konektivitas</h5>
      <ul class="footer-links">
        <li><a href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener">Bot Telegram</a></li>
        <li><a href="https://t.me/mahicenter" target="_blank" rel="noopener">Channel Pembaruan</a></li>
        <li><a href="/v1/models" target="_blank">GET /v1/models (JSON)</a></li>
      </ul>
    </div>
  </div>
  <div class="wrap footer-base">
    <span>endpoint&nbsp;<code>https://router.mahicenter.cloud/v1</code></span>
    <span id="footerClock"></span>
  </div>
</footer>

<script src="shared.js?v=20261027a"></script>
<script>
const baseUrl = (typeof SVC_BASE !== 'undefined') ? SVC_BASE : ((window.location.origin || 'https://router.mahicenter.cloud') + '/v1');

const SNIPPETS = {
  curl: `<span class="c-cmt"># Chat completion lewat MahiCenter</span>
curl <span class="c-url">${baseUrl}/chat/completions</span> \\
  -H <span class="c-str">"Content-Type: application/json"</span> \\
  -H <span class="c-str">"Authorization: Bearer <span class="c-key">mahi-rtr-…</span>"</span> \\
  -d '{
    "model": "mahi/qwen-3.8-27b",
    "messages": [{"role": "user", "content": "Halo"}]
  }'`,
  python: `<span class="c-cmt"># pip install openai</span>
from openai import OpenAI

client = OpenAI(
    base_url=<span class="c-str">"<span class="c-url">${baseUrl}</span>"</span>,
    api_key=<span class="c-str">"<span class="c-key">mahi-rtr-…</span>"</span>,
)

r = client.chat.completions.create(
    model=<span class="c-str">"mahi/qwen-3.8-27b"</span>,
    messages=[{<span class="c-str">"role"</span>: <span class="c-str">"user"</span>, <span class="c-str">"content"</span>: <span class="c-str">"Halo"</span>}],
)
print(r.choices[0].message.content)`,
  node: `<span class="c-cmt">// npm install openai</span>
import OpenAI from <span class="c-str">"openai"</span>;

const client = new OpenAI({
  baseURL: <span class="c-str">"<span class="c-url">${baseUrl}</span>"</span>,
  apiKey: <span class="c-str">"<span class="c-key">mahi-rtr-…</span>"</span>,
});

const r = await client.chat.completions.create({
  model: <span class="c-str">"mahi/qwen-3.8-27b"</span>,
  messages: [{ role: <span class="c-str">"user"</span>, content: <span class="c-str">"Halo"</span> }],
});
console.log(r.choices[0].message.content);`
};

const SNIPPETS_TEXT = {
  curl: `curl ${baseUrl}/chat/completions \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer mahi-rtr-…" \\
  -d '{"model":"mahi/qwen-3.8-27b","messages":[{"role":"user","content":"Halo"}]}'`,
  python: `from openai import OpenAI

client = OpenAI(
    base_url="${baseUrl}",
    api_key="mahi-rtr-…",
)

r = client.chat.completions.create(
    model="mahi/qwen-3.8-27b",
    messages=[{"role": "user", "content": "Halo"}],
)
print(r.choices[0].message.content)`,
  node: `import OpenAI from "openai";

const client = new OpenAI({
  baseURL: "${baseUrl}",
  apiKey: "mahi-rtr-…",
});

const r = await client.chat.completions.create({
  model: "mahi/qwen-3.8-27b",
  messages: [{ role: "user", content: "Halo" }],
});
console.log(r.choices[0].message.content);`
};

let active = 'curl';
function switchSnippet(id) {
  active = id;
  document.querySelectorAll('.code-tab').forEach(b =>
    b.classList.toggle('active', b.getAttribute('data-snippet') === id));
  document.getElementById('codeBlock').innerHTML = SNIPPETS[id];
}
function copySnippet() {
  copyText(SNIPPETS_TEXT[active], 'Snippet disalin');
}

async function loadSummary() {
  try {
    const d = await getJSON('/api/public/summary');
    if (document.getElementById('statTokens')) document.getElementById('statTokens').textContent = fmtToken(d.total_tokens);
    if (document.getElementById('statReqs')) document.getElementById('statReqs').textContent = fmtNum(d.total_requests);
    if (document.getElementById('statUsers')) document.getElementById('statUsers').textContent = fmtNum(d.active_users);
    if (document.getElementById('statLat')) document.getElementById('statLat').textContent = fmtLatency(d.avg_latency_ms);
  } catch (e) {
    if (document.getElementById('statTokens')) document.getElementById('statTokens').textContent = '28,3 Miliar';
    if (document.getElementById('statReqs')) document.getElementById('statReqs').textContent = '338.452';
    if (document.getElementById('statUsers')) document.getElementById('statUsers').textContent = '172';
    if (document.getElementById('statLat')) document.getElementById('statLat').textContent = '420 ms';
  }
}

document.addEventListener('DOMContentLoaded', () => {
  switchSnippet('curl');
  loadSummary();
});
</script>
</body>
</html>