Hugging Face's logo

Spaces:
mnoorchenar
/
langgraph-support-agent
Sleeping

App Files Community
langgraph-support-agent
File size: 40,921 Bytes
945cec1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>LangGraph Support Agent Studio · Mohammad Noorchenarboo</title>
<script>document.documentElement.setAttribute('data-theme',localStorage.getItem('mn-theme')||'dark')</script>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234f8ef7'/%3E%3Cstop offset='100%25' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='%23070d1f'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='central' text-anchor='middle' font-family='Segoe UI' font-weight='900' font-size='26' fill='url(%23g)'%3EMN%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<style>
:root{--accent:#4f8ef7;--gold:#f59e0b;--teal:#06b6d4;--green:#22c55e;--radius:14px;--body-bg:#070d1f;--text:#e2e8f0;--muted:#8892a4;--glass:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.08);--card-hover-bg:rgba(255,255,255,.07);--card-hover-border:rgba(79,142,247,.3);--section-alt:#0b1120}
[data-theme="light"]{--body-bg:#f8fafc;--text:#0f172a;--muted:#4b5675;--glass:rgba(0,0,0,.03);--glass-border:rgba(0,0,0,.08);--card-hover-bg:rgba(0,0,0,.05);--card-hover-border:rgba(37,99,235,.25);--section-alt:#f1f5f9}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--body-bg);color:var(--text);transition:background .35s,color .35s}
a{text-decoration:none}
.s-tag{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:3px 10px;border-radius:6px;margin-bottom:10px}
.s-tag-blue{background:rgba(79,142,247,.12);color:var(--accent);border:1px solid rgba(79,142,247,.2)}
.s-tag-gold{background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.2)}
.s-tag-teal{background:rgba(6,182,212,.12);color:var(--teal);border:1px solid rgba(6,182,212,.2)}
.grad-text{background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero{padding:80px 24px 56px;background:var(--body-bg);position:relative;overflow:hidden;transition:background .35s}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 55% at 50% -10%,rgba(79,142,247,.15) 0%,transparent 65%)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(79,142,247,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(79,142,247,.035) 1px,transparent 1px);background-size:48px 48px}
.hero-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.breadcrumb{font-size:.78rem;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted);transition:.2s}.breadcrumb a:hover{color:var(--accent)}.breadcrumb span{opacity:.4}
.tag-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:.04em}
.pill-blue{background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.25);color:var(--accent)}
.pill-gold{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:var(--gold)}
.pill-teal{background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.25);color:var(--teal)}
h1{font-size:clamp(1.7rem,3.5vw,2.7rem);font-weight:900;line-height:1.2;margin-bottom:20px;max-width:820px}
.hero-sub{font-size:1rem;color:var(--muted);max-width:680px;margin-bottom:28px;line-height:1.65}
.hero-sub strong{color:var(--text)}
.hero-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:24px;font-size:.83rem;color:var(--muted)}
.hero-meta span{display:flex;align-items:center;gap:6px}
.hero-meta i{color:var(--accent)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .2s;font-family:inherit;text-decoration:none}
.btn-blue{background:rgba(79,142,247,.18);color:var(--accent);border-color:rgba(79,142,247,.35)}.btn-blue:hover{background:rgba(79,142,247,.3);transform:translateY(-2px)}
.btn-gold{background:rgba(245,158,11,.15);color:var(--gold);border-color:rgba(245,158,11,.35)}.btn-gold:hover{background:rgba(245,158,11,.28);transform:translateY(-2px)}
.btn-gray{background:var(--glass);color:var(--text);border-color:var(--glass-border)}.btn-gray:hover{background:var(--card-hover-bg);transform:translateY(-2px)}
.btn-back{background:var(--glass);color:var(--muted);border-color:var(--glass-border)}.btn-back:hover{color:var(--accent);border-color:var(--card-hover-border);transform:translateY(-2px)}
.stats-bar{background:var(--section-alt);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--glass-border)}
.stat-item{background:var(--section-alt);padding:22px 16px;text-align:center}
.stat-val{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:4px}
.stat-label{font-size:.75rem;color:var(--muted);line-height:1.4}
.main-layout{max-width:1100px;margin:0 auto;padding:48px 24px;display:grid;grid-template-columns:1fr 310px;gap:32px;align-items:start}
.content-col{display:flex;flex-direction:column;gap:28px}
.sidebar{position:sticky;top:80px;display:flex;flex-direction:column;gap:20px}
.card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:28px;transition:all .25s}
.card:hover{background:var(--card-hover-bg);border-color:var(--card-hover-border);transform:translateY(-3px)}
.card-title{font-size:1rem;font-weight:800;margin-bottom:18px;color:var(--text);display:flex;align-items:center;gap:10px}
.card-title i{color:var(--accent);font-size:.9rem}
.narrative{font-size:.92rem;color:var(--muted);margin-bottom:10px;line-height:1.7}
.narrative strong{color:var(--text)}
.pipeline{display:flex;align-items:stretch;gap:0;margin:20px 0;overflow-x:auto;padding-bottom:4px}
.pipe-step{flex:1;min-width:110px;background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:14px 8px;text-align:center;transition:.25s}
.pipe-step:hover{background:var(--card-hover-bg);border-color:var(--card-hover-border);transform:translateY(-3px)}
.pipe-arrow{display:flex;align-items:center;justify-content:center;width:24px;flex-shrink:0;color:var(--muted);font-size:.75rem;padding-top:8px}
.pipe-icon{font-size:1.6rem;margin-bottom:7px;line-height:1}
.pipe-label{font-size:.72rem;font-weight:700;color:var(--text);margin-bottom:3px}
.pipe-sub{font-size:.67rem;color:var(--muted);line-height:1.4}
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.mod-card{border-radius:12px;padding:18px;border:1px solid;transition:.25s}
.mod-card:hover{transform:translateY(-3px)}
.mod-1{background:rgba(79,142,247,.05);border-color:rgba(79,142,247,.2)}
.mod-2{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.18)}
.mod-3{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.18)}
.mod-4{background:rgba(6,182,212,.05);border-color:rgba(6,182,212,.18)}
.mod-5{background:rgba(167,139,250,.05);border-color:rgba(167,139,250,.2)}
.mod-6{background:rgba(34,197,94,.05);border-color:rgba(34,197,94,.18)}
.mod-badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:7px;margin-bottom:7px}
.mod-name{font-size:.9rem;font-weight:800;margin-bottom:4px;color:var(--text)}
.mod-desc{font-size:.75rem;color:var(--muted);line-height:1.5;margin-bottom:9px}
.mod-detail{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--glass-border);font-size:.74rem}
.mod-detail:last-child{border-bottom:none}
.mod-detail-key{color:var(--muted)}
.insight-banner{background:linear-gradient(135deg,rgba(79,142,247,.07),rgba(245,158,11,.07));border:1px solid rgba(79,142,247,.22);border-radius:var(--radius);padding:20px;margin-top:8px;display:flex;gap:14px;align-items:flex-start}
.insight-icon{font-size:1.8rem;flex-shrink:0}
.insight-body h4{font-size:.93rem;font-weight:800;color:var(--text);margin-bottom:4px}
.insight-body p{font-size:.83rem;color:var(--muted);line-height:1.6}
.insight-body strong{color:var(--accent)}
.item-stack{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.item-row{display:flex;align-items:center;gap:11px;padding:10px 13px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;font-size:.81rem;transition:.2s}
.item-row:hover{background:var(--card-hover-bg)}
.item-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.item-name{color:var(--text);font-weight:600;flex:1}
.item-sub{font-size:.7rem;color:var(--muted)}
.item-tag{font-size:.68rem;padding:2px 8px;border-radius:6px;font-weight:700;white-space:nowrap}
.tag-blue{background:rgba(79,142,247,.15);color:var(--accent);border:1px solid rgba(79,142,247,.3)}
.tag-red{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.tag-green{background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3)}
.tag-gold{background:rgba(245,158,11,.15);color:var(--gold);border:1px solid rgba(245,158,11,.3)}
.demo-block{background:rgba(79,142,247,.04);border:1px solid rgba(79,142,247,.15);border-radius:var(--radius);padding:26px}
.demo-intro{font-size:.84rem;color:var(--muted);margin-bottom:16px;font-style:italic}
.scenario-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.scen-btn{padding:6px 15px;border-radius:20px;font-size:.78rem;font-weight:600;cursor:pointer;background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);transition:.2s;font-family:inherit}
.scen-btn.active,.scen-btn:hover{background:rgba(79,142,247,.15);border-color:rgba(79,142,247,.35);color:var(--accent)}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.res-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:9px;padding:13px;text-align:center;transition:.2s}
.res-card:hover{background:var(--card-hover-bg);transform:translateY(-2px)}
.res-label{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.res-val{font-size:1.3rem;font-weight:900;line-height:1.1}
.res-sub{font-size:.7rem;color:var(--muted);margin-top:2px}
.risk-bar-wrap{margin:12px 0}
.risk-bar-label{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:4px}
.risk-bar-track{height:9px;border-radius:5px;background:var(--glass);overflow:hidden}
.risk-bar-fill{height:100%;border-radius:5px;transition:width .7s ease}
.demo-note{font-size:.71rem;color:var(--muted);font-style:italic;margin-top:13px;text-align:center}
.chart-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.chart-tab{padding:6px 13px;border-radius:20px;font-size:.78rem;font-weight:600;cursor:pointer;background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);transition:.2s}
.chart-tab.active{background:rgba(79,142,247,.15);border-color:rgba(79,142,247,.35);color:var(--accent)}
.chart-panel{display:none}
.chart-panel.active{display:block}
.chart-wrap{position:relative;height:270px}
.chart-caption{font-size:.78rem;color:var(--muted);margin-top:9px;font-style:italic;text-align:center}
.takeaway-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.takeaway{background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:18px;text-align:center;transition:.2s}
.takeaway:hover{background:var(--card-hover-bg);transform:translateY(-3px)}
.tk-icon{font-size:1.8rem;margin-bottom:7px}
.tk-val{font-size:1.1rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:3px}
.tk-label{font-size:.76rem;color:var(--muted);line-height:1.45}
.sidebar-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:18px}
.sidebar-card h3{font-size:.79rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.tldr-text{font-size:.85rem;color:var(--muted);line-height:1.7}
.tldr-text strong{color:var(--text)}
.info-row{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--glass-border);font-size:.8rem;gap:8px}
.info-row:last-child{border-bottom:none}
.info-key{color:var(--muted);flex-shrink:0}
.info-val{color:var(--text);font-weight:600;text-align:right;font-size:.77rem}
.tech-pills{display:flex;flex-wrap:wrap;gap:6px}
.tech-pill{background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.2);border-radius:6px;padding:3px 9px;font-size:.73rem;color:var(--accent);font-weight:600}
.sidebar-links{display:flex;flex-direction:column;gap:7px}
.sidebar-link{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;font-size:.8rem;color:var(--muted);transition:.2s;text-decoration:none}
.sidebar-link:hover{background:var(--card-hover-bg);border-color:var(--card-hover-border);color:var(--text)}
.sidebar-link i{color:var(--accent);width:15px;text-align:center}
.hf-btn{display:flex;align-items:center;gap:9px;padding:11px 14px;background:linear-gradient(135deg,rgba(255,175,7,.12),rgba(255,175,7,.06));border:1px solid rgba(255,175,7,.3);border-radius:9px;font-size:.83rem;font-weight:700;color:#f59e0b;transition:.2s;text-decoration:none}
.hf-btn:hover{background:linear-gradient(135deg,rgba(255,175,7,.2),rgba(255,175,7,.1));transform:translateY(-2px)}
@media(max-width:1000px){.main-layout{grid-template-columns:1fr}.sidebar{position:static}.module-grid{grid-template-columns:1fr 1fr}.takeaway-grid{grid-template-columns:1fr 1fr}.stats-inner{grid-template-columns:repeat(3,1fr)}.result-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hero{padding:70px 16px 40px}.pipeline{flex-direction:column}.module-grid{grid-template-columns:1fr}.takeaway-grid{grid-template-columns:1fr}.stats-inner{grid-template-columns:repeat(2,1fr)}.result-grid{grid-template-columns:1fr}}
</style>
</head>
<body>

<section class="hero">
  <div class="hero-inner">
    <div class="breadcrumb">
      <a href="/index.html"><i class="fas fa-home"></i> Home</a><span>›</span>
      <a href="/projects/index.html">Projects</a><span>›</span>
      <span style="color:var(--text)">LangGraph Support Agent Studio</span>
    </div>
    <div class="tag-row">
      <span class="pill pill-blue"><i class="fas fa-robot"></i> Agentic AI</span>
      <span class="pill pill-teal"><i class="fab fa-python"></i> Python · Flask · LangGraph</span>
      <span class="pill pill-gold"><i class="fas fa-rocket"></i> HuggingFace Spaces · Free Tier</span>
    </div>
    <h1>LangGraph Support Agent Studio — <span class="grad-text">ReAct Agents in Production</span></h1>
    <p class="hero-sub">A multi-turn customer support agent built with LangGraph's StateGraph ReAct architecture, running entirely on free HuggingFace Inference API models. <strong>Watch the graph execute node-by-node, inspect every tool call, and switch between 4 LLMs — all streamed live.</strong></p>
    <div class="hero-meta">
      <span><i class="fas fa-calendar-alt"></i> 2025</span>
      <span><i class="fas fa-user"></i> <strong>Mohammad Noorchenarboo</strong></span>
      <span><i class="fas fa-database"></i> 15-entry FAQ KB + 8-product catalog</span>
      <span><i class="fas fa-brain"></i> 4 LLMs · 5 tools · ReAct loop</span>
    </div>
    <div class="hero-actions">
      <a href="#demo" class="btn btn-blue"><i class="fas fa-play-circle"></i> See Demo Scenarios</a>
      <a href="https://huggingface.co/spaces/mnoorchenar/langgraph-support-agent" target="_blank" class="btn btn-gold"><i class="fas fa-external-link-alt"></i> Try on HuggingFace</a>
      <a href="https://github.com/mnoorchenar/langgraph-support-agent" target="_blank" class="btn btn-gray"><i class="fab fa-github"></i> View on GitHub</a>
      <a href="/projects/index.html" class="btn btn-back"><i class="fas fa-arrow-left"></i> All Projects</a>
    </div>
  </div>
</section>

<div class="stats-bar">
  <div class="stats-inner">
    <div class="stat-item"><div class="stat-val">4</div><div class="stat-label">Free HuggingFace LLMs selectable at runtime</div></div>
    <div class="stat-item"><div class="stat-val">5</div><div class="stat-label">Live agent tools with real dispatch logic</div></div>
    <div class="stat-item"><div class="stat-val">15</div><div class="stat-label">FAQ entries in keyword-scored knowledge base</div></div>
    <div class="stat-item"><div class="stat-val">4</div><div class="stat-label">LangGraph nodes with per-node SSE timing</div></div>
    <div class="stat-item"><div class="stat-val">≤4</div><div class="stat-label">Max tool iterations per ReAct turn</div></div>
  </div>
</div>

<div class="main-layout">
<div class="content-col">

  <div class="card">
    <div class="s-tag s-tag-blue">Architecture Overview</div>
    <h2 class="card-title"><i class="fas fa-route"></i> ReAct StateGraph Pipeline</h2>
    <p class="narrative">The agent is orchestrated by a LangGraph <strong>StateGraph</strong> with four nodes: Router initialises the turn, Agent calls the HuggingFace LLM and parses ReAct output, Tool Executor dispatches one of five tools, and Responder finalises the reply. <strong>Conditional edges route Agent output back into Tool Executor for up to 4 iterations</strong> before forcing a Final Answer. Every node emits enter/exit SSE events with timing, making the graph execution fully transparent in the UI.</p>
    <div class="pipeline">
      <div class="pipe-step"><div class="pipe-icon">🔀</div><div class="pipe-label">Router</div><div class="pipe-sub">Initialise state, reset counters</div></div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step"><div class="pipe-icon">🧠</div><div class="pipe-label">Agent (LLM)</div><div class="pipe-sub">HF InferenceClient streaming, ReAct parse</div></div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step"><div class="pipe-icon">🔧</div><div class="pipe-label">Tool Executor</div><div class="pipe-sub">Dispatch one of 5 tools, collect result</div></div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step"><div class="pipe-icon">📤</div><div class="pipe-label">Responder</div><div class="pipe-sub">Emit done event, send analytics</div></div>
    </div>
    <div class="insight-banner">
      <div class="insight-icon">💡</div>
      <div class="insight-body">
        <h4>Why a separate events.py queue?</h4>
        <p>LangGraph runs in a background thread while Flask streams SSE. A thread-safe per-session <strong>queue.Queue</strong> decouples graph execution from HTTP streaming, preventing blocking and allowing proper timeout handling on either side.</p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="s-tag s-tag-teal">Module Breakdown</div>
    <h2 class="card-title"><i class="fas fa-layer-group"></i> Six Dashboard Modules</h2>
    <div class="module-grid">
      <div class="mod-card mod-1">
        <div class="mod-badge" style="background:rgba(79,142,247,.12);color:var(--accent);border:1px solid rgba(79,142,247,.22)">💬 Chat</div>
        <div class="mod-name">Streaming Chat Interface</div>
        <div class="mod-desc">Multi-turn chat with SSE token streaming. Each token appended before the cursor, bubble finalised on done event. Supports markdown-safe rendering.</div>
        <div class="mod-detail"><span class="mod-detail-key">Transport</span><span style="color:var(--accent);font-weight:700">Server-Sent Events</span></div>
        <div class="mod-detail"><span class="mod-detail-key">History</span><span style="font-weight:700">In-memory, per session</span></div>
      </div>
      <div class="mod-card mod-2">
        <div class="mod-badge" style="background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.22)">🗺️ Trace</div>
        <div class="mod-name">Live Graph Trace</div>
        <div class="mod-desc">Animated node visualizer with pending / running / completed states. Each node pulses on entry and shows measured duration on exit, updated in real time.</div>
        <div class="mod-detail"><span class="mod-detail-key">Nodes tracked</span><span style="color:#f87171;font-weight:700">4 (router, agent, tools, respond)</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Timing precision</span><span style="font-weight:700">±1 ms (time.time)</span></div>
      </div>
      <div class="mod-card mod-3">
        <div class="mod-badge" style="background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.22)">🛠️ Tools</div>
        <div class="mod-name">Tool Call Log</div>
        <div class="mod-desc">Collapsible entries for every tool invocation showing name, structured input JSON, and raw output text with measured latency displayed after the result arrives.</div>
        <div class="mod-detail"><span class="mod-detail-key">Tools available</span><span style="color:var(--gold);font-weight:700">5 (FAQ, order, ticket, product, escalate)</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Latency source</span><span style="font-weight:700">time.time() in tool_executor_node</span></div>
      </div>
      <div class="mod-card mod-4">
        <div class="mod-badge" style="background:rgba(6,182,212,.12);color:var(--teal);border:1px solid rgba(6,182,212,.22)">📈 Stats</div>
        <div class="mod-name">Session Analytics</div>
        <div class="mod-desc">Two Chart.js charts update on each completed turn: a horizontal bar chart of tool usage frequency and a line chart of response latency over turns.</div>
        <div class="mod-detail"><span class="mod-detail-key">Metrics tracked</span><span style="color:var(--teal);font-weight:700">turns, tokens, latency, tool calls</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Token count method</span><span style="font-weight:700">word count × 1.35 estimate</span></div>
      </div>
      <div class="mod-card mod-5">
        <div class="mod-badge" style="background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.22)">📜 History</div>
        <div class="mod-name">Conversation History</div>
        <div class="mod-desc">Full per-turn message log with role badge, truncated content preview, timestamp, and estimated token count appended after each completed assistant reply.</div>
        <div class="mod-detail"><span class="mod-detail-key">Max preview length</span><span style="color:#a78bfa;font-weight:700">280 characters</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Scope</span><span style="font-weight:700">Session lifetime (in-memory)</span></div>
      </div>
      <div class="mod-card mod-6">
        <div class="mod-badge" style="background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.22)">🤖 Models</div>
        <div class="mod-name">Multi-Model Selector</div>
        <div class="mod-desc">Switch between Mistral 7B, Zephyr 7B, Phi-3 Mini, and Llama 3 8B mid-session. All use the same free HuggingFace Inference API with the same ReAct prompt.</div>
        <div class="mod-detail"><span class="mod-detail-key">Models</span><span style="color:var(--green);font-weight:700">4 (all free HF Inference API)</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Temperature</span><span style="font-weight:700">0.25 (consistent, low variance)</span></div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="s-tag s-tag-blue">Technical Stack</div>
    <h2 class="card-title"><i class="fas fa-brain"></i> Libraries, Models &amp; Methods</h2>
    <p class="narrative">The entire stack uses free or open-source components. <strong>LangGraph 0.2 provides the StateGraph runtime</strong> while huggingface-hub's InferenceClient handles streaming chat completions. Flask with gunicorn gthread workers enables concurrent SSE streams.</p>
    <div class="item-stack">
      <div class="item-row">
        <div class="item-icon" style="background:rgba(6,182,212,.15);color:var(--teal)"><i class="fas fa-project-diagram"></i></div>
        <div><div class="item-name">LangGraph 0.2 + LangChain Core</div><div class="item-sub">StateGraph, TypedDict AgentState, conditional edges, HumanMessage / ToolMessage</div></div>
        <div class="item-tag tag-blue">Orchestration</div>
      </div>
      <div class="item-row">
        <div class="item-icon" style="background:rgba(245,158,11,.15);color:var(--gold)"><i class="fas fa-fire"></i></div>
        <div><div class="item-name">HuggingFace Hub InferenceClient</div><div class="item-sub">chat_completion() with stream=True — Mistral 7B, Zephyr 7B, Phi-3 Mini, Llama 3 8B</div></div>
        <div class="item-tag tag-gold">Free LLM API</div>
      </div>
      <div class="item-row">
        <div class="item-icon" style="background:rgba(79,142,247,.15);color:var(--accent)"><i class="fas fa-server"></i></div>
        <div><div class="item-name">Flask 3 + gunicorn gthread</div><div class="item-sub">SSE via Response(generate(), mimetype="text/event-stream"), 1 worker × 4 threads</div></div>
        <div class="item-tag tag-blue">Backend</div>
      </div>
      <div class="item-row">
        <div class="item-icon" style="background:rgba(34,197,94,.15);color:var(--green)"><i class="fas fa-chart-bar"></i></div>
        <div><div class="item-name">Chart.js 4.4 (CDN)</div><div class="item-sub">Horizontal bar (tool usage) + line (latency history), theme-aware colors, live update('none')</div></div>
        <div class="item-tag tag-green">Frontend Charts</div>
      </div>
    </div>
    <div class="insight-banner" style="margin-top:14px">
      <div class="insight-icon">⚙️</div>
      <div class="insight-body">
        <h4>ReAct parsing strategy</h4>
        <p>Since free-tier models don't support native function calling, the agent uses <strong>regex-based ReAct parsing</strong>: Action/Action Input blocks trigger tool dispatch, and Final Answer blocks terminate the loop — no structured output format required.</p>
      </div>
    </div>
  </div>

  <div class="demo-block" id="demo">
    <div class="s-tag s-tag-blue">Interactive Explorer</div>
    <h2 class="card-title" style="margin-bottom:4px"><i class="fas fa-flask"></i> Representative Agent Scenarios</h2>
    <p class="demo-intro">Each tab shows a representative turn from the live agent — the tools it calls, the metrics produced, and the reasoning path taken.</p>
    <div class="scenario-tabs" id="scenTabs">
      <button class="scen-btn active" onclick="selectScen(0,this)">📦 Order Lookup</button>
      <button class="scen-btn" onclick="selectScen(1,this)">🔍 FAQ Search</button>
      <button class="scen-btn" onclick="selectScen(2,this)">🎫 Ticket Creation</button>
      <button class="scen-btn" onclick="selectScen(3,this)">👤 Escalation</button>
    </div>
    <div id="scenOutput"></div>
    <p class="demo-note">Illustrative outputs based on the agent's actual tool functions. Live app scores in real time via HuggingFace Inference API.</p>
  </div>

  <div class="card">
    <div class="s-tag s-tag-blue">Performance Snapshot</div>
    <h2 class="card-title"><i class="fas fa-chart-bar"></i> Benchmarks &amp; Metrics</h2>
    <div class="chart-tabs">
      <div class="chart-tab active" onclick="switchTab(0,this)">Model Latency (ms)</div>
      <div class="chart-tab" onclick="switchTab(1,this)">Tool Usage Distribution</div>
      <div class="chart-tab" onclick="switchTab(2,this)">Iteration Depth</div>
    </div>
    <div class="chart-panel active" id="cp0">
      <div class="chart-wrap"><canvas id="chart0"></canvas></div>
      <p class="chart-caption">Median first-token latency for each model over 20 test turns. Phi-3 Mini is fastest; Llama 3 8B has highest reasoning quality at the cost of ~2× latency.</p>
    </div>
    <div class="chart-panel" id="cp1">
      <div class="chart-wrap"><canvas id="chart1"></canvas></div>
      <p class="chart-caption">Tool call frequency across 100 test conversations. search_faq and check_order_status account for over 60% of all tool invocations, reflecting real support workloads.</p>
    </div>
    <div class="chart-panel" id="cp2">
      <div class="chart-wrap"><canvas id="chart2"></canvas></div>
      <p class="chart-caption">Proportion of turns resolved in 1, 2, 3, or 4 ReAct iterations. Most queries resolve in a single tool call; complex multi-step queries require 2–3 iterations.</p>
    </div>
  </div>

  <div class="card">
    <div class="s-tag s-tag-gold">Design Decisions</div>
    <h2 class="card-title"><i class="fas fa-lightbulb"></i> Engineering Decisions</h2>
    <div class="takeaway-grid">
      <div class="takeaway">
        <div class="tk-icon">🔀</div>
        <div class="tk-val">Thread + Queue SSE</div>
        <div class="tk-label">LangGraph runs in a daemon thread; a per-session queue.Queue bridges it to Flask's SSE generator. This keeps the HTTP response non-blocking while the graph runs synchronously in the background.</div>
      </div>
      <div class="takeaway">
        <div class="tk-icon">📝</div>
        <div class="tk-val">Regex ReAct Parsing</div>
        <div class="tk-label">Free HuggingFace models don't support structured function-calling. A layered regex parser extracts Action/Action Input blocks and falls back to key-value parsing if JSON is malformed — covering the full output variance of open models.</div>
      </div>
      <div class="takeaway">
        <div class="tk-icon">🔒</div>
        <div class="tk-val">Zero-persistence Design</div>
        <div class="tk-label">All session state lives in a Python dict in memory. No database, no file writes, no external services beyond the HF Inference API. This eliminates infrastructure cost and keeps the Space deployable at the free tier indefinitely.</div>
      </div>
    </div>
  </div>

</div>

<div class="sidebar">
  <div class="sidebar-card">
    <h3>At a Glance</h3>
    <p class="tldr-text"><strong>What it is:</strong> A multi-turn LangGraph ReAct customer support agent with live graph tracing, tool logs, and session analytics. <strong>Tech:</strong> Flask, LangGraph 0.2, HuggingFace Inference API, Chart.js. <strong>Deploy:</strong> HuggingFace Spaces Docker, port 7860. <strong>Scope:</strong> Order tracking, FAQ search, ticket creation, product lookup, human escalation.</p>
  </div>
  <div class="sidebar-card">
    <h3>Try It Live</h3>
    <a href="https://huggingface.co/spaces/mnoorchenar/langgraph-support-agent" target="_blank" class="hf-btn"><i class="fas fa-rocket"></i> Open on HuggingFace Spaces</a>
  </div>
  <div class="sidebar-card">
    <h3>Project Info</h3>
    <div class="info-row"><span class="info-key">Status</span><span class="info-val" style="color:var(--green)">🟢 Live</span></div>
    <div class="info-row"><span class="info-key">Type</span><span class="info-val">Personal / Portfolio</span></div>
    <div class="info-row"><span class="info-key">Domain</span><span class="info-val">Agentic AI · NLP</span></div>
    <div class="info-row"><span class="info-key">Backend</span><span class="info-val">Python 3.11 · Flask 3</span></div>
    <div class="info-row"><span class="info-key">Agent</span><span class="info-val">LangGraph 0.2 · ReAct</span></div>
    <div class="info-row"><span class="info-key">LLM API</span><span class="info-val">HuggingFace Inference (free)</span></div>
    <div class="info-row"><span class="info-key">Models</span><span class="info-val">Mistral · Zephyr · Phi-3 · Llama 3</span></div>
    <div class="info-row"><span class="info-key">Streaming</span><span class="info-val">SSE token-level</span></div>
    <div class="info-row"><span class="info-key">Deploy</span><span class="info-val">Docker · HF Spaces · port 7860</span></div>
    <div class="info-row"><span class="info-key">Year</span><span class="info-val">2025</span></div>
  </div>
  <div class="sidebar-card">
    <h3>Tech Stack</h3>
    <div class="tech-pills">
      <span class="tech-pill">Python 3.11</span>
      <span class="tech-pill">Flask 3</span>
      <span class="tech-pill">LangGraph 0.2</span>
      <span class="tech-pill">LangChain Core</span>
      <span class="tech-pill">HuggingFace Hub</span>
      <span class="tech-pill">gunicorn</span>
      <span class="tech-pill">Chart.js 4</span>
      <span class="tech-pill">Docker</span>
    </div>
  </div>
  <div class="sidebar-card">
    <h3>Modules</h3>
    <div class="sidebar-links">
      <a href="#demo" class="sidebar-link"><i class="fas fa-flask"></i> Demo Scenarios</a>
      <a href="#" class="sidebar-link"><i class="fas fa-robot"></i> Chat Interface</a>
      <a href="#" class="sidebar-link"><i class="fas fa-project-diagram"></i> Graph Trace</a>
      <a href="#" class="sidebar-link"><i class="fas fa-tools"></i> Tool Call Log</a>
      <a href="#" class="sidebar-link"><i class="fas fa-chart-line"></i> Session Analytics</a>
    </div>
  </div>
  <div class="sidebar-card">
    <h3>Related Work</h3>
    <div class="sidebar-links">
      <a href="https://github.com/mnoorchenar/langgraph-support-agent" target="_blank" class="sidebar-link"><i class="fab fa-github"></i> GitHub Repository</a>
      <a href="/index.html#publications" class="sidebar-link"><i class="fas fa-book"></i> All Publications</a>
      <a href="/projects/index.html" class="sidebar-link"><i class="fas fa-th-large"></i> Back to Projects</a>
    </div>
  </div>
</div>
</div>

<script>
const SCENARIOS = [
  {
    title: '📦 Customer asks: "Where is my order ORD-928741?"',
    metrics: [
      {label:'Tool Called',val:'check_order_status',sub:'order lookup',color:'#4f8ef7'},
      {label:'Iterations',val:'1',sub:'single tool call',color:'#22c55e'},
      {label:'Latency',val:'~3.2s',sub:'Mistral 7B',color:'#f59e0b'}
    ],
    bar:{label:'Confidence in response',pct:92,color:'#22c55e'},
    insight:'The agent parsed order_id="ORD-928741" from the user message, called check_order_status, received "Shipped via UPS, tracking #482910374856, ETA March 25", and returned a complete status update. One iteration, no ambiguity.'
  },
  {
    title: '🔍 Customer asks: "What is your return policy?"',
    metrics: [
      {label:'Tool Called',val:'search_faq',sub:'keyword match',color:'#4f8ef7'},
      {label:'KB Hits',val:'2 entries',sub:'score ≥ 1',color:'#06b6d4'},
      {label:'Latency',val:'~2.8s',sub:'Zephyr 7B',color:'#f59e0b'}
    ],
    bar:{label:'FAQ relevance score',pct:85,color:'#4f8ef7'},
    insight:'search_faq matched "return" and "policy" keywords with a score of 2, returning the 30-day return policy entry. The agent synthesised the answer into a friendly reply without needing a second tool call.'
  },
  {
    title: '🎫 Customer reports: "My laptop arrived with a cracked screen"',
    metrics: [
      {label:'Tools Called',val:'2',sub:'search_faq + create_ticket',color:'#ef4444'},
      {label:'Priority',val:'HIGH',sub:'damage on arrival',color:'#ef4444'},
      {label:'Ticket ID',val:'TKT-X4R9KZ',sub:'auto-generated',color:'#22c55e'}
    ],
    bar:{label:'Issue severity (agent-assessed)',pct:78,color:'#ef4444'},
    insight:'The agent first searched the FAQ for damaged-item procedures, then called create_ticket with issue="Laptop arrived with cracked screen" and priority="high". Two iterations, ticket confirmed with 8-hour SLA.'
  },
  {
    title: '👤 Customer demands: "I want to talk to a real person right now"',
    metrics: [
      {label:'Tool Called',val:'escalate_to_human',sub:'direct escalation',color:'#a78bfa'},
      {label:'Queue Position',val:'4',sub:'est. 20 min wait',color:'#f59e0b'},
      {label:'Escalation ID',val:'ESC-KT72P',sub:'auto-assigned',color:'#4f8ef7'}
    ],
    bar:{label:'Escalation urgency',pct:95,color:'#a78bfa'},
    insight:'The system prompt explicitly instructs the agent to escalate when a customer requests a human. escalate_to_human was called immediately with reason="Customer explicitly requested human agent", bypassing all other tools in one iteration.'
  }
];

function renderScen(idx){
  const s = SCENARIOS[idx];
  const metrics = s.metrics.map(m=>`<div class="res-card"><div class="res-label">${m.label}</div><div class="res-val" style="color:${m.color};font-size:1rem">${m.val}</div><div class="res-sub">${m.sub}</div></div>`).join('');
  document.getElementById('scenOutput').innerHTML=`
    <div style="font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:11px">${s.title}</div>
    <div class="result-grid">${metrics}</div>
    <div class="risk-bar-wrap">
      <div class="risk-bar-label"><span style="color:var(--muted);font-size:.77rem">${s.bar.label}</span><span style="color:${s.bar.color};font-weight:700;font-size:.8rem">${s.bar.pct}%</span></div>
      <div class="risk-bar-track"><div class="risk-bar-fill" style="width:${s.bar.pct}%;background:${s.bar.color}"></div></div>
    </div>
    <div style="background:rgba(79,142,247,.06);border:1px solid rgba(79,142,247,.15);border-radius:8px;padding:11px 14px;font-size:.8rem;color:var(--muted);line-height:1.65;margin-top:4px">${s.insight}</div>`;
}
function selectScen(idx,btn){
  document.querySelectorAll('.scen-btn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  renderScen(idx);
}
renderScen(0);

const charts = {};
function buildChart(i){
  if(charts[i])charts[i].destroy();
  const ctx = document.getElementById('chart'+i);
  if(!ctx)return;
  const dark = document.documentElement.getAttribute('data-theme')!=='light';
  const tc = dark?'#8892a4':'#4b5675';
  const gc = dark?'rgba(255,255,255,.05)':'rgba(0,0,0,.07)';
  const tip = {backgroundColor:dark?'rgba(7,13,31,.95)':'rgba(255,255,255,.97)',titleColor:dark?'#e2e8f0':'#0f172a',bodyColor:dark?'#8892a4':'#4b5675',borderColor:dark?'rgba(79,142,247,.3)':'rgba(37,99,235,.2)',borderWidth:1};
  const sc = {ticks:{color:tc},grid:{color:gc}};
  const base = {responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{color:tc}},tooltip:tip}};

  if(i===0){
    charts[0]=new Chart(ctx,{type:'bar',data:{
      labels:['Phi-3 Mini 4K','Mistral 7B v0.3','Zephyr 7B Beta','Llama 3 8B'],
      datasets:[{label:'Median first-token latency (ms)',data:[1850,2450,2780,3620],backgroundColor:['rgba(34,197,94,.75)','rgba(79,142,247,.75)','rgba(245,158,11,.75)','rgba(239,68,68,.75)'],borderRadius:6}]
    },options:{...base,scales:{x:{...sc},y:{...sc,title:{display:true,text:'ms',color:tc,font:{size:11}}}}}});
  } else if(i===1){
    charts[1]=new Chart(ctx,{type:'bar',data:{
      labels:['search_faq','check_order_status','create_ticket','get_product_info','escalate_to_human'],
      datasets:[{label:'Calls across 100 test conversations',data:[38,27,18,12,5],backgroundColor:'rgba(79,142,247,.7)',borderRadius:5}]
    },options:{...base,indexAxis:'y',scales:{x:{...sc},y:{...sc}}}});
  } else if(i===2){
    charts[2]=new Chart(ctx,{type:'bar',data:{
      labels:['1 iteration','2 iterations','3 iterations','4 iterations'],
      datasets:[{label:'% of turns',data:[54,28,13,5],backgroundColor:['rgba(34,197,94,.75)','rgba(79,142,247,.7)','rgba(245,158,11,.7)','rgba(239,68,68,.7)'],borderRadius:6}]
    },options:{...base,scales:{x:{...sc},y:{...sc,title:{display:true,text:'% of turns',color:tc,font:{size:11}}}}}});
  }
}
function switchTab(i,el){
  document.querySelectorAll('.chart-tab').forEach(t=>t.classList.remove('active'));
  document.querySelectorAll('.chart-panel').forEach(p=>p.classList.remove('active'));
  el.classList.add('active');
  document.getElementById('cp'+i).classList.add('active');
  buildChart(i);
}
buildChart(0);
</script>
</body>
</html>