Skip to content

Commit c224f68

Browse files
Subhajit dasSubhajit das
Subhajit das
authored and
Subhajit das
committed
docs: Add auto-playing demo without button dependency
1 parent 174fd8e commit c224f68

1 file changed

Lines changed: 264 additions & 0 deletions

File tree

‎docs/demo-auto.html‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>A3M Router - Auto-Playing Demo</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
10+
body {
11+
background: #0d1117;
12+
color: #e6edf3;
13+
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace;
14+
min-height: 100vh;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
justify-content: center;
19+
padding: 20px;
20+
}
21+
22+
.container { max-width: 900px; width: 100%; }
23+
24+
h1 { color: #58a6ff; margin-bottom: 8px; font-size: 1.8rem; }
25+
.tagline { color: #8b949e; margin-bottom: 24px; }
26+
27+
.scene {
28+
background: #161b22;
29+
border: 1px solid #30363d;
30+
border-radius: 12px;
31+
padding: 24px;
32+
margin: 16px 0;
33+
animation: fadeIn 0.5s ease;
34+
display: none;
35+
}
36+
.scene.active { display: block; }
37+
38+
@keyframes fadeIn {
39+
from { opacity: 0; transform: translateY(20px); }
40+
to { opacity: 1; transform: translateY(0); }
41+
}
42+
43+
.line { margin: 6px 0; line-height: 1.5; }
44+
.comment { color: #8b949e; }
45+
.keyword { color: #ff7b72; }
46+
.string { color: #a5d6ff; }
47+
48+
.error-text { color: #f85149; }
49+
.success-text { color: #3fb950; }
50+
.info-text { color: #58a6ff; }
51+
.muted { color: #8b949e; }
52+
.money { color: #3fb950; font-size: 1.3rem; font-weight: bold; }
53+
54+
.box {
55+
background: #21262d;
56+
border: 1px solid #30363d;
57+
border-radius: 8px;
58+
padding: 16px;
59+
margin: 12px 0;
60+
}
61+
.box.error { border-color: #f85149; }
62+
.box.success { border-color: #3fb950; }
63+
64+
.ascii {
65+
background: #0d1117;
66+
padding: 12px;
67+
border-radius: 6px;
68+
font-size: 0.85rem;
69+
white-space: pre;
70+
}
71+
72+
.cost-row { display: flex; gap: 16px; margin: 12px 0; }
73+
.cost-card {
74+
flex: 1;
75+
background: #21262d;
76+
border-radius: 8px;
77+
padding: 16px;
78+
text-align: center;
79+
}
80+
.cost-card.bad { border: 1px solid #f85149; }
81+
.cost-card.good { border: 1px solid #3fb950; }
82+
.cost-card .amount { font-size: 2rem; font-weight: bold; }
83+
.cost-card.bad .amount { color: #f85149; }
84+
.cost-card.good .amount { color: #3fb950; }
85+
86+
.install-box {
87+
background: #161b22;
88+
border: 2px solid #58a6ff;
89+
border-radius: 12px;
90+
padding: 24px;
91+
text-align: center;
92+
}
93+
.install-cmd {
94+
background: #0d1117;
95+
padding: 12px 24px;
96+
border-radius: 6px;
97+
font-size: 1rem;
98+
color: #3fb950;
99+
margin: 12px 0;
100+
font-family: monospace;
101+
}
102+
103+
.footer {
104+
margin-top: 24px;
105+
color: #8b949e;
106+
text-align: center;
107+
font-size: 0.85rem;
108+
}
109+
110+
.progress {
111+
display: flex;
112+
gap: 8px;
113+
justify-content: center;
114+
margin: 20px 0;
115+
}
116+
.dot {
117+
width: 10px; height: 10px;
118+
background: #30363d;
119+
border-radius: 50%;
120+
}
121+
.dot.done { background: #58a6ff; }
122+
</style>
123+
</head>
124+
<body>
125+
<div class="container">
126+
<h1>🔀 A3M Router</h1>
127+
<p class="tagline">One prompt in. The right model out.</p>
128+
129+
<!-- Scene 1 -->
130+
<div class="scene active" id="s1">
131+
<h2 style="color: #f85149;">❌ Without A3M</h2>
132+
<div class="box error">
133+
<div class="line comment">#!/bin/bash</div>
134+
<div class="line comment"># Your LLM app today</div>
135+
<div class="line"></div>
136+
<div class="line"><span class="keyword">const</span> response = <span class="keyword">await</span> openai.chat.completions.create({</div>
137+
<div class="line"> model: <span class="string">"gpt-4o"</span>, <span class="comment">// Always expensive</span></div>
138+
<div class="line"> messages: [{ role: <span class="string">"user"</span>, content: <span class="string">"Explain quantum entanglement"</span> }]</div>
139+
<div class="line">});</div>
140+
</div>
141+
<div class="box error">
142+
<div class="line error-text">❌ Problem: $0.015 per request</div>
143+
<div class="line error-text">❌ No fallback if OpenAI goes down</div>
144+
<div class="line error-text">❌ Manual model selection forever</div>
145+
</div>
146+
</div>
147+
148+
<!-- Scene 2 -->
149+
<div class="scene" id="s2">
150+
<h2 style="color: #3fb950;">✅ With A3M - One Line Change</h2>
151+
<div class="box">
152+
<div class="line comment"># With A3M: one line change</div>
153+
<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>
154+
<div class="line"> method: <span class="string">"POST"</span>,</div>
155+
<div class="line"> body: JSON.stringify({</div>
156+
<div class="line"> model: <span class="string">"auto"</span>, <span class="comment">// ← A3M picks the best</span></div>
157+
<div class="line"> messages: [{ role: <span class="string">"user"</span>, content: <span class="string">"Explain quantum entanglement"</span> }]</div>
158+
<div class="line"> })</div>
159+
<div class="line">});</div>
160+
</div>
161+
<div class="box success">
162+
<div class="line info-text">📊 Task: explanation → Complexity: simple → Budget: minimize</div>
163+
<div class="line success-text">✅ Routed to: Groq (FREE, 847ms)</div>
164+
<div class="line muted"> Cost: $0.00 | Quality: 94%</div>
165+
</div>
166+
</div>
167+
168+
<!-- Scene 3 -->
169+
<div class="scene" id="s3">
170+
<h2 style="color: #d29922;">🔄 Graceful Failover</h2>
171+
<div class="line comment"># A3M gracefully handles provider failures...</div>
172+
<div class="ascii">
173+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
174+
[Groq] — Attempting connection...
175+
[Groq] — ✗ FAILED — 503 Service Unavailable
176+
[Circuit Breaker] — Tripped after 3 failures
177+
[DeepSeek] — HEALTHY — Switching...
178+
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
179+
</div>
180+
<div class="box success">
181+
<div class="line success-text">✅ Response delivered via DeepSeek fallback</div>
182+
<div class="line muted"> Your app: never knew there was a problem</div>
183+
</div>
184+
</div>
185+
186+
<!-- Scene 4 -->
187+
<div class="scene" id="s4">
188+
<h2 style="color: #3fb950;">💰 Cost Comparison</h2>
189+
<div class="line comment"># Same query. Dramatically different costs.</div>
190+
<div class="cost-row">
191+
<div class="cost-card bad">
192+
<div class="muted">WITHOUT A3M</div>
193+
<div class="amount">$0.0015</div>
194+
<div class="muted">GPT-4o @ $3.00/1K</div>
195+
</div>
196+
<div class="cost-card good">
197+
<div class="muted">WITH A3M</div>
198+
<div class="amount">$0.00</div>
199+
<div class="muted">Groq @ $0.00/1K</div>
200+
</div>
201+
</div>
202+
<div class="box success">
203+
<div class="line success-text">💰 SAVINGS: 100% per query</div>
204+
<div class="line"> At 1000 queries/day → <strong>$1.50 saved daily</strong></div>
205+
<div class="line"> At 1000 queries/day → <strong>$547 saved yearly</strong></div>
206+
</div>
207+
</div>
208+
209+
<!-- Scene 5 -->
210+
<div class="scene" id="s5">
211+
<div class="install-box">
212+
<div style="color: #58a6ff; font-size: 1.1rem;">Get started in 10 seconds:</div>
213+
<div class="install-cmd">npm install -g adaptive-memory-multi-model-router</div>
214+
<div class="muted"># Auto-detects your API keys, zero config</div>
215+
<div class="install-cmd" style="color: #58a6ff;">npx a3m-router serve</div>
216+
<div class="muted"># Change: model: 'gpt-4o' → model: 'auto'</div>
217+
</div>
218+
<div style="text-align: center; margin-top: 24px;">
219+
<div class="muted">🔗 github.com/Das-rebel/adaptive-memory-multi-model-router</div>
220+
<div class="muted">📦 npmjs.com/package/adaptive-memory-multi-model-router</div>
221+
</div>
222+
<div style="text-align: center; margin-top: 24px; color: #a371f7; font-size: 1.2rem;">
223+
✨ One prompt in. The right model out. ✨
224+
</div>
225+
</div>
226+
227+
<div class="progress">
228+
<div class="dot done" id="d1"></div>
229+
<div class="dot" id="d2"></div>
230+
<div class="dot" id="d3"></div>
231+
<div class="dot" id="d4"></div>
232+
<div class="dot" id="d5"></div>
233+
</div>
234+
235+
<div class="footer">
236+
Open Source LLM Router • 47+ Providers • Budget Enforcement • Semantic Cache
237+
</div>
238+
</div>
239+
240+
<script>
241+
// Auto-playing demo - no button needed
242+
const scenes = 5;
243+
const delay = 8000; // 8 seconds per scene
244+
245+
function showScene(n) {
246+
document.querySelectorAll('.scene').forEach(s => s.classList.remove('active'));
247+
document.querySelectorAll('.dot').forEach(d => d.classList.remove('done'));
248+
249+
document.getElementById('s' + n).classList.add('active');
250+
for (let i = 1; i <= n; i++) {
251+
document.getElementById('d' + i).classList.add('done');
252+
}
253+
}
254+
255+
let current = 1;
256+
showScene(current);
257+
258+
setInterval(() => {
259+
current = current % scenes + 1;
260+
showScene(current);
261+
}, delay);
262+
</script>
263+
</body>
264+
</html>

0 commit comments

Comments
 (0)