Add Modelflare start landing (index.html + README)

README.md

@@ -1,11 +1,19 @@
 ---
-title: Start
-emoji: 🦀
-colorFrom: gray
-colorTo: green
+title: Start with Modelflare
+emoji: 🚀
+colorFrom: indigo
+colorTo: pink
 sdk: static
-pinned: false
-short_description: Try Modelflare API gateway — open console, docs, and one-lin
+pinned: true
+license: mit
+short_description: Modelflare gateway — console, docs, and SDK
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 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.
+
+- Console: https://modelflare.dev/
+- Docs: https://docs.modelflare.dev/
+- Org: https://huggingface.co/Modelflare

index.html

@@ -1,19 +1,109 @@
-<!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="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Modelflare — AI API Gateway</title>
+  <style>
+    :root {
+      --bg: #0b1020;
+      --card: #121a2f;
+      --text: #e8ecf7;
+      --muted: #9aa6c2;
+      --accent: #8b5cf6;
+      --accent2: #ec4899;
+      --border: rgba(255,255,255,.08);
+    }
+    * { 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;
+    }
+    .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; }
+  </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/" target="_blank" rel="noopener">Open Console →</a>
+      <a class="btn ghost" href="https://docs.modelflare.dev/" 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>
+    <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>
+    <h2 style="font-size:18px;margin:0 0 10px">Quick start</h2>
+    <pre>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)</pre>
+    <p class="foot">
+      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>
+  </div>
+</body>
 </html>