refactor: modularize upload page into location, input, and settings sections
This commit is contained in:
@@ -1,256 +1,134 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { FormField } from '@/components/form';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Loader2, TrendingUp } from 'lucide-react';
|
||||
import { Loader2, Play, TrendingUp } from 'lucide-react';
|
||||
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { videoService } from '@/services/api';
|
||||
import { SessionContext } from '@/types';
|
||||
import { ProjectSelectionSection } from '@/components/project-selection-section';
|
||||
import { Reveal } from '@/components/ui/reveal';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { SessionContext } from '@/types';
|
||||
import { ROUTES } from '@/utils/routes';
|
||||
|
||||
const DETECTION_METHODS = [
|
||||
{ value: 'yolo', label: 'Road Defect Detection' },
|
||||
// { value: 'yolo_vl', label: 'YOLO with Vision-Language Model' },
|
||||
// { value: 'sam3', label: 'OpenAI SAM 3 Segmentation Model' },
|
||||
{ value: 'yoloe', label: 'YOLOE Open-Vocabulary Detection' },
|
||||
{ value: 'yoloe_trained_vl', label: 'YOLOE With Vision Language Model' },
|
||||
{ value: 'culvert_detection', label: 'Culvert Detection' },
|
||||
{ value: 'combined', label: 'Road Defect Detection with vl' },
|
||||
// { value: 'gemini_video', label: 'Gemini AI Analysis' },
|
||||
] as const;
|
||||
import { AnalysisSettingsSection } from './components/AnalysisSettingsSection';
|
||||
import { InputDataSection } from './components/InputDataSection';
|
||||
import { LocationSection } from './components/LocationSection';
|
||||
|
||||
export default function UploadPage() {
|
||||
const router = useRouter();
|
||||
const [session, setSession] = useState<SessionContext | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Form states
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [jsonFile, setJsonFile] = useState<File | null>(null);
|
||||
const [selectMethod, setSelectMethod] = useState('yolo');
|
||||
|
||||
// Upload states
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [videoFile, setVideoFile] = useState<File | null>(null);
|
||||
const [gpsFile, setGpsFile] = useState<File | null>(null);
|
||||
const [analysisMethod, setAnalysisMethod] = useState('yolo');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Load session on mount
|
||||
useEffect(() => {
|
||||
// We don't load session on mount for the upload page to ensure
|
||||
// project details are filled manually as requested.
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleSelectionChange = useCallback(
|
||||
(selectedSession: SessionContext | null) => {
|
||||
setSession(selectedSession);
|
||||
},
|
||||
[],
|
||||
const isLocationComplete = Boolean(
|
||||
session?.projectId && session.packageId && session.chainageId,
|
||||
);
|
||||
const canSubmit = Boolean(
|
||||
isLocationComplete && videoFile && gpsFile && analysisMethod,
|
||||
);
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!file) {
|
||||
setError('Please select a video file');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!jsonFile) {
|
||||
setError('Please select a GPS JSON file');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!session) {
|
||||
setError('Please complete the project selection first');
|
||||
const handleSubmit = async () => {
|
||||
if (!session?.chainageId || !videoFile || !gpsFile) {
|
||||
setError('Complete location and input data before starting analysis.');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('detection_mode', selectMethod);
|
||||
formData.append('chainage_id', session.chainageId as string);
|
||||
formData.append('json_file', jsonFile);
|
||||
formData.append('file', videoFile);
|
||||
formData.append('detection_mode', analysisMethod);
|
||||
formData.append('chainage_id', session.chainageId);
|
||||
formData.append('json_file', gpsFile);
|
||||
|
||||
setUploading(true);
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await videoService.uploadVideo(formData);
|
||||
router.push(ROUTES.TICKET);
|
||||
} catch (err) {
|
||||
let errorMessage = 'Upload failed';
|
||||
setIsSubmitting(false);
|
||||
if (err instanceof TypeError && err.message === 'Failed to fetch') {
|
||||
errorMessage =
|
||||
'Cannot connect to server. Please check if backend is running.';
|
||||
} else if (err instanceof Error) {
|
||||
errorMessage = err.message;
|
||||
setError('Cannot connect to server. Please check if backend is running.');
|
||||
return;
|
||||
}
|
||||
setError(errorMessage);
|
||||
setUploading(false);
|
||||
setError(err instanceof Error ? err.message : 'Upload failed');
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isSessionComplete = !!(
|
||||
session?.projectId && session.packageId && session.chainageId
|
||||
);
|
||||
const isFormValid = isSessionComplete && file && jsonFile;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-12">
|
||||
<main>
|
||||
{/* Header */}
|
||||
<div className="mb-10">
|
||||
<PageHeader
|
||||
title="Intelligent Road Asset AI Analysis"
|
||||
description="High-precision detection for potholes, signboards, and culverts from video data"
|
||||
icon={TrendingUp}
|
||||
<div className="space-y-5">
|
||||
<PageHeader
|
||||
title="Create Analysis Job"
|
||||
description="Configure location, upload data, and start AI analysis."
|
||||
icon={TrendingUp}
|
||||
/>
|
||||
|
||||
<Card>
|
||||
<CardContent className="space-y-5 p-5">
|
||||
<LocationSection
|
||||
value={session}
|
||||
onChange={setSession}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 mt-8">
|
||||
{/* Module 1: Project Selection */}
|
||||
<Reveal direction="up" delay={0.1}>
|
||||
<Card className="border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold">
|
||||
1. Project Details
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Select the target project, package, and segment.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ProjectSelectionSection
|
||||
onSelectionChange={handleSelectionChange}
|
||||
asStep={true}
|
||||
hideButton={true}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Reveal>
|
||||
<Separator />
|
||||
|
||||
{/* Module 2: Upload Data */}
|
||||
<Reveal direction="up" delay={0.2}>
|
||||
<Card
|
||||
className={cn(
|
||||
'border transition-all duration-300',
|
||||
!isSessionComplete &&
|
||||
'opacity-60 pointer-events-none grayscale-[0.5]',
|
||||
)}
|
||||
<InputDataSection
|
||||
videoFile={videoFile}
|
||||
gpsFile={gpsFile}
|
||||
onVideoFileChange={(file) => {
|
||||
setVideoFile(file);
|
||||
setError(null);
|
||||
}}
|
||||
onGpsFileChange={(file) => {
|
||||
setGpsFile(file);
|
||||
setError(null);
|
||||
}}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
|
||||
<Separator />
|
||||
|
||||
<AnalysisSettingsSection
|
||||
value={analysisMethod}
|
||||
onValueChange={setAnalysisMethod}
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
size="lg"
|
||||
disabled={!canSubmit || isSubmitting}
|
||||
onClick={handleSubmit}
|
||||
className="w-full gap-2 md:w-auto"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold flex items-center gap-2">
|
||||
2. Upload Video Data
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Provide the video file and GPS telemetry for processing.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<FormField id="video-file" label="Video File" required>
|
||||
<Input
|
||||
id="video-file"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files?.[0] || null);
|
||||
setError(null);
|
||||
}}
|
||||
disabled={uploading || !isSessionComplete}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField id="json-file" label="GPS JSON File" required>
|
||||
<Input
|
||||
id="json-file"
|
||||
type="file"
|
||||
accept=".json,application/json"
|
||||
onChange={(e) => {
|
||||
setJsonFile(e.target.files?.[0] || null);
|
||||
setError(null);
|
||||
}}
|
||||
disabled={uploading || !isSessionComplete}
|
||||
required
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField id="select-method" label="Analysis Method">
|
||||
<Select
|
||||
value={selectMethod}
|
||||
onValueChange={setSelectMethod}
|
||||
disabled={uploading || !isSessionComplete}
|
||||
>
|
||||
<SelectTrigger id="select-method">
|
||||
<SelectValue placeholder="Select method" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{DETECTION_METHODS.map((method) => (
|
||||
<SelectItem key={method.value} value={method.value}>
|
||||
{method.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="p-4 rounded-md bg-destructive/5 border border-destructive/20 text-destructive text-sm font-medium animate-in fade-in slide-in-from-top-1">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={!isFormValid || uploading}
|
||||
className="w-full"
|
||||
>
|
||||
{uploading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Uploading...
|
||||
</span>
|
||||
) : (
|
||||
'Upload and Process'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Reveal>
|
||||
</div>
|
||||
</main>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Starting analysis...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="size-4" />
|
||||
Start Analysis
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user