Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title> | |
| AgentGraph - Interactive Analysis Platform for Agentic AI Systems | |
| </title> | |
| <meta | |
| http-equiv="Permissions-Policy" | |
| content="payment=(), microphone=(), camera=(), geolocation=()" | |
| /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| :root { | |
| --background: 0 0% 100%; | |
| --foreground: 240 10% 3.9%; | |
| --card: 0 0% 100%; | |
| --card-foreground: 240 10% 3.9%; | |
| --popover: 0 0% 100%; | |
| --popover-foreground: 240 10% 3.9%; | |
| --primary: 262 83% 58%; | |
| --primary-foreground: 210 40% 98%; | |
| --secondary: 240 4.8% 95.9%; | |
| --secondary-foreground: 240 5.9% 10%; | |
| --muted: 240 4.8% 95.9%; | |
| --muted-foreground: 240 3.8% 46.1%; | |
| --accent: 240 4.8% 95.9%; | |
| --accent-foreground: 240 5.9% 10%; | |
| --destructive: 0 84.2% 60.2%; | |
| --destructive-foreground: 210 40% 98%; | |
| --border: 240 5.9% 90%; | |
| --input: 240 5.9% 90%; | |
| --ring: 262 83% 58%; | |
| --radius: 0.5rem; | |
| } | |
| body { | |
| background: hsl(var(--background)); | |
| color: hsl(var(--foreground)); | |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", | |
| Roboto, sans-serif; | |
| } | |
| .glass-card { | |
| background: hsl(var(--card)); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid hsl(var(--border)); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), | |
| 0 10px 15px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| .btn-primary { | |
| background: linear-gradient( | |
| 135deg, | |
| hsl(var(--primary)) 0%, | |
| hsl(var(--primary) / 0.8) 100% | |
| ); | |
| color: hsl(var(--primary-foreground)); | |
| border: 1px solid hsl(var(--primary) / 0.3); | |
| box-shadow: 0 4px 14px hsl(var(--primary) / 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| box-shadow: 0 8px 25px hsl(var(--primary) / 0.4); | |
| transform: translateY(-2px); | |
| } | |
| .gradient-text { | |
| background: linear-gradient( | |
| 135deg, | |
| hsl(var(--foreground)) 0%, | |
| hsl(var(--primary)) 100% | |
| ); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| @keyframes gentle-pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.8; | |
| } | |
| } | |
| .animate-pulse-gentle { | |
| animation: gentle-pulse 2s ease-in-out infinite; | |
| } | |
| </style> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" | |
| rel="stylesheet" | |
| /> | |
| </head> | |
| <body> | |
| <div | |
| class="min-h-screen bg-background" | |
| style=" | |
| background: linear-gradient( | |
| 135deg, | |
| hsl(var(--background)) 0%, | |
| hsl(var(--secondary)) 100% | |
| ); | |
| " | |
| > | |
| <!-- Background decoration --> | |
| <div | |
| class="absolute inset-0 pointer-events-none" | |
| style=" | |
| background: radial-gradient( | |
| circle at 20% 50%, | |
| rgba(120, 119, 198, 0.08) 0%, | |
| transparent 50% | |
| ), | |
| radial-gradient( | |
| circle at 80% 20%, | |
| rgba(255, 107, 107, 0.06) 0%, | |
| transparent 50% | |
| ), | |
| radial-gradient( | |
| circle at 40% 80%, | |
| rgba(78, 205, 196, 0.07) 0%, | |
| transparent 50% | |
| ); | |
| " | |
| ></div> | |
| <div class="container mx-auto px-4 py-20 relative z-10"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto"> | |
| <!-- Content Section --> | |
| <div class="space-y-8"> | |
| <!-- Title --> | |
| <div class="space-y-6"> | |
| <h1 | |
| class="text-4xl lg:text-6xl font-bold gradient-text tracking-tight" | |
| > | |
| AgentGraph | |
| </h1> | |
| <p class="text-xl text-muted-foreground leading-relaxed"> | |
| Trace-to-Graph Platform for Interactive Analysis and Robustness | |
| Testing in Agentic AI Systems | |
| </p> | |
| </div> | |
| <!-- Description --> | |
| <p class="text-lg text-muted-foreground leading-relaxed"> | |
| Convert execution logs into interactive knowledge graphs with | |
| actionable insights for AI system analysis and robustness testing. | |
| </p> | |
| <!-- CTA Section --> | |
| <div class="space-y-4"> | |
| <a | |
| href="/auth/login" | |
| class="btn-primary inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 group" | |
| > | |
| Access Research Platform | |
| <svg | |
| class="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1" | |
| fill="none" | |
| stroke="currentColor" | |
| viewBox="0 0 24 24" | |
| > | |
| <path | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| stroke-width="2" | |
| d="M13 7l5 5m0 0l-5 5m5-5H6" | |
| ></path> | |
| </svg> | |
| </a> | |
| <div class="glass-card p-4 rounded-lg"> | |
| <p class="text-sm text-muted-foreground"> | |
| Authentication required for responsible AI resource usage | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video and Paper Section --> | |
| <div class="relative space-y-6"> | |
| <!-- Demo Video --> | |
| <div class="glass-card rounded-2xl overflow-hidden"> | |
| <div class="relative aspect-video"> | |
| <iframe | |
| src="https://www.youtube.com/embed/btrS9pfDYJY?si=dDX4tIs-oS2O2d2p" | |
| title="AgentGraph: Interactive Analysis Platform Demo" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |
| allowfullscreen | |
| class="w-full h-full rounded-2xl" | |
| > | |
| </iframe> | |
| </div> | |
| </div> | |
| <!-- Research Paper --> | |
| <div class="glass-card p-6 rounded-2xl"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-shrink-0"> | |
| <svg | |
| class="w-8 h-8 text-primary" | |
| fill="currentColor" | |
| viewBox="0 0 20 20" | |
| > | |
| <path | |
| fill-rule="evenodd" | |
| d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 0v12h8V4H6z" | |
| clip-rule="evenodd" | |
| /> | |
| <path d="M8 6h4v1H8V6zM8 8h4v1H8V8zM8 10h2v1H8v-1z" /> | |
| </svg> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="text-lg font-semibold text-foreground mb-1"> | |
| Research Paper | |
| </h3> | |
| <p class="text-sm text-muted-foreground mb-3"> | |
| AgentGraph: Trace-to-Graph Platform for Interactive Analysis | |
| and Robustness Testing in Agentic AI Systems | |
| </p> | |
| <a | |
| href="/static/papers/agentgraph_paper.pdf" | |
| target="_blank" | |
| class="inline-flex items-center text-primary hover:text-primary/80 transition-colors" | |
| > | |
| <svg | |
| class="w-4 h-4 mr-2" | |
| fill="none" | |
| stroke="currentColor" | |
| viewBox="0 0 24 24" | |
| > | |
| <path | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| stroke-width="2" | |
| d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" | |
| /> | |
| </svg> | |
| Download PDF | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |