Spaces:
Sleeping
Sleeping
File size: 7,328 Bytes
eb7193f | 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 | import React from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { useAuth } from "@/context/AuthContext";
import { ExternalLink, FileText, Play } from "lucide-react";
interface AuthModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
}
export function AuthModal({ open, onOpenChange }: AuthModalProps) {
const { login, authState } = useAuth();
const handleLogin = async () => {
try {
await login();
// Don't close modal here, it will close after successful auth
} catch (error) {
console.error("Login failed:", error);
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-6xl p-0 overflow-hidden">
<div className="grid lg:grid-cols-2 gap-0 min-h-[600px]">
{/* Left side - Authentication */}
<div className="p-8 lg:p-12 flex flex-col justify-center bg-background">
<div className="space-y-8">
{/* Header */}
<div className="space-y-4">
<h1 className="text-3xl lg:text-4xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
AgentGraph
</h1>
<p className="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 className="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>
{/* Authentication Section */}
<div className="space-y-6">
<div className="space-y-4">
<h2 className="text-xl font-semibold">
Access Research Platform
</h2>
<Button
onClick={handleLogin}
disabled={authState.isLoading}
size="lg"
className="w-full h-12 text-lg bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 transition-all duration-300"
>
{authState.isLoading ? (
<div className="flex items-center space-x-2">
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
<span>Connecting...</span>
</div>
) : (
<div className="flex items-center space-x-2">
<svg
className="w-5 h-5"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M12 0C5.374 0 0 5.373 0 12s5.374 12 12 12 12-5.373 12-12S18.626 0 12 0zm5.568 8.16c-.169 1.858-.896 3.375-2.043 4.519-1.146 1.144-2.663 1.874-4.521 2.043-.151.014-.302.021-.454.021-.156 0-.31-.007-.463-.021-1.858-.169-3.375-.899-4.519-2.043C4.424 11.535 3.694 10.018 3.525 8.16c-.014-.151-.021-.302-.021-.454 0-.156.007-.31.021-.463.169-1.858.899-3.375 2.043-4.519C6.712 1.58 8.229.85 10.087.681c.151-.014.302-.021.454-.021.156 0 .31.007.463.021 1.858.169 3.375.899 4.519 2.043 1.144 1.144 1.874 2.661 2.043 4.519.014.151.021.302.021.454 0 .156-.007.31-.021.463z" />
</svg>
<span>Sign in with Hugging Face</span>
<ExternalLink className="w-4 h-4" />
</div>
)}
</Button>
</div>
{authState.error && (
<Card className="border-destructive/20 bg-destructive/5">
<CardContent className="p-4">
<p className="text-sm text-destructive">
{authState.error}
</p>
</CardContent>
</Card>
)}
<Card className="bg-muted/30">
<CardContent className="p-4">
<p className="text-sm text-muted-foreground">
Authentication required for responsible AI resource usage
</p>
</CardContent>
</Card>
</div>
</div>
</div>
{/* Right side - Demo Content */}
<div className="bg-secondary/20 p-8 lg:p-12 space-y-6">
{/* Demo Video */}
<Card className="bg-background/50 backdrop-blur-sm border-border/50">
<CardContent className="p-0">
<div className="relative aspect-video rounded-lg overflow-hidden">
<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
className="w-full h-full"
/>
</div>
<div className="p-4">
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
<Play className="w-4 h-4" />
<span>Interactive Demo</span>
</div>
</div>
</CardContent>
</Card>
{/* Research Paper */}
<Card className="bg-background/50 backdrop-blur-sm border-border/50">
<CardContent className="p-6">
<div className="flex items-start space-x-4">
<div className="flex-shrink-0">
<FileText className="w-8 h-8 text-primary" />
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold mb-2">
Research Paper
</h3>
<p className="text-sm text-muted-foreground mb-4">
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"
rel="noopener noreferrer"
className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
>
<FileText className="w-4 h-4 mr-2" />
<span>Download PDF</span>
<ExternalLink className="w-4 h-4 ml-1" />
</a>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</DialogContent>
</Dialog>
);
}
|