Applied Options

app/globals.css

@@ -122,4 +122,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

app/layout.tsx

@@ -43,17 +43,4 @@ export default function RootLayout({
       </body>
     </html>
   )
-}
+}
-
-
-
-
-
-
-
-
-
-
-
-
-

app/page.tsx

@@ -2,11 +2,14 @@
 
 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 DetectionType = "pothole-detection" | "sign-board-detection"
+
 export type DetectionData = {
   video_id: string
+  detection_type?: string
+  output_video_path?: string
   video_info: {
     fps: number
     width: number
@@ -14,14 +17,28 @@ export type DetectionData = {
     total_frames: number
   }
   summary: {
-    unique_potholes: number
+    unique_potholes?: number
+    unique_signboards?: number
     total_detections: number
     total_frames: number
     detection_rate: number
   }
+  pothole_list?: Array<{
+    pothole_id: number
+    first_detected_frame: number
+    first_detected_time: number
+    confidence: number
+  }>
+  signboard_list?: Array<{
+    signboard_id: number
+    type: string
+    first_detected_frame: number
+    first_detected_time: number
+    confidence: number
+  }>
   frames: Array<{
     frame_id: number
-    potholes: Array<{
+    potholes?: Array<{
       pothole_id: number
       bbox: {
         x1: number
@@ -31,12 +48,36 @@ export type DetectionData = {
       }
       confidence: number
     }>
+    signboards?: Array<{
+      signboard_id: number
+      type: string
+      bbox: {
+        x1: number
+        y1: number
+        x2: number
+        y2: number
+      }
+      confidence: number
+    }>
   }>
 }
 
-export default function PotholeDetectionPage() {
+export default function DetectionPage() {
   const [detectionData, setDetectionData] = useState<DetectionData | null>(null)
-  const [videoFile, setVideoFile] = useState<File | null>(null)
+  const [videoId, setVideoId] = useState<string | null>(null)
+  const [detectionType, setDetectionType] = useState<DetectionType>("pothole-detection")
+
+  const getTitle = () => {
+    return detectionType === "pothole-detection" 
+      ? "Pothole Detection System" 
+      : "Signboard Detection System"
+  }
+
+  const getDescription = () => {
+    return detectionType === "pothole-detection"
+      ? "Upload a video to detect and track potholes with AI-powered analysis"
+      : "Upload a video to detect and identify signboards with AI-powered analysis"
+  }
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
@@ -44,35 +85,33 @@ export default function PotholeDetectionPage() {
         {/* 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
+            {getTitle()}
           </h1>
-          <p className="text-muted-foreground">Upload a video to detect and track potholes with AI-powered analysis</p>
+          <p className="text-muted-foreground">{getDescription()}</p>
         </div>
 
         {/* Upload Section */}
         <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
           <UploadSection
-            onDetectionComplete={(data, file) => {
+            onDetectionComplete={(data, vId) => {
               setDetectionData(data)
-              setVideoFile(file)
+              setVideoId(vId)
             }}
+            onDetectionTypeChange={setDetectionType}
           />
         </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 && (
+        {detectionData && videoId && (
           <div className="mt-6 animate-in fade-in slide-in-from-bottom duration-700 delay-200">
-            <VideoPlayerSection data={detectionData} videoFile={videoFile} />
+            <VideoPlayerSection 
+              data={detectionData} 
+              videoId={videoId}
+              detectionType={detectionType}
+            />
           </div>
         )}
       </div>
     </div>
   )
-}
+}

components/upload-section.tsx

@@ -6,19 +6,22 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Progress } from "@/components/ui/progress"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Upload, Loader2, AlertCircle } from "lucide-react"
-import type { DetectionData } from "@/app/page"
+import type { DetectionData, DetectionType } from "@/app/page"
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
 const WS_URL = process.env.NEXT_PUBLIC_WS_URL || "ws://127.0.0.1:8000/api/v1"
 
 type UploadSectionProps = {
-  onDetectionComplete: (data: DetectionData, file: File) => void
+  onDetectionComplete: (data: DetectionData, videoId: string) => void
+  onDetectionTypeChange: (type: DetectionType) => void
 }
 
-export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
+export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: UploadSectionProps) {
   const [file, setFile] = useState<File | null>(null)
   const [speed, setSpeed] = useState(30)
+  const [detectionType, setDetectionType] = useState<DetectionType>("pothole-detection")
   const [uploading, setUploading] = useState(false)
   const [progress, setProgress] = useState(0)
   const [statusMessage, setStatusMessage] = useState("")
@@ -26,29 +29,39 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const wsRef = useRef<WebSocket | null>(null)
 
+  const handleDetectionTypeChange = (value: DetectionType) => {
+    setDetectionType(value)
+    onDetectionTypeChange(value)
+  }
+
   const connectWebSocket = (videoId: string) => {
-    console.log("[v0] Connecting WebSocket for video:", videoId)
+    console.log("[Upload] Connecting WebSocket for video:", videoId)
 
     const ws = new WebSocket(`${WS_URL}/ws/${videoId}`)
     wsRef.current = ws
 
     ws.onopen = () => {
-      console.log("[v0] WebSocket connected")
+      console.log("[Upload] WebSocket connected")
       setError(null)
     }
 
     ws.onmessage = (event) => {
       const data = JSON.parse(event.data)
-      console.log("[v0] WebSocket message:", data)
+      console.log("[Upload] WebSocket message:", data)
 
       if (data.type === "progress" || data.progress !== undefined) {
         const progressValue = data.progress || 0
         setProgress(progressValue)
 
         let message = data.message || "Processing..."
+        
+        // Handle both pothole and signboard progress messages
         if (data.unique_potholes !== undefined) {
           message += ` | Unique: ${data.unique_potholes} | Total: ${data.total_detections || 0}`
+        } else if (data.unique_signboards !== undefined) {
+          message += ` | Unique: ${data.unique_signboards} | Total: ${data.total_detections || 0}`
         }
+        
         setStatusMessage(message)
       }
 
@@ -67,18 +80,18 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
     }
 
     ws.onerror = (error) => {
-      console.error("[v0] WebSocket error:", error)
+      console.error("[Upload] WebSocket error:", error)
       setStatusMessage("Connection error. Retrying...")
     }
 
     ws.onclose = () => {
-      console.log("[v0] WebSocket closed")
+      console.log("[Upload] WebSocket closed")
     }
   }
 
   const loadResults = async (videoId: string) => {
     try {
-      console.log("[v0] Loading results for:", videoId)
+      console.log("[Upload] Loading results for:", videoId)
       const response = await fetch(`${API_URL}/results/${videoId}`, {
         headers: {
           "ngrok-skip-browser-warning": "true"
@@ -90,18 +103,17 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
       }
 
       const detectionData: DetectionData = await response.json()
-      console.log("[v0] Results loaded:", detectionData)
+      console.log("[Upload] Results loaded:", detectionData)
 
       setUploading(false)
       setProgress(100)
       setStatusMessage("✓ Complete!")
       setError(null)
 
-      if (file) {
+      // Pass video_id instead of file
-        onDetectionComplete(detectionData, file)
+      onDetectionComplete(detectionData, videoId)
-      }
     } catch (error) {
-      console.error("[v0] Failed to load results:", error)
+      console.error("[Upload] Failed to load results:", error)
       setError("Failed to load results. Please try again.")
       setStatusMessage("")
       setUploading(false)
@@ -116,6 +128,7 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
 
     const formData = new FormData()
     formData.append("file", file)
+    formData.append("detection_type", detectionType)
     formData.append("speed_kmh", speed.toString())
 
     setUploading(true)
@@ -124,7 +137,8 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
     setError(null)
 
     try {
-      console.log("[v0] Uploading to:", `${API_URL}/upload`)
+      console.log("[Upload] Uploading to:", `${API_URL}/upload`)
+      console.log("[Upload] Detection type:", detectionType)
       
       const response = await fetch(`${API_URL}/upload`, {
         method: "POST",
@@ -134,7 +148,7 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
         body: formData
       })
 
-      console.log("[v0] Upload response status:", response.status)
+      console.log("[Upload] Upload response status:", response.status)
 
       if (!response.ok) {
         const errorText = await response.text()
@@ -144,14 +158,14 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
       const result = await response.json()
       const videoId = result.video_id
 
-      console.log("[v0] Video uploaded successfully, ID:", videoId)
+      console.log("[Upload] Video uploaded successfully, ID:", videoId)
       setStatusMessage("Uploaded! Starting processing...")
       setProgress(10)
 
       // Connect WebSocket for progress updates
       connectWebSocket(videoId)
     } catch (error) {
-      console.error("[v0] Upload error:", error)
+      console.error("[Upload] Upload error:", error)
 
       let errorMessage = "Upload failed"
       
@@ -172,10 +186,12 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
     <Card className="transition-all hover:shadow-lg">
       <CardHeader>
         <CardTitle>Upload Video</CardTitle>
-        <CardDescription>Select a video file and vehicle speed to start pothole detection</CardDescription>
+        <CardDescription>
+          Select a video file, detection type, and vehicle speed to start AI-powered analysis
+        </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {/* File Input */}
           <div className="space-y-2">
             <Label htmlFor="video-file">Video File</Label>
@@ -200,9 +216,37 @@ export function UploadSection({ onDetectionComplete }: UploadSectionProps) {
             )}
           </div>
 
+          {/* Detection Type Selector */}
+          <div className="space-y-2">
+            <Label htmlFor="detection-type">Detection Type</Label>
+            <Select
+              value={detectionType}
+              onValueChange={handleDetectionTypeChange}
+              disabled={uploading}
+            >
+              <SelectTrigger id="detection-type">
+                <SelectValue placeholder="Select detection type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="pothole-detection">
+                  <div className="flex items-center gap-2">
+                    <span>🕳️</span>
+                    <span>Pothole Detection</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="sign-board-detection">
+                  <div className="flex items-center gap-2">
+                    <span>🚦</span>
+                    <span>Signboard Detection</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
           {/* Speed Input */}
           <div className="space-y-2">
-            <Label htmlFor="speed">Moving Speed (km/h)</Label>
+            <Label htmlFor="speed">Speed (km/h)</Label>
             <Input
               id="speed"
               type="number"