79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
"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>
|
|
)
|
|
}
|