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

package/articles/youtube-tutorial-script.md

@@ -0,0 +1,262 @@
+# YouTube Tutorial Script: A3M Router - Smart LLM Routing
+
+## Video Title Options
+1. "Cut Your OpenAI Bill by 70% with Intelligent LLM Routing"
+2. "A3M Router: The Smart Way to Use Multiple LLM Providers"
+3. "Stop Overpaying for LLMs - Automatic Cost Optimization"
+4. "Build a Learned LLM Router in 10 Minutes"
+
+## Video Info
+- **Target Length**: 10-12 minutes
+- **Target Audience**: Node.js developers using LLMs
+- **Difficulty**: Beginner to Intermediate
+
+---
+
+## Intro (0:00 - 1:00)
+
+**[Screen: Terminal with high OpenAI bill]**
+
+"If you're using OpenAI for everything, you're probably overpaying. In this video, I'll show you how we cut our LLM API costs by 70% using intelligent routing."
+
+**[Screen: A3M Router logo/banner]**
+
+"This is A3M Router - an adaptive multi-model router that automatically sends your queries to the cheapest capable provider. Let's dive in."
+
+---
+
+## The Problem (1:00 - 2:30)
+
+**[Screen: Code showing GPT-4 usage]**
+
+"Here's what most developers do. They use GPT-4 for EVERYTHING."
+
+```javascript
+// Bad: Using GPT-4 for everything
+const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
+
+// Simple question
+await openai.chat.completions.create({
+  model: "gpt-4",
+  messages: [{ role: "user", content: "What is 2+2?" }]
+});
+// Cost: $0.03
+
+// Code generation
+await openai.chat.completions.create({
+  model: "gpt-4",
+  messages: [{ role: "user", content: "Write Python to sort an array" }]
+});
+// Cost: $0.05
+```
+
+**[Screen: Calculator showing monthly cost]**
+
+"If you process 1,000 queries per day, that's $30-50 per day. $900-1,500 per month. Just for simple queries that any model could handle."
+
+---
+
+## The Solution (2:30 - 4:00)
+
+**[Screen: A3M Router architecture diagram]**
+
+"A3M Router solves this with learned routing. It analyzes your query and picks the optimal provider."
+
+"Here's the magic:"
+
+```javascript
+// Good: Using A3M Router
+const { createA3MRouter } = require('adaptive-memory-multi-model-router');
+
+const router = createA3MRouter();
+
+// Simple question → cheapest provider (FREE)
+const result1 = await router.route("What is 2+2?");
+console.log(result1.primary_model); // "commandcode/taste-1"
+console.log(result1.estimated_cost);  // $0.00
+
+// Code generation → fast provider
+const result2 = await router.route("Write Python to sort an array");
+console.log(result2.primary_model); // "groq/llama-3.3-70b"
+console.log(result2.estimated_cost);  // $0.0004
+```
+
+**[Screen: Side-by-side cost comparison]**
+
+"See the difference? Simple queries go to free providers. Code queries go to fast, code-capable models. You only pay for what you need."
+
+---
+
+## Installation & Setup (4:00 - 5:30)
+
+**[Screen: Terminal recording]**
+
+"Let's install it and see it in action."
+
+```bash
+# Install
+npm install adaptive-memory-multi-model-router
+
+# Check providers
+npx a3m-router providers
+```
+
+**[Screen: Provider table output]**
+
+"Look at that - 9 providers configured out of the box. Groq, Cerebras, Mistral, and free CLI providers like CommandCode and OpenCode."
+
+"Now let's route a query:"
+
+```bash
+npx a3m-router route "Write Python to reverse a string"
+```
+
+**[Screen: Routing result]**
+
+"Boom! It automatically selected Groq's Llama model because it's fast and good at code. Estimated cost: $0.0004. That's 75x cheaper than GPT-4."
+
+---
+
+## How Routing Works (5:30 - 7:00)
+
+**[Screen: Routing algorithm visualization]**
+
+"Here's how the routing actually works:"
+
+"Step 1: Feature Extraction"
+- Detects code patterns (function, class, import)
+- Detects math notation
+- Detects language/translation needs
+- Estimates complexity
+
+"Step 2: Model Profiles"
+- Each provider has cost, latency, quality scores
+- Groq: fast, cheap, good at code
+- Mistral: high quality, moderate cost
+- CommandCode: free, good for simple queries
+
+"Step 3: Smart Selection"
+- Simple queries → prioritize cost
+- Complex queries → prioritize quality
+- Automatic fallback if provider fails
+
+**[Screen: Code showing routing result]**
+
+```javascript
+const result = await router.route("Your query");
+
+console.log(result);
+// {
+//   primary_model: "groq/llama-3.3-70b",
+//   fallback_models: ["mistral/medium", "cerebras/llama"],
+//   estimated_cost: 0.0004,
+//   confidence: 0.85,
+//   reasoning: "Selected Groq for code detected"
+// }
+```
+
+---
+
+## Real Results (7:00 - 8:30)
+
+**[Screen: Benchmark table]**
+
+"Let's run the benchmark to see real performance:"
+
+```bash
+npx a3m-router benchmark
+```
+
+**[Screen: Benchmark output]**
+
+"Look at these results:"
+
+| Provider | Latency | Cost/1K | Quality |
+|----------|---------|---------|---------|
+| Groq | 400ms | $0.59 | 82% |
+| Cerebras | 350ms | $0.60 | 82% |
+| Mistral | 800ms | $0.20 | 90% |
+| CommandCode | 5s | FREE | 75% |
+
+"For simple queries, CommandCode is FREE. For code, Groq is 5x faster than OpenAI. For quality, Mistral beats GPT-3.5 at half the price."
+
+---
+
+## Advanced Features (8:30 - 9:30)
+
+**[Screen: Code examples]**
+
+"A3M Router has more tricks up its sleeve:"
+
+"Batch Processing:"
+```javascript
+const queries = ["Q1", "Q2", "Q3"];
+const results = routeBatch(queries, { same_model: true });
+```
+
+"Cost Tracking:"
+```javascript
+const router = createA3MRouter();
+const summary = router.costTracker.getSummary();
+console.log(`Total spent: $${summary.totalSpent}`);
+```
+
+"Custom Providers:"
+```javascript
+registerProvider('my-provider', {
+  baseUrl: 'https://api.myprovider.com',
+  models: ['my-model'],
+  type: 'api'
+});
+```
+
+---
+
+## Conclusion (9:30 - 10:30)
+
+**[Screen: Summary slide]**
+
+"To summarize:"
+
+"✅ Install: npm install adaptive-memory-multi-model-router"
+"✅ Route: npx a3m-router route 'Your query'"
+"✅ Save: 50-80% on API costs"
+"✅ Get: Automatic fallback, cost tracking, batch processing"
+
+**[Screen: GitHub and NPM links]**
+
+"Links in the description:
+- GitHub: github.com/Das-rebel/a3m-router
+- NPM: npmjs.com/package/adaptive-memory-multi-model-router
+- Docs: Full documentation on GitHub"
+
+**[Screen: Subscribe button]**
+
+"If this helped you save money on LLM APIs, hit like and subscribe. Questions? Drop them in the comments. Thanks for watching!"
+
+---
+
+## Video Assets Needed
+
+1. **Thumbnail**: Split screen - "$2,400" vs "$720" with A3M Router logo
+2. **Intro Animation**: 5-second logo animation
+3. **Terminal Recording**: Actual CLI usage
+4. **Diagram**: Routing architecture (can use ASCII art)
+5. **Benchmark Table**: Animated comparison
+6. **Outro Screen**: Links and subscribe button
+
+## B-Roll Footage
+
+- Terminal typing (can use asciinema)
+- Code scrolling
+- Provider logos (Groq, Mistral, etc.)
+- Money/cost graphics
+- Speedometer for latency
+
+## Call to Action
+
+- Like the video
+- Subscribe for more
+- Comment with questions
+- Star on GitHub
+- Try the package

package/assets/banner.svg

@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" width="1200" height="400">
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0f172a;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#1e1b4b;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#312e81;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
+    </linearGradient>
+    <filter id="glowBanner">
+      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/>
+    </pattern>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="1200" height="400" fill="url(#bgGradient)"/>
+  <rect width="1200" height="400" fill="url(#grid)"/>
+  
+  <!-- Animated Particles -->
+  <g opacity="0.3">
+    <circle cx="100" cy="100" r="2" fill="#6366f1">
+      <animate attributeName="cy" values="100;120;100" dur="4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.3;0.6;0.3" dur="4s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="300" cy="300" r="3" fill="#8b5cf6">
+      <animate attributeName="cy" values="300;280;300" dur="5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.3;0.7;0.3" dur="5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="900" cy="150" r="2" fill="#06b6d4">
+      <animate attributeName="cy" values="150;170;150" dur="3s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.3;0.5;0.3" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="1100" cy="350" r="3" fill="#10b981">
+      <animate attributeName="cy" values="350;330;350" dur="6s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.3;0.6;0.3" dur="6s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+  
+  <!-- Main Logo Icon -->
+  <g transform="translate(150, 200)">
+    <circle cx="0" cy="0" r="60" fill="none" stroke="url(#accentGradient)" stroke-width="2" opacity="0.3"/>
+    <circle cx="0" cy="0" r="50" fill="none" stroke="url(#accentGradient)" stroke-width="1" opacity="0.2" stroke-dasharray="5 5">
+      <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="20s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="0" cy="0" r="20" fill="url(#accentGradient)" filter="url(#glowBanner)"/>
+    <circle cx="0" cy="-35" r="8" fill="#6366f1" opacity="0.9">
+      <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="8s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="30" cy="18" r="6" fill="#10b981" opacity="0.9">
+      <animateTransform attributeName="transform" type="rotate" from="120 0 0" to="480 0 0" dur="10s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="-30" cy="18" r="6" fill="#f59e0b" opacity="0.9">
+      <animateTransform attributeName="transform" type="rotate" from="240 0 0" to="600 0 0" dur="12s" repeatCount="indefinite"/>
+    </circle>
+    <text x="0" y="8" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="bold" fill="white" text-anchor="middle">A3M</text>
+  </g>
+  
+  <!-- Title -->
+  <text x="600" y="160" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="bold" fill="white" text-anchor="middle" filter="url(#glowBanner)">A3M Router</text>
+  
+  <!-- Subtitle -->
+  <text x="600" y="210" font-family="system-ui, -apple-system, sans-serif" font-size="28" fill="url(#accentGradient)" text-anchor="middle">Adaptive Memory Multi-Model Router</text>
+  
+  <!-- Tagline -->
+  <text x="600" y="250" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#94a3b8" text-anchor="middle">Route LLM queries to optimal providers • Save 50-80% on API costs</text>
+  
+  <!-- Stats Bar -->
+  <g transform="translate(600, 320)">
+    <rect x="-350" y="0" width="700" height="50" rx="25" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+    
+    <!-- Stat 1 -->
+    <text x="-280" y="32" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#6366f1" text-anchor="middle">872+</text>
+    <text x="-280" y="48" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#64748b" text-anchor="middle">Weekly Downloads</text>
+    
+    <!-- Divider -->
+    <line x1="-200" y1="10" x2="-200" y2="40" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+    
+    <!-- Stat 2 -->
+    <text x="-100" y="32" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#10b981" text-anchor="middle">12</text>
+    <text x="-100" y="48" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#64748b" text-anchor="middle">LLM Providers</text>
+    
+    <!-- Divider -->
+    <line x1="0" y1="10" x2="0" y2="40" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+    
+    <!-- Stat 3 -->
+    <text x="100" y="32" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#f59e0b" text-anchor="middle">116</text>
+    <text x="100" y="48" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#64748b" text-anchor="middle">Integrations</text>
+    
+    <!-- Divider -->
+    <line x1="200" y1="10" x2="200" y2="40" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+    
+    <!-- Stat 4 -->
+    <text x="280" y="32" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#8b5cf6" text-anchor="middle">33</text>
+    <text x="280" y="48" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#64748b" text-anchor="middle">Tests Passing</text>
+  </g>
+  
+  <!-- Bottom Gradient Line -->
+  <rect x="0" y="395" width="1200" height="5" fill="url(#accentGradient)"/>
+</svg>

package/assets/chart-cost-v2.svg

@@ -0,0 +1,91 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 400" width="700" height="400">
+  <defs>
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a0f1c"/>
+      <stop offset="100%" stop-color="#111827"/>
+    </linearGradient>
+    <linearGradient id="openaiGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#2472e8"/>
+      <stop offset="100%" stop-color="#1a5bc4"/>
+    </linearGradient>
+    <linearGradient id="a3mGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#10b981"/>
+      <stop offset="100%" stop-color="#059669"/>
+    </linearGradient>
+    <linearGradient id="savingsGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#10b981"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+    
+    <!-- Glow filter -->
+    <filter id="barGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    
+    <!-- Grid pattern -->
+    <pattern id="gridPattern" width="50" height="50" patternUnits="userSpaceOnUse">
+      <path d="M 50 0 L 0 0 0 50" fill="none" stroke="#1f2937" stroke-width="0.5" opacity="0.4"/>
+    </pattern>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="700" height="400" fill="url(#bgGrad)"/>
+  <rect width="700" height="400" fill="url(#gridPattern)"/>
+  
+  <!-- Header -->
+  <text x="350" y="38" text-anchor="middle" fill="#f9fafb" font-family="system-ui,-apple-system,sans-serif" font-size="22" font-weight="700">Cost Comparison — 100 Mixed Queries</text>
+  <text x="350" y="60" text-anchor="middle" fill="#6b7280" font-family="system-ui,sans-serif" font-size="13">Code, math, creative, translation tasks</text>
+  
+  <!-- Chart area: x=100..650, y=100..350 -->
+  
+  <!-- Y-axis labels -->
+  <g fill="#6b7280" font-family="system-ui,sans-serif" font-size="12" text-anchor="end">
+    <text x="85" y="350">$0</text>
+    <text x="85" y="280">$5</text>
+    <text x="85" y="210">$10</text>
+    <text x="85" y="140">$15</text>
+    <text x="85" y="100">$20</text>
+  </g>
+  
+  <!-- Y-axis grid lines -->
+  <g stroke="#1f2937" stroke-width="1" stroke-dasharray="3,3">
+    <line x1="100" y1="280" x2="650" y2="280"/>
+    <line x1="100" y1="210" x2="650" y2="210"/>
+    <line x1="100" y1="140" x2="650" y2="140"/>
+  </g>
+  
+  <!-- Axes -->
+  <line x1="100" y1="350" x2="650" y2="350" stroke="#374151" stroke-width="2"/>
+  <line x1="100" y1="100" x2="100" y2="350" stroke="#374151" stroke-width="2"/>
+  
+  <!-- OpenAI Bar (GPT-4) -->
+  <g filter="url(#barGlow)">
+    <rect x="150" y="105" width="130" height="245" rx="8" fill="url(#openaiGrad)"/>
+  </g>
+  <text x="215" y="90" text-anchor="middle" fill="#60a5fa" font-family="system-ui,sans-serif" font-size="16" font-weight="600">$15.00</text>
+  <text x="215" y="375" text-anchor="middle" fill="#f9fafb" font-family="system-ui,sans-serif" font-size="15" font-weight="600">GPT-4</text>
+  <text x="215" y="392" text-anchor="middle" fill="#6b7280" font-family="system-ui,sans-serif" font-size="11">$0.15/1K tokens</text>
+  
+  <!-- A3M Bar (routed) -->
+  <g filter="url(#barGlow)">
+    <rect x="420" y="280" width="130" height="70" rx="8" fill="url(#a3mGrad)"/>
+  </g>
+  <text x="485" y="265" text-anchor="middle" fill="#10b981" font-family="system-ui,sans-serif" font-size="16" font-weight="600">$5.75</text>
+  <text x="485" y="375" text-anchor="middle" fill="#f9fafb" font-family="system-ui,sans-serif" font-size="15" font-weight="600">A3M Router</text>
+  <text x="485" y="392" text-anchor="middle" fill="#6b7280" font-family="system-ui,sans-serif" font-size="11">auto-routed</text>
+  
+  <!-- Savings badge -->
+  <g transform="translate(280, 175)">
+    <rect x="0" y="0" width="140" height="60" rx="30" fill="url(#savingsGrad)" fill-opacity="0.15" stroke="url(#savingsGrad)" stroke-width="1.5"/>
+    <text x="70" y="28" text-anchor="middle" fill="#10b981" font-family="system-ui,sans-serif" font-size="20" font-weight="800">-62%</text>
+    <text x="70" y="48" text-anchor="middle" fill="#6b7280" font-family="system-ui,sans-serif" font-size="11">savings</text>
+  </g>
+  
+  <!-- Arrow connecting bars to savings -->
+  <path d="M215,200 L310,205" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4,4" fill="none"/>
+  <path d="M485,200 L420,205" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4,4" fill="none"/>
+  
+  <!-- Bottom note -->
+  <text x="350" y="388" text-anchor="middle" fill="#4b5563" font-family="system-ui,sans-serif" font-size="11">Actual benchmark results • May 2026</text>
+</svg>

package/assets/chart-cost-v3.svg

@@ -0,0 +1,143 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 450" width="700" height="450">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0a0a0f"/>
+      <stop offset="50%" stop-color="#12121a"/>
+      <stop offset="100%" stop-color="#1a1a2e"/>
+    </linearGradient>
+    
+    <!-- GPT-4 gradient -->
+    <linearGradient id="gpt4Grad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#3b82f6"/>
+      <stop offset="100%" stop-color="#1d4ed8"/>
+    </linearGradient>
+    
+    <!-- A3M gradient with shimmer -->
+    <linearGradient id="a3mGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#10b981">
+        <animate attributeName="stop-color" values="#10b981;#34d399;#10b981" dur="3s" repeatCount="indefinite"/>
+      </stop>
+      <stop offset="100%" stop-color="#059669"/>
+    </linearGradient>
+    
+    <!-- Savings badge gradient -->
+    <linearGradient id="savingsGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#10b981"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+    
+    <!-- Glow filter -->
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="5" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    
+    <!-- Bar glow -->
+    <filter id="barGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    
+    <!-- Grid pattern -->
+    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.04"/>
+    </pattern>
+  </defs>
+  
+  <style>
+    @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 20px 5px rgba(16, 185, 129, 0.2); } }
+    @keyframes countUp { from { opacity: 0; } to { opacity: 1; } }
+    .title { animation: fadeIn 0.6s ease-out; }
+    .bar-group { animation: slideUp 0.8s ease-out; animation-fill-mode: both; }
+    .gpt4-bar { animation: slideUp 0.8s ease-out 0.1s both; }
+    .a3m-bar { animation: slideUp 0.8s ease-out 0.3s both; }
+    .savings { animation: slideUp 0.8s ease-out 0.5s both; }
+  </style>
+  
+  <!-- Background -->
+  <rect width="700" height="450" fill="url(#bg)"/>
+  <rect width="700" height="450" fill="url(#grid)"/>
+  
+  <!-- Ambient glow -->
+  <ellipse cx="350" cy="225" rx="300" ry="200" fill="#3b82f6" opacity="0.03" filter="url(#glow)"/>
+  <ellipse cx="350" cy="300" rx="200" ry="100" fill="#10b981" opacity="0.05" filter="url(#glow)"/>
+  
+  <!-- Header -->
+  <g class="title">
+    <text x="350" y="42" text-anchor="middle" fill="#ffffff" font-family="system-ui,-apple-system,sans-serif" font-size="26" font-weight="700">
+      Cost Comparison
+    </text>
+    <text x="350" y="65" text-anchor="middle" fill="#8888aa" font-family="system-ui,sans-serif" font-size="13">
+      100 mixed queries • Code, math, creative, translation
+    </text>
+  </g>
+  
+  <!-- Chart area -->
+  <g transform="translate(80, 100)">
+    <!-- Y-axis labels -->
+    <g fill="#666688" font-family="system-ui,sans-serif" font-size="12" text-anchor="end">
+      <text x="55" y="255">$0</text>
+      <text x="55" y="195">$5</text>
+      <text x="55" y="135">$10</text>
+      <text x="55" y="75">$15</text>
+      <text x="55" y="40">$20</text>
+    </g>
+    
+    <!-- Y-axis grid -->
+    <g stroke="#ffffff" stroke-opacity="0.06" stroke-dasharray="4,4">
+      <line x1="70" y1="190" x2="540" y2="190"/>
+      <line x1="70" y1="130" x2="540" y2="130"/>
+      <line x1="70" y1="70" x2="540" y2="70"/>
+    </g>
+    
+    <!-- Axes -->
+    <line x1="70" y1="250" x2="540" y2="250" stroke="#444466" stroke-width="2"/>
+    <line x1="70" y1="30" x2="70" y2="250" stroke="#444466" stroke-width="2"/>
+    
+    <!-- GPT-4 Bar with glow -->
+    <g class="gpt4-bar" filter="url(#barGlow)">
+      <rect x="130" y="65" width="110" height="185" rx="8" fill="url(#gpt4Grad)" class="bar">
+        <animate attributeName="height" values="0;185;185" dur="1s" ease-out" fill="freeze"/>
+        <animate attributeName="y" values="250;65;65" dur="1s" ease-out" fill="freeze"/>
+      </rect>
+      <!-- Shine effect -->
+      <rect x="130" y="65" width="55" height="185" rx="8" fill="#ffffff" fill-opacity="0.1"/>
+    </g>
+    <text x="185" y="50" text-anchor="middle" fill="#60a5fa" font-family="system-ui,sans-serif" font-size="18" font-weight="700">$15.00</text>
+    <text x="185" y="275" text-anchor="middle" fill="#ffffff" font-family="system-ui,sans-serif" font-size="15" font-weight="600">GPT-4</text>
+    <text x="185" y="292" text-anchor="middle" fill="#666688" font-family="system-ui,sans-serif" font-size="11">$0.15/1K tokens</text>
+    
+    <!-- A3M Bar with glow -->
+    <g class="a3m-bar" filter="url(#barGlow)">
+      <rect x="380" y="200" width="110" height="50" rx="8" fill="url(#a3mGrad)" class="bar">
+        <animate attributeName="height" values="0;50;50" dur="1s" ease-out" fill="freeze"/>
+        <animate attributeName="y" values="250;200;200" dur="1s" ease-out" fill="freeze"/>
+      </rect>
+      <!-- Shine effect -->
+      <rect x="380" y="200" width="55" height="50" rx="8" fill="#ffffff" fill-opacity="0.15"/>
+    </g>
+    <text x="435" y="185" text-anchor="middle" fill="#10b981" font-family="system-ui,sans-serif" font-size="18" font-weight="700">$5.75</text>
+    <text x="435" y="275" text-anchor="middle" fill="#ffffff" font-family="system-ui,sans-serif" font-size="15" font-weight="600">A3M Router</text>
+    <text x="435" y="292" text-anchor="middle" fill="#666688" font-family="system-ui,sans-serif" font-size="11">auto-routed</text>
+    
+    <!-- Savings badge -->
+    <g class="savings">
+      <rect x="230" y="115" width="160" height="65" rx="32" fill="url(#savingsGrad)" fill-opacity="0.15" stroke="url(#savingsGrad)" stroke-width="1.5" filter="url(#glow)"/>
+      <text x="310" y="145" text-anchor="middle" fill="#10b981" font-family="system-ui,sans-serif" font-size="26" font-weight="800">-62%</text>
+      <text x="310" y="168" text-anchor="middle" fill="#8888aa" font-family="system-ui,sans-serif" font-size="12">savings per query</text>
+    </g>
+    
+    <!-- Connection lines -->
+    <path d="M185,130 L260,148" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4,4" fill="none" opacity="0.6"/>
+    <path d="M435,175 L390,148" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4,4" fill="none" opacity="0.6"/>
+  </g>
+  
+  <!-- Bottom info -->
+  <g transform="translate(0, 400)">
+    <text x="350" y="20" text-anchor="middle" fill="#555577" font-family="system-ui,sans-serif" font-size="11">
+      Based on actual benchmark • May 2026 • Real provider pricing
+    </text>
+  </g>
+</svg>