Update start landing README.md and index.html

README.md

@@ -6,14 +6,14 @@ colorTo: pink
 sdk: static
 pinned: true
 license: mit
-short_description: Modelflare gateway — console, docs, and SDK
+short_description: Modelflare gateway — console, docs, bilingual SDK
 ---
 
 # Start with Modelflare
 
-Static landing Space that sends Hugging Face visitors to the Modelflare console and docs.
-OpenAI-compatible gateway for LLM, image, and video — one key, group failover, usage & cost tracking.
+Hugging Face landing for [Modelflare](https://modelflare.dev/) — OpenAI-compatible AI API gateway (LLM / image / video).
 
-- Console: https://modelflare.dev/
-- Docs: https://docs.modelflare.dev/
-- Org: https://huggingface.co/Modelflare
+- Console: https://modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=start
+- Docs: https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=start
+- SDK guide: https://huggingface.co/spaces/Modelflare/openai-sdk
+- Collection: https://huggingface.co/collections/Modelflare/modelflare-getting-started

index.html

@@ -1,94 +1,104 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 <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);
+      --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;
+    *{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: 48px 20px 64px; }
-    .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: 18px; line-height: 1.6; margin: 0 0 28px; max-width: 640px; }
-    .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
-    a.btn {
-      display: inline-flex; align-items: center; justify-content: center;
-      padding: 12px 18px; border-radius: 12px; text-decoration: none; font-weight: 600;
-      border: 1px solid transparent;
-    }
-    a.btn.primary {
-      background: linear-gradient(135deg, var(--accent), var(--accent2));
-      color: white;
-    }
-    a.btn.ghost {
-      background: transparent; color: var(--text); border-color: var(--border);
-    }
-    .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; line-height: 1.5; }
-    pre {
-      background: #070b16; border: 1px solid var(--border); border-radius: 14px;
-      padding: 16px; overflow: auto; font-size: 13px; line-height: 1.45; color: #d7def0;
-    }
-    .foot { margin-top: 28px; color: var(--muted); font-size: 13px; }
-    code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+    .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">
-    <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/Modelflare" target="_blank" rel="noopener">Org on Hub</a>
+    <div class="lang">
+      <button type="button" class="on" data-lang="zh">中文</button>
+      <button type="button" data-lang="en">English</button>
     </div>
-    <div class="grid">
-      <div class="card">
-        <h3>One key</h3>
-        <p>Chat, Responses, Anthropic Messages, Images, and Video on the same auth.</p>
+
+    <section id="zh">
+      <div class="badge">Hugging Face × Modelflare</div>
+      <h1>稳定、更省的 AI API 网关</h1>
+      <p class="lead">文本 / 图片 / 视频同一把钥匙。OpenAI 兼容 —— 把 SDK 的 <code>base_url</code> 指到 <code>https://modelflare.dev/v1</code>，带分组故障转移与按请求成本记录。</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">打开控制台 →</a>
+        <a class="btn ghost" href="https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=start" target="_blank" rel="noopener">阅读文档</a>
+        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/openai-sdk" target="_blank" rel="noopener">SDK 一行接入</a>
+        <a class="btn ghost" href="https://huggingface.co/collections/Modelflare/modelflare-getting-started" target="_blank" rel="noopener">Getting Started 合集</a>
+      </div>
+      <div class="grid">
+        <div class="card"><h3>一把钥匙</h3><p>Chat、Responses、Anthropic Messages、图片与视频共用鉴权。</p></div>
+        <div class="card"><h3>分组故障转移</h3><p>主路由不可用时按序回退，请求不白挂。</p></div>
+        <div class="card"><h3>用量与成本</h3><p>按请求记录 token / 图片 / 视频花费。</p></div>
       </div>
-      <div class="card">
-        <h3>Group failover</h3>
-        <p>Ordered fallbacks so one unavailable route does not fail the request.</p>
+      <h2>快速开始</h2>
+      <pre><button class="copy" type="button">复制</button><code>from openai import OpenAI
+
+client = OpenAI(
+    api_key="YOUR_MODELFLARE_KEY",
+    base_url="https://modelflare.dev/v1",
+)
+
+r = client.chat.completions.create(
+    model="grok-4.7",
+    messages=[{"role": "user", "content": "Hello from Hugging Face"}],
+)
+print(r.choices[0].message.content)</code></pre>
+      <div class="note"><strong>从 Hub 来？</strong>先领 key，再看 <a href="https://huggingface.co/spaces/Modelflare/openai-sdk">中英 SDK 教程</a>。可互动 Chat Demo 需 HF PRO 后上线；现在请用控制台 + API。</div>
+      <p class="foot">Coding agents（Codex / Claude Code / Gemini CLI）配置见 <a href="https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=start">docs.modelflare.dev</a> · Org：<a href="https://huggingface.co/Modelflare">huggingface.co/Modelflare</a></p>
+    </section>
+
+    <section id="en" class="hidden">
+      <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/collections/Modelflare/modelflare-getting-started" target="_blank" rel="noopener">Getting Started</a>
       </div>
-      <div class="card">
-        <h3>Usage &amp; cost</h3>
-        <p>Track tokens, images, and video spend per request in one place.</p>
+      <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 &amp; cost</h3><p>Track tokens, images, and video spend per request in one place.</p></div>
       </div>
-    </div>
-    <h2 style="font-size:18px;margin:0 0 10px">Quick start</h2>
-    <pre>from openai import OpenAI
+      <h2>Quick start</h2>
+      <pre><button class="copy" type="button">Copy</button><code>from openai import OpenAI
 
 client = OpenAI(
     api_key="YOUR_MODELFLARE_KEY",
@@ -99,11 +109,28 @@ r = client.chat.completions.create(
     model="grok-4.7",
     messages=[{"role": "user", "content": "Hello from Hugging Face"}],
 )
-print(r.choices[0].message.content)</pre>
-    <p class="foot">Coming from Hugging Face? Grab a key in the console, then follow the <a href="https://huggingface.co/spaces/Modelflare/openai-sdk" style="color:#c4b5fd">SDK one-line guide</a>. 
-      Create a key in the console, then swap <code>base_url</code>. Guides for Codex, Claude Code, and more:
-      <a href="https://docs.modelflare.dev/" style="color:#c4b5fd">docs.modelflare.dev</a>
-    </p>
+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">bilingual SDK guide</a>. Interactive Chat Demo needs HF PRO; use console + API for now.</div>
+      <p class="foot">Coding-agent setups: <a href="https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=start">docs.modelflare.dev</a> · Org: <a href="https://huggingface.co/Modelflare">huggingface.co/Modelflare</a></p>
+    </section>
   </div>
+  <script>
+    const zh=document.getElementById('zh'), en=document.getElementById('en');
+    document.querySelectorAll('.lang button').forEach(btn=>{
+      btn.addEventListener('click',()=>{
+        document.querySelectorAll('.lang button').forEach(b=>b.classList.remove('on'));
+        btn.classList.add('on');
+        const l=btn.dataset.lang;
+        zh.classList.toggle('hidden',l!=='zh');
+        en.classList.toggle('hidden',l!=='en');
+      });
+    });
+    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=t.includes('Copy')?'Copied':'已复制';setTimeout(()=>btn.textContent=t,1200)}catch(_){}
+      });
+    });
+  </script>
 </body>
 </html>