index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>OpenAI SDK → Modelflare</title>
  <meta name="description" content="One-line OpenAI SDK switch to Modelflare. Python, Node, curl, and streaming examples." />
  <style>
    :root {
      --bg:#0b1020; --card:#121a2f; --text:#e8ecf7; --muted:#9aa6c2;
      --accent:#8b5cf6; --accent2:#ec4899; --border:rgba(255,255,255,.08); --ok:#34d399; --warn:#fbbf24;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1000px 500px at 0% 0%,#2a1850 0%,transparent 50%),var(--bg);color:var(--text);line-height:1.55}
    .wrap{max-width:820px;margin:0 auto;padding:40px 18px 72px}
    .lang{display:flex;gap:8px;margin-bottom:18px}
    .lang button{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:6px 12px;cursor:pointer}
    .lang button.on{color:#fff;border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.2)}
    h1{font-size:clamp(26px,4.5vw,36px);margin:0 0 10px;line-height:1.2}
    .lead{color:var(--muted);margin:0 0 22px;font-size:17px}
    .cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
    a.btn{display:inline-flex;align-items:center;padding:11px 16px;border-radius:12px;text-decoration:none;font-weight:600}
    a.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
    a.ghost{border:1px solid var(--border);color:var(--text)}
    h2{font-size:18px;margin:28px 0 10px}
    ol,ul{color:var(--muted);padding-left:1.2em}
    ol li,ul li{margin:6px 0}
    pre{background:#070b16;border:1px solid var(--border);border-radius:14px;padding:14px 16px;overflow:auto;font-size:12.5px;color:#d7def0;position:relative}
    .copy{position:absolute;top:8px;right:8px;font-size:11px;border:1px solid var(--border);background:#121a2f;color:var(--muted);border-radius:8px;padding:4px 8px;cursor:pointer}
    .note{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;color:var(--muted);font-size:14px;margin-top:16px}
    .note strong{color:var(--ok)}
    .tip{border-left:3px solid var(--warn);padding-left:12px;margin:12px 0;color:var(--muted);font-size:14px}
    code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
    .hidden{display:none}
    a{color:#c4b5fd}
  </style>
</head>
<body>
  <div class="wrap">

    <section id="en">
      <h1>One-line switch: OpenAI SDK → Modelflare</h1>
      <p class="lead">Create a key, then set <code>base_url</code>. One key for text, image, and video — with group failover and per-request cost tracking.</p>
      <div class="cta">
        <a class="btn primary" href="https://modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=sdk_guide" target="_blank" rel="noopener">Open Console → Get API Key</a>
        <a class="btn ghost" href="https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=sdk_guide" target="_blank" rel="noopener">Docs</a>
        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/coding-agents" target="_blank" rel="noopener">Coding Agents</a>
        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/api-recipes" target="_blank" rel="noopener">API Recipes</a>
        <a class="btn ghost" href="https://huggingface.co/collections/Modelflare/modelflare-getting-started" target="_blank" rel="noopener">Getting Started collection</a>
        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/blog" target="_blank" rel="noopener">Blog</a>
        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/start" target="_blank" rel="noopener">Landing</a>
      </div>
      <h2>Three steps</h2>
      <ol>
        <li>Create an API key in the console, in a non-default group that lists the model you want to call.</li>
        <li>Point your OpenAI client at <code>https://modelflare.dev/v1</code>.</li>
        <li>Use an exact model ID enabled on your group (the Quickstart uses <code>gpt-5.6-sol</code>).</li>
      </ol>
      <div class="tip">Model ids must be enabled on the key’s group — otherwise the request fails even when the JSON is valid (a <code>403</code> means the key cannot use that model or group). Live prices and availability live in the console.</div>
      <h2>Environment variable (recommended)</h2>
      <pre><button class="copy" type="button">Copy</button><code>export MODELFLARE_API_KEY="YOUR_MODELFLARE_API_KEY"
# base_url is always https://modelflare.dev/v1</code></pre>
      <h2>Python</h2>
      <pre><button class="copy" type="button">Copy</button><code>import os
from openai import OpenAI

client = OpenAI(
    api_key=os.environ["MODELFLARE_API_KEY"],
    base_url="https://modelflare.dev/v1",
)

r = client.chat.completions.create(
    model="gpt-5.6-sol",
    messages=[{"role": "user", "content": "Hello from Hugging Face"}],
)
print(r.choices[0].message.content)</code></pre>
      <h2>Streaming (Python)</h2>
      <pre><button class="copy" type="button">Copy</button><code>stream = client.chat.completions.create(
    model="gpt-5.6-sol",
    messages=[{"role": "user", "content": "Say hi in one line"}],
    stream=True,
)
for chunk in stream:
    delta = chunk.choices[0].delta.content or ""
    print(delta, end="", flush=True)</code></pre>
      <h2>Node.js / TypeScript</h2>
      <pre><button class="copy" type="button">Copy</button><code>import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.MODELFLARE_API_KEY,
  baseURL: "https://modelflare.dev/v1",
});

const r = await client.chat.completions.create({
  model: "gpt-5.6-sol",
  messages: [{ role: "user", content: "Hello from Hugging Face" }],
});
console.log(r.choices[0].message.content);</code></pre>
      <h2>curl</h2>
      <pre><button class="copy" type="button">Copy</button><code>curl https://modelflare.dev/v1/chat/completions \
  -H "Authorization: Bearer $MODELFLARE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"model":"gpt-5.6-sol","messages":[{"role":"user","content":"ping"}]}'</code></pre>
      <h2>Troubleshooting</h2>
      <ul>
        <li><strong>401</strong>: the key is missing, malformed, or revoked.</li><li><strong>403</strong>: the key is valid but the selected model or group is not allowed.</li>
        <li><strong>Model unavailable</strong>: switch to an id enabled on that group, or change groups in the console.</li>
        <li><strong>Image / video</strong>: same key, native request fields — see <a href="https://huggingface.co/spaces/Modelflare/api-recipes">api-recipes</a> and Image / Video docs.</li>
        <li><strong>Coding agents</strong>: Codex / Claude Code / Gemini CLI → <a href="https://huggingface.co/spaces/Modelflare/coding-agents">coding-agents</a> Space.</li>
      </ul>
      <div class="note">
        <strong>HF visitors:</strong> sign up on the console for pricing, keys, and usage.
        Interactive Chat Spaces need HF PRO; use the console + API for now.
        More recipes: <a href="https://huggingface.co/spaces/Modelflare/api-recipes">api-recipes</a>.
      </div>
    </section>
  </div>
  <script>
    document.querySelectorAll('pre .copy').forEach(btn=>{
      btn.addEventListener('click',async()=>{
        const code=btn.parentElement.querySelector('code').innerText;
        try{await navigator.clipboard.writeText(code);const t=btn.textContent;btn.textContent='Copied';setTimeout(()=>btn.textContent=t,1200)}catch(_){}
      });
    });
  </script>
</body>
</html>