feat(api): restructure api with axios and chainage related changes

src/components/upload-section.tsx

@@ -10,6 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Upload, Loader2, AlertCircle } from "lucide-react"
 import type { DetectionData, DetectionType } from "@/types"
 
+import { videoService } from "@/services/api"
 const API_URL = process.env.NEXT_PUBLIC_API_URL
 const WS_URL = API_URL?.replace(/^https:\/\//, "wss://").replace(/^http:\/\//, "ws://")
 
@@ -109,17 +110,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
   const loadResults = async (videoId: string) => {
     try {
       console.log("[Upload] Loading results for:", videoId)
-      const response = await fetch(`${API_URL}/results/${videoId}`, {
-        headers: {
-          "ngrok-skip-browser-warning": "true"
-        }
-      })
-
-      if (!response.ok) {
-        throw new Error(`Failed to load results: ${response.status}`)
-      }
-
-      const detectionData: DetectionData = await response.json()
+      const detectionData: DetectionData = await videoService.getVideoResults(videoId);
       console.log("[Upload] Results loaded:", detectionData)
 
       setUploading(false)
@@ -162,29 +153,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
     setError(null)
 
     try {
-      console.log("[Upload] Uploading to:", `${API_URL}/upload`)
-      console.log("[Upload] Detection type:", detectionType)
-      console.log("[Upload] FormData contents:")
-      console.log("  - file:", file.name)
-      console.log("  - detection_type:", detectionType)
-      console.log("  - speed_kmh:", speed)
-
-      const response = await fetch(`${API_URL}/upload`, {
-        method: "POST",
-        headers: {
-          "ngrok-skip-browser-warning": "true"
-        },
-        body: formData
-      })
-
-      console.log("[Upload] Upload response status:", response.status)
-
-      if (!response.ok) {
-        const errorText = await response.text()
-        throw new Error(`Upload failed (${response.status}): ${errorText}`)
-      }
-
-      const result = await response.json()
+      const result = await videoService.uploadVideo(formData);
       const videoId = result.video_id
 
       console.log("[Upload] Video uploaded successfully, ID:", videoId)
@@ -200,7 +169,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
       let errorMessage = "Upload failed"
 
       if (error instanceof TypeError && error.message === "Failed to fetch") {
-        errorMessage = "Cannot connect to server. Please check:\n• Backend is running on " + API_URL + "\n• CORS is configured properly\n• No firewall blocking the connection"
+        errorMessage = "Cannot connect to server. Please check if backend is running."
       } else if (error instanceof Error) {
         errorMessage = error.message
       }