adaptive-memory-multi-model-router 2.14.49 → 2.14.52

package/docs/cost-comparison-chart.svg

@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" font-family="system-ui, -apple-system, sans-serif">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#0d1117"/>
+      <stop offset="100%" stop-color="#161b22"/>
+    </linearGradient>
+    <linearGradient id="bar1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#3fb950"/>
+      <stop offset="100%" stop-color="#238636"/>
+    </linearGradient>
+    <linearGradient id="bar2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#58a6ff"/>
+      <stop offset="100%" stop-color="#388bfd"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="800" height="500" fill="url(#bg)" rx="12"/>
+  
+  <!-- Title -->
+  <text x="400" y="40" text-anchor="middle" fill="#f0f6fc" font-size="22" font-weight="700">LLM Router Cost Comparison — RouterArena Benchmark</text>
+  <text x="400" y="62" text-anchor="middle" fill="#8b949e" font-size="14">#1 ranked AND cheapest. No tradeoffs.</text>
+
+  <!-- Chart area: x=100, y=80, w=600, h=320 -->
+  <!-- Y-axis -->
+  <line x1="100" y1="80" x2="100" y2="400" stroke="#30363d" stroke-width="1"/>
+  <!-- Y gridlines & labels -->
+  <text x="95" y="405" text-anchor="end" fill="#8b949e" font-size="11">$0</text>
+  <line x1="100" y1="400" x2="700" y2="400" stroke="#30363d" stroke-width="0.5"/>
+  <text x="95" y="325" text-anchor="end" fill="#8b949e" font-size="11">$2</text>
+  <line x1="100" y1="320" x2="700" y2="320" stroke="#30363d" stroke-width="0.5" stroke-dasharray="4"/>
+  <text x="95" y="250" text-anchor="end" fill="#8b949e" font-size="11">$5</text>
+  <line x1="100" y1="245" x2="700" y2="245" stroke="#30363d" stroke-width="0.5" stroke-dasharray="4"/>
+  <text x="95" y="165" text-anchor="end" fill="#8b949e" font-size="11">$8</text>
+  <line x1="100" y1="160" x2="700" y2="160" stroke="#30363d" stroke-width="0.5" stroke-dasharray="4"/>
+  <text x="95" y="85" text-anchor="end" fill="#8b949e" font-size="11">$10</text>
+  <line x1="100" y1="80" x2="700" y2="80" stroke="#30363d" stroke-width="0.5" stroke-dasharray="4"/>
+  
+  <!-- Bars -->
+  <!-- A3M Router: $0.047 → 3.76px (barely visible, so we show 4px min + label) -->
+  <rect x="130" y="396" width="80" height="4" fill="url(#bar1)" rx="2"/>
+  <text x="170" y="392" text-anchor="middle" fill="#3fb950" font-size="13" font-weight="700">$0.047</text>
+  <text x="170" y="420" text-anchor="middle" fill="#f0f6fc" font-size="13" font-weight="600">A3M 🥇</text>
+  <rect x="150" y="428" width="40" height="16" fill="#238636" rx="4"/>
+  <text x="170" y="440" text-anchor="middle" fill="#fff" font-size="9" font-weight="600">76.43</text>
+  
+  <!-- Sqwish: $0.18 → 5.76px -->
+  <rect x="240" y="394" width="80" height="6" fill="url(#bar2)" rx="2"/>
+  <text x="280" y="390" text-anchor="middle" fill="#58a6ff" font-size="13">$0.18</text>
+  <text x="280" y="420" text-anchor="middle" fill="#c9d1d9" font-size="13">Sqwish 🥈</text>
+  <rect x="260" y="428" width="40" height="16" fill="#388bfd" rx="4"/>
+  <text x="280" y="440" text-anchor="middle" fill="#fff" font-size="9">75.27</text>
+  
+  <!-- Azure: $0.22 → 7.04px -->
+  <rect x="350" y="393" width="80" height="7" fill="#6e7681" rx="2"/>
+  <text x="390" y="389" text-anchor="middle" fill="#8b949e" font-size="13">$0.22</text>
+  <text x="390" y="420" text-anchor="middle" fill="#8b949e" font-size="13">Azure 🥉</text>
+  <rect x="370" y="428" width="40" height="16" fill="#6e7681" rx="4"/>
+  <text x="390" y="440" text-anchor="middle" fill="#fff" font-size="9">71.87</text>
+  
+  <!-- RouteLLM: $0.27 → 8.64px -->
+  <rect x="460" y="391" width="80" height="9" fill="#6e7681" rx="2"/>
+  <text x="500" y="387" text-anchor="middle" fill="#8b949e" font-size="13">$0.27</text>
+  <text x="500" y="420" text-anchor="middle" fill="#8b949e" font-size="13">RouteLLM</text>
+  <rect x="480" y="428" width="40" height="16" fill="#6e7681" rx="4"/>
+  <text x="500" y="440" text-anchor="middle" fill="#fff" font-size="9">48.07</text>
+  
+  <!-- GPT-5: $10.02 → 320px (MASSIVE) -->
+  <rect x="570" y="80" width="80" height="320" fill="#da3633" rx="2" opacity="0.8"/>
+  <text x="610" y="75" text-anchor="middle" fill="#f85149" font-size="13" font-weight="700">$10.02</text>
+  <text x="610" y="420" text-anchor="middle" fill="#f85149" font-size="13">GPT-5</text>
+  <rect x="590" y="428" width="40" height="16" fill="#da3633" rx="4"/>
+  <text x="610" y="440" text-anchor="middle" fill="#fff" font-size="9">64.32</text>
+  
+  <!-- Legend -->
+  <text x="150" y="478" fill="#8b949e" font-size="11">Cost per 1K queries</text>
+  <text x="420" y="478" fill="#3fb950" font-size="11">■ = #1 ranked &amp; cheapest</text>
+  <text x="600" y="478" fill="#f85149" font-size="11">■ = 213× more expensive</text>
+  
+  <!-- Callout -->
+  <rect x="320" y="200" width="250" height="60" fill="#161b22" stroke="#3fb950" stroke-width="1" rx="8" opacity="0.95"/>
+  <text x="445" y="222" text-anchor="middle" fill="#f0f6fc" font-size="14" font-weight="700">A3M is 213× cheaper than GPT-5</text>
+  <text x="445" y="245" text-anchor="middle" fill="#3fb950" font-size="12">AND scores 12 points higher</text>
+  
+  <!-- "Try it" CTA -->
+  <rect x="580" y="455" width="200" height="30" fill="#238636" rx="6"/>
+  <text x="680" y="475" text-anchor="middle" fill="#fff" font-size="12" font-weight="600">npx a3m-router route "hi"</text>
+</svg>

package/docs/curl-examples.md

@@ -0,0 +1,247 @@
+# Try A3M Router With One Curl Command
+
+> No install. No signup. Just curl.
+
+Jump to: [Free Providers](#free-providers) | [A3M Proxy](#a3m-proxy-localhost8787) | [Comparison](#quick-provider-comparison) | [NVIDIA NIM Catalog](#nvidia-nim-catalog) | [Diagnostics](#diagnostics--debugging)
+
+---
+
+## Free Providers
+
+Try LLMs right now with a free API key. No credit card required.
+
+### Groq (fastest inference, 30 req/min free)
+
+```bash
+curl -s https://api.groq.com/openai/v1/chat/completions \
+  -H "Authorization: Bearer $GROQ_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "model": "llama-3.3-70b-versatile",
+    "messages": [{"role": "user", "content": "Say hello in exactly 3 words."}]
+  }' | jq -r '.choices[0].message.content'
+```
+
+**Other Groq models:** `llama-3.1-8b-instant`, `mixtral-8x7b-32768`, `gemma2-9b-it`
+
+### NVIDIA NIM (free inference API)
+
+```bash
+curl -s https://integrate.api.nvidia.com/v1/chat/completions \
+  -H "Authorization: Bearer $NV_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "model": "meta/llama-3.3-70b-instruct",
+    "messages": [{"role": "user", "content": "Say hello in exactly 3 words."}]
+  }' | jq -r '.choices[0].message.content'
+```
+
+**Other NIM models:** `mistralai/mistral-7b-instruct-v0.3`, `google/gemma-2-27b-it`, `nvidia/llama-3.1-nemotron-70b-instruct`
+
+> **Get a free NVIDIA API key:** https://build.nvidia.com/
+
+### Cerebras (free, ultra-low latency)
+
+```bash
+curl -s https://api.cerebras.ai/v1/chat/completions \
+  -H "Authorization: Bearer $CEREBRAS_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "model": "llama-3.3-70b",
+    "messages": [{"role": "user", "content": "Say hello in exactly 3 words."}]
+  }' | jq -r '.choices[0].message.content'
+```
+
+### HuggingFace Inference API (free tier)
+
+```bash
+curl -s https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct/v1/chat/completions \
+  -H "Authorization: Bearer $HF_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "messages": [{"role": "user", "content": "Say hello in exactly 3 words."}]
+  }' | jq -r '.choices[0].message.content'
+```
+
+---
+
+## A3M Proxy (localhost:8787)
+
+After `docker compose up` or `npx a3m-router serve`:
+
+### Auto-route (cheapest capable model)
+
+```bash
+curl http://localhost:8787/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -d '{
+    "model": "auto",
+    "messages": [{"role": "user", "content": "What is the capital of France?"}]
+  }'
+```
+
+### Route without executing (preview the decision)
+
+```bash
+curl -X POST http://localhost:8787/v1/route \
+  -H "Content-Type: application/json" \
+  -d '{"query": "Write a Python function to sort a list"}'
+```
+
+Returns model selection, confidence score, estimated cost, and reasoning — without spending a penny.
+
+### List available models
+
+```bash
+curl http://localhost:8787/v1/models | jq '.data[].id'
+```
+
+### Health check
+
+```bash
+curl http://localhost:8787/health | jq '.status'
+```
+
+### Force a specific provider
+
+```bash
+curl http://localhost:8787/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -d '{
+    "model": "groq/llama-3.3-70b-versatile",
+    "messages": [{"role": "user", "content": "Hello!"}]
+  }'
+```
+
+---
+
+## Quick Provider Comparison
+
+Spin up A3M Proxy, then compare responses from different providers to the _same_ prompt:
+
+```bash
+# Terminal 1: start the proxy
+npx a3m-router serve
+```
+
+```bash
+# Terminal 2: compare providers
+for provider in auto groq/llama-3.3-70b-versatile cerebras/llama-3.3-70b; do
+  echo "=== $provider ==="
+  curl -s http://localhost:8787/v1/chat/completions \
+    -H "Content-Type: application/json" \
+    -d "{\"model\": \"$provider\", \"messages\": [{\"role\": \"user\", \"content\": \"Explain quantum entanglement in one sentence.\"}]}" \
+    | jq -r '.choices[0].message.content'
+  echo
+done
+```
+
+Or compare via the [compare-providers.sh](../scripts/compare-providers.sh) script.
+
+---
+
+## NVIDIA NIM Catalog
+
+NVIDIA's build.nvidia.com hosts 100+ free models. Here's the pattern:
+
+```bash
+# Any NIM model follows this URL pattern:
+# POST https://integrate.api.nvidia.com/v1/chat/completions
+# model: "{org}/{model-name}"
+
+# Meta Llama variants
+curl -s https://integrate.api.nvidia.com/v1/chat/completions \
+  -H "Authorization: Bearer $NV_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{"model": "meta/llama-3.1-405b-instruct", "messages": [{"role":"user","content":"Hi"}]}'
+
+# Mistral
+curl -s https://integrate.api.nvidia.com/v1/chat/completions \
+  -H "Authorization: Bearer $NV_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{"model": "mistralai/mistral-7b-instruct-v0.3", "messages": [{"role":"user","content":"Hi"}]}'
+
+# Google Gemma
+curl -s https://integrate.api.nvidia.com/v1/chat/completions \
+  -H "Authorization: Bearer $NV_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{"model": "google/gemma-2-27b-it", "messages": [{"role":"user","content":"Hi"}]}'
+
+# Nemotron (NVIDIA's own)
+curl -s https://integrate.api.nvidia.com/v1/chat/completions \
+  -H "Authorization: Bearer $NV_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{"model": "nvidia/llama-3.1-nemotron-70b-instruct", "messages": [{"role":"user","content":"Hi"}]}'
+```
+
+---
+
+## Diagnostics & Debugging
+
+### See what model A3M chose
+
+The proxy returns the selected `model` in the response:
+
+```bash
+curl -s http://localhost:8787/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -d '{"model":"auto","messages":[{"role":"user","content":"Hello"}]}' \
+  | jq '.model, .choices[0].message.content'
+```
+
+### Check which providers are healthy
+
+```bash
+curl -s http://localhost:8787/health | jq '.providers.details | to_entries[] | select(.value.available == true) | .key'
+```
+
+### Token usage estimate
+
+```bash
+curl -s http://localhost:8787/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -d '{"model":"auto","messages":[{"role":"user","content":"Write a haiku"}]}' \
+  | jq '.usage'
+```
+
+### Cost summary (from A3M analytics)
+
+```bash
+curl -s http://localhost:8787/v1/route \
+  -H "Content-Type: application/json" \
+  -d '{"query":"Write a haiku"}' \
+  | jq '.estimated_cost'
+```
+
+---
+
+## One-Liner Cheat Sheet
+
+```bash
+# Groq — fastest free inference
+curl -s https://api.groq.com/openai/v1/chat/completions -H "Authorization: Bearer $GROQ_API_KEY" -H "Content-Type: application/json" -d '{"model":"llama-3.3-70b-versatile","messages":[{"role":"user","content":"Hi"}]}' | jq -r '.choices[0].message.content'
+
+# NVIDIA NIM — 100+ free models
+curl -s https://integrate.api.nvidia.com/v1/chat/completions -H "Authorization: Bearer $NV_API_KEY" -H "Content-Type: application/json" -d '{"model":"meta/llama-3.3-70b-instruct","messages":[{"role":"user","content":"Hi"}]}' | jq -r '.choices[0].message.content'
+
+# Cerebras — ultra-low latency
+curl -s https://api.cerebras.ai/v1/chat/completions -H "Authorization: Bearer $CEREBRAS_API_KEY" -H "Content-Type: application/json" -d '{"model":"llama-3.3-70b","messages":[{"role":"user","content":"Hi"}]}' | jq -r '.choices[0].message.content'
+
+# A3M Proxy — auto-route to cheapest
+curl http://localhost:8787/v1/chat/completions -H "Content-Type: application/json" -d '{"model":"auto","messages":[{"role":"user","content":"Hi"}]}'
+
+# Preview routing decision
+curl -X POST http://localhost:8787/v1/route -H "Content-Type: application/json" -d '{"query":"Hi"}'
+
+# Health check
+curl http://localhost:8787/health | jq '.status'
+```
+
+---
+
+## Next Steps
+
+- [Full API Reference](API.md)
+- [Quick Start Guide](QUICK_START.md)
+- [Configuration](CONFIGURATION.md)
+- [RunKit Browser Demo](https://runkit.com/npm/adaptive-memory-multi-model-router)

package/docs/demo-auto.html

@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>A3M Router - Auto-Playing Demo</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    
+    body {
+      background: #0d1117;
+      color: #e6edf3;
+      font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    
+    .container { max-width: 900px; width: 100%; }
+    
+    h1 { color: #58a6ff; margin-bottom: 8px; font-size: 1.8rem; }
+    .tagline { color: #8b949e; margin-bottom: 24px; }
+    
+    .scene {
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 12px;
+      padding: 24px;
+      margin: 16px 0;
+      animation: fadeIn 0.5s ease;
+      display: none;
+    }
+    .scene.active { display: block; }
+    
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .line { margin: 6px 0; line-height: 1.5; }
+    .comment { color: #8b949e; }
+    .keyword { color: #ff7b72; }
+    .string { color: #a5d6ff; }
+    
+    .error-text { color: #f85149; }
+    .success-text { color: #3fb950; }
+    .info-text { color: #58a6ff; }
+    .muted { color: #8b949e; }
+    .money { color: #3fb950; font-size: 1.3rem; font-weight: bold; }
+    
+    .box {
+      background: #21262d;
+      border: 1px solid #30363d;
+      border-radius: 8px;
+      padding: 16px;
+      margin: 12px 0;
+    }
+    .box.error { border-color: #f85149; }
+    .box.success { border-color: #3fb950; }
+    
+    .ascii {
+      background: #0d1117;
+      padding: 12px;
+      border-radius: 6px;
+      font-size: 0.85rem;
+      white-space: pre;
+    }
+    
+    .cost-row { display: flex; gap: 16px; margin: 12px 0; }
+    .cost-card {
+      flex: 1;
+      background: #21262d;
+      border-radius: 8px;
+      padding: 16px;
+      text-align: center;
+    }
+    .cost-card.bad { border: 1px solid #f85149; }
+    .cost-card.good { border: 1px solid #3fb950; }
+    .cost-card .amount { font-size: 2rem; font-weight: bold; }
+    .cost-card.bad .amount { color: #f85149; }
+    .cost-card.good .amount { color: #3fb950; }
+    
+    .install-box {
+      background: #161b22;
+      border: 2px solid #58a6ff;
+      border-radius: 12px;
+      padding: 24px;
+      text-align: center;
+    }
+    .install-cmd {
+      background: #0d1117;
+      padding: 12px 24px;
+      border-radius: 6px;
+      font-size: 1rem;
+      color: #3fb950;
+      margin: 12px 0;
+      font-family: monospace;
+    }
+    
+    .footer {
+      margin-top: 24px;
+      color: #8b949e;
+      text-align: center;
+      font-size: 0.85rem;
+    }
+    
+    .progress {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      margin: 20px 0;
+    }
+    .dot {
+      width: 10px; height: 10px;
+      background: #30363d;
+      border-radius: 50%;
+    }
+    .dot.done { background: #58a6ff; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🔀 A3M Router</h1>
+    <p class="tagline">One prompt in. The right model out.</p>
+    
+    <!-- Scene 1 -->
+    <div class="scene active" id="s1">
+      <h2 style="color: #f85149;">❌ Without A3M</h2>
+      <div class="box error">
+        <div class="line comment">#!/bin/bash</div>
+        <div class="line comment"># Your LLM app today</div>
+        <div class="line"></div>
+        <div class="line"><span class="keyword">const</span> response = <span class="keyword">await</span> openai.chat.completions.create({</div>
+        <div class="line">  model: <span class="string">"gpt-4o"</span>, <span class="comment">// Always expensive</span></div>
+        <div class="line">  messages: [{ role: <span class="string">"user"</span>, content: <span class="string">"Explain quantum entanglement"</span> }]</div>
+        <div class="line">});</div>
+      </div>
+      <div class="box error">
+        <div class="line error-text">❌ Problem: $0.015 per request</div>
+        <div class="line error-text">❌ No fallback if OpenAI goes down</div>
+        <div class="line error-text">❌ Manual model selection forever</div>
+      </div>
+    </div>
+    
+    <!-- Scene 2 -->
+    <div class="scene" id="s2">
+      <h2 style="color: #3fb950;">✅ With A3M - One Line Change</h2>
+      <div class="box">
+        <div class="line comment"># With A3M: one line change</div>
+        <div class="line"><span class="keyword">const</span> response = <span class="keyword">await</span> fetch(<span class="string">"http://localhost:8787/v1/chat/completions"</span>, {</div>
+        <div class="line">  method: <span class="string">"POST"</span>,</div>
+        <div class="line">  body: JSON.stringify({</div>
+        <div class="line">    model: <span class="string">"auto"</span>,  <span class="comment">// ← A3M picks the best</span></div>
+        <div class="line">    messages: [{ role: <span class="string">"user"</span>, content: <span class="string">"Explain quantum entanglement"</span> }]</div>
+        <div class="line">  })</div>
+        <div class="line">});</div>
+      </div>
+      <div class="box success">
+        <div class="line info-text">📊 Task: explanation → Complexity: simple → Budget: minimize</div>
+        <div class="line success-text">✅ Routed to: Groq (FREE, 847ms)</div>
+        <div class="line muted">   Cost: $0.00 | Quality: 94%</div>
+      </div>
+    </div>
+    
+    <!-- Scene 3 -->
+    <div class="scene" id="s3">
+      <h2 style="color: #d29922;">🔄 Graceful Failover</h2>
+      <div class="line comment"># A3M gracefully handles provider failures...</div>
+      <div class="ascii">
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  [Groq] — Attempting connection...
+  [Groq] — ✗ FAILED — 503 Service Unavailable
+  [Circuit Breaker] — Tripped after 3 failures
+  [DeepSeek] — HEALTHY — Switching...
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+      </div>
+      <div class="box success">
+        <div class="line success-text">✅ Response delivered via DeepSeek fallback</div>
+        <div class="line muted">   Your app: never knew there was a problem</div>
+      </div>
+    </div>
+    
+    <!-- Scene 4 -->
+    <div class="scene" id="s4">
+      <h2 style="color: #3fb950;">💰 Cost Comparison</h2>
+      <div class="line comment"># Same query. Dramatically different costs.</div>
+      <div class="cost-row">
+        <div class="cost-card bad">
+          <div class="muted">WITHOUT A3M</div>
+          <div class="amount">$0.0015</div>
+          <div class="muted">GPT-4o @ $3.00/1K</div>
+        </div>
+        <div class="cost-card good">
+          <div class="muted">WITH A3M</div>
+          <div class="amount">$0.00</div>
+          <div class="muted">Groq @ $0.00/1K</div>
+        </div>
+      </div>
+      <div class="box success">
+        <div class="line success-text">💰 SAVINGS: 100% per query</div>
+        <div class="line">   At 1000 queries/day → <strong>$1.50 saved daily</strong></div>
+        <div class="line">   At 1000 queries/day → <strong>$547 saved yearly</strong></div>
+      </div>
+    </div>
+    
+    <!-- Scene 5 -->
+    <div class="scene" id="s5">
+      <div class="install-box">
+        <div style="color: #58a6ff; font-size: 1.1rem;">Get started in 10 seconds:</div>
+        <div class="install-cmd">npm install -g adaptive-memory-multi-model-router</div>
+        <div class="muted"># Auto-detects your API keys, zero config</div>
+        <div class="install-cmd" style="color: #58a6ff;">npx a3m-router serve</div>
+        <div class="muted"># Change: model: 'gpt-4o' → model: 'auto'</div>
+      </div>
+      <div style="text-align: center; margin-top: 24px;">
+        <div class="muted">🔗 github.com/Das-rebel/a3m-router</div>
+        <div class="muted">📦 npmjs.com/package/adaptive-memory-multi-model-router</div>
+      </div>
+      <div style="text-align: center; margin-top: 24px; color: #a371f7; font-size: 1.2rem;">
+        ✨ One prompt in. The right model out. ✨
+      </div>
+    </div>
+    
+    <div class="progress">
+      <div class="dot done" id="d1"></div>
+      <div class="dot" id="d2"></div>
+      <div class="dot" id="d3"></div>
+      <div class="dot" id="d4"></div>
+      <div class="dot" id="d5"></div>
+    </div>
+    
+    <div class="footer">
+      Open Source LLM Router • 47+ Providers • Budget Enforcement • Semantic Cache
+    </div>
+  </div>
+  
+  <script>
+    // Auto-playing demo - no button needed
+    const scenes = 5;
+    const delay = 8000; // 8 seconds per scene
+    
+    function showScene(n) {
+      document.querySelectorAll('.scene').forEach(s => s.classList.remove('active'));
+      document.querySelectorAll('.dot').forEach(d => d.classList.remove('done'));
+      
+      document.getElementById('s' + n).classList.add('active');
+      for (let i = 1; i <= n; i++) {
+        document.getElementById('d' + i).classList.add('done');
+      }
+    }
+    
+    let current = 1;
+    showScene(current);
+    
+    setInterval(() => {
+      current = current % scenes + 1;
+      showScene(current);
+    }, delay);
+  </script>
+</body>
+</html>