Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { apiRequest } from "@/lib/queryClient";
import { Loader2, Star, TrendingUp, Zap, DollarSign } from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";
interface ModelStats {
modelName: string;
count: number;
successRate: number;
avgLatency: number;
avgCost: string;
avgRating: string | null;
}
interface CategoryModelMap {
category: string;
models: ModelStats[];
}
const categoryColors: Record<string, string> = {
writing: "border-blue-500",
research: "border-purple-500",
coding: "border-green-500",
analysis: "border-orange-500",
creative: "border-pink-500",
education: "border-indigo-500",
business: "border-gray-500",
general: "border-teal-500",
};
export function ModelMapVisualization() {
const { data: modelMap = [], isLoading } = useQuery<CategoryModelMap[]>({
queryKey: ["/api/ai/model-map"],
queryFn: async () => {
const res = await apiRequest("GET", "/api/ai/model-map");
return res.json();
},
});
const computeModelScore = (model: ModelStats) => {
const successScore = model.successRate * 0.4;
const ratingScore =
(model.avgRating ? parseFloat(model.avgRating) * 20 : 0) * 0.4;
// Guard against avgLatency being 0 (no successful results) or negative
const latencyScore =
model.avgLatency > 0 ? (1000 / model.avgLatency) * 0.2 : 0;
return successScore + ratingScore + latencyScore;
};
const getBestModelForCategory = (models: ModelStats[]) => {
if (models.length === 0) return null;
// Score based on success rate, rating, and inverse of latency
return models.reduce((best, model) => {
const score = computeModelScore(model);
const bestScore = computeModelScore(best);
return score > bestScore ? model : best;
});
};
if (isLoading) {
return (
<Card>
<CardContent className="flex items-center justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</CardContent>
</Card>
);
}
if (modelMap.length === 0) {
return (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<p className="text-muted-foreground">
No test data available yet. Run some prompt tests to see the model map!
</p>
</CardContent>
</Card>
);
}
return (
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold mb-2">Model Performance Map</h2>
<p className="text-muted-foreground">
Visual overview of how different models perform across various use cases
</p>
</div>
<ScrollArea className="h-[600px]">
<div className="grid gap-6">
{modelMap.map(({ category, models }) => {
const bestModel = getBestModelForCategory(models);
const borderColor = categoryColors[category] || "border-gray-500";
return (
<Card key={category} className={`border-l-4 ${borderColor}`}>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle className="capitalize">{category}</CardTitle>
<CardDescription>
{models.length} model{models.length !== 1 ? 's' : ''} tested
</CardDescription>
</div>
{bestModel && (
<Badge variant="outline" className="flex items-center gap-1">
<TrendingUp className="h-3 w-3" />
Best: {bestModel.modelName}
</Badge>
)}
</div>
</CardHeader>
<CardContent>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{models.map(model => (
<div
key={model.modelName}
className={`border rounded-lg p-4 ${
bestModel?.modelName === model.modelName
? "border-primary bg-primary/5"
: ""
}`}
>
<div className="flex items-center justify-between mb-3">
<h4 className="font-semibold text-sm">{model.modelName}</h4>
{bestModel?.modelName === model.modelName && (
<Badge className="text-xs">Recommended</Badge>
)}
</div>
<div className="space-y-2 text-sm">
<div className="flex items-center justify-between">
<span className="text-muted-foreground">Tests Run:</span>
<span className="font-medium">{model.count}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-muted-foreground">Success Rate:</span>
<span className={`font-medium ${
model.successRate >= 90 ? "text-green-600" :
model.successRate >= 70 ? "text-yellow-600" :
"text-red-600"
}`}>
{model.successRate.toFixed(1)}%
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-muted-foreground flex items-center gap-1">
<Zap className="h-3 w-3" />
Avg Latency:
</span>
<span className="font-medium">{model.avgLatency}ms</span>
</div>
<div className="flex items-center justify-between">
<span className="text-muted-foreground flex items-center gap-1">
<DollarSign className="h-3 w-3" />
Avg Cost:
</span>
<span className="font-medium">${model.avgCost}</span>
</div>
{model.avgRating && (
<div className="flex items-center justify-between">
<span className="text-muted-foreground flex items-center gap-1">
<Star className="h-3 w-3" />
User Rating:
</span>
<span className="font-medium">{model.avgRating}★</span>
</div>
)}
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
})}
</div>
</ScrollArea>
</div>
);
}
|