VisionRoad-Frontend

app/page.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useState } from "react"
+import { UploadSection } from "@/components/upload-section"
+// import { SummarySection } from "@/components/summary-section"
+import VideoPlayerSection from "@/components/video-player-section"
+
+export type DetectionData = {
+  video_id: string
+  video_info: {
+    fps: number
+    width: number
+    height: number
+    total_frames: number
+  }
+  summary: {
+    unique_potholes: number
+    total_detections: number
+    total_frames: number
+    detection_rate: number
+  }
+  frames: Array<{
+    frame_id: number
+    potholes: Array<{
+      pothole_id: number
+      bbox: {
+        x1: number
+        y1: number
+        x2: number
+        y2: number
+      }
+      confidence: number
+    }>
+  }>
+}
+
+export default function PotholeDetectionPage() {
+  const [detectionData, setDetectionData] = useState<DetectionData | null>(null)
+  const [videoFile, setVideoFile] = useState<File | null>(null)
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
+      <div className="container mx-auto px-4 py-8 max-w-7xl">
+        {/* Header */}
+        <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
+          <h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
+            Pothole Detection System
+          </h1>
+          <p className="text-muted-foreground">Upload a video to detect and track potholes with AI-powered analysis</p>
+        </div>
+
+        {/* Upload Section */}
+        <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
+          <UploadSection
+            onDetectionComplete={(data, file) => {
+              setDetectionData(data)
+              setVideoFile(file)
+            }}
+          />
+        </div>
+
+        {/* Summary Section */}
+        {/* {detectionData && (
+          <div className="mt-6 animate-in fade-in slide-in-from-bottom duration-700">
+            <SummarySection data={detectionData} />
+          </div>
+        )} */}
+
+        {/* Video Player Section */}
+        {detectionData && videoFile && (
+          <div className="mt-6 animate-in fade-in slide-in-from-bottom duration-700 delay-200">
+            <VideoPlayerSection data={detectionData} videoFile={videoFile} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}