1
0
cvsa-legacy/packages/ml_panel/src/App.tsx

73 lines
2.5 KiB
TypeScript

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CardDescription, CardTitle } from "@/components/ui/card";
import { DatasetManager } from "@/components/DatasetManager";
import { TaskMonitor } from "@/components/TaskMonitor";
import { SamplingPanel } from "@/components/SamplingPanel";
import { Database, Activity, Settings } from "lucide-react";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 3,
refetchOnWindowFocus: false
}
}
});
function App() {
return (
<QueryClientProvider client={queryClient}>
<div className="min-h-screen flex justify-center">
<div className="container lg:max-w-3xl xl:max-w-4xl bg-background py-8 px-3">
<div className="mb-8">
<h1 className="text-3xl font-bold tracking-tight">ML Dataset Management Panel</h1>
<p className="text-muted-foreground">
Create and manage machine learning datasets with multiple sampling strategies and task monitoring
</p>
</div>
<Tabs defaultValue="datasets" className="space-y-4">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="datasets" className="flex items-center gap-2">
<Database className="h-4 w-4" />
Datasets
</TabsTrigger>
<TabsTrigger value="sampling" className="flex items-center gap-2">
<Settings className="h-4 w-4" />
Sampling
</TabsTrigger>
<TabsTrigger value="monitor" className="flex items-center gap-2">
<Activity className="h-4 w-4" />
Tasks
</TabsTrigger>
</TabsList>
<TabsContent value="datasets" className="space-y-4">
<CardTitle>Dataset Management</CardTitle>
<CardDescription>View, create and manage your machine learning datasets</CardDescription>
<DatasetManager />
</TabsContent>
<TabsContent value="sampling" className="space-y-4">
<CardTitle>Sampling Strategy Configuration</CardTitle>
<CardDescription>
Configure different data sampling strategies to create balanced datasets
</CardDescription>
<SamplingPanel />
</TabsContent>
<TabsContent value="monitor" className="space-y-4">
<CardTitle>Task Monitor</CardTitle>
<CardDescription>Monitor real-time status and progress of dataset building tasks</CardDescription>
<TaskMonitor />
</TabsContent>
</Tabs>
</div>
</div>
</QueryClientProvider>
);
}
export default App;