Spaces:

holistic-ai
/

AgentGraph

Running

App Files Files Community

wu981526092 commited on Sep 16, 2025

Commit

2175f7f

1 Parent(s): 64857c1

Separate login page to HTML template for better maintainability

Browse files

Files changed (2) hide show

backend/routers/auth.py +8 -181
backend/templates/login.html +229 -0

backend/routers/auth.py CHANGED Viewed

@@ -8,8 +8,10 @@ import os
 import logging
 import secrets
 from typing import Optional
 from fastapi import APIRouter, Request, Response, HTTPException
 from fastapi.responses import RedirectResponse, HTMLResponse, JSONResponse
 from utils.environment import should_enable_auth, get_oauth_config, is_huggingface_space
 import requests
@@ -17,6 +19,10 @@ logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/auth", tags=["authentication"])
 @router.get("/status")
 async def auth_status(request: Request):
@@ -282,191 +288,12 @@ async def get_current_user(request: Request):
 @router.get("/login-page")
 async def login_page(request: Request):
     """
-    Serve a login page explaining why authentication is required.
     """
     if not should_enable_auth():
         return RedirectResponse(url="/", status_code=302)
-    html_content = """
-    <!DOCTYPE html>
-    <html lang="en" class="dark">
-    <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: 240 10% 3.9%;
-                --foreground: 210 40% 98%;
-                --card: 240 10% 3.9%;
-                --card-foreground: 210 40% 98%;
-                --popover: 240 10% 3.9%;
-                --popover-foreground: 210 40% 98%;
-                --primary: 262 83% 58%;
-                --primary-foreground: 210 40% 98%;
-                --secondary: 240 3.7% 15.9%;
-                --secondary-foreground: 210 40% 98%;
-                --muted: 240 3.7% 15.9%;
-                --muted-foreground: 240 5% 64.9%;
-                --accent: 240 3.7% 15.9%;
-                --accent-foreground: 210 40% 98%;
-                --destructive: 0 62.8% 30.6%;
-                --destructive-foreground: 210 40% 98%;
-                --border: 240 3.7% 15.9%;
-                --input: 240 3.7% 15.9%;
-                --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: rgba(255, 255, 255, 0.05);
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-                border: 1px solid rgba(255, 255, 255, 0.1);
-                box-shadow:
-                    0 8px 32px rgba(0, 0, 0, 0.3),
-                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-                transition: all 0.3s ease;
-            }
-            .glass-card:hover {
-                background: rgba(255, 255, 255, 0.08);
-                border: 1px solid rgba(255, 255, 255, 0.15);
-                box-shadow:
-                    0 12px 48px rgba(0, 0, 0, 0.4),
-                    inset 0 1px 0 rgba(255, 255, 255, 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(--muted-foreground)) 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-gradient-to-br from-background via-background to-secondary">
-            <!-- Background decoration -->
-            <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/10 pointer-events-none"></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">
-                        <!-- Badge -->
-                        <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">
-                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                                <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>
-                            </svg>
-                            Research Platform
-                        </div>
-                        <!-- Title -->
-                        <div class="space-y-4">
-                            <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>
-                        <!-- Institutions -->
-                        <div class="pt-6 border-t border-border">
-                            <p class="text-xs text-muted-foreground uppercase tracking-wider mb-2">
-                                Research Collaboration
-                            </p>
-                            <p class="text-sm text-foreground font-medium">
-                                Holistic AI × Centre for Artificial Intelligence, UCL
-                            </p>
-                        </div>
-                    </div>
-                    <!-- Video Section -->
-                    <div class="relative">
-                        <div class="glass-card rounded-2xl overflow-hidden">
-                            <!-- Live Demo Badge -->
-                            <div class="absolute -top-3 -right-3 z-10">
-                                <div class="bg-green-500 text-white px-3 py-1.5 rounded-lg text-sm font-semibold shadow-lg animate-pulse-gentle">
-                                    <span class="inline-block w-2 h-2 bg-white rounded-full mr-2"></span>
-                                    Live Demo
-                                </div>
-                            </div>
-                            <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>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </body>
-    </html>
-    """
-    return HTMLResponse(content=html_content)
 @router.get("/debug")

 import logging
 import secrets
 from typing import Optional
+from pathlib import Path
 from fastapi import APIRouter, Request, Response, HTTPException
 from fastapi.responses import RedirectResponse, HTMLResponse, JSONResponse
+from fastapi.templating import Jinja2Templates
 from utils.environment import should_enable_auth, get_oauth_config, is_huggingface_space
 import requests
 router = APIRouter(prefix="/auth", tags=["authentication"])
+# Setup templates
+templates_dir = Path(__file__).parent.parent / "templates"
+templates = Jinja2Templates(directory=str(templates_dir))
 @router.get("/status")
 async def auth_status(request: Request):
 @router.get("/login-page")
 async def login_page(request: Request):
     """
+    Serve the login page using Jinja2 template.
     """
     if not should_enable_auth():
         return RedirectResponse(url="/", status_code=302)
+    return templates.TemplateResponse("login.html", {"request": request})
 @router.get("/debug")

backend/templates/login.html ADDED Viewed

	@@ -0,0 +1,229 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <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: 240 10% 3.9%;
+        --foreground: 210 40% 98%;
+        --card: 240 10% 3.9%;
+        --card-foreground: 210 40% 98%;
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 262 83% 58%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 210 40% 98%;
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 210 40% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+        --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: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
+          inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        transition: all 0.3s ease;
+      }
+      .glass-card:hover {
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4),
+          inset 0 1px 0 rgba(255, 255, 255, 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(--muted-foreground)) 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-gradient-to-br from-background via-background to-secondary"
+    >
+      <!-- Background decoration -->
+      <div
+        class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/10 pointer-events-none"
+      ></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">
+            <!-- Badge -->
+            <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"
+            >
+              <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                <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>
+              </svg>
+              Research Platform
+            </div>
+            <!-- Title -->
+            <div class="space-y-4">
+              <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>
+            <!-- Institutions -->
+            <div class="pt-6 border-t border-border">
+              <p
+                class="text-xs text-muted-foreground uppercase tracking-wider mb-2"
+              >
+                Research Collaboration
+              </p>
+              <p class="text-sm text-foreground font-medium">
+                Holistic AI × Centre for Artificial Intelligence, UCL
+              </p>
+            </div>
+          </div>
+          <!-- Video Section -->
+          <div class="relative">
+            <div class="glass-card rounded-2xl overflow-hidden">
+              <!-- Live Demo Badge -->
+              <div class="absolute -top-3 -right-3 z-10">
+                <div
+                  class="bg-green-500 text-white px-3 py-1.5 rounded-lg text-sm font-semibold shadow-lg animate-pulse-gentle"
+                >
+                  <span
+                    class="inline-block w-2 h-2 bg-white rounded-full mr-2"
+                  ></span>
+                  Live Demo
+                </div>
+              </div>
+              <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>