(null);
const [selectedTab, setSelectedTab] = useState<'gallery' | 'analytics' | 'export'>('gallery');
useEffect(() => {
// Get deployment ID from URL parameters
const urlDeploymentId = searchParams.get('deploymentId');
if (!urlDeploymentId) {
console.error('[InferenceResults] No deployment ID found in URL parameters for session:', sessionId);
setError('No deployment ID found. Please start inference again.');
setLoading(false);
return;
}
// Decode the deployment ID in case it was URL encoded
const decodedDeploymentId = decodeURIComponent(urlDeploymentId);
setDeploymentId(decodedDeploymentId);
console.log(`[InferenceResults] Starting to fetch results for deployment: ${decodedDeploymentId}`);
setLoading(true);
setError(null);
InferenceService.inferenceStatus(decodedDeploymentId)
.then((res) => {
console.log('[InferenceResults] Raw API response:', res);
console.log('[InferenceResults] Response type:', typeof res);
console.log('[InferenceResults] Response structure:', Object.keys(res || {}));
if (res && Array.isArray(res.result)) {
console.log(`[InferenceResults] Found ${res.result.length} results in response`);
console.log('[InferenceResults] First few results:', res.result.slice(0, 3));
// Log details about each result
res.result.forEach((result, index) => {
console.log(`[InferenceResults] Result ${index}:`, {
hasImage: !!result.image,
imageName: result.image,
hasClassification: !!result.classification,
classification: result.classification,
hasBase64: !!result.base64,
base64Length: result.base64 ? result.base64.length : 0
});
});
setResults(res.result);
} else {
console.warn('[InferenceResults] Response does not contain valid result array:', {
hasRes: !!res,
hasResult: !!(res && res.result),
resultType: res && res.result ? typeof res.result : 'undefined',
isArray: res && res.result ? Array.isArray(res.result) : false
});
setResults([]);
}
setLoading(false);
console.log('[InferenceResults] Successfully completed fetching results');
})
.catch((e) => {
console.error('[InferenceResults] Error fetching results:', e);
console.error('[InferenceResults] Error details:', {
message: e.message,
stack: e.stack,
name: e.name
});
setError('Failed to fetch results.');
setLoading(false);
});
}, [sessionId, searchParams]); // Updated dependencies
// Gallery Tab: Scrollable grid of image results
const renderGalleryTab = () => (
{loading && (
Loading...
)}
{error && (
{error}
)}
{!loading && !error && (
{results.map((item, idx) => (
{item.base64 ? (
) : (
No Image
)}
{item.classification || No label}
{item.image || No image name}
))}
{results.length === 0 && (
No results to display.
)}
)}
📈
Analytics and charts coming soon.
);
// Export Tab: Placeholder for future export options
const renderExportTab = () => (
({
isRunning: true,
currentEpoch: 1,
totalEpochs: 3,
currentStep: 0,
totalSteps: 120, // Assuming total steps, adjust if available from backend
startTime: Date.now(),
elapsedTime: 0,
estimatedTimeRemaining: 0,
learningRate: 0.00001
});
// Metrics data
const [trainLossData, setTrainLossData] = useState([]);
const [valLossData, setValLossData] = useState([]);
const [trainAccData, setTrainAccData] = useState([]);
const [valAccData, setValAccData] = useState([]);
// UI state
const [showConfig, setShowConfig] = useState(false);
const [showLogs, setShowLogs] = useState(false);
const [logMessages, setLogMessages] = useState([]);
// Training completed state
const [isCompleted, setIsCompleted] = useState(false);
// System resources state
const [systemResources, setSystemResources] = useState({
gpuMemory: 14.2,
cpuUsage: 67,
diskIO: 24,
networkIO: 12
});
// Fetch real-time data from the backend
useEffect(() => {
if (!sessionId || !trainingStatus.isRunning) return;
const intervalId = setInterval(async () => {
try {
const status = await TrainService.trainStatus(sessionId);
const trainLoss = status.train_loss || [];
const valLoss = status.val_loss || [];
const trainAcc = status.train_acc || [];
const valAcc = status.val_acc || [];
setTrainLossData(trainLoss.map((value, index) => ({
step: index + 1, value, epoch: 0, timestamp: Date.now()
})));
setValLossData(valLoss.map((value, index) => ({
step: index + 1, value, epoch: 0, timestamp: Date.now()
})));
setTrainAccData(trainAcc.map((value, index) => ({
step: index + 1, value, epoch: 0, timestamp: Date.now()
})));
setValAccData(valAcc.map((value, index) => ({
step: index + 1, value, epoch: 0, timestamp: Date.now()
})));
const currentStep = trainLoss.length;
const elapsedTime = Date.now() - trainingStatus.startTime;
let estimatedTimeRemaining = 0;
if (currentStep > 0 && trainingStatus.totalSteps > 0) {
const totalTimeEstimate = (elapsedTime / currentStep) * trainingStatus.totalSteps;
estimatedTimeRemaining = Math.max(0, totalTimeEstimate - elapsedTime);
}
setTrainingStatus(prev => ({
...prev,
currentStep: currentStep,
currentEpoch: prev.totalSteps > 0 && prev.totalEpochs > 0 ? Math.min(prev.totalEpochs, Math.floor(currentStep / (prev.totalSteps / prev.totalEpochs)) + 1) : 1,
elapsedTime: elapsedTime,
estimatedTimeRemaining: estimatedTimeRemaining
}));
if (status.finished) {
setTrainingStatus(prev => ({ ...prev, isRunning: false, estimatedTimeRemaining: 0 }));
setIsCompleted(true);
setLogMessages(prev => [...prev, "Training completed successfully! 🎉"]);
clearInterval(intervalId);
}
} catch (error) {
console.error("Failed to fetch training status:", error);
setTrainingStatus(prev => ({ ...prev, isRunning: false }));
clearInterval(intervalId);
}
}, 1000);
return () => clearInterval(intervalId);
}, [sessionId, trainingStatus.isRunning, trainingStatus.startTime, trainingStatus.totalSteps, trainingStatus.totalEpochs]);
// System resource fluctuation effect
useEffect(() => {
if (!trainingStatus.isRunning) return;
const resourceInterval = setInterval(() => {
setSystemResources(prev => ({
gpuMemory: Math.max(12.0, Math.min(15.8, prev.gpuMemory + (Math.random() - 0.5) * 0.4)),
cpuUsage: Math.max(45, Math.min(85, prev.cpuUsage + (Math.random() - 0.5) * 8)),
diskIO: Math.max(5, Math.min(65, prev.diskIO + (Math.random() - 0.5) * 15)),
networkIO: Math.max(2, Math.min(35, prev.networkIO + (Math.random() - 0.5) * 8))
}));
}, 2000);
return () => clearInterval(resourceInterval);
}, [trainingStatus.isRunning]);
const getProgressPercentage = () => {
return (trainingStatus.currentStep / trainingStatus.totalSteps) * 100;
};
const getCurrentEpoch = () => {
// Infer epoch from training data length and steps per epoch
const currentStep = trainLossData.length;
const stepsPerEpoch = Math.floor(trainingStatus.totalSteps / trainingStatus.totalEpochs);
return Math.min(trainingStatus.totalEpochs, Math.floor(currentStep / stepsPerEpoch) + 1);
};
const getCurrentLoss = () => {
return trainLossData.length > 0 ? trainLossData[trainLossData.length - 1].value : 0;
};
const getBestAccuracy = () => {
return valAccData.length > 0 ? Math.max(...valAccData.map(d =>
[truncated — 4474 more characters]
```
### frontend/src/app/inference/[sessionId]/page.tsx
```typescript
"use client";
import { useState, useRef } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { useChatContext } from '@/components/ChatWidget';
import { InferenceService } from '@/api/services/InferenceService';
import { UploadedFile } from '@/utils/types';
import { allModels } from '@/utils/models';
import {
ModelSelection,
FileUpload,
NavigationBar,
NotificationBanner,
PageLayout,
NavigationStep,
SidebarStep
} from '@/components/shared';
export default function InferencePage() {
const params = useParams();
const router = useRouter();
const { isChatOpen, openChatWithMessage } = useChatContext();
const sessionId = params.sessionId as string;
// State management
const [selectedModel, setSelectedModel] = useState('');
const [uploadedFiles, setUploadedFiles] = useState([]);
const [dragActive, setDragActive] = useState(false);
const [currentStep, setCurrentStep] = useState(1);
const fileInputRef = useRef(null);
const dropRef = useRef(null);
// Navigation and steps configuration
const steps: SidebarStep[] = [
{ step: 1, title: "Select Model", icon: "🤖" },
{ step: 2, title: "Upload Data", icon: "📁" },
{ step: 3, title: "Review & Start", icon: "🔮" },
];
// Handle file upload (just store locally, don't upload to backend yet)
const handleFileUpload = async (files: FileList) => {
Array.from(files).forEach((file) => {
// Check if file is a zip file
if (!file.name.toLowerCase().endsWith('.zip') && file.type !== 'application/zip' && file.type !== 'application/x-zip-compressed') {
alert(`File "${file.name}" is not a ZIP file. Please upload ZIP files only.`);
return;
}
const fileId = Math.random().toString(36).substr(2, 9);
const uploadedFile: UploadedFile = {
id: fileId,
name: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified,
status: 'ready',
progress: 0,
file: file // Store the actual file object
};
setUploadedFiles(prev => [...prev, uploadedFile]);
});
};
// Upload files to backend when transitioning to review step
const uploadFilesToBackend = async () => {
const filesToUpload = uploadedFiles.filter(f => f.status === 'ready');
if (filesToUpload.length === 0) return;
// Get the deployment ID for the selected model
const deploymentId = await getDeploymentId(selectedModel);
if (!deploymentId) {
console.error('Could not find deployment ID for selected model:', selectedModel);
alert('Failed to upload files: Model deployment not found. Please try selecting a different model.');
return;
}
console.log(`Starting upload of ${filesToUpload.length} files to backend using deployment ID: ${deploymentId}...`);
for (const fileData of filesToUpload) {
if (!fileData.file) continue;
console.log(`Uploading file: ${fileData.name} (${formatFileSize(fileData.size)})`);
// Update status to uploading
setUploadedFiles(prev =>
prev.map(f => f.id === fileData.id ? { ...f, status: 'uploading', progress: 0 } : f)
);
try {
// Simulate progress for better UX
const progressInterval = setInterval(() => {
setUploadedFiles(prev =>
prev.map(f => {
if (f.id === fileData.id && f.progress < 90) {
return { ...f, progress: f.progress + 10 };
}
return f;
})
);
}, 100);
// Create a FormData with the file for the API call
const formData = {
file: fileData.file
};
// Call the actual API with deployment ID
await InferenceService.inferenceUploadData(deploymentId, formData);
// Clear progress interval and update status to completed
clearInterval(progressInterval);
console.log(`✅ Successfully uploaded: ${fileData.name}`);
setUploadedFiles(prev =>
prev.map(f => f.id === fileData.id ? { ...f, status: 'completed', progress: 100 } : f)
);
} catch (error) {
console.error(`❌ Upload failed for ${fileData.name}:`, error);
// Update status to error on failure
setUploadedFiles(prev =>
prev.map(f => f.id === fileData.id ? { ...f, status: 'error', progress: 0 } : f)
);
}
}
console.log('🎉 All file uploads completed!');
};
// Drag and drop handlers
const handleDragEnter = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragActive(true);
};
const handleDragLeave = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragActive(false);
};
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragActive(false);
const files = e.dataTransfer.files;
if (files && files.length > 0) {
handleFileUpload(files);
}
};
const formatFileSize = (bytes: number) => {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
const removeFile = (fileId: string) => {
setUploadedFiles(prev => prev.filter(f => f.id !== fileId));
};
// Function to determine model type based on selected model
const getModelType = (modelId: string): 'classification' | 'segmentation' | 'generation' | 'bbox' => {
const model = allModels.find(m => m.id === modelId);
if (!model) return 'generation'; // default fallback
// Map based on model tags and name
if (model.tags.includes('bert') || model.tags.includes('classification') || model.name.toLowerCase().includes('clinical')) {
return 'classification';
}
if (model.tags.includes('segmentation') || model.name.toLowerCase().includes('segment')) {
return 'segmentation';
}
if (model.tags.includes('bbox') || model.name.toLowerCase().includes('detection')) {
return 'bbox';
}
// Default to generation for GPT-like mod
[truncated — 9635 more characters]
```
### frontend/src/app/finetune/[sessionId]/page.tsx
```typescript
"use client";
import { useState, useRef } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { useChatContext } from '@/components/ChatWidget';
import { TrainService } from '@/api/services/TrainService';
import { UploadedFile } from '@/utils/types';
import { allModels } from '@/utils/models';
import {
ModelSelection,
FileUpload,
NavigationBar,
NotificationBanner,
PageLayout,
NavigationStep,
SidebarStep
} from '@/components/shared';
export default function FinetunePage() {
const params = useParams();
const router = useRouter();
const { isChatOpen, openChatWithMessage } = useChatContext();
const sessionId = params.sessionId as string;
// State management
const [selectedModel, setSelectedModel] = useState('');
const [uploadedFiles, setUploadedFiles] = useState([]);
const [dragActive, setDragActive] = useState(false);
const [currentStep, setCurrentStep] = useState(1);
const fileInputRef = useRef(null);
const dropRef = useRef(null);
// Navigation and steps configuration
const steps: SidebarStep[] = [
{ step: 1, title: "Select Base Model", icon: "🤖" },
{ step: 2, title: "Upload Training Data", icon: "📁" },
{ step: 3, title: "Configure Parameters", icon: "⚙️" },
{ step: 4, title: "Review & Start", icon: "🚀" },
];
// Handle file upload (just store locally, don't upload to backend yet)
const handleFileUpload = async (files: FileList) => {
Array.from(files).forEach((file) => {
// Check if file is a zip file
if (!file.name.toLowerCase().endsWith('.zip') && file.type !== 'application/zip' && file.type !== 'application/x-zip-compressed') {
alert(`File "${file.name}" is not a ZIP file. Please upload ZIP files only.`);
return;
}
const fileId = Math.random().toString(36).substr(2, 9);
const uploadedFile: UploadedFile = {
id: fileId,
name: file.name,
size: file.size,
type: file.type,
lastModified: file.lastModified,
status: 'ready',
progress: 0,
file: file // Store the actual file object
};
setUploadedFiles(prev => [...prev, uploadedFile]);
});
};
// Upload files to backend when transitioning to parameters step
const uploadFilesToBackend = async () => {
const filesToUpload = uploadedFiles.filter(f => f.status === 'ready');
if (filesToUpload.length === 0) return;
console.log(`Starting upload of ${filesToUpload.length} files to backend...`);
for (const fileData of filesToUpload) {
if (!fileData.file) continue;
console.log(`Uploading file: ${fileData.name} (${formatFileSize(fileData.size)})`);
// Update status to uploading
setUploadedFiles(prev =>
prev.map(f => f.id === fileData.id ? { ...f, status: 'uploading', progress: 0 } : f)
);
try {
// Simulate progress for better UX
const progressInterval = setInterval(() => {
setUploadedFiles(prev =>
prev.map(f => {
if (f.id === fileData.id && f.progress < 90) {
return { ...f, progress: f.progress + 10 };
}
return f;
})
);
}, 100);
// Create a FormData with the file for the API call
const formData = {
file: fileData.file
};
// Call the actual API
await TrainService.trainUploadData(sessionId, formData);
// Clear progress interval and update status to completed
clearInterval(progressInterval);
console.log(`✅ Successfully uploaded: ${fileData.name}`);
setUploadedFiles(prev =>
prev.map(f => f.id === fileData.id ? { ...f, status: 'completed', progress: 100 } : f)
);
} catch (error) {
console.error(`❌ Upload failed for ${fileData.name}:`, error);
// Update status to error on failure
setUploadedFiles(prev =>
prev.map(f => f.id === fileData.id ? { ...f, status: 'error', progress: 0 } : f)
);
}
}
console.log('🎉 All file uploads completed!');
};
// Drag and drop handlers
const handleDragEnter = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragActive(true);
};
const handleDragLeave = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragActive(false);
};
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setDragActive(false);
const files = e.dataTransfer.files;
if (files && files.length > 0) {
handleFileUpload(files);
}
};
const formatFileSize = (bytes: number) => {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
const removeFile = (fileId: string) => {
setUploadedFiles(prev => prev.filter(f => f.id !== fileId));
};
// Function to determine model type based on selected model
const getModelType = (modelId: string): 'classification' | 'segmentation' | 'generation' | 'bbox' => {
const model = allModels.find(m => m.id === modelId);
if (!model) return 'generation'; // default fallback
// Map based on model tags and name
if (model.tags.includes('bert') || model.tags.includes('classification') || model.name.toLowerCase().includes('clinical')) {
return 'classification';
}
if (model.tags.includes('segmentation') || model.name.toLowerCase().includes('segment')) {
return 'segmentation';
}
if (model.tags.includes('bbox') || model.name.toLowerCase().includes('detection')) {
return 'bbox';
}
// Default to generation for GPT-like models and others
return 'generation';
};
// Function to start training
const handleStartTraining = async () => {
if (!selectedModel) {
console.error('No model selected');
return;
}
try {
console.log('Starting training process...');
const modelType = getModelType(selectedModel);
console.log(`Model type determined
[truncated — 12803 more characters]
```
[58 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]