Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Modelflare — AI API Gateway</title> | |
| <meta name="description" content="Modelflare: OpenAI-compatible AI API gateway for LLM, image, and video. One key, group failover, cost tracking." /> | |
| <style> | |
| :root { | |
| --bg:#0b1020; --card:#121a2f; --text:#e8ecf7; --muted:#9aa6c2; | |
| --accent:#8b5cf6; --accent2:#ec4899; --border:rgba(255,255,255,.08); --ok:#34d399; | |
| } | |
| *{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(1200px 600px at 10% -10%,#2a1850 0%,transparent 50%), | |
| radial-gradient(900px 500px at 100% 0%,#3b0f2e 0%,transparent 45%),var(--bg); | |
| color:var(--text);min-height:100vh;line-height:1.55; | |
| } | |
| .wrap{max-width:880px;margin:0 auto;padding:40px 18px 64px} | |
| .lang{display:flex;gap:8px;margin-bottom:16px} | |
| .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)} | |
| .badge{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.35);color:#d6c7ff;font-size:13px;margin-bottom:18px} | |
| h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 12px} | |
| .lead{color:var(--muted);font-size:17px;margin:0 0 24px;max-width:640px} | |
| .cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px} | |
| a.btn{display:inline-flex;align-items:center;padding:12px 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)} | |
| .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:28px} | |
| .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px} | |
| .card h3{margin:0 0 8px;font-size:16px} | |
| .card p{margin:0;color:var(--muted);font-size:14px} | |
| h2{font-size:18px;margin:0 0 10px} | |
| 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} | |
| .foot{margin-top:24px;color:var(--muted);font-size:13px} | |
| .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)} | |
| 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"> | |
| <div class="badge">Hugging Face × Modelflare</div> | |
| <h1>Stable, lower-cost AI API gateway</h1> | |
| <p class="lead">One key for LLM, image, and video. OpenAI-compatible chat — point your SDK at <code>https://modelflare.dev/v1</code>, 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=start" target="_blank" rel="noopener">Open Console →</a> | |
| <a class="btn ghost" href="https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=start" target="_blank" rel="noopener">Read Docs</a> | |
| <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/openai-sdk" target="_blank" rel="noopener">SDK one-line guide</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/spaces/Modelflare/blog" target="_blank" rel="noopener">Blog</a> | |
| <a class="btn ghost" href="https://huggingface.co/collections/Modelflare/modelflare-getting-started" target="_blank" rel="noopener">Getting Started</a> | |
| <a class="btn ghost" href="https://huggingface.co/datasets/Modelflare/api-examples" target="_blank" rel="noopener">Examples dataset</a> | |
| <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/start/discussions/1" target="_blank" rel="noopener">Discussion #1</a> | |
| </div> | |
| <div class="grid"> | |
| <div class="card"><h3>One key</h3><p>Chat, Responses, Anthropic Messages, Images, and Video on the same auth.</p></div> | |
| <div class="card"><h3>Group failover</h3><p>Ordered fallbacks so one unavailable route does not fail the request.</p></div> | |
| <div class="card"><h3>Usage & cost</h3><p>Track tokens, images, and video spend per request — plus Smart keys and cache hit guarantee.</p></div> | |
| </div> | |
| <h2>Quick start</h2> | |
| <pre><button class="copy" type="button">Copy</button><code>from openai import OpenAI | |
| client = OpenAI( | |
| api_key="YOUR_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> | |
| <div class="note"><strong>Coming from Hub?</strong> Grab a key, then follow the <a href="https://huggingface.co/spaces/Modelflare/openai-sdk">SDK guide</a>, <a href="https://huggingface.co/spaces/Modelflare/coding-agents">Coding Agents</a>, and <a href="https://huggingface.co/spaces/Modelflare/api-recipes">API Recipes</a>. Interactive Chat Demo needs HF PRO; use console + API for now. Feedback welcome in <a href="https://huggingface.co/spaces/Modelflare/start/discussions/1">discussion #1</a>.</div> | |
| <h2 style="margin-top:28px">Blog</h2> | |
| <div class="grid"> | |
| <div class="card"><h3><a href="https://huggingface.co/spaces/Modelflare/blog">Modelflare Blog</a></h3><p>Setup guides and engineering notes: one key for text, image, and video; the OpenAI SDK switch; coding agents; streaming, fallback, and async video; Smart API Keys; usage and cost records; Media Skill; Castaly.</p></div> | |
| </div> | |
| <p class="foot">Org: <a href="https://huggingface.co/Modelflare">huggingface.co/Modelflare</a> · Docs: <a href="https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=start">docs.modelflare.dev</a></p> | |
| </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> | |