Spaces:

apiarium
/

labs

Running

App Files Files Community

labs / static /index.html

3v324v23

deploy: unified router + dreamy website (2026-06-16T09:46:52Z)

c1a683f 25 days ago

Raw

History Blame Contribute Delete

21.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="theme-color" content="#FFD6E8" />
	<!-- CRITICAL: paint the dawn sky on the first byte, before any external CSS/JS
	loads. background-attachment:fixed locks it to the viewport AND is the only
	background iOS Safari renders in the overscroll/rubber-band region — so
	scrolling never exposes a bare strip. Literal hex because tokens.css
	hasn't loaded yet. -->
	<style>
	html{background:linear-gradient(180deg,#E8E0FF 0%,#FFD6E8 52%,#FFE5D9 100%) fixed;background-color:#FFD6E8;}
	</style>

	<title>DreamRouter — one endpoint, every model</title>
	<meta name="description" content="DreamRouter routes a single request across 374 models and 34,654 live targets. It swaps model names, picks healthy endpoints, and retries bad keys across thirteen providers." />
	<link rel="canonical" href="https://apiarium-labs.hf.space/" />

	<!-- Open Graph / social previews -->
	<meta property="og:type" content="website" />
	<meta property="og:title" content="DreamRouter — one endpoint, every model" />
	<meta property="og:description" content="One OpenAI-compatible endpoint routing 374 models across 13 providers. Streaming, round-robin, auto-retry." />
	<meta property="og:url" content="https://apiarium-labs.hf.space/" />
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:title" content="DreamRouter — one endpoint, every model" />
	<meta name="twitter:description" content="One OpenAI-compatible endpoint routing 374 models across 13 providers." />

	<!-- Soft, rounded, dreamy typefaces -->
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;700&family=Nunito:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />

	<!-- Lenis smooth scroll (vanilla, no build) -->
	<script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js" defer></script>

	<!-- Styles (order: tokens → base → scene → whale → nav → sections) -->
	<link rel="stylesheet" href="css/tokens.css?v=20260620b" />
	<link rel="stylesheet" href="css/base.css?v=20260620b" />
	<link rel="stylesheet" href="css/scene.css?v=20260620b" />
	<link rel="stylesheet" href="css/whale.css?v=20260620b" />
	<link rel="stylesheet" href="css/nav.css?v=20260620b" />
	<link rel="stylesheet" href="css/sections.css?v=20260620b" />
	</head>

	<body data-page="home">

	<!-- Full-site dream overlays: blur UNDER grain (both never block input) -->
	<div class="blur-overlay" aria-hidden="true"></div>
	<div class="grain-overlay" aria-hidden="true"></div>

	<!-- =====================================================================
	SCENE — 6 fixed parallax layers behind all content.
	Never receives pointer events (pointer-events: none on .scene).
	===================================================================== -->
	<div class="scene" aria-hidden="true">

	<!-- Layer 1: far clouds (slowest parallax) -->
	<div class="layer layer-far-clouds" data-speed="0.06" data-mouse="8">
	<svg class="cloud-far c1" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	<svg class="cloud-far c2" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	<svg class="cloud-far c3" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	<svg class="cloud-far c4" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	</div>

	<!-- Layer 2: crescent moon (fades in on scroll) -->
	<div class="layer layer-moon" data-speed="0.12" data-mouse="14">
	<div class="moon"><span class="moon-disc"></span></div>
	</div>

	<!-- Layer 3a: mid clouds (medium parallax) -->
	<div class="layer layer-mid-clouds" data-speed="0.20" data-mouse="22">
	<svg class="cloud-mid m1" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	<svg class="cloud-mid m2" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	<svg class="cloud-mid m3" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	</div>

	</div><!-- /.scene -->

	<!-- Layer 3b: the whale — above content (z-index 2) -->
	<div class="layer layer-top layer-whale" aria-hidden="true">
	<!-- whale SVG is injected by js/whale.js into [data-whale] -->
	<div class="whale" data-whale></div>
	</div>

	<!-- Layer 4: rising bubbles — above all (z-index 3) -->
	<div class="layer layer-top layer-bubbles bubbles" data-speed="0.32" data-mouse="34" aria-hidden="true"></div>

	<!-- shared nav + footer (injected by js/layout.js) -->
	<div data-site-nav></div>

	<!-- =====================================================================
	CONTENT
	===================================================================== -->
	<main id="main">

	<!-- =============== HERO =============== -->
	<section class="hero">
	<div class="container">
	<div class="hero-inner">
	<h1 data-split>one endpoint,<br/>every model</h1>
	<p class="sub" data-reveal>
	DreamRouter routes a single request across 374 models and 34,654 live targets.
	It swaps model names, picks healthy endpoints, and retries bad keys across
	thirteen providers.
	</p>
	<div class="hero-actions" data-reveal>
	<a href="#manifesto" class="btn btn-ghost">How it works</a>
	<a href="docs.html#quickstart" class="btn btn-primary">Read the docs</a>
	</div>

	<div class="endpoint" data-reveal>
	<code></code>
	<button class="copy-btn" type="button" aria-label="Copy endpoint URL">Copy</button>
	</div>
	</div>
	</div>
	</section>

	<!-- =============== MANIFESTO =============== -->
	<section class="manifesto" id="manifesto">
	<div class="container">
	<div class="manifesto-inner">
	<h2 class="reveal d1">one request in,<br/>the best live target out</h2>
	<div class="dot-divider reveal d2"><span></span><span></span><span></span></div>
	<p class="lead reveal d2">
	DreamRouter resolves the model name, round-robins to a healthy target, swaps in
	the upstream model id, forwards, and streams the reply back. If a key returns
	401, 429, or 5xx, it cools that target for sixty seconds and retries the next
	one. Up to five attempts, across thirteen providers.
	</p>
	</div>
	</div>
	</section>

	<!-- =============== THE NUMBERS =============== -->
	<section class="stats">
	<div class="container">
	<div class="stats-grid">
	<div class="stat reveal d1">
	<span class="num" data-count="374">0</span>
	<div class="label">models</div>
	<div class="note">one name, many live targets</div>
	</div>
	<div class="stat reveal d2">
	<span class="num" data-count="34654">0</span>
	<div class="label">targets</div>
	<div class="note">subnet nodes + api keys</div>
	</div>
	<div class="stat reveal d3">
	<span class="num" data-count="13">0</span>
	<div class="label">providers</div>
	<div class="note">merged into one endpoint</div>
	</div>
	</div>
	</div>
	</section>

	<!-- =============== HOW IT WORKS =============== -->
	<section class="how">
	<div class="container">
	<div class="section-head reveal d1">
	<h2>one request, a gentle journey</h2>
	<p>The router takes your call, finds a healthy target, and forwards. If something is off, it floats on to the next one.</p>
	</div>

	<div class="journey">
	<div class="step reveal d1">
	<div class="badge">1</div>
	<div>
	<h3>You send one request</h3>
	<p><code>POST /v1/chat/completions</code> with any model name. No provider-specific urls, no key juggling.</p>
	</div>
	</div>
	<div class="step reveal d1">
	<div class="badge">2</div>
	<div>
	<h3>It resolves and round-robins</h3>
	<p>The model name maps to a pool of targets. A thread-safe cursor picks the next healthy one, spreading load evenly.</p>
	</div>
	</div>
	<div class="step reveal d1">
	<div class="badge">3</div>
	<div>
	<h3>It swaps and streams back</h3>
	<p>Your model name is rewritten to the target's upstream id, the key is injected, and the reply streams straight back to you.</p>
	</div>
	</div>
	<div class="step reveal d1">
	<div class="badge">4</div>
	<div>
	<h3>It retries on trouble</h3>
	<p>On <code>401</code>, <code>429</code>, or <code>5xx</code> the target cools for sixty seconds and the router tries the next. Up to five attempts.</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- =============== PROVIDER CONSTELLATION (scroll-pinned) =============== -->
	<section class="constellation" id="providers">
	<div class="container">
	<div class="section-head" data-reveal>
	<h2>thirteen providers, one sky</h2>
	<p>Each one drifts into the same endpoint. Size shows how many targets it carries.</p>
	</div>
	<div class="constellation-stage" data-reveal>
	<div class="node big" style="top:8%; left:6%;" data-c="8,554">NVIDIA<span class="count">8,554</span></div>
	<div class="node big" style="top:4%; left:38%;" data-c="7,785">DashScope<span class="count">7,785</span></div>
	<div class="node big" style="top:12%; left:70%;" data-c="4,758">OpenRouter<span class="count">4,758</span></div>
	<div class="node medium" style="top:34%; left:18%;" data-c="4,114">Gemini<span class="count">4,114</span></div>
	<div class="node medium" style="top:30%; left:48%;" data-c="3,479">Claude subnet<span class="count">3,479</span></div>
	<div class="node medium" style="top:38%; left:74%;" data-c="2,392">MiniMax<span class="count">2,392</span></div>
	<div class="node small" style="top:58%; left:10%;" data-c="1,848">Ollama<span class="count">1,848</span></div>
	<div class="node small" style="top:62%; left:34%;" data-c="602">GLM<span class="count">602</span></div>
	<div class="node small" style="top:60%; left:54%;" data-c="442">DeepSeek<span class="count">442</span></div>
	<div class="node small" style="top:66%; left:72%;" data-c="238">ZAI<span class="count">238</span></div>
	<div class="node small" style="top:82%; left:22%;" data-c="170">Kimi<span class="count">170</span></div>
	<div class="node small" style="top:80%; left:46%;" data-c="167">MiMo<span class="count">167</span></div>
	<div class="node small" style="top:84%; left:66%;" data-c="105">xAI<span class="count">105</span></div>
	</div>
	<p class="constellation-cta" data-reveal>
	<a href="models.html">Browse all 374 models →</a>
	</p>
	</div>
	</section>

	<!-- =============== FEATURES =============== -->
	<section class="features">
	<div class="container">
	<div class="section-head reveal d1">
	<h2>quietly engineered</h2>
	<p>The bits that keep it calm under load.</p>
	</div>

	<div class="feature reveal d1">
	<div class="feature-text">
	<h3>Streaming, filtered</h3>
	<p>SSE replies pass through a filter that strips comment and event lines, so finicky parsers keep up. Non-SSE replies buffer and forward untouched.</p>
	</div>
	<div class="feature-visual">
	<svg class="feature-icon" viewBox="0 0 160 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
	<!-- raw data packets falling in -->
	<rect class="f1-packet p1" x="62" y="14" width="20" height="11" rx="3" fill="#9DAAF2"/>
	<rect class="f1-packet p2" x="84" y="9" width="20" height="11" rx="3" fill="#FF8FAB"/>
	<rect class="f1-packet p3" x="73" y="22" width="20" height="11" rx="3" fill="#FFF5F8" stroke="#9DAAF2" stroke-width="1.6"/>
	<!-- the filter funnel -->
	<path class="f1-funnel" d="M 50,44 L 110,44 L 90,72 L 70,72 Z" fill="#FFF5F8" stroke="#9DAAF2" stroke-width="2.4" stroke-linejoin="round"/>
	<!-- stripped comment lines drifting away -->
	<circle class="f1-stray s1" cx="38" cy="56" r="2.4" fill="#9DAAF2"/>
	<circle class="f1-stray s2" cx="122" cy="62" r="2" fill="#9DAAF2"/>
	<!-- clean filtered stream flowing out -->
	<path class="f1-wave" d="M 48,92 q 8,-9 16,0 t 16,0 t 16,0 t 16,0" fill="none" stroke="#FF8FAB" stroke-width="2.6" stroke-linecap="round"/>
	</svg>
	</div>
	</div>

	<div class="feature reveal d1">
	<div class="feature-text">
	<h3>Round-robin load spread</h3>
	<p>A thread-safe cursor hands out the next healthy target on every call, so traffic spreads evenly across the whole pool.</p>
	</div>
	<div class="feature-visual">
	<svg class="feature-icon" viewBox="0 0 160 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
	<!-- the cycle ring -->
	<circle cx="80" cy="60" r="26" fill="none" stroke="#9DAAF2" stroke-width="1.6" stroke-dasharray="2 5" opacity="0.55"/>
	<!-- clockwise arrowhead -->
	<path d="M 80,29 l 7,5 -6,2 Z" fill="#9DAAF2"/>
	<!-- the four targets -->
	<circle cx="80" cy="34" r="7" fill="#FFF5F8" stroke="#9DAAF2" stroke-width="2"/>
	<circle cx="106" cy="60" r="7" fill="#FFF5F8" stroke="#9DAAF2" stroke-width="2"/>
	<circle cx="80" cy="86" r="7" fill="#FFF5F8" stroke="#9DAAF2" stroke-width="2"/>
	<circle cx="54" cy="60" r="7" fill="#FFF5F8" stroke="#9DAAF2" stroke-width="2"/>
	<!-- cycling highlight (lights each in turn) -->
	<circle class="f2-active a1" cx="80" cy="34" r="7" fill="#FF8FAB"/>
	<circle class="f2-active a2" cx="106" cy="60" r="7" fill="#FF8FAB"/>
	<circle class="f2-active a3" cx="80" cy="86" r="7" fill="#FF8FAB"/>
	<circle class="f2-active a4" cx="54" cy="60" r="7" fill="#FF8FAB"/>
	<!-- cursor hub -->
	<circle cx="80" cy="60" r="3.5" fill="#3D2C4E"/>
	</svg>
	</div>
	</div>

	<div class="feature reveal d1">
	<div class="feature-text">
	<h3>Idempotent cooldowns</h3>
	<p>A bad target is skipped for sixty seconds. Re-failing it never resets the timer, so flapping targets recover instead of looping.</p>
	</div>
	<div class="feature-visual">
	<svg class="feature-icon" viewBox="0 0 160 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
	<!-- containment ring (the parked cooldown) -->
	<circle cx="80" cy="60" r="40" fill="none" stroke="#9DAAF2" stroke-width="1.4" stroke-dasharray="3 7" opacity="0.4"/>
	<!-- snowflake: frozen, stable, won't reset -->
	<g class="f3-snowflake" stroke="#9DAAF2" stroke-width="2.2" stroke-linecap="round" fill="none">
	<g transform="rotate(0 80 60)"><path d="M80,60 L80,28 M80,36 L73,30 M80,36 L87,30 M80,46 L74,41 M80,46 L86,41"/></g>
	<g transform="rotate(60 80 60)"><path d="M80,60 L80,28 M80,36 L73,30 M80,36 L87,30 M80,46 L74,41 M80,46 L86,41"/></g>
	<g transform="rotate(120 80 60)"><path d="M80,60 L80,28 M80,36 L73,30 M80,36 L87,30 M80,46 L74,41 M80,46 L86,41"/></g>
	<g transform="rotate(180 80 60)"><path d="M80,60 L80,28 M80,36 L73,30 M80,36 L87,30 M80,46 L74,41 M80,46 L86,41"/></g>
	<g transform="rotate(240 80 60)"><path d="M80,60 L80,28 M80,36 L73,30 M80,36 L87,30 M80,46 L74,41 M80,46 L86,41"/></g>
	<g transform="rotate(300 80 60)"><path d="M80,60 L80,28 M80,36 L73,30 M80,36 L87,30 M80,46 L74,41 M80,46 L86,41"/></g>
	</g>
	<!-- stable core -->
	<circle cx="80" cy="60" r="3.5" fill="#FF8FAB"/>
	</svg>
	</div>
	</div>

	<div class="feature reveal d1">
	<div class="feature-text">
	<h3>Auth and IP gate</h3>
	<p>Public paths stay open; everything else needs a bearer token. An optional IP allowlist keeps it locked to your subnet.</p>
	</div>
	<div class="feature-visual">
	<svg class="feature-icon" viewBox="0 0 160 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
	<defs>
	<linearGradient id="f4ShieldGrad" x1="0" y1="0" x2="0" y2="1">
	<stop offset="0%" stop-color="#FFFFFF"/>
	<stop offset="55%" stop-color="#FFF5F8"/>
	<stop offset="100%" stop-color="#E8ECFE"/>
	</linearGradient>
	<linearGradient id="f4LockGrad" x1="0" y1="0" x2="0" y2="1">
	<stop offset="0%" stop-color="#B6BFF8"/>
	<stop offset="100%" stop-color="#7E8EE4"/>
	</linearGradient>
	</defs>

	<g class="f4-shield">
	<!-- classic heraldic shield silhouette -->
	<path d="M 50,29 L 110,29 L 110,56 C 110,80 98,95 80,103 C 62,95 50,80 50,56 Z"
	fill="url(#f4ShieldGrad)" stroke="#9DAAF2" stroke-width="2.4" stroke-linejoin="round"/>
	<!-- inner bezel rim (double-bezel depth) -->
	<path d="M 50,29 L 110,29 L 110,56 C 110,80 98,95 80,103 C 62,95 50,80 50,56 Z"
	fill="none" stroke="#FFFFFF" stroke-width="1.3" stroke-linejoin="round"
	opacity="0.75" transform="matrix(0.86 0 0 0.86 11.2 8.4)"/>

	<!-- the padlock (bearer-token auth) -->
	<g class="f4-lock">
	<!-- shackle -->
	<path d="M 71,59 L 71,52 C 71,44 89,44 89,52 L 89,59"
	fill="none" stroke="#7E8EE4" stroke-width="3.6" stroke-linecap="round"/>
	<!-- lock body -->
	<rect x="65" y="56" width="30" height="23" rx="5"
	fill="url(#f4LockGrad)" stroke="#7483D8" stroke-width="1.1"/>
	</g>
	<!-- keyhole (scanning pulse) -->
	<g class="f4-keyhole">
	<circle cx="80" cy="65" r="2.8" fill="#3D2C4E"/>
	<path d="M 78.6,67 L 81.4,67 L 82,74 Q 80,76 78,74 Z" fill="#3D2C4E"/>
	</g>
	</g>

	<!-- allowed sparkles (packets that passed the gate) -->
	<path class="f4-sparkle sp1" d="M 115,29 L 117.4,32.6 L 121,35 L 117.4,37.4 L 115,41 L 112.6,37.4 L 109,35 L 112.6,32.6 Z" fill="#FF8FAB"/>
	<path class="f4-sparkle sp2" d="M 44,69 L 46,72 L 49,74 L 46,76 L 44,79 L 42,76 L 39,74 L 42,72 Z" fill="#FF8FAB"/>
	<path class="f4-sparkle sp3" d="M 118,66 L 119.6,68.4 L 122,70 L 119.6,71.6 L 118,74 L 116.4,71.6 L 114,70 L 116.4,68.4 Z" fill="#FF8FAB"/>
	</svg>
	</div>
	</div>
	</div>
	</section>

	<!-- =============== FINAL CTA =============== -->
	<section class="cta">
	<!-- the return whale glides back across this section (injected by js/whale.js) -->
	<div class="whale-return" data-whale-return></div>

	<div class="container">
	<div class="reveal d1">
	<h2>ready to route?</h2>
	<p class="lead">Point your client at one endpoint. The router handles the rest.</p>
	<div class="endpoint-box">
	<div class="row">
	<code>https://apiarium-labs.hf.space/v1/chat/completions</code>
	<button class="copy-btn" type="button" aria-label="Copy endpoint URL">Copy</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- =============== FOOTER (shared) =============== -->
	<div data-site-footer></div>

	</main>

	<!-- copy-confirmation toast -->
	<div class="toast" role="status" aria-live="polite">Endpoint copied</div>

	<!-- =====================================================================
	SVG SPRITE — reusable cloud symbol (tinted via currentColor)
	===================================================================== -->
	<svg width="0" height="0" style="position:absolute" aria-hidden="true">
	<symbol id="cloud" viewBox="0 0 200 100">
	<path fill="currentColor" d="M44,82 C24,82 18,58 38,53 C32,32 62,26 74,42 C80,22 116,22 122,44 C142,32 168,48 158,68 C172,72 172,90 152,90 L54,90 C40,92 35,88 44,82 Z" />
	</symbol>

	<!-- water-reflection ripple: smooth horizontal bands distort the moon -->
	<filter id="water" x="-30%" y="-30%" width="160%" height="160%">
	<feTurbulence type="fractalNoise" baseFrequency="0.009 0.05" numOctaves="2" seed="7" result="ripple"/>
	<feDisplacementMap in="SourceGraphic" in2="ripple" scale="17" xChannelSelector="R" yChannelSelector="G"/>
	</filter>
	</svg>

	<!-- Scripts (order: layout → motion → main → parallax → whale) -->
	<script src="js/layout.js?v=20260620b"></script>
	<script src="js/motion.js?v=20260620b"></script>
	<script src="js/main.js?v=20260620b"></script>
	<script src="js/parallax.js?v=20260620b"></script>
	<script src="js/whale.js?v=20260620b"></script>

	</body>
	</html>