Upload coding-agents static Space files

README.md

@@ -1,11 +1,24 @@
 ---
-title: Coding Agents
-emoji: 😻
-colorFrom: purple
-colorTo: gray
+title: Coding Agents → Modelflare
+emoji: 🛠️
+colorFrom: indigo
+colorTo: pink
 sdk: static
-pinned: false
+pinned: true
+license: mit
 short_description: Codex / Claude Code / Gemini CLI → Modelflare
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Coding Agents → Modelflare
+
+Hub for **Codex**, **Claude Code**, and **Gemini CLI** on [Modelflare](https://modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents).
+
+- Console: https://modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents
+- Docs: https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents
+- Codex guide: https://docs.modelflare.dev/guides/clients/codex/
+- Claude Code: https://docs.modelflare.dev/guides/clients/claude-code/
+- Gemini CLI: https://docs.modelflare.dev/guides/clients/gemini-cli/
+- SDK Space: https://huggingface.co/spaces/Modelflare/openai-sdk
+- Start: https://huggingface.co/spaces/Modelflare/start
+
+Model ids must exist on the key’s group; live catalog is the console.

index.html

@@ -1,19 +1,219 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Coding Agents → Modelflare</title>
+  <meta name="description" content="Connect Codex, Claude Code, and Gemini CLI to Modelflare. Short steps, env snippets, deep links to official docs." />
+  <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(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:680px}
+    .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:28px 0 10px}
+    h3.sec{font-size:15px;margin:18px 0 8px;color:#d6c7ff}
+    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}
+    .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)}
+    .tip{border-left:3px solid var(--warn);padding-left:12px;margin:12px 0;color:var(--muted);font-size:14px}
+    table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0 20px}
+    th,td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
+    th{background:rgba(139,92,246,.12);color:#d6c7ff;font-weight:600}
+    td{color:var(--muted)}
+    code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+    .hidden{display:none}
+    a{color:#c4b5fd}
+
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="lang">
+      <button type="button" class="on" data-lang="zh">中文</button>
+      <button type="button" data-lang="en">English</button>
+    </div>
+
+    <section id="zh">
+      <div class="badge">🛠️ Coding Agents × Modelflare</div>
+      <h1>用 Codex / Claude Code / Gemini CLI 接 Modelflare</h1>
+      <p class="lead">同一把 API Key，按客户端选对 base URL。下面是最短步骤与环境变量；完整安装脚本与排错见官方文档。</p>
+      <div class="cta">
+        <a class="btn primary" href="https://modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">打开控制台领 Key →</a>
+        <a class="btn ghost" href="https://docs.modelflare.dev/guides/endpoints/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">端点选择指南</a>
+        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/openai-sdk" target="_blank" rel="noopener">OpenAI SDK 教程</a>
+        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/start" target="_blank" rel="noopener">Start 落地页</a>
+        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/api-recipes" target="_blank" rel="noopener">API Recipes</a>
+      </div>
+      <div class="tip"><strong>重要：</strong>模型 id 必须已在当前 key 所属<strong>分组</strong>开通；否则会 <code>model_not_found</code> / 无权限。实时目录以控制台为准，不要假设下方示例 id 对你的账号可用。</div>
+
+      <h2>1) Codex（Responses API）</h2>
+      <ol>
+        <li>控制台创建 key，并确保分组可访问示例模型 <code>gpt-5.6-sol</code>（或你分组里实际开通的 Responses 模型）。</li>
+        <li>一键安装：<code>curl -fsSL https://modelflare.dev/install/codex.sh | sh</code>；或手动写 <code>~/.codex/config.toml</code> + <code>auth.json</code>。</li>
+        <li><code>base_url</code> 必须是 <code>https://modelflare.dev/v1</code>，<code>wire_api = "responses"</code>。</li>
+      </ol>
+      <h3 class="sec">环境 / 配置要点</h3>
+      <pre><button class="copy" type="button">复制</button><code># ~/.codex/config.toml（节选）
+model_provider = "modelflare"
+model = "gpt-5.6-sol"
+
+[model_providers.modelflare]
+name = "Modelflare"
+base_url = "https://modelflare.dev/v1"
+wire_api = "responses"
+requires_openai_auth = true
+
+# ~/.codex/auth.json
+# { "auth_mode": "apikey", "OPENAI_API_KEY": "YOUR_MODELFLARE_API_KEY" }</code></pre>
+      <p class="foot">完整步骤与 Windows 脚本：<a href="https://docs.modelflare.dev/guides/clients/codex/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Codex</a></p>
+
+      <h2>2) Claude Code（Anthropic Messages）</h2>
+      <ol>
+        <li>创建 key，确保分组可访问 <code>claude-opus-4-8</code> / <code>claude-sonnet-5</code>（或你分组里的 Claude 模型）。</li>
+        <li>一键：<code>curl -fsSL https://modelflare.dev/install/claude.sh | sh</code>；或写 <code>~/.claude/settings.json</code>。</li>
+        <li><strong>注意：</strong><code>ANTHROPIC_BASE_URL</code> 是站点根 <code>https://modelflare.dev</code>（<strong>不要</strong>加 <code>/v1</code>）。CLI 会自己拼 Messages 路径。</li>
+      </ol>
+      <pre><button class="copy" type="button">复制</button><code># ~/.claude/settings.json 中的 env
+export ANTHROPIC_BASE_URL="https://modelflare.dev"
+export ANTHROPIC_AUTH_TOKEN="YOUR_MODELFLARE_API_KEY"
+export ANTHROPIC_MODEL="claude-opus-4-8"
+export ANTHROPIC_DEFAULT_OPUS_MODEL="claude-opus-4-8"
+export ANTHROPIC_DEFAULT_SONNET_MODEL="claude-sonnet-5"
+export ANTHROPIC_DEFAULT_HAIKU_MODEL="claude-sonnet-5"</code></pre>
+      <p class="foot">完整指南：<a href="https://docs.modelflare.dev/guides/clients/claude-code/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Claude Code</a></p>
+
+      <h2>3) Gemini CLI（原生 Gemini）</h2>
+      <ol>
+        <li><code>npm install -g @google/gemini-cli@latest</code></li>
+        <li>设置 <code>GEMINI_API_KEY</code> + <code>GOOGLE_GEMINI_BASE_URL=https://modelflare.dev</code></li>
+        <li><code>gemini --model YOUR_MODEL_ID</code>（模型 id 从控制台目录选）</li>
+      </ol>
+      <pre><button class="copy" type="button">复制</button><code>export GEMINI_API_KEY="YOUR_MODELFLARE_API_KEY"
+export GOOGLE_GEMINI_BASE_URL="https://modelflare.dev"
+gemini --model YOUR_MODEL_ID</code></pre>
+      <p class="foot">完整指南：<a href="https://docs.modelflare.dev/guides/clients/gemini-cli/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Gemini CLI</a></p>
+
+      <div class="note">
+        <strong>还想用 OpenAI SDK？</strong> Chat Completions 请看
+        <a href="https://huggingface.co/spaces/Modelflare/openai-sdk">openai-sdk</a> 与
+        <a href="https://huggingface.co/spaces/Modelflare/api-recipes">api-recipes</a>。
+        Gradio Chat Demo 需 HF PRO，即将上线；当前请用控制台 + API。
+      </div>
+    </section>
+
+    <section id="en" class="hidden">
+      <div class="badge">🛠️ Coding Agents × Modelflare</div>
+      <h1>Codex / Claude Code / Gemini CLI → Modelflare</h1>
+      <p class="lead">One API key, pick the right base URL per client. Short steps and env snippets below; full installers and troubleshooting live in the official docs.</p>
+      <div class="cta">
+        <a class="btn primary" href="https://modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">Open Console → Get Key</a>
+        <a class="btn ghost" href="https://docs.modelflare.dev/guides/endpoints/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">Endpoint picker</a>
+        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/openai-sdk" target="_blank" rel="noopener">OpenAI SDK guide</a>
+        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/start" target="_blank" rel="noopener">Start landing</a>
+        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/api-recipes" target="_blank" rel="noopener">API Recipes</a>
+      </div>
+      <div class="tip"><strong>Important:</strong> model ids must be enabled on the key’s <strong>group</strong>. Otherwise you get <code>model_not_found</code> / unauthorized. The live catalog is the console — do not assume sample ids below are enabled for your account.</div>
+
+      <h2>1) Codex (Responses API)</h2>
+      <ol>
+        <li>Create a key whose group can access <code>gpt-5.6-sol</code> (or another Responses model on your group).</li>
+        <li>Installer: <code>curl -fsSL https://modelflare.dev/install/codex.sh | sh</code>; or write <code>~/.codex/config.toml</code> + <code>auth.json</code> by hand.</li>
+        <li><code>base_url</code> must be <code>https://modelflare.dev/v1</code> with <code>wire_api = "responses"</code>.</li>
+      </ol>
+      <h3 class="sec">Config sketch</h3>
+      <pre><button class="copy" type="button">Copy</button><code># ~/.codex/config.toml (excerpt)
+model_provider = "modelflare"
+model = "gpt-5.6-sol"
+
+[model_providers.modelflare]
+name = "Modelflare"
+base_url = "https://modelflare.dev/v1"
+wire_api = "responses"
+requires_openai_auth = true
+
+# ~/.codex/auth.json
+# { "auth_mode": "apikey", "OPENAI_API_KEY": "YOUR_MODELFLARE_API_KEY" }</code></pre>
+      <p class="foot">Full guide: <a href="https://docs.modelflare.dev/guides/clients/codex/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Codex</a></p>
+
+      <h2>2) Claude Code (Anthropic Messages)</h2>
+      <ol>
+        <li>Create a key with access to <code>claude-opus-4-8</code> / <code>claude-sonnet-5</code> (or Claude models on your group).</li>
+        <li>Installer: <code>curl -fsSL https://modelflare.dev/install/claude.sh | sh</code>; or write <code>~/.claude/settings.json</code>.</li>
+        <li><strong>Note:</strong> <code>ANTHROPIC_BASE_URL</code> is the site origin <code>https://modelflare.dev</code> (<strong>not</strong> <code>/v1</code>). The CLI appends the Messages path.</li>
+      </ol>
+      <pre><button class="copy" type="button">Copy</button><code># env block used in ~/.claude/settings.json
+export ANTHROPIC_BASE_URL="https://modelflare.dev"
+export ANTHROPIC_AUTH_TOKEN="YOUR_MODELFLARE_API_KEY"
+export ANTHROPIC_MODEL="claude-opus-4-8"
+export ANTHROPIC_DEFAULT_OPUS_MODEL="claude-opus-4-8"
+export ANTHROPIC_DEFAULT_SONNET_MODEL="claude-sonnet-5"
+export ANTHROPIC_DEFAULT_HAIKU_MODEL="claude-sonnet-5"</code></pre>
+      <p class="foot">Full guide: <a href="https://docs.modelflare.dev/guides/clients/claude-code/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Claude Code</a></p>
+
+      <h2>3) Gemini CLI (native Gemini)</h2>
+      <ol>
+        <li><code>npm install -g @google/gemini-cli@latest</code></li>
+        <li>Set <code>GEMINI_API_KEY</code> + <code>GOOGLE_GEMINI_BASE_URL=https://modelflare.dev</code></li>
+        <li><code>gemini --model YOUR_MODEL_ID</code> (pick an id from the console catalog)</li>
+      </ol>
+      <pre><button class="copy" type="button">Copy</button><code>export GEMINI_API_KEY="YOUR_MODELFLARE_API_KEY"
+export GOOGLE_GEMINI_BASE_URL="https://modelflare.dev"
+gemini --model YOUR_MODEL_ID</code></pre>
+      <p class="foot">Full guide: <a href="https://docs.modelflare.dev/guides/clients/gemini-cli/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Gemini CLI</a></p>
+
+      <div class="note">
+        <strong>Prefer the OpenAI SDK?</strong> See
+        <a href="https://huggingface.co/spaces/Modelflare/openai-sdk">openai-sdk</a> and
+        <a href="https://huggingface.co/spaces/Modelflare/api-recipes">api-recipes</a>.
+        Gradio Chat Demo needs HF PRO (upcoming); use console + API for now.
+      </div>
+    </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>