From abae2d5a8be2dcc949285abf6c04e9caa984a815 Mon Sep 17 00:00:00 2001
From: sumona-banerjeee <sumobanerjee2000@gmail.com>
Date: Mon, 2 Mar 2026 12:51:48 +0530
Subject: [PATCH] feat: add Select Method field with dummy data options

- 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
---
 app/upload/page.tsx           | 38 +++++++++++++++++++++++++++---
 components/upload-section.tsx | 44 ++++++++++++++++++++++++++++++++---
 2 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index fadb85d..5d19ad3 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -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 */}
diff --git a/components/upload-section.tsx b/components/upload-section.tsx
index 07d5fa8..9bc8adf 100644
--- a/components/upload-section.tsx
+++ b/components/upload-section.tsx
@@ -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 */}