Spaces:
Running
Running
| <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> | |