Hugging Face's logo

Spaces:
holistic-ai
/
AgentGraph
Running

App Files Community
wu981526092 commited on
Commit
64857c1
·
1 Parent(s): 5bdf3b9

Use shadcn/ui design system for login page consistency

Browse files
Files changed (1) hide show
  1. backend/routers/auth.py +132 -258
backend/routers/auth.py CHANGED
@@ -289,303 +289,177 @@ async def login_page(request: Request):
289
 
290
  html_content = """
291
  <!DOCTYPE html>
292
- <html lang="en">
293
  <head>
294
  <meta charset="UTF-8">
295
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
296
  <title>AgentGraph - Interactive Analysis Platform for Agentic AI Systems</title>
297
  <meta http-equiv="Permissions-Policy" content="payment=(), microphone=(), camera=(), geolocation=()">
 
298
  <style>
299
- * {
300
- margin: 0;
301
- padding: 0;
302
- box-sizing: border-box;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  }
304
 
305
  body {
 
 
306
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
307
- background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
308
- min-height: 100vh;
309
- color: #f8fafc;
310
- overflow-x: hidden;
311
  }
312
 
313
- .hero-section {
314
- min-height: 100vh;
315
- display: flex;
316
- align-items: center;
317
- justify-content: center;
318
- padding: 40px 20px;
319
- position: relative;
320
- }
321
-
322
- .hero-section::before {
323
- content: '';
324
- position: absolute;
325
- top: 0;
326
- left: 0;
327
- right: 0;
328
- bottom: 0;
329
- background:
330
- radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
331
- radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.2) 0%, transparent 50%),
332
- radial-gradient(circle at 40% 80%, rgba(34, 197, 94, 0.2) 0%, transparent 50%);
333
- pointer-events: none;
334
- }
335
-
336
- .container {
337
- max-width: 1200px;
338
- width: 100%;
339
- display: grid;
340
- grid-template-columns: 1fr 1fr;
341
- gap: 80px;
342
- align-items: center;
343
- position: relative;
344
- z-index: 1;
345
  }
346
 
347
- .content-section {
348
- padding: 0 20px;
 
 
 
 
 
349
  }
350
 
351
- .badge {
352
- display: inline-flex;
353
- align-items: center;
354
- background: rgba(255, 255, 255, 0.1);
355
- backdrop-filter: blur(10px);
356
- border: 1px solid rgba(255, 255, 255, 0.2);
357
- padding: 8px 16px;
358
- border-radius: 24px;
359
- font-size: 14px;
360
- font-weight: 500;
361
- margin-bottom: 24px;
362
- color: #f1f5f9;
363
  }
364
 
365
- .badge::before {
366
- content: '🎓';
367
- margin-right: 8px;
368
  }
369
 
370
- h1 {
371
- font-size: clamp(2.5rem, 5vw, 4rem);
372
- font-weight: 800;
373
- line-height: 1.1;
374
- margin-bottom: 16px;
375
- background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
376
  -webkit-background-clip: text;
377
  -webkit-text-fill-color: transparent;
378
  background-clip: text;
379
  }
380
 
381
- .subtitle {
382
- font-size: 20px;
383
- color: #94a3b8;
384
- font-weight: 400;
385
- line-height: 1.5;
386
- margin-bottom: 32px;
387
- }
388
-
389
- .description {
390
- font-size: 16px;
391
- line-height: 1.7;
392
- color: #cbd5e1;
393
- margin-bottom: 40px;
394
- }
395
-
396
- .cta-section {
397
- display: flex;
398
- flex-direction: column;
399
- gap: 16px;
400
- }
401
-
402
- .login-btn {
403
- background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
404
- color: white;
405
- padding: 24px 48px;
406
- border-radius: 16px;
407
- text-decoration: none;
408
- font-weight: 700;
409
- font-size: 20px;
410
- display: inline-flex;
411
- align-items: center;
412
- justify-content: center;
413
- gap: 12px;
414
- transition: all 0.3s ease;
415
- border: none;
416
- cursor: pointer;
417
- box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
418
- min-width: 280px;
419
- }
420
-
421
- .login-btn:hover {
422
- transform: translateY(-3px);
423
- box-shadow: 0 12px 32px rgba(59, 130, 246, 0.5);
424
- }
425
-
426
- .login-btn::after {
427
- content: '→';
428
- transition: transform 0.3s ease;
429
- }
430
-
431
- .login-btn:hover::after {
432
- transform: translateX(4px);
433
  }
434
 
435
- .research-info {
436
- background: rgba(255, 255, 255, 0.05);
437
- backdrop-filter: blur(10px);
438
- border: 1px solid rgba(255, 255, 255, 0.1);
439
- padding: 16px;
440
- border-radius: 12px;
441
- font-size: 14px;
442
- color: #94a3b8;
443
- }
444
-
445
- .video-section {
446
- position: relative;
447
- padding: 20px;
448
- }
449
-
450
- .video-container {
451
- position: relative;
452
- width: 100%;
453
- height: 0;
454
- padding-bottom: 56.25%;
455
- border-radius: 16px;
456
- overflow: hidden;
457
- box-shadow:
458
- 0 20px 40px rgba(0, 0, 0, 0.3),
459
- 0 0 0 1px rgba(255, 255, 255, 0.1);
460
- background: rgba(255, 255, 255, 0.05);
461
- backdrop-filter: blur(10px);
462
- }
463
-
464
- .video-container iframe {
465
- position: absolute;
466
- top: 0;
467
- left: 0;
468
- width: 100%;
469
- height: 100%;
470
- border: 0;
471
- border-radius: 16px;
472
- }
473
-
474
- .video-overlay {
475
- position: absolute;
476
- top: -20px;
477
- right: -20px;
478
- background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
479
- color: white;
480
- padding: 8px 16px;
481
- border-radius: 8px;
482
- font-size: 12px;
483
- font-weight: 600;
484
- box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
485
- }
486
-
487
- .institutions {
488
- margin-top: 32px;
489
- padding-top: 24px;
490
- border-top: 1px solid rgba(255, 255, 255, 0.1);
491
- }
492
-
493
- .institutions-title {
494
- font-size: 12px;
495
- color: #64748b;
496
- text-transform: uppercase;
497
- letter-spacing: 1px;
498
- margin-bottom: 12px;
499
- }
500
-
501
- .institutions-list {
502
- font-size: 14px;
503
- color: #94a3b8;
504
- line-height: 1.6;
505
- }
506
-
507
- @media (max-width: 768px) {
508
- .container {
509
- grid-template-columns: 1fr;
510
- gap: 40px;
511
- padding: 20px;
512
- }
513
-
514
- .content-section {
515
- padding: 0;
516
- order: 2;
517
- }
518
-
519
- .video-section {
520
- order: 1;
521
- padding: 0;
522
- }
523
-
524
- h1 {
525
- font-size: 2.5rem;
526
- }
527
-
528
- .subtitle {
529
- font-size: 18px;
530
- }
531
- }
532
-
533
- @media (max-width: 480px) {
534
- .hero-section {
535
- padding: 20px 10px;
536
- }
537
-
538
- .video-overlay {
539
- display: none;
540
- }
541
  }
542
  </style>
543
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
544
  </head>
545
  <body>
546
- <div class="hero-section">
547
- <div class="container">
548
- <div class="content-section">
549
- <div class="badge">Research Platform</div>
550
-
551
- <h1>AgentGraph</h1>
552
- <div class="subtitle">
553
- Trace-to-Graph Platform for Interactive Analysis and Robustness Testing in Agentic AI Systems
554
- </div>
555
-
556
- <p class="description">
557
- Convert execution logs into interactive knowledge graphs with actionable insights for AI system analysis and robustness testing.
558
- </p>
559
-
560
- <div class="cta-section">
561
- <a href="/auth/login" class="login-btn">
562
- Access Research Platform
563
- </a>
564
 
565
- <div class="research-info">
566
- Authentication required for responsible AI resource usage
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
567
  </div>
568
  </div>
569
 
570
- <div class="institutions">
571
- <div class="institutions-title">Research Collaboration</div>
572
- <div class="institutions-list">
573
- Holistic AI × Centre for Artificial Intelligence, UCL
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
574
  </div>
575
  </div>
576
  </div>
577
-
578
- <div class="video-section">
579
- <div class="video-container">
580
- <div class="video-overlay">Live Demo</div>
581
- <iframe
582
- src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p"
583
- title="AgentGraph: Interactive Analysis Platform Demo"
584
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
585
- allowfullscreen>
586
- </iframe>
587
- </div>
588
- </div>
589
  </div>
590
  </div>
591
  </body>
 
289
 
290
  html_content = """
291
  <!DOCTYPE html>
292
+ <html lang="en" class="dark">
293
  <head>
294
  <meta charset="UTF-8">
295
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
296
  <title>AgentGraph - Interactive Analysis Platform for Agentic AI Systems</title>
297
  <meta http-equiv="Permissions-Policy" content="payment=(), microphone=(), camera=(), geolocation=()">
298
+ <script src="https://cdn.tailwindcss.com"></script>
299
  <style>
300
+ :root {
301
+ --background: 240 10% 3.9%;
302
+ --foreground: 210 40% 98%;
303
+ --card: 240 10% 3.9%;
304
+ --card-foreground: 210 40% 98%;
305
+ --popover: 240 10% 3.9%;
306
+ --popover-foreground: 210 40% 98%;
307
+ --primary: 262 83% 58%;
308
+ --primary-foreground: 210 40% 98%;
309
+ --secondary: 240 3.7% 15.9%;
310
+ --secondary-foreground: 210 40% 98%;
311
+ --muted: 240 3.7% 15.9%;
312
+ --muted-foreground: 240 5% 64.9%;
313
+ --accent: 240 3.7% 15.9%;
314
+ --accent-foreground: 210 40% 98%;
315
+ --destructive: 0 62.8% 30.6%;
316
+ --destructive-foreground: 210 40% 98%;
317
+ --border: 240 3.7% 15.9%;
318
+ --input: 240 3.7% 15.9%;
319
+ --ring: 262 83% 58%;
320
+ --radius: 0.5rem;
321
  }
322
 
323
  body {
324
+ background: hsl(var(--background));
325
+ color: hsl(var(--foreground));
326
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 
 
 
 
327
  }
328
 
329
+ .glass-card {
330
+ background: rgba(255, 255, 255, 0.05);
331
+ backdrop-filter: blur(20px);
332
+ -webkit-backdrop-filter: blur(20px);
333
+ border: 1px solid rgba(255, 255, 255, 0.1);
334
+ box-shadow:
335
+ 0 8px 32px rgba(0, 0, 0, 0.3),
336
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
337
+ transition: all 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
338
  }
339
 
340
+ .glass-card:hover {
341
+ background: rgba(255, 255, 255, 0.08);
342
+ border: 1px solid rgba(255, 255, 255, 0.15);
343
+ box-shadow:
344
+ 0 12px 48px rgba(0, 0, 0, 0.4),
345
+ inset 0 1px 0 rgba(255, 255, 255, 0.15);
346
+ transform: translateY(-2px);
347
  }
348
 
349
+ .btn-primary {
350
+ background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.8) 100%);
351
+ color: hsl(var(--primary-foreground));
352
+ border: 1px solid hsl(var(--primary) / 0.3);
353
+ box-shadow: 0 4px 14px hsl(var(--primary) / 0.3);
354
+ transition: all 0.3s ease;
 
 
 
 
 
 
355
  }
356
 
357
+ .btn-primary:hover {
358
+ box-shadow: 0 8px 25px hsl(var(--primary) / 0.4);
359
+ transform: translateY(-2px);
360
  }
361
 
362
+ .gradient-text {
363
+ background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 100%);
 
 
 
 
364
  -webkit-background-clip: text;
365
  -webkit-text-fill-color: transparent;
366
  background-clip: text;
367
  }
368
 
369
+ @keyframes gentle-pulse {
370
+ 0%, 100% { opacity: 1; }
371
+ 50% { opacity: 0.8; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
372
  }
373
 
374
+ .animate-pulse-gentle {
375
+ animation: gentle-pulse 2s ease-in-out infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
376
  }
377
  </style>
378
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
379
  </head>
380
  <body>
381
+ <div class="min-h-screen bg-gradient-to-br from-background via-background to-secondary">
382
+ <!-- Background decoration -->
383
+ <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/10 pointer-events-none"></div>
384
+
385
+ <div class="container mx-auto px-4 py-20 relative z-10">
386
+ <div class="grid lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto">
387
+ <!-- Content Section -->
388
+ <div class="space-y-8">
389
+ <!-- Badge -->
390
+ <div class="inline-flex items-center px-3 py-1.5 rounded-full border border-border bg-muted/20 text-sm font-medium text-muted-foreground">
391
+ <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
392
+ <path fill-rule="evenodd" d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" clip-rule="evenodd"></path>
393
+ </svg>
394
+ Research Platform
395
+ </div>
 
 
 
396
 
397
+ <!-- Title -->
398
+ <div class="space-y-4">
399
+ <h1 class="text-4xl lg:text-6xl font-bold gradient-text tracking-tight">
400
+ AgentGraph
401
+ </h1>
402
+ <p class="text-xl text-muted-foreground leading-relaxed">
403
+ Trace-to-Graph Platform for Interactive Analysis and Robustness Testing in Agentic AI Systems
404
+ </p>
405
+ </div>
406
+
407
+ <!-- Description -->
408
+ <p class="text-lg text-muted-foreground leading-relaxed">
409
+ Convert execution logs into interactive knowledge graphs with actionable insights for AI system analysis and robustness testing.
410
+ </p>
411
+
412
+ <!-- CTA Section -->
413
+ <div class="space-y-4">
414
+ <a href="/auth/login"
415
+ class="btn-primary inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 group">
416
+ Access Research Platform
417
+ <svg class="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
418
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
419
+ </svg>
420
+ </a>
421
+
422
+ <div class="glass-card p-4 rounded-lg">
423
+ <p class="text-sm text-muted-foreground">
424
+ Authentication required for responsible AI resource usage
425
+ </p>
426
+ </div>
427
+ </div>
428
+
429
+ <!-- Institutions -->
430
+ <div class="pt-6 border-t border-border">
431
+ <p class="text-xs text-muted-foreground uppercase tracking-wider mb-2">
432
+ Research Collaboration
433
+ </p>
434
+ <p class="text-sm text-foreground font-medium">
435
+ Holistic AI × Centre for Artificial Intelligence, UCL
436
+ </p>
437
  </div>
438
  </div>
439
 
440
+ <!-- Video Section -->
441
+ <div class="relative">
442
+ <div class="glass-card rounded-2xl overflow-hidden">
443
+ <!-- Live Demo Badge -->
444
+ <div class="absolute -top-3 -right-3 z-10">
445
+ <div class="bg-green-500 text-white px-3 py-1.5 rounded-lg text-sm font-semibold shadow-lg animate-pulse-gentle">
446
+ <span class="inline-block w-2 h-2 bg-white rounded-full mr-2"></span>
447
+ Live Demo
448
+ </div>
449
+ </div>
450
+
451
+ <div class="relative aspect-video">
452
+ <iframe
453
+ src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p"
454
+ title="AgentGraph: Interactive Analysis Platform Demo"
455
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
456
+ allowfullscreen
457
+ class="w-full h-full rounded-2xl">
458
+ </iframe>
459
+ </div>
460
  </div>
461
  </div>
462
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
463
  </div>
464
  </div>
465
  </body>