Hugging Face's logo

Spaces:
vishnurama
/
finnie
Sleeping

App Files Community
finnie
File size: 24,448 Bytes
d8a60cc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Finnie — AI Finance Assistant</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Segoe UI',system-ui,sans-serif;background:#07090f;color:#e8eaf0;height:100vh;overflow:hidden;user-select:none}

  #deck{width:100vw;height:100vh;position:relative}
  .slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 72px;opacity:0;pointer-events:none;transition:opacity .3s ease}
  .slide.active{opacity:1;pointer-events:all}

  .label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#4ade80;margin-bottom:10px;align-self:flex-start}
  h1{font-size:3.2rem;font-weight:800;color:#fff;line-height:1.1}
  h2{font-size:1.9rem;font-weight:700;color:#fff;align-self:flex-start;margin-bottom:22px}
  p{font-size:.98rem;line-height:1.65;color:#9aa3b8}

  .badge{display:inline-block;background:#111827;border:1px solid #1e3050;border-radius:6px;padding:4px 13px;font-size:.8rem;color:#4ade80;margin:3px}
  .accent{width:72px;height:4px;background:linear-gradient(90deg,#4ade80,#22d3ee);border-radius:2px;margin:20px 0}

  /* ── Slide 2: tabs ── */
  .tab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%;max-width:860px;margin-bottom:22px}
  .tab-card{background:#0d1526;border:1px solid #1e2d50;border-radius:14px;padding:22px 20px}
  .tab-card h3{font-size:1rem;font-weight:700;color:#4ade80;margin-bottom:8px}
  .tab-card p{font-size:.87rem;color:#8892a4;line-height:1.55}

  .agent-row{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:860px}
  .agent-pill{background:#111827;border:1px solid #1e3050;border-radius:20px;padding:5px 14px;font-size:.82rem;color:#c8ccd8}
  .agent-pill span{color:#4ade80;font-weight:600}

  /* ── Slide 3: arch ── */
  .arch{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:860px}
  .arch-row{display:flex;align-items:stretch;justify-content:center;width:100%;gap:8px}
  .arch-box{background:#0d1526;border:1px solid #1e2d50;border-radius:10px;padding:12px 18px;text-align:center;flex:1}
  .arch-box.main{border-color:#4ade80;background:#081a0e}
  .arch-box.llm{border-color:#7dd3fc;background:#071624}
  .arch-box h4{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:3px}
  .arch-box p{font-size:.76rem;color:#6b7a99}
  .arch-arrow{display:flex;align-items:center;justify-content:center;height:28px;color:#4ade80;font-size:1.3rem}
  .arch-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#4ade80;margin-bottom:5px;align-self:flex-start}

  /* ── Slide 4: graph ── */
  .graph-wrap{width:100%;max-width:880px;display:flex;flex-direction:column;align-items:center}

  /* ── Slide 5 ── */
  .demo-list{width:100%;max-width:760px}
  .demo-item{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-bottom:1px solid #111827}
  .demo-item:last-child{border-bottom:none}
  .demo-num{background:#4ade80;color:#07090f;font-weight:800;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8rem;margin-top:1px}
  .demo-tab{font-size:.72rem;background:#1a2540;color:#7dd3fc;border-radius:4px;padding:2px 7px;font-weight:700;margin-right:7px}
  .demo-item p{font-size:.93rem;color:#9aa3b8}
  .demo-item strong{color:#fff}
  .agents-badge{font-size:.68rem;background:#081a0e;border:1px solid #1e3050;border-radius:10px;padding:2px 7px;color:#4ade80;margin-left:6px;white-space:nowrap}

  /* ── Controls ── */
  #controls{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;background:#0d1526cc;backdrop-filter:blur(8px);border:1px solid #1e293b;border-radius:40px;padding:9px 22px}
  button{background:none;border:none;color:#4ade80;font-size:1.25rem;cursor:pointer;padding:3px 7px;border-radius:6px;transition:background .2s;line-height:1}
  button:hover{background:#1a2540}
  button:disabled{color:#2a3a60;cursor:default}
  button:disabled:hover{background:none}
  #counter{font-size:.82rem;color:#8892a4;min-width:48px;text-align:center}
  #progress{position:fixed;top:0;left:0;height:3px;background:#4ade80;transition:width .3s ease}
</style>
</head>
<body>
<div id="progress"></div>
<div id="deck">

<!-- ══════════════════════════════════════════════════════
     SLIDE 1 · TITLE
══════════════════════════════════════════════════════ -->
<div class="slide active">
  <div style="max-width:820px;width:100%">
    <div class="label">Interview Kickstart · Applied Agentic AI for SWEs · Capstone</div>
    <h1>Finnie</h1>
    <h1 style="color:#4ade80">AI Finance Education<br/>Assistant</h1>
    <div class="accent"></div>
    <p style="font-size:1.1rem;max-width:580px;margin-bottom:24px">
      A conversational multi-agent system with hybrid orchestration — routes every query
      to two or more specialized agents, then synthesizes a single coherent answer.
    </p>
    <div>
      <span class="badge">LangGraph</span>
      <span class="badge">LangChain</span>
      <span class="badge">RAG</span>
      <span class="badge">Pydantic</span>
      <span class="badge">yfinance</span>
      <span class="badge">Alpha Vantage</span>
      <span class="badge">Streamlit</span>
      <span class="badge">Hugging Face Spaces</span>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════
     SLIDE 2 · WHAT IT DOES
══════════════════════════════════════════════════════ -->
<div class="slide">
  <div style="width:100%;max-width:860px">
    <div class="label">Product</div>
    <h2>Three Tabs, Six Agents</h2>

    <div class="tab-grid">
      <div class="tab-card">
        <h3>💬 Chat</h3>
        <p>Conversational interface with memory across turns. Always routes to ≥ 2 agents. Agent badges show exactly which specialists answered.</p>
      </div>
      <div class="tab-card">
        <h3>📊 Portfolio</h3>
        <p>Paste holdings in any format. LLM parses it, fetches live prices, scores diversification, shows sector breakdown with charts.</p>
      </div>
      <div class="tab-card">
        <h3>📈 Market</h3>
        <p>Real-time quote for any company — ticker or name. 52-week range gauge, 30-day price history chart, AI narrative analysis.</p>
      </div>
    </div>

    <p style="font-size:.82rem;color:#4ade80;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px">Six Specialized Agents</p>
    <div class="agent-row">
      <div class="agent-pill"><span>QA</span> Financial knowledge RAG</div>
      <div class="agent-pill"><span>Portfolio</span> Live analysis + scoring</div>
      <div class="agent-pill"><span>Market</span> Real-time data + 52w/P/E</div>
      <div class="agent-pill"><span>Goal</span> Savings plan math</div>
      <div class="agent-pill"><span>News</span> Headlines + sentiment</div>
      <div class="agent-pill"><span>Tax</span> Capital gains, IRA, 401k</div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════
     SLIDE 3 · SYSTEM ARCHITECTURE
══════════════════════════════════════════════════════ -->
<div class="slide">
  <div style="width:100%;max-width:860px">
    <div class="label">Architecture</div>
    <h2>System Design</h2>

    <div class="arch">

      <!-- User -->
      <div class="arch-row">
        <div class="arch-box" style="max-width:280px;border-color:#4ade80;background:#081a0e">
          <h4 style="color:#4ade80">👤 User</h4>
          <p>Browser — Hugging Face Spaces</p>
        </div>
      </div>
      <div class="arch-arrow">↓</div>

      <!-- Streamlit -->
      <div class="arch-row">
        <div class="arch-box main" style="border-color:#22d3ee;background:#061820">
          <h4 style="color:#22d3ee">Streamlit Web App</h4>
          <p>Chat tab · Portfolio tab · Market tab</p>
        </div>
      </div>
      <div class="arch-arrow">↓</div>

      <!-- Router -->
      <div class="arch-row">
        <div class="arch-box" style="border-color:#fbbf24;background:#0f0e04;max-width:680px">
          <h4 style="color:#fbbf24">chat_invoke() — Hybrid Router</h4>
          <p>19 keyword patterns → Smart Fan-Out (parallel ≥ 2 agents)&nbsp;&nbsp;·&nbsp;&nbsp;context-dependent keywords → ReAct (sequential)</p>
        </div>
      </div>
      <div class="arch-arrow" style="gap:60px;display:flex;font-size:.9rem;color:#fbbf24">
        <span>↙ fan-out</span><span>↘ sequential</span>
      </div>

      <!-- Two LangGraph boxes -->
      <div class="arch-row">
        <div class="arch-box main">
          <h4 style="color:#4ade80">Smart Fan-Out Graph</h4>
          <p>Param Extractor → Smart Fan-Out Node → Tools (parallel) → Synth</p>
        </div>
        <div class="arch-box" style="border-color:#7dd3fc;background:#071624">
          <h4 style="color:#7dd3fc">ReAct Graph</h4>
          <p>Param Extractor → Agent Node ⟷ Tool Node · MemorySaver per session</p>
        </div>
      </div>
      <div class="arch-arrow">↓</div>

      <!-- Agents -->
      <div class="arch-row">
        <div class="arch-box"><h4>QA</h4><p>RAG</p></div>
        <div class="arch-box"><h4>Portfolio</h4><p>yfinance</p></div>
        <div class="arch-box"><h4>Market</h4><p>Alpha Vantage</p></div>
        <div class="arch-box"><h4>Goal</h4><p>Math</p></div>
        <div class="arch-box"><h4>News</h4><p>RSS feeds</p></div>
        <div class="arch-box"><h4>Tax</h4><p>Rules</p></div>
      </div>
      <div class="arch-arrow">↓</div>

      <!-- External -->
      <div class="arch-row">
        <div class="arch-box llm"><h4 style="color:#7dd3fc">Claude (Anthropic)</h4><p>LLM · structured output · tool routing</p></div>
        <div class="arch-box" style="border-color:#a78bfa;background:#0e0a1e"><h4 style="color:#a78bfa">Vector Store</h4><p>RAG knowledge base</p></div>
        <div class="arch-box"><h4>Market APIs</h4><p>yfinance · Alpha Vantage</p></div>
      </div>

    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════
     SLIDE 4 · BOTH LANGGRAPH GRAPHS
══════════════════════════════════════════════════════ -->
<div class="slide">
  <div class="graph-wrap">
    <div class="label">Workflow</div>
    <h2>Two LangGraph Paths · Hybrid Routing</h2>

    <svg viewBox="0 0 880 308" style="width:100%;max-width:880px;overflow:visible" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <marker id="ag" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#4ade80"/></marker>
        <marker id="ap" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#c084fc"/></marker>
        <marker id="ar" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#f87171"/></marker>
        <marker id="ab" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#7dd3fc"/></marker>
      </defs>

      <!-- Center divider -->
      <line x1="440" y1="0" x2="440" y2="308" stroke="#1e2d50" stroke-width="1" stroke-dasharray="4 4"/>

      <!-- ════════════ LEFT: SMART FAN-OUT ════════════ -->
      <text x="213" y="13" text-anchor="middle" fill="#4ade80" font-size="10.5" font-weight="700" letter-spacing=".08em">SMART FAN-OUT  ·  DEFAULT PATH</text>

      <!-- START -->
      <circle cx="213" cy="36" r="17" fill="#081a0e" stroke="#4ade80" stroke-width="2"/>
      <text x="213" y="39" text-anchor="middle" fill="#4ade80" font-size="9" font-weight="700">START</text>

      <!-- Param Extractor -->
      <rect x="103" y="59" width="220" height="40" rx="7" fill="#0d1526" stroke="#4ade80" stroke-width="1.5"/>
      <text x="213" y="77" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Param Extractor</text>
      <text x="213" y="92" text-anchor="middle" fill="#6b7a99" font-size="9">goal · savings · risk · portfolio · age</text>

      <!-- Smart Fan-Out Node -->
      <rect x="78" y="112" width="270" height="42" rx="7" fill="#081a0e" stroke="#4ade80" stroke-width="2"/>
      <text x="213" y="131" text-anchor="middle" fill="#4ade80" font-size="11" font-weight="700">Smart Fan-Out Node</text>
      <text x="213" y="147" text-anchor="middle" fill="#6b7a99" font-size="9">LLM selects ≥ 2 tools via 9 routing rules</text>

      <!-- parallel label -->
      <text x="213" y="166" text-anchor="middle" fill="#c084fc" font-size="8" font-style="italic">── parallel execution ──</text>

      <!-- Tool A / B / C -->
      <rect x="18"  y="170" width="114" height="36" rx="6" fill="#0d1526" stroke="#c084fc" stroke-width="1.3"/>
      <text x="75"  y="186" text-anchor="middle" fill="#fff" font-size="10" font-weight="600">Tool A</text>
      <text x="75"  y="199" text-anchor="middle" fill="#6b7a99" font-size="8.5">e.g. analyze_portfolio</text>

      <rect x="149" y="170" width="126" height="36" rx="6" fill="#0d1526" stroke="#c084fc" stroke-width="1.3"/>
      <text x="212" y="186" text-anchor="middle" fill="#fff" font-size="10" font-weight="600">Tool B</text>
      <text x="212" y="199" text-anchor="middle" fill="#6b7a99" font-size="8.5">e.g. plan_financial_goal</text>

      <rect x="292" y="170" width="114" height="36" rx="6" fill="#0d1526" stroke="#c084fc" stroke-width="1.3"/>
      <text x="349" y="186" text-anchor="middle" fill="#fff" font-size="10" font-weight="600">Tool C</text>
      <text x="349" y="199" text-anchor="middle" fill="#6b7a99" font-size="8.5">e.g. get_tax_education</text>

      <!-- Synth Node -->
      <rect x="100" y="222" width="226" height="40" rx="7" fill="#071624" stroke="#7dd3fc" stroke-width="1.5"/>
      <text x="213" y="240" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Synth Node</text>
      <text x="213" y="255" text-anchor="middle" fill="#6b7a99" font-size="9">LLM merges all results → one answer</text>

      <!-- END -->
      <circle cx="213" cy="285" r="15" fill="#1a0a0a" stroke="#f87171" stroke-width="2"/>
      <text x="213" y="289" text-anchor="middle" fill="#f87171" font-size="9" font-weight="700">END</text>

      <!-- LEFT arrows -->
      <line x1="213" y1="53" x2="213" y2="59" stroke="#4ade80" stroke-width="1.8" marker-end="url(#ag)"/>
      <line x1="213" y1="99" x2="213" y2="112" stroke="#4ade80" stroke-width="1.8" marker-end="url(#ag)"/>
      <!-- fan-out (SmartFanOut → tools) -->
      <line x1="140" y1="154" x2="86"  y2="170" stroke="#c084fc" stroke-width="1.5" marker-end="url(#ap)"/>
      <line x1="213" y1="154" x2="213" y2="170" stroke="#c084fc" stroke-width="1.5" marker-end="url(#ap)"/>
      <line x1="283" y1="154" x2="337" y2="170" stroke="#c084fc" stroke-width="1.5" marker-end="url(#ap)"/>
      <!-- fan-in (tools → Synth) -->
      <line x1="86"  y1="206" x2="148" y2="222" stroke="#c084fc" stroke-width="1.5" marker-end="url(#ap)"/>
      <line x1="213" y1="206" x2="213" y2="222" stroke="#c084fc" stroke-width="1.5" marker-end="url(#ap)"/>
      <line x1="337" y1="206" x2="277" y2="222" stroke="#c084fc" stroke-width="1.5" marker-end="url(#ap)"/>
      <!-- Synth → END -->
      <line x1="213" y1="262" x2="213" y2="270" stroke="#f87171" stroke-width="1.8" marker-end="url(#ar)"/>

      <!-- ════════════ RIGHT: REACT ════════════ -->
      <text x="660" y="13" text-anchor="middle" fill="#7dd3fc" font-size="10.5" font-weight="700" letter-spacing=".08em">REACT SEQUENTIAL  ·  CONTEXT PATH</text>
      <text x="660" y="25" text-anchor="middle" fill="#3d5070" font-size="8.5">P/E · rate hike · dividend · 52-week · drops · allocation · compare</text>

      <!-- START -->
      <circle cx="660" cy="44" r="17" fill="#081a0e" stroke="#4ade80" stroke-width="2"/>
      <text x="660" y="47" text-anchor="middle" fill="#4ade80" font-size="9" font-weight="700">START</text>

      <!-- Param Extractor -->
      <rect x="550" y="67" width="220" height="40" rx="7" fill="#0d1526" stroke="#4ade80" stroke-width="1.5"/>
      <text x="660" y="85" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Param Extractor</text>
      <text x="660" y="100" text-anchor="middle" fill="#6b7a99" font-size="9">goal · savings · risk · portfolio · age</text>

      <!-- Agent Node -->
      <rect x="545" y="123" width="230" height="48" rx="7" fill="#071624" stroke="#7dd3fc" stroke-width="2"/>
      <text x="660" y="143" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Agent Node</text>
      <text x="660" y="159" text-anchor="middle" fill="#6b7a99" font-size="9">Claude LLM · bound tools · must call ≥ 2</text>

      <!-- Tool Node -->
      <rect x="545" y="205" width="230" height="44" rx="7" fill="#120a20" stroke="#c084fc" stroke-width="1.5"/>
      <text x="660" y="226" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Tool Node</text>
      <text x="660" y="241" text-anchor="middle" fill="#6b7a99" font-size="9">executes chosen agent · result feeds back</text>

      <!-- END (right of Agent) -->
      <circle cx="834" cy="147" r="17" fill="#1a0a0a" stroke="#f87171" stroke-width="2"/>
      <text x="834" y="151" text-anchor="middle" fill="#f87171" font-size="9" font-weight="700">END</text>
      <text x="834" y="172" text-anchor="middle" fill="#f87171" font-size="7.5">final answer</text>

      <!-- RIGHT arrows -->
      <line x1="660" y1="61" x2="660" y2="67" stroke="#4ade80" stroke-width="1.8" marker-end="url(#ag)"/>
      <line x1="660" y1="107" x2="660" y2="123" stroke="#4ade80" stroke-width="1.8" marker-end="url(#ag)"/>
      <!-- Agent → END (no tool call) red -->
      <line x1="775" y1="147" x2="815" y2="147" stroke="#f87171" stroke-width="1.8" marker-end="url(#ar)"/>
      <rect x="769" y="130" width="66" height="13" rx="3" fill="#07090f"/>
      <text x="802" y="141" text-anchor="middle" fill="#f87171" font-size="8">no tool call</text>
      <!-- Agent → Tool (tool call) purple down -->
      <line x1="660" y1="171" x2="660" y2="205" stroke="#c084fc" stroke-width="1.8" marker-end="url(#ap)"/>
      <rect x="665" y="181" width="52" height="13" rx="3" fill="#07090f"/>
      <text x="691" y="192" text-anchor="middle" fill="#c084fc" font-size="8">tool call</text>
      <!-- Tool → Agent loop (left side) -->
      <path d="M 545 227 Q 492 227 492 147 L 543 147" stroke="#c084fc" stroke-width="1.8" fill="none" marker-end="url(#ap)"/>
      <rect x="459" y="186" width="46" height="24" rx="3" fill="#07090f"/>
      <text x="482" y="197" text-anchor="middle" fill="#c084fc" font-size="7.5">result</text>
      <text x="482" y="207" text-anchor="middle" fill="#c084fc" font-size="7.5">→ loop</text>

    </svg>

    <div style="text-align:center;margin-top:10px">
      <span class="badge">chat_invoke()</span>
      <span style="color:#9aa3b8;font-size:.8rem;margin:0 8px">routes via 19 keyword patterns · both graphs share</span>
      <span class="badge">MemorySaver</span>
      <span style="color:#9aa3b8;font-size:.8rem;margin:0 8px">state · portfolio · age across turns</span>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════
     SLIDE 5 · DEMO + THANK YOU
══════════════════════════════════════════════════════ -->
<div class="slide">
  <div style="width:100%;max-width:820px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start">

    <div>
      <div class="label">Live Demo</div>
      <h2 style="font-size:1.5rem;margin-bottom:16px">Demo Flow</h2>
      <div class="demo-list">
        <div class="demo-item">
          <div class="demo-num">1</div>
          <div><p><span class="demo-tab">Chat</span><strong>General Q&amp;A</strong><span class="agents-badge">QA + Goal</span><br/>"What is compound interest?" — RAG + educational context</p></div>
        </div>
        <div class="demo-item">
          <div class="demo-num">2</div>
          <div><p><span class="demo-tab">Chat</span><strong>Retirement goal — aggressive risk</strong><span class="agents-badge">Goal + Tax</span><br/>"I'm 50, have $600K, want $3M in 20 years — am I on track?"</p></div>
        </div>
        <div class="demo-item">
          <div class="demo-num">3</div>
          <div><p><span class="demo-tab">Chat</span><strong>Portfolio + market scenario</strong><span class="agents-badge">Portfolio + Market</span><br/>"AAPL:100, NVDA:50, MSFT:200 — if Nvidia drops 15%, how am I affected?"</p></div>
        </div>
        <div class="demo-item">
          <div class="demo-num">4</div>
          <div><p><span class="demo-tab">Portfolio</span><strong>Live diversification analysis</strong><br/>Paste any format — sector charts, diversification score, live prices</p></div>
        </div>
        <div class="demo-item">
          <div class="demo-num">5</div>
          <div><p><span class="demo-tab">Chat</span><strong>401k projection mode</strong><span class="agents-badge">Goal + Tax</span><br/>"I'm 25, $7K/yr 401k + $11K employer match. How much by 2050?"</p></div>
        </div>
      </div>
    </div>

    <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px">
      <div style="font-size:3rem">💚</div>
      <h1 style="font-size:2.4rem">Thank You</h1>
      <div class="accent" style="align-self:center"></div>
      <p style="font-size:.95rem;max-width:300px">Built end-to-end for the Applied Agentic AI for SWEs capstone at Interview Kickstart</p>
      <p style="color:#4ade80;font-size:1.1rem;font-weight:700;margin-top:8px">Questions?</p>
      <div style="margin-top:12px">
        <span class="badge">LangGraph</span>
        <span class="badge">Claude</span>
        <span class="badge">RAG</span>
        <span class="badge">Streamlit</span>
      </div>
    </div>

  </div>
</div>

</div><!-- /deck -->

<!-- Controls -->
<div id="controls">
  <button id="prev" onclick="go(-1)" disabled>&#8592;</button>
  <span id="counter">1 / 5</span>
  <button id="next" onclick="go(1)">&#8594;</button>
</div>

<script>
  const slides = document.querySelectorAll('.slide');
  const total  = slides.length;
  let cur = 0;

  function go(d) {
    slides[cur].classList.remove('active');
    cur = Math.max(0, Math.min(total - 1, cur + d));
    slides[cur].classList.add('active');
    document.getElementById('counter').textContent = `${cur + 1} / ${total}`;
    document.getElementById('prev').disabled = cur === 0;
    document.getElementById('next').disabled = cur === total - 1;
    document.getElementById('progress').style.width = `${((cur + 1) / total) * 100}%`;
  }

  document.addEventListener('keydown', e => {
    if (e.key === 'ArrowRight' || e.key === ' ') go(1);
    if (e.key === 'ArrowLeft')                   go(-1);
  });

  let tx = 0;
  document.addEventListener('touchstart', e => { tx = e.touches[0].clientX; });
  document.addEventListener('touchend',   e => { const d = e.changedTouches[0].clientX - tx; if (Math.abs(d) > 50) go(d < 0 ? 1 : -1); });

  document.getElementById('progress').style.width = `${(1/total)*100}%`;
</script>
</body>
</html>