santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented all css in single

Browse Source
This commit is contained in:
sumona-banerjeee
2026-02-12 10:43:21 +05:30
parent 12b6a99531
commit 53cc7f6a4f
13 changed files with 343 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/dashboard/recent-analyses-table.tsx
View File

@@ -43,6 +43,9 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
if (type === "pothole-detection") {
return <Badge className="bg-orange-500/20 text-orange-600 border-orange-500/30">Pothole</Badge>
}
if (type === "pot-sign-detection") {
return <Badge className="bg-purple-500/20 text-purple-600 border-purple-500/30">Pothole & Sign</Badge>
}
return <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30">Signboard</Badge>
}
@@ -88,7 +91,9 @@ export function RecentAnalysesTable({ videos, isLoading, onViewResults }: Recent
<p className="text-sm font-bold text-foreground">
{video.detection_type === "pothole-detection"
? video.unique_potholes ?? 0
: video.unique_signboards ?? 0}
: video.detection_type === "pot-sign-detection"
? (video.unique_potholes ?? 0) + (video.unique_signboards ?? 0)
: video.unique_signboards ?? 0}
</p>
<p className="text-[10px] text-muted-foreground uppercase">Detections</p>
</div>

59
components/map-modal.tsx
View File

@@ -20,7 +20,7 @@ type MapModalProps = {
open: boolean
onClose: () => void
detections: Detection[]
detectionType: "pothole-detection" | "sign-board-detection"
detectionType: "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
}
// Component to auto-fit map bounds to show all markers
@@ -81,6 +81,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
(bounds.getEast() + bounds.getWest()) / 2
]
const isCombined = detectionType === "pot-sign-detection"
const isPothole = detectionType === "pothole-detection"
return (
@@ -88,7 +89,7 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
<DialogContent className="max-w-6xl h-[80vh] p-0 flex flex-col overflow-hidden border-none shadow-2xl">
<DialogHeader className="px-6 pt-6 pb-4 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
<DialogTitle className="text-xl font-bold">
{isPothole ? "Pothole" : "Signboard"} Detection Map
{isCombined ? "Pothole & Signboard" : isPothole ? "Pothole" : "Signboard"} Detection Map
</DialogTitle>
<p className="text-sm text-muted-foreground">
{validDetections.length} detection{validDetections.length !== 1 ? "s" : ""} with GPS coordinates
@@ -116,31 +117,37 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
/>
{/* Detection markers */}
{validDetections.map((detection, idx) => (
<CircleMarker
key={`${detection.id}-${idx}`}
center={[detection.latitude, detection.longitude]}
radius={8}
fillColor="#10b981"
color="#065f46"
weight={2}
opacity={1}
fillOpacity={0.8}
>
<Popup>
<div className="text-xs space-y-1">
<div className="font-semibold">
{isPothole ? "Pothole" : detection.class.replace(/_/g, " ")} #{detection.id}
{validDetections.map((detection, idx) => {
const isDetPothole = detection.type === "pothole"
const markerColor = isDetPothole ? "#ef4444" : "#3b82f6"
const strokeColor = isDetPothole ? "#991b1b" : "#1e40af"
return (
<CircleMarker
key={`${detection.id}-${idx}`}
center={[detection.latitude, detection.longitude]}
radius={8}
fillColor={markerColor}
color={strokeColor}
weight={2}
opacity={1}
fillOpacity={0.8}
>
<Popup>
<div className="text-xs space-y-1">
<div className="font-semibold">
{isDetPothole ? "Pothole" : (detection.class || detection.type || "").replace(/_/g, " ")} #{detection.id}
</div>
<div>Frame: {detection.frame_number}</div>
<div>Confidence: {(detection.confidence * 100).toFixed(1)}%</div>
<div className="font-mono text-[10px]">
{detection.latitude.toFixed(6)}, {detection.longitude.toFixed(6)}
</div>
</div>
<div>Frame: {detection.frame_number}</div>
<div>Confidence: {(detection.confidence * 100).toFixed(1)}%</div>
<div className="font-mono text-[10px]">
{detection.latitude.toFixed(6)}, {detection.longitude.toFixed(6)}
</div>
</div>
</Popup>
</CircleMarker>
))}
</Popup>
</CircleMarker>
)
})}
{/* Auto-fit bounds */}
<FitBounds bounds={bounds} />

6
components/ui/select.tsx
View File

@@ -37,7 +37,7 @@ function SelectTrigger({
data-slot="select-trigger"
data-size={size}
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm overflow-hidden shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
@@ -63,7 +63,7 @@ function SelectContent({
className={cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className,
)}
position={position}
@@ -74,7 +74,7 @@ function SelectContent({
className={cn(
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
)}
>
{children}

5
components/upload-section.tsx
View File

@@ -277,6 +277,11 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
<span>Signboard Detection</span>
</div>
</SelectItem>
<SelectItem value="pot-sign-detection">
<div className="flex items-center gap-2">
<span>Pothole & Signboard Detection</span>
</div>
</SelectItem>
</SelectContent>
</Select>
</div>

190
components/video-player-section.tsx
View File

@@ -11,69 +11,11 @@ import { Target, AlertTriangle, Film, Activity, Gauge, Monitor, SignpostBig, Map
// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
const MapModal = dynamic(() => import("@/components/map-modal"), { ssr: false })
import { DetectionData, DetectionType } from "@/lib/types"
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000/api/v1"
type DetectionType = "pothole-detection" | "sign-board-detection"
type DetectionData = {
video_id: string
detection_type?: string
output_video_path?: string
video_info: {
fps: number
width: number
height: number
total_frames: number
}
summary: {
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
lat?: number
lng?: number
}>
signboard_list?: Array<{
signboard_id: number
type: string
first_detected_frame: number
first_detected_time: number
confidence: number
lat?: number
lng?: number
}>
frames: Array<{
frame_id: number
potholes?: Array<{
pothole_id: number
bbox: {
x1: number
y1: number
x2: number
y2: number
}
confidence: number
}>
signboards?: Array<{
signboard_id: number
type: string
bbox: {
x1: number
y1: number
x2: number
y2: number
}
confidence: number
}>
}>
}
type VideoPlayerSectionProps = {
data: DetectionData
@@ -177,7 +119,8 @@ function DetailedSummarySection({
if (!show || loading || !summaryData) return null
const isPothole = detectionType === "pothole-detection"
const isCombined = detectionType === "pot-sign-detection"
const isPothole = detectionType === "pothole-detection" || isCombined
// Flatten all detections for the scrollable list
const allDetections: Array<{
@@ -213,7 +156,7 @@ function DetailedSummarySection({
Detection Locations
</CardTitle>
<CardDescription className="text-xs">
{isPothole ? "Potholes" : "Signboards"} detected across project locations
{isCombined ? "Potholes & Signboards" : isPothole ? "Potholes" : "Signboards"} detected across project locations
</CardDescription>
</div>
</div>
@@ -258,7 +201,7 @@ function DetailedSummarySection({
<div key={locationData.location_id} className="text-xs p-2 rounded bg-muted/30 flex items-center justify-between gap-4">
<div className="font-medium truncate">{locationName}</div>
<div className="text-[10px] text-muted-foreground whitespace-nowrap">
{locationData.detection_count} {isPothole ? "pothole" : "signboard"}{locationData.detection_count !== 1 ? "s" : ""} detected
{locationData.detection_count} detection{locationData.detection_count !== 1 ? "s" : ""} found
</div>
</div>
))}
@@ -285,7 +228,7 @@ function DetailedSummarySection({
All Detections
</CardTitle>
<CardDescription className="text-xs">
Complete list of {isPothole ? "potholes" : "signboards"} with GPS coordinates
Complete list of {isCombined ? "potholes & signboards" : isPothole ? "potholes" : "signboards"} with GPS coordinates
</CardDescription>
</div>
</div>
@@ -301,7 +244,7 @@ function DetailedSummarySection({
>
<div className="flex items-center justify-between mb-1">
<span className="font-semibold">
{isPothole ? "Pothole" : detection.class.replace(/_/g, " ")} #{detection.id}
{detection.type === "pothole" ? "Pothole" : (detection.class || detection.type || "").replace(/_/g, " ")} #{detection.id}
</span>
<span className="text-[10px] text-muted-foreground">
Frame {detection.frame_number}
@@ -335,17 +278,25 @@ function DetailedSummarySection({
function SummarySection({ data, show, detectionType }: { data: DetectionData; show: boolean; detectionType: DetectionType }) {
if (!show) return null
const isPothole = detectionType === "pothole-detection"
const isSignboard = detectionType === "sign-board-detection"
const isCombined = detectionType === "pot-sign-detection"
const isPothole = detectionType === "pothole-detection" || isCombined
const isSignboard = detectionType === "sign-board-detection" || isCombined
const stats = [
{
label: isPothole ? "Unique Potholes" : "Unique Signboards",
value: (isPothole ? data.summary.unique_potholes : data.summary.unique_signboards) || 0,
icon: isPothole ? AlertTriangle : SignpostBig,
color: isPothole ? "text-red-500" : "text-blue-500",
bgColor: isPothole ? "bg-red-50 dark:bg-red-950/30" : "bg-blue-50 dark:bg-blue-950/30",
},
...(isPothole ? [{
label: "Unique Potholes",
value: data.summary.unique_potholes || 0,
icon: AlertTriangle,
color: "text-red-500",
bgColor: "bg-red-50 dark:bg-red-950/30",
}] : []),
...(isSignboard ? [{
label: "Unique Signboards",
value: data.summary.unique_signboards || 0,
icon: SignpostBig,
color: "text-blue-500",
bgColor: "bg-blue-50 dark:bg-blue-950/30",
}] : []),
{
label: "Total Detections",
value: data.summary.total_detections || 0,
@@ -399,13 +350,13 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
Quick Stats
</CardTitle>
<CardDescription className="text-xs">
Overview of {isPothole ? "pothole" : "signboard"} detection results
Overview of {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} detection results
</CardDescription>
</div>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 md:grid-cols-6 gap-3">
<div className={`grid gap-3 ${isCombined ? 'grid-cols-3 md:grid-cols-7' : 'grid-cols-3 md:grid-cols-6'}`}>
{stats.map((stat, index) => {
const Icon = stat.icon
return (
@@ -445,8 +396,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
const loggedFrames = useRef<Set<number>>(new Set())
const MAX_LOGS = 50
const isPothole = detectionType === "pothole-detection"
const isSignboard = detectionType === "sign-board-detection"
const isCombined = detectionType === "pot-sign-detection"
const isPothole = detectionType === "pothole-detection" || isCombined
const isSignboard = detectionType === "sign-board-detection" || isCombined
// Create GPS coordinate map from signboard_list or pothole_list
const gpsMap = useRef<Map<number, { lat: number; lng: number }>>(new Map())
@@ -457,14 +409,17 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
if (isPothole && data.pothole_list) {
data.pothole_list.forEach(item => {
if (item.lat !== undefined && item.lng !== undefined) {
map.set(item.pothole_id, { lat: item.lat, lng: item.lng })
const id = (item as any).pothole_id ?? (item as any).detection_id
if (item.lat !== undefined && item.lng !== undefined && id !== undefined) {
map.set(id, { lat: item.lat, lng: item.lng })
}
})
} else if (isSignboard && data.signboard_list) {
}
if (isSignboard && data.signboard_list) {
data.signboard_list.forEach(item => {
if (item.lat !== undefined && item.lng !== undefined) {
map.set(item.signboard_id, { lat: item.lat, lng: item.lng })
const id = (item as any).signboard_id ?? (item as any).detection_id
if (item.lat !== undefined && item.lng !== undefined && id !== undefined) {
map.set(id, { lat: item.lat, lng: item.lng })
}
})
}
@@ -509,18 +464,37 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
data.frames.forEach((frameData) => {
const frameId = frameData.frame_id
// Handle both pothole and signboard detections
const detections = isPothole ? (frameData.potholes || []) : (frameData.signboards || [])
if (detections.length > 0) {
map.set(frameId, detections)
// Handle flat detections array format (used by pot-sign-detection API)
const flatDetections = (frameData as any).detections
if (flatDetections && Array.isArray(flatDetections)) {
const tagged = flatDetections.map((d: any) => ({
...d,
_detType: d.type === 'pothole' ? 'pothole' : 'signboard',
pothole_id: d.type === 'pothole' ? d.detection_id : undefined,
signboard_id: d.type !== 'pothole' ? d.detection_id : undefined,
}))
if (tagged.length > 0) {
map.set(frameId, tagged)
}
} else {
// Handle separate potholes/signboards arrays format
let detections: any[] = []
if (isPothole && frameData.potholes) {
detections = [...detections, ...frameData.potholes.map((p: any) => ({ ...p, _detType: 'pothole' }))]
}
if (isSignboard && frameData.signboards) {
detections = [...detections, ...frameData.signboards.map((s: any) => ({ ...s, _detType: 'signboard' }))]
}
if (detections.length > 0) {
map.set(frameId, detections)
}
}
})
console.log(`[VideoPlayer] Frame map built: ${map.size} frames with detections`)
}
frameDetectionMap.current = map
}, [data, isPothole])
}, [data, isPothole, isSignboard])
// Function to draw bounding boxes on canvas
const drawBoundingBoxes = useCallback((detections: any[]) => {
@@ -553,9 +527,12 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
const width = x2 - x1
const height = y2 - y1
// Set colors based on detection type
const boxColor = isPothole ? '#ef4444' : '#3b82f6' // red for potholes, blue for signboards
const textBgColor = isPothole ? 'rgba(239, 68, 68, 0.9)' : 'rgba(59, 130, 246, 0.9)'
// Determine if this specific detection is a pothole or signboard
const isDetPothole = detection._detType === 'pothole' || detection.type === 'pothole' || (detection.pothole_id !== undefined && !detection.signboard_id)
// Set colors based on individual detection type
const boxColor = isDetPothole ? '#ef4444' : '#3b82f6' // red for potholes, blue for signboards
const textBgColor = isDetPothole ? 'rgba(239, 68, 68, 0.9)' : 'rgba(59, 130, 246, 0.9)'
// Draw bounding box
ctx.strokeStyle = boxColor
@@ -563,15 +540,15 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
ctx.strokeRect(x1, y1, width, height)
// Draw semi-transparent fill
ctx.fillStyle = isPothole ? 'rgba(239, 68, 68, 0.15)' : 'rgba(59, 130, 246, 0.15)'
ctx.fillStyle = isDetPothole ? 'rgba(239, 68, 68, 0.15)' : 'rgba(59, 130, 246, 0.15)'
ctx.fillRect(x1, y1, width, height)
// Prepare label text
const id = isPothole ? detection.pothole_id : detection.signboard_id
const id = detection.pothole_id ?? detection.signboard_id ?? detection.detection_id
const confidence = (detection.confidence * 100).toFixed(1)
let labelText = isPothole
let labelText = isDetPothole
? `Pothole #${id}`
: `${detection.type || 'Sign'} #${id}`
: `${(detection.type || 'Sign').replace(/_/g, ' ')} #${id}`
labelText += ` ${confidence}%`
// Draw label background
@@ -587,7 +564,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
ctx.fillStyle = '#ffffff'
ctx.fillText(labelText, x1 + 8, y1 - 8)
})
}, [data.video_info.width, data.video_info.height, isPothole])
}, [data.video_info.width, data.video_info.height])
// Resize canvas to match video display size
const resizeCanvas = useCallback(() => {
@@ -683,7 +660,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
// Update last detected GPS coordinates if available
if (detections.length > 0) {
const detectionId = isPothole ? detections[0].pothole_id : detections[0].signboard_id
const det0 = detections[0]
const isDetPothole = det0._detType === 'pothole' || det0.type === 'pothole' || (det0.pothole_id !== undefined && !det0.signboard_id)
const detectionId = det0.pothole_id ?? det0.signboard_id ?? det0.detection_id
const gpsCoords = gpsMap.current.get(detectionId)
if (gpsCoords) {
@@ -696,12 +675,13 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
const newLog: DetectionLog = {
frame,
detections: detections.map((det) => {
const detectionId = isPothole ? det.pothole_id : det.signboard_id
const isDetPothole = det._detType === 'pothole' || det.type === 'pothole' || (det.pothole_id !== undefined && !det.signboard_id)
const detectionId = det.pothole_id ?? det.signboard_id ?? det.detection_id
const gpsCoords = gpsMap.current.get(detectionId)
return {
id: detectionId,
type: isSignboard ? det.type : undefined,
type: isDetPothole ? 'pothole' : (det.type || 'signboard'),
bbox: det.bbox,
confidence: det.confidence,
latitude: gpsCoords?.lat,
@@ -806,7 +786,9 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
// Update GPS coordinates immediately on seek
if (detections && detections.length > 0) {
const detectionId = isPothole ? detections[0].pothole_id : detections[0].signboard_id
const det0 = detections[0]
const isDetPothole = det0._detType === 'pothole' || det0.type === 'pothole' || (det0.pothole_id !== undefined && !det0.signboard_id)
const detectionId = det0.pothole_id ?? det0.signboard_id ?? det0.detection_id
const gpsCoords = gpsMap.current.get(detectionId)
if (gpsCoords) {
@@ -855,7 +837,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
Video Playback with Detection
</CardTitle>
<CardDescription>
Watch the video with real-time {isPothole ? "pothole" : "signboard"} detection overlays
Watch the video with real-time {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} detection overlays
</CardDescription>
</div>
</div>
@@ -927,7 +909,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
<div>
<h4 className="text-sm font-semibold mb-2">Detection Logs</h4>
<p className="text-xs text-muted-foreground mb-3">
Real-time frame-by-frame {isPothole ? "pothole" : "signboard"} tracking (last {MAX_LOGS})
Real-time frame-by-frame {isCombined ? "pothole & signboard" : isPothole ? "pothole" : "signboard"} tracking (last {MAX_LOGS})
</p>
</div>
<ScrollArea className="h-[400px] rounded-md border bg-muted/30 p-4">
@@ -956,7 +938,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
{log.detections.map((det, idx) => (
<div key={idx} className="space-y-1">
<div className="font-medium text-foreground">
{isPothole ? (
{det.type === 'pothole' ? (
<>Pothole ID: {det.id}</>
) : (
<>{det.type || 'Signboard'} ID: {det.id}</>