Applied Options

2026-01-29 12:22:21 +05:30
parent 78487430fe
commit a83545d1db
5 changed files with 260 additions and 2866 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -44,16 +44,3 @@ export default function RootLayout({
    </html>
  )
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
--- a/app/page.tsx
+++ b/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,32 +85,30 @@ 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>
--- a/components/upload-section.tsx
+++ b/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) {
-        onDetectionComplete(detectionData, file)
-      }
+      // Pass video_id instead of 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"
--- a/components/video-player-section.tsx
+++ b/components/video-player-section.tsx