backend-api/frontend/components/models/model-card.tsx

129 lines
4.2 KiB
TypeScript

// import {
// ArrowRight,
// Clock,
// Database,
// Info,
// Link,
// Settings,
// Sliders,
// Trash2,
// } from "lucide-react";
// import { Badge } from "../ui/badge";
// import { Button } from "../ui/button";
// import {
// Card,
// CardContent,
// CardDescription,
// CardFooter,
// CardHeader,
// CardTitle,
// } from "../ui/card";
// interface ModelCardProps {
// model: {
// id: string;
// name: string;
// type: string;
// // hyperparameters: {
// // [key: string]: string;
// // };
// // dataSource: string;
// status: string;
// // lastUpdated: string;
// // isSystem: boolean;
// };
// }
// export function ModelCard({ model }: ModelCardProps) {
// return (
// <Card>
// <CardHeader className="pb-2">
// <div className="flex justify-between items-start">
// <CardTitle className="text-lg">{model.name}</CardTitle>
// <Badge variant={model.status === "active" ? "default" : "secondary"}>
// {model.status === "active" ? "Active" : "Inactive"}
// </Badge>
// </div>
// <CardDescription>{model.type} Model</CardDescription>
// </CardHeader>
// <CardContent>
// <div className="space-y-4">
// <div>
// <div className="flex items-center gap-1 mb-1">
// <Database className="h-4 w-4 text-primary" />
// <span className="text-sm font-medium">Data Source:</span>
// </div>
// {model.isSystem ? (
// <div className="flex items-center gap-1 text-sm">
// <Badge variant="outline" className="bg-primary/5">
// System Base Model
// </Badge>
// <span title="This is a pre-trained system model">
// <Info className="h-4 w-4 text-muted-foreground cursor-help" />
// </span>
// </div>
// ) : (
// <span className="text-sm">{model.dataSource}</span>
// )}
// </div>
// <div>
// <div className="flex items-center gap-1 mb-1">
// <Sliders className="h-4 w-4 text-primary" />
// <span className="text-sm font-medium">Hyperparameters:</span>
// </div>
// <div className="grid grid-cols-1 gap-1">
// {Object.entries(model.hyperparameters).map(([key, value]) => (
// <div key={key} className="flex justify-between text-xs">
// <span className="text-muted-foreground">{key}:</span>
// <span>{value}</span>
// </div>
// ))}
// </div>
// </div>
// <div className="flex items-center text-sm">
// <Clock className="h-4 w-4 mr-2 text-muted-foreground" />
// <span className="text-muted-foreground">Last updated:</span>
// <span className="ml-1 font-medium">{model.lastUpdated}</span>
// </div>
// </div>
// </CardContent>
// <CardFooter className="flex justify-between">
// <Button variant="outline" size="sm" asChild>
// <Link
// href={model.isSystem ? "/documentation/models" : "/models/details"}
// >
// View Details
// </Link>
// </Button>
// <div className="flex gap-2">
// <Button
// variant="outline"
// size="icon"
// className="h-8 w-8 text-primary border-primary/20 hover:border-primary"
// >
// <Settings className="h-4 w-4" />
// </Button>
// {!model.isSystem && (
// <Button
// variant="outline"
// size="icon"
// className="h-8 w-8 border-primary/20 hover:border-primary"
// >
// <Trash2 className="h-4 w-4" />
// </Button>
// )}
// <Button
// variant="outline"
// size="icon"
// className="h-8 w-8 border-primary/20 hover:border-primary"
// >
// <ArrowRight className="h-4 w-4" />
// </Button>
// </div>
// </CardFooter>
// </Card>
// );
// }