refactor: video section
This commit is contained in:
2
next-env.d.ts
vendored
2
next-env.d.ts
vendored
@@ -1,6 +1,6 @@
|
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/image-types/global" />
|
/// <reference types="next/image-types/global" />
|
||||||
import './.next/types/routes.d.ts';
|
import './.next/dev/types/routes.d.ts';
|
||||||
|
|
||||||
// NOTE: This file should not be edited
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||||
|
|||||||
15
package-lock.json
generated
15
package-lock.json
generated
@@ -10110,6 +10110,21 @@
|
|||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"zod": "^3.25.0 || ^4.0.0"
|
"zod": "^3.25.0 || ^4.0.0"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-win32-x64-msvc": {
|
||||||
|
"version": "16.0.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.10.tgz",
|
||||||
|
"integrity": "sha512-E+njfCoFLb01RAFEnGZn6ERoOqhK1Gl3Lfz1Kjnj0Ulfu7oJbuMyvBKNj/bw8XZnenHDASlygTjZICQW+rYW1Q==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
208
src/components/video/detailed-summary-section.tsx
Normal file
208
src/components/video/detailed-summary-section.tsx
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
import { Map as MapIcon, Activity } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { DetectionType, ChainageSummaryData } from '@/types';
|
||||||
|
import { projectService } from '@/services/api';
|
||||||
|
|
||||||
|
// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
|
||||||
|
const MapModal = dynamic(() => import('@/components/map-modal'), { ssr: false });
|
||||||
|
|
||||||
|
interface DetailedSummarySectionProps {
|
||||||
|
projectId: string;
|
||||||
|
videoId: string;
|
||||||
|
show: boolean;
|
||||||
|
detectionType: DetectionType;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DetailedSummarySection = ({
|
||||||
|
projectId,
|
||||||
|
videoId,
|
||||||
|
show,
|
||||||
|
detectionType,
|
||||||
|
}: DetailedSummarySectionProps) => {
|
||||||
|
const [summaryData, setSummaryData] = useState<ChainageSummaryData | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showMap, setShowMap] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!show || !videoId || !projectId) return;
|
||||||
|
|
||||||
|
const fetchSummary = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const data = await projectService.getProjectSummaryByVideo(projectId, videoId);
|
||||||
|
setSummaryData(data);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch summary:', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchSummary();
|
||||||
|
}, [show, videoId, projectId]);
|
||||||
|
|
||||||
|
if (!show || loading || !summaryData) return null;
|
||||||
|
|
||||||
|
const isCombined = detectionType === 'pot-sign-detection';
|
||||||
|
const isPothole = detectionType === 'pothole-detection' || isCombined;
|
||||||
|
|
||||||
|
// Flatten all detections for the scrollable list
|
||||||
|
const allDetections: Array<{
|
||||||
|
detection: any;
|
||||||
|
chainageName: string;
|
||||||
|
packageName: string;
|
||||||
|
}> = [];
|
||||||
|
|
||||||
|
Object.entries(summaryData.packages || {}).forEach(([packageName, packageData]) => {
|
||||||
|
Object.entries(packageData?.chainages || {}).forEach(([chainageName, chainageData]) => {
|
||||||
|
chainageData?.detections?.forEach((detection) => {
|
||||||
|
allDetections.push({ detection, chainageName, packageName });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
|
||||||
|
<Card className="flex flex-col lg:col-span-2 overflow-hidden">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded bg-secondary">
|
||||||
|
<MapIcon className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base font-bold">Chainages</CardTitle>
|
||||||
|
<CardDescription className="text-xs">
|
||||||
|
{isCombined ? 'Potholes & Signboards' : isPothole ? 'Potholes' : 'Signboards'}{' '}
|
||||||
|
detected
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" onClick={() => setShowMap(true)} className="gap-2">
|
||||||
|
<MapIcon className="h-4 w-4" />
|
||||||
|
Map
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex-1 p-0 overflow-hidden">
|
||||||
|
<ScrollArea className="h-[300px] p-4">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Project Info */}
|
||||||
|
<div className="pb-3 border-b">
|
||||||
|
<div className="flex flex-col mb-2">
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Project
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-bold">{summaryData.project.name}</span>
|
||||||
|
</div>
|
||||||
|
{summaryData.project.corridor_name && (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Corridor
|
||||||
|
</span>
|
||||||
|
<span className="text-xs font-semibold text-muted-foreground">
|
||||||
|
{summaryData.project.corridor_name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Packages and Chainages */}
|
||||||
|
{Object.entries(summaryData.packages).map(([packageName, packageData]) => (
|
||||||
|
<div key={packageData.package_id} className="space-y-2">
|
||||||
|
<div className="text-xs font-bold text-muted-foreground truncate">
|
||||||
|
{packageName}
|
||||||
|
</div>
|
||||||
|
<div className="pl-2 space-y-2 border-l-2 border-muted">
|
||||||
|
{Object.entries(packageData.chainages).map(([chainageName, chainageData]) => (
|
||||||
|
<div
|
||||||
|
key={chainageData.chainage_id}
|
||||||
|
className="text-xs p-3 rounded-md bg-muted/50 flex items-center justify-between gap-4"
|
||||||
|
>
|
||||||
|
<div className="font-semibold truncate">{chainageName}</div>
|
||||||
|
<div className="text-[10px] bg-background px-2 py-0.5 rounded border font-bold">
|
||||||
|
{chainageData.detection_count}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="flex flex-col lg:col-span-3 overflow-hidden">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded bg-secondary">
|
||||||
|
<Activity className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base font-bold">All Detections</CardTitle>
|
||||||
|
<CardDescription className="text-xs">
|
||||||
|
Complete list with GPS coordinates
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex-1 p-0 overflow-hidden">
|
||||||
|
<ScrollArea className="h-[300px] p-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
{allDetections.map(({ detection, chainageName }, idx) => (
|
||||||
|
<div
|
||||||
|
key={`${detection.id}-${idx}`}
|
||||||
|
className="text-xs p-3 bg-muted/30 border rounded-md hover:bg-muted/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="font-bold">
|
||||||
|
{detection.type === 'pothole'
|
||||||
|
? 'Pothole'
|
||||||
|
: (detection.class || detection.type || '').replace(/_/g, ' ')}{' '}
|
||||||
|
#{detection.id}
|
||||||
|
</span>
|
||||||
|
<Badge variant="outline" className="text-[10px] font-mono">
|
||||||
|
Frame {detection.frame_number}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-2 text-[10px] text-muted-foreground">
|
||||||
|
<div className="truncate">
|
||||||
|
Chainage: <span className="text-foreground font-medium">{chainageName}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Confidence:{' '}
|
||||||
|
<span className="text-foreground font-medium">
|
||||||
|
{(detection.confidence * 100).toFixed(1)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-2 font-mono bg-muted/50 p-1 rounded border">
|
||||||
|
GPS: {detection.latitude}, {detection.longitude}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Map Modal */}
|
||||||
|
<MapModal
|
||||||
|
open={showMap}
|
||||||
|
onClose={() => setShowMap(false)}
|
||||||
|
detections={allDetections.map(({ detection }) => detection)}
|
||||||
|
detectionType={detectionType}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DetailedSummarySection;
|
||||||
74
src/components/video/detection-logs.tsx
Normal file
74
src/components/video/detection-logs.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Activity, Film } from 'lucide-react';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
|
import { DetectionLogEntry } from '@/types';
|
||||||
|
|
||||||
|
interface DetectionLogsProps {
|
||||||
|
logs: DetectionLogEntry[];
|
||||||
|
onSeek: (frame: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DetectionLogs = ({ logs, onSeek }: DetectionLogsProps) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h4 className="text-sm font-bold flex items-center gap-2">
|
||||||
|
<Activity className="h-4 w-4" />
|
||||||
|
Detection Logs
|
||||||
|
</h4>
|
||||||
|
<Badge variant="secondary" className="text-[10px] font-bold uppercase">
|
||||||
|
Live Logs
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<ScrollArea className="h-[430px] rounded-lg border bg-muted/20 p-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
{logs.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||||
|
<Film className="h-8 w-8 mb-2 opacity-20" />
|
||||||
|
<p className="text-xs">Playback to see logs</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
logs.map((log, i) => (
|
||||||
|
<div
|
||||||
|
key={`${log.frame}-${i}`}
|
||||||
|
onClick={() => onSeek(log.frame)}
|
||||||
|
className="p-4 rounded border bg-card hover:border-primary transition-all cursor-pointer group"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<span className="text-sm font-bold">Frame: {log.frame}</span>
|
||||||
|
<span className="text-xs text-muted-foreground/80">{log.videoTime}</span>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{log.detections.map((d, j) => (
|
||||||
|
<div key={`${d.id}-${j}`} className="space-y-1">
|
||||||
|
<div className="text-[13px] font-bold">
|
||||||
|
{(d.type || '').replace(/ /g, '_')} ID: {d.id} | Confidence:{' '}
|
||||||
|
{(d.confidence * 100).toFixed(1)}%
|
||||||
|
</div>
|
||||||
|
{d.bbox && (
|
||||||
|
<div className="text-[12px] text-muted-foreground/80 font-medium">
|
||||||
|
Coordinates: ({Math.round(d.bbox.x1)}, {Math.round(d.bbox.y1)}){' '}
|
||||||
|
<span className="text-muted-foreground/40">→</span> (
|
||||||
|
{Math.round(d.bbox.x2)}, {Math.round(d.bbox.y2)})
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{d.latitude && (
|
||||||
|
<div className="text-[12px] text-muted-foreground/80 font-medium">
|
||||||
|
GPS: {d.latitude.toFixed(8)}, {d.longitude?.toFixed(8)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DetectionLogs;
|
||||||
92
src/components/video/detection-stats-bar.tsx
Normal file
92
src/components/video/detection-stats-bar.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { memo } from 'react';
|
||||||
|
import { DetectionCounts } from '@/types';
|
||||||
|
|
||||||
|
interface DetectionStatsBarProps {
|
||||||
|
currentFrameCounts: DetectionCounts;
|
||||||
|
currentFrame: number;
|
||||||
|
lastDetectedLat: number | null;
|
||||||
|
lastDetectedLng: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DetectionStatsBar = memo(
|
||||||
|
({
|
||||||
|
currentFrameCounts,
|
||||||
|
currentFrame,
|
||||||
|
lastDetectedLat,
|
||||||
|
lastDetectedLng,
|
||||||
|
}: DetectionStatsBarProps) => {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap items-center gap-x-8 gap-y-3 py-3 px-6 bg-card border rounded-lg">
|
||||||
|
<div className="flex flex-wrap items-center gap-x-6 gap-y-2">
|
||||||
|
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
||||||
|
<span className="text-[11px] font-bold text-red-500 uppercase tracking-tight">
|
||||||
|
POTHOLE:
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-bold text-red-600">{currentFrameCounts.pothole}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
||||||
|
<span className="text-[11px] font-bold text-blue-500 uppercase tracking-tight">
|
||||||
|
DEFECT SIGN BOARD:
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-bold text-blue-600">
|
||||||
|
{currentFrameCounts.defected_sign_board}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
||||||
|
<span className="text-[11px] font-bold text-indigo-500 uppercase tracking-tight">
|
||||||
|
DAMAGE ROAD MARK:
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-bold text-indigo-600">
|
||||||
|
{currentFrameCounts.damaged_road_marking}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
||||||
|
<span className="text-[11px] font-bold text-orange-500 uppercase tracking-tight">
|
||||||
|
ROADCRACK:
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-bold text-orange-600">
|
||||||
|
{currentFrameCounts.road_crack}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center gap-6 border-l pl-6 border-border/80 ml-auto">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
|
||||||
|
FRAME:
|
||||||
|
</span>
|
||||||
|
<span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
|
||||||
|
{currentFrame}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{lastDetectedLat && (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
|
||||||
|
LAT:
|
||||||
|
</span>
|
||||||
|
<span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
|
||||||
|
{lastDetectedLat.toFixed(7)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
|
||||||
|
LNG:
|
||||||
|
</span>
|
||||||
|
<span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
|
||||||
|
{lastDetectedLng?.toFixed(7)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
DetectionStatsBar.displayName = 'DetectionStatsBar';
|
||||||
|
|
||||||
|
export default DetectionStatsBar;
|
||||||
128
src/components/video/summary-section.tsx
Normal file
128
src/components/video/summary-section.tsx
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Target, SignpostBig, AlertTriangle, Activity, Gauge, Monitor, Film } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { DetectionData, DetectionType } from '@/types';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface SummarySectionProps {
|
||||||
|
data: DetectionData;
|
||||||
|
show: boolean;
|
||||||
|
detectionType: DetectionType;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
|
||||||
|
if (!show) return null;
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{
|
||||||
|
label: 'Total Damage',
|
||||||
|
value: data.summary.total_road_damage || 0,
|
||||||
|
icon: Target,
|
||||||
|
color: 'text-purple-500',
|
||||||
|
bgColor: 'bg-purple-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Defected Signs',
|
||||||
|
value: data.summary.unique_defected_sign_board || 0,
|
||||||
|
icon: SignpostBig,
|
||||||
|
color: 'text-blue-500',
|
||||||
|
bgColor: 'bg-blue-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Unique Potholes',
|
||||||
|
value: data.summary.unique_pothole || 0,
|
||||||
|
icon: AlertTriangle,
|
||||||
|
color: 'text-red-500',
|
||||||
|
bgColor: 'bg-red-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Road Cracks',
|
||||||
|
value: data.summary.unique_road_crack || 0,
|
||||||
|
icon: AlertTriangle,
|
||||||
|
color: 'text-orange-500',
|
||||||
|
bgColor: 'bg-orange-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Markings',
|
||||||
|
value: data.summary.unique_damaged_road_marking || 0,
|
||||||
|
icon: Activity,
|
||||||
|
color: 'text-indigo-500',
|
||||||
|
bgColor: 'bg-indigo-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Good Signs',
|
||||||
|
value: data.summary.unique_good_sign_board || 0,
|
||||||
|
icon: SignpostBig,
|
||||||
|
color: 'text-emerald-500',
|
||||||
|
bgColor: 'bg-emerald-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Rate',
|
||||||
|
value: `${(data.summary.detection_rate || 0).toFixed(1)}%`,
|
||||||
|
icon: Activity,
|
||||||
|
color: 'text-green-500',
|
||||||
|
bgColor: 'bg-green-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Video FPS',
|
||||||
|
value: (data.video_info.fps || 0).toFixed(1),
|
||||||
|
icon: Gauge,
|
||||||
|
color: 'text-orange-500',
|
||||||
|
bgColor: 'bg-orange-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Resolution',
|
||||||
|
value: `${data.video_info.width}×${data.video_info.height}`,
|
||||||
|
icon: Monitor,
|
||||||
|
color: 'text-blue-500',
|
||||||
|
bgColor: 'bg-blue-500/10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Total Frames',
|
||||||
|
value: data.summary.total_frames || data.video_info.total_frames,
|
||||||
|
icon: Film,
|
||||||
|
color: 'text-purple-500',
|
||||||
|
bgColor: 'bg-purple-500/10',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="overflow-hidden">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded bg-secondary">
|
||||||
|
<Activity className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base font-bold">Quick Stats</CardTitle>
|
||||||
|
<CardDescription className="text-xs">Detection analysis overview</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||||
|
{stats.map((stat) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={stat.label}
|
||||||
|
className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
|
||||||
|
>
|
||||||
|
<div className={cn('p-2 rounded-md mb-2', stat.bgColor)}>
|
||||||
|
<Icon className={cn('h-5 w-5', stat.color)} />
|
||||||
|
</div>
|
||||||
|
<div className={cn('text-xl font-bold', stat.color)}>{stat.value}</div>
|
||||||
|
<div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
|
||||||
|
{stat.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SummarySection;
|
||||||
132
src/components/video/video-canvas-player.tsx
Normal file
132
src/components/video/video-canvas-player.tsx
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRef, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { drawBoundingBoxes } from '@/utils/canvas-drawing';
|
||||||
|
|
||||||
|
interface VideoCanvasPlayerProps {
|
||||||
|
videoRef: React.RefObject<HTMLVideoElement | null>;
|
||||||
|
canvasRef: React.RefObject<HTMLCanvasElement | null>;
|
||||||
|
videoUrl: string;
|
||||||
|
videoWidth: number;
|
||||||
|
videoHeight: number;
|
||||||
|
videoError: string | null;
|
||||||
|
onLoadedData: () => void;
|
||||||
|
onEnded: () => void;
|
||||||
|
onSeeked: () => void;
|
||||||
|
currentDetections: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VideoCanvasPlayerRef {
|
||||||
|
resize: () => void;
|
||||||
|
drawDetections: (detections: any[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const VideoCanvasPlayer = forwardRef<VideoCanvasPlayerRef, VideoCanvasPlayerProps>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
videoRef,
|
||||||
|
canvasRef,
|
||||||
|
videoUrl,
|
||||||
|
videoWidth,
|
||||||
|
videoHeight,
|
||||||
|
videoError,
|
||||||
|
onLoadedData,
|
||||||
|
onEnded,
|
||||||
|
onSeeked,
|
||||||
|
currentDetections,
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const detectionsRef = useRef(currentDetections);
|
||||||
|
useEffect(() => {
|
||||||
|
detectionsRef.current = currentDetections;
|
||||||
|
}, [currentDetections]);
|
||||||
|
|
||||||
|
const resize = useCallback(() => {
|
||||||
|
if (!videoRef.current || !canvasRef.current) return;
|
||||||
|
const rect = videoRef.current.getBoundingClientRect();
|
||||||
|
canvasRef.current.width = rect.width;
|
||||||
|
canvasRef.current.height = rect.height;
|
||||||
|
|
||||||
|
// Draw immediately on resize
|
||||||
|
const ctx = canvasRef.current.getContext('2d');
|
||||||
|
if (ctx) {
|
||||||
|
drawBoundingBoxes(
|
||||||
|
ctx,
|
||||||
|
detectionsRef.current,
|
||||||
|
canvasRef.current.width,
|
||||||
|
canvasRef.current.height,
|
||||||
|
videoWidth,
|
||||||
|
videoHeight,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, [videoRef, canvasRef, videoWidth, videoHeight]);
|
||||||
|
|
||||||
|
useImperativeHandle(ref, () => ({
|
||||||
|
resize,
|
||||||
|
drawDetections: (detections) => {
|
||||||
|
if (!canvasRef.current) return;
|
||||||
|
const ctx = canvasRef.current.getContext('2d');
|
||||||
|
if (ctx) {
|
||||||
|
drawBoundingBoxes(
|
||||||
|
ctx,
|
||||||
|
detections,
|
||||||
|
canvasRef.current.width,
|
||||||
|
canvasRef.current.height,
|
||||||
|
videoWidth,
|
||||||
|
videoHeight,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!containerRef.current) return;
|
||||||
|
|
||||||
|
const observer = new ResizeObserver(() => {
|
||||||
|
resize();
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(containerRef.current);
|
||||||
|
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, [resize]);
|
||||||
|
// Reacting to detections to ensure correct draw on resize
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{videoError && (
|
||||||
|
<Badge variant="destructive" className="mb-4">
|
||||||
|
{videoError}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="relative bg-black rounded-lg overflow-hidden border shadow-inner"
|
||||||
|
style={{ aspectRatio: `${videoWidth}/${videoHeight}` }}
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
ref={videoRef}
|
||||||
|
src={videoUrl}
|
||||||
|
controls
|
||||||
|
className="w-full h-full"
|
||||||
|
onLoadedData={onLoadedData}
|
||||||
|
onEnded={onEnded}
|
||||||
|
onSeeked={onSeeked}
|
||||||
|
/>
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
className="absolute top-0 left-0 pointer-events-none w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
VideoCanvasPlayer.displayName = 'VideoCanvasPlayer';
|
||||||
|
|
||||||
|
export default VideoCanvasPlayer;
|
||||||
71
src/hooks/use-cumulative-counts.ts
Normal file
71
src/hooks/use-cumulative-counts.ts
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
import { useMemo, useCallback } from 'react';
|
||||||
|
import { DetectionCounts } from '@/types';
|
||||||
|
|
||||||
|
const DEFAULT_COUNTS: DetectionCounts = {
|
||||||
|
defected_sign_board: 0,
|
||||||
|
pothole: 0,
|
||||||
|
road_crack: 0,
|
||||||
|
damaged_road_marking: 0,
|
||||||
|
good_sign_board: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useCumulativeCounts = (frames: any[]) => {
|
||||||
|
const result = useMemo(() => {
|
||||||
|
const map = new Map<number, DetectionCounts>();
|
||||||
|
let lastCounts: DetectionCounts = { ...DEFAULT_COUNTS };
|
||||||
|
let indices: number[] = [];
|
||||||
|
|
||||||
|
if (frames && Array.isArray(frames)) {
|
||||||
|
const sortedFrames = [...frames].sort((a, b) => (a.frame_id || 0) - (b.frame_id || 0));
|
||||||
|
sortedFrames.forEach((frameData) => {
|
||||||
|
const frameId = frameData.frame_id;
|
||||||
|
indices.push(frameId);
|
||||||
|
const detections = (frameData as any).detections;
|
||||||
|
if (detections && detections.length > 0) {
|
||||||
|
const frameCounts = detections[0].count || { ...DEFAULT_COUNTS };
|
||||||
|
lastCounts = {
|
||||||
|
defected_sign_board: Math.max(
|
||||||
|
lastCounts.defected_sign_board,
|
||||||
|
frameCounts.defected_sign_board || 0,
|
||||||
|
),
|
||||||
|
pothole: Math.max(lastCounts.pothole, frameCounts.pothole || 0),
|
||||||
|
road_crack: Math.max(lastCounts.road_crack, frameCounts.road_crack || 0),
|
||||||
|
damaged_road_marking: Math.max(
|
||||||
|
lastCounts.damaged_road_marking,
|
||||||
|
frameCounts.damaged_road_marking || 0,
|
||||||
|
),
|
||||||
|
good_sign_board: Math.max(lastCounts.good_sign_board, frameCounts.good_sign_board || 0),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
map.set(frameId, { ...lastCounts });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return { map, indices };
|
||||||
|
}, [frames]);
|
||||||
|
|
||||||
|
const getStickyCounts = useCallback(
|
||||||
|
(frameNumber: number) => {
|
||||||
|
const { map, indices } = result;
|
||||||
|
if (indices.length === 0) return DEFAULT_COUNTS;
|
||||||
|
|
||||||
|
let targetFrameId = -1;
|
||||||
|
let low = 0,
|
||||||
|
high = indices.length - 1;
|
||||||
|
|
||||||
|
while (low <= high) {
|
||||||
|
let mid = Math.floor((low + high) / 2);
|
||||||
|
if (indices[mid] <= frameNumber) {
|
||||||
|
targetFrameId = indices[mid];
|
||||||
|
low = mid + 1;
|
||||||
|
} else {
|
||||||
|
high = mid - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return targetFrameId !== -1 ? map.get(targetFrameId) || DEFAULT_COUNTS : DEFAULT_COUNTS;
|
||||||
|
},
|
||||||
|
[result],
|
||||||
|
);
|
||||||
|
|
||||||
|
return { getStickyCounts, sortedFrameIndices: result.indices };
|
||||||
|
};
|
||||||
70
src/hooks/use-frame-detection-map.ts
Normal file
70
src/hooks/use-frame-detection-map.ts
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import { useMemo } from 'react';
|
||||||
|
import { DetectionData, DetectionType } from '@/types';
|
||||||
|
|
||||||
|
export const useFrameDetectionMap = (data: DetectionData, detectionType: DetectionType) => {
|
||||||
|
const frameDetectionMap = useMemo(() => {
|
||||||
|
const map = new Map<number, any[]>();
|
||||||
|
const isCombined = detectionType === 'pot-sign-detection';
|
||||||
|
const isPothole = detectionType === 'pothole-detection' || isCombined;
|
||||||
|
const isSignboard = detectionType === 'sign-board-detection' || isCombined;
|
||||||
|
|
||||||
|
if (data.frames && Array.isArray(data.frames)) {
|
||||||
|
data.frames.forEach((frameData) => {
|
||||||
|
const frameId = frameData.frame_id;
|
||||||
|
const flatDetections = (frameData as any).detections;
|
||||||
|
if (flatDetections && Array.isArray(flatDetections)) {
|
||||||
|
map.set(
|
||||||
|
frameId,
|
||||||
|
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,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
let detections: any[] = [];
|
||||||
|
if (isPothole && (frameData as any).potholes) {
|
||||||
|
detections = [
|
||||||
|
...detections,
|
||||||
|
...(frameData as any).potholes.map((p: any) => ({ ...p, _detType: 'pothole' })),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
if (isSignboard && (frameData as any).signboards) {
|
||||||
|
detections = [
|
||||||
|
...detections,
|
||||||
|
...(frameData as any).signboards.map((s: any) => ({ ...s, _detType: 'signboard' })),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
if (detections.length > 0) map.set(frameId, detections);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
}, [data, detectionType]);
|
||||||
|
|
||||||
|
const getNearestDetections = (frame: number, sortedFrameIndices: number[], maxSkip = 3) => {
|
||||||
|
const exact = frameDetectionMap.get(frame);
|
||||||
|
if (exact) return exact;
|
||||||
|
|
||||||
|
let low = 0,
|
||||||
|
high = sortedFrameIndices.length - 1,
|
||||||
|
targetIndex = -1;
|
||||||
|
|
||||||
|
while (low <= high) {
|
||||||
|
const mid = Math.floor((low + high) / 2);
|
||||||
|
if (sortedFrameIndices[mid] <= frame) {
|
||||||
|
targetIndex = sortedFrameIndices[mid];
|
||||||
|
low = mid + 1;
|
||||||
|
} else {
|
||||||
|
high = mid - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return targetIndex !== -1 && frame - targetIndex <= maxSkip
|
||||||
|
? frameDetectionMap.get(targetIndex)
|
||||||
|
: undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
return { frameDetectionMap, getNearestDetections };
|
||||||
|
};
|
||||||
27
src/hooks/use-gps-map.ts
Normal file
27
src/hooks/use-gps-map.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import { useMemo } from 'react';
|
||||||
|
import { DetectionData } from '@/types';
|
||||||
|
|
||||||
|
export const useGpsMap = (data: DetectionData) => {
|
||||||
|
const gpsMap = useMemo(() => {
|
||||||
|
const map = new Map<number, { lat: number; lng: number }>();
|
||||||
|
const addItemsToMap = (list?: any[]) => {
|
||||||
|
if (!list || !Array.isArray(list)) return;
|
||||||
|
list.forEach((item) => {
|
||||||
|
const id =
|
||||||
|
(item as any).pothole_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 });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
addItemsToMap(data.pothole_list);
|
||||||
|
addItemsToMap(data.signboard_list);
|
||||||
|
addItemsToMap(data.defected_sign_board_list);
|
||||||
|
addItemsToMap(data.road_crack_list);
|
||||||
|
addItemsToMap(data.damaged_road_marking_list);
|
||||||
|
addItemsToMap(data.good_sign_board_list);
|
||||||
|
return map;
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
return gpsMap;
|
||||||
|
};
|
||||||
34
src/hooks/use-video-detection-loop.ts
Normal file
34
src/hooks/use-video-detection-loop.ts
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
export const useVideoDetectionLoop = (
|
||||||
|
videoRef: React.RefObject<HTMLVideoElement | null>,
|
||||||
|
fps: number,
|
||||||
|
onFrameUpdate: (frame: number) => void,
|
||||||
|
) => {
|
||||||
|
const lastProcessedFrame = useRef(-1);
|
||||||
|
const animId = useRef<number>(-1);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const update = () => {
|
||||||
|
const video = videoRef.current;
|
||||||
|
if (video && !video.paused) {
|
||||||
|
const frame = Math.round(video.currentTime * fps);
|
||||||
|
if (frame !== lastProcessedFrame.current) {
|
||||||
|
lastProcessedFrame.current = frame;
|
||||||
|
onFrameUpdate(frame);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
animId.current = requestAnimationFrame(update);
|
||||||
|
};
|
||||||
|
|
||||||
|
animId.current = requestAnimationFrame(update);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (animId.current !== -1) {
|
||||||
|
cancelAnimationFrame(animId.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [fps, onFrameUpdate, videoRef]);
|
||||||
|
|
||||||
|
return { lastProcessedFrame };
|
||||||
|
};
|
||||||
@@ -38,3 +38,42 @@ export interface ChainageUpdate {
|
|||||||
end_lng?: number;
|
end_lng?: number;
|
||||||
direction?: 'UP' | 'DOWN';
|
direction?: 'UP' | 'DOWN';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type ChainageSummaryData = {
|
||||||
|
project: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
corridor_name: string | null;
|
||||||
|
state: string | null;
|
||||||
|
};
|
||||||
|
packages: {
|
||||||
|
[packageName: string]: {
|
||||||
|
package_id: string;
|
||||||
|
region: string | null;
|
||||||
|
chainages: {
|
||||||
|
[chainageName: string]: {
|
||||||
|
chainage_id: string;
|
||||||
|
chainage: string | null;
|
||||||
|
detection_count: number;
|
||||||
|
detections: Array<{
|
||||||
|
id: number;
|
||||||
|
video_id: string;
|
||||||
|
type: string;
|
||||||
|
class: string;
|
||||||
|
confidence: number;
|
||||||
|
latitude: number;
|
||||||
|
longitude: number;
|
||||||
|
frame_number: number;
|
||||||
|
timestamp_ms: number;
|
||||||
|
bounding_box: {
|
||||||
|
x1: number;
|
||||||
|
y1: number;
|
||||||
|
x2: number;
|
||||||
|
y2: number;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|||||||
@@ -27,3 +27,24 @@ export interface DetectionListItem {
|
|||||||
lat?: number;
|
lat?: number;
|
||||||
lng?: number;
|
lng?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface DetectionCounts {
|
||||||
|
defected_sign_board: number;
|
||||||
|
pothole: number;
|
||||||
|
road_crack: number;
|
||||||
|
damaged_road_marking: number;
|
||||||
|
good_sign_board: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type DetectionLogEntry = {
|
||||||
|
frame: number;
|
||||||
|
detections: Array<{
|
||||||
|
id: number;
|
||||||
|
type?: string;
|
||||||
|
bbox: { x1: number; y1: number; x2: number; y2: number };
|
||||||
|
confidence: number;
|
||||||
|
latitude?: number;
|
||||||
|
longitude?: number;
|
||||||
|
}>;
|
||||||
|
videoTime: string;
|
||||||
|
};
|
||||||
|
|||||||
@@ -19,5 +19,5 @@ export interface Video {
|
|||||||
|
|
||||||
export interface VideoResultData {
|
export interface VideoResultData {
|
||||||
videoId: string;
|
videoId: string;
|
||||||
detectionType: string;
|
detectionType?: string;
|
||||||
}
|
}
|
||||||
|
|||||||
57
src/utils/canvas-drawing.ts
Normal file
57
src/utils/canvas-drawing.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
export const DETECTION_COLORS: Record<string, string> = {
|
||||||
|
pothole: '#ef4444',
|
||||||
|
defected_sign_board: '#3b82f6',
|
||||||
|
road_crack: '#f59e0b',
|
||||||
|
damaged_road_marking: '#6366f1',
|
||||||
|
good_sign_board: '#10b981',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const drawBoundingBoxes = (
|
||||||
|
ctx: CanvasRenderingContext2D,
|
||||||
|
detections: any[],
|
||||||
|
canvasWidth: number,
|
||||||
|
canvasHeight: number,
|
||||||
|
videoWidth: number,
|
||||||
|
videoHeight: number,
|
||||||
|
) => {
|
||||||
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||||
|
if (!detections || detections.length === 0) return;
|
||||||
|
|
||||||
|
const scaleX = canvasWidth / videoWidth;
|
||||||
|
const scaleY = canvasHeight / videoHeight;
|
||||||
|
|
||||||
|
detections.forEach((detection) => {
|
||||||
|
const bbox = detection.bbox;
|
||||||
|
if (!bbox) return;
|
||||||
|
|
||||||
|
const x1 = bbox.x1 * scaleX;
|
||||||
|
const y1 = bbox.y1 * scaleY;
|
||||||
|
const x2 = bbox.x2 * scaleX;
|
||||||
|
const y2 = bbox.y2 * scaleY;
|
||||||
|
|
||||||
|
const type = (detection.type || detection._detType || '').toLowerCase();
|
||||||
|
const boxColor = DETECTION_COLORS[type] || '#3b82f6';
|
||||||
|
|
||||||
|
ctx.strokeStyle = boxColor;
|
||||||
|
ctx.lineWidth = 3;
|
||||||
|
ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
|
||||||
|
|
||||||
|
// Transparent fill
|
||||||
|
ctx.fillStyle = boxColor + '20';
|
||||||
|
ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
|
||||||
|
|
||||||
|
const id = detection.pothole_id ?? detection.signboard_id ?? detection.detection_id;
|
||||||
|
const label = `${type.replace(/_/g, ' ')} #${id} ${(detection.confidence * 100).toFixed(0)}%`;
|
||||||
|
|
||||||
|
ctx.font = 'bold 12px sans-serif';
|
||||||
|
const metrics = ctx.measureText(label);
|
||||||
|
|
||||||
|
// Label background
|
||||||
|
ctx.fillStyle = boxColor;
|
||||||
|
ctx.fillRect(x1, y1 - 20, metrics.width + 10, 20);
|
||||||
|
|
||||||
|
// Label text
|
||||||
|
ctx.fillStyle = '#fff';
|
||||||
|
ctx.fillText(label, x1 + 5, y1 - 6);
|
||||||
|
});
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user