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

feat: add Select Method field with dummy data options

Browse Source 
- Added Select Method dropdown (YOLO, YOLO with VL, SAM 3)
- Updated detection row to a responsive 3-column layout
- Included select_method in upload API payload
This commit is contained in:
sumona-banerjeee
2026-03-02 12:51:48 +05:30
parent 4a77bf09d3
commit abae2d5a8b
2 changed files with 76 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/upload/page.tsx
View File

@@ -35,6 +35,7 @@ export default function UploadPage() {
const [jsonFile, setJsonFile] = useState<File | null>(null)
const [speed, setSpeed] = useState(30)
const [detectionType, setDetectionType] = useState<DetectionType>("pothole-detection")
const [selectMethod, setSelectMethod] = useState("yolo")
// Upload states
const [uploading, setUploading] = useState(false)
@@ -108,6 +109,7 @@ export default function UploadPage() {
formData.append("file", file)
formData.append("detection_type", detectionType)
formData.append("speed_kmh", speed.toString())
formData.append("select_method", selectMethod)
if (jsonFile) {
formData.append("json_file", jsonFile)
}
@@ -236,11 +238,11 @@ export default function UploadPage() {
</span>
</CardTitle>
<CardDescription className="text-sm">
Select video file, detection type, and vehicle speed for analysis
Select video file, detection type, vehicle speed, and method for analysis
</CardDescription>
</CardHeader>
<CardContent className="pt-4 space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
{/* Video File Input */}
<div className="space-y-2">
<Label htmlFor="video-file" className="text-sm font-semibold">
@@ -262,7 +264,7 @@ export default function UploadPage() {
{/* JSON File Input */}
<div className="space-y-2">
<Label htmlFor="json-file" className="text-sm font-semibold">
GPS JSON File <span className="text-gray-400 font-normal text-xs">(Optional)</span>
GPS JSON File
</Label>
<Input
id="json-file"
@@ -276,7 +278,10 @@ export default function UploadPage() {
className="h-10 bg-gray-50 dark:bg-gray-800 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-blue-100 dark:file:bg-blue-900/50 file:text-blue-600 dark:file:text-blue-400 file:font-medium file:text-xs hover:file:bg-blue-200"
/>
</div>
</div>
{/* Detection, Speed, and Method Row */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Detection Type */}
<div className="space-y-2">
<Label htmlFor="detection-type" className="text-sm font-semibold">
@@ -320,6 +325,33 @@ export default function UploadPage() {
className="h-10 bg-gray-50 dark:bg-gray-800"
/>
</div>
{/* Select Method */}
<div className="space-y-2">
<Label htmlFor="select-method" className="text-sm font-semibold">
Select Method
</Label>
<Select
value={selectMethod}
onValueChange={setSelectMethod}
disabled={uploading}
>
<SelectTrigger id="select-method" className="h-10 bg-gray-50 dark:bg-gray-800">
<SelectValue placeholder="Select method" />
</SelectTrigger>
<SelectContent>
<SelectItem value="yolo">
<span className="font-medium">YOLO Detection Model</span>
</SelectItem>
<SelectItem value="yolo-vl">
<span className="font-medium">YOLO with Vision-Language Model</span>
</SelectItem>
<SelectItem value="sam3">
<span className="font-medium">OpenAI SAM 3 Segmentation Model</span>
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{/* Error Display */}

44
components/upload-section.tsx
View File

@@ -24,6 +24,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
const [jsonFile, setJsonFile] = useState<File | null>(null)
const [speed, setSpeed] = useState(30)
const [detectionType, setDetectionType] = useState<DetectionType>("pothole-detection")
const [selectMethod, setSelectMethod] = useState("yolo")
const [uploading, setUploading] = useState(false)
const [progress, setProgress] = useState(0)
const [statusMessage, setStatusMessage] = useState("")
@@ -135,6 +136,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
formData.append("file", file)
formData.append("detection_type", detectionType)
formData.append("speed_kmh", speed.toString())
formData.append("select_method", selectMethod)
// Add JSON file if provided
if (jsonFile) {
@@ -202,11 +204,12 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
<CardHeader>
<CardTitle>Upload Video</CardTitle>
<CardDescription>
Select a video file, detection type, and vehicle speed to start AI-powered analysis
Select video file, detection type, vehicle speed, and method for 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-2 gap-4 mb-4">
{/* Video File Input kept in 2-col row */}
{/* File Input */}
<div className="space-y-2">
<Label htmlFor="video-file">Video File</Label>
@@ -255,6 +258,10 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
)}
</div>
</div>
{/* Detection Type, Speed, and Method - 3 column row */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Detection Type Selector */}
<div className="space-y-2">
<Label htmlFor="detection-type">Detection Type</Label>
@@ -288,7 +295,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
{/* Speed Input */}
<div className="space-y-2">
<Label htmlFor="speed">Speed (km/h)</Label>
<Label htmlFor="speed">Vehicle Speed (km/h)</Label>
<Input
id="speed"
type="number"
@@ -299,6 +306,37 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
disabled={uploading}
/>
</div>
{/* Select Method */}
<div className="space-y-2">
<Label htmlFor="select-method">Select Method</Label>
<Select
value={selectMethod}
onValueChange={setSelectMethod}
disabled={uploading}
>
<SelectTrigger id="select-method">
<SelectValue placeholder="Select method" />
</SelectTrigger>
<SelectContent>
<SelectItem value="yolo">
<div className="flex items-center gap-2">
<span>YOLO</span>
</div>
</SelectItem>
<SelectItem value="yolo-vl">
<div className="flex items-center gap-2">
<span>YOLO with VL</span>
</div>
</SelectItem>
<SelectItem value="sam3">
<div className="flex items-center gap-2">
<span>SAM 3</span>
</div>
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{/* Error Display */}