adaptive-memory-multi-model-router 2.14.46 → 2.14.48

package/articles/youtube-tutorial-script.md

@@ -1,262 +0,0 @@
-# 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

@@ -1,109 +0,0 @@
-<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

@@ -1,91 +0,0 @@
-<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

@@ -1,143 +0,0 @@
-<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>