Merge 098c2faae9 into 2b1a29d44b

src/lib/components/admin/Evaluations/Leaderboard.svelte

@@ -89,8 +89,10 @@
 	//
 	//////////////////////
 
+	let modelRatingHistory = new Map();
+
 	const rankHandler = async (similarities: Map<string, number> = new Map()) => {
-		const modelStats = calculateModelStats(feedbacks, similarities);
+		const modelStats = calculateModelStats(feedbacks, similarities, modelRatingHistory);
 
 		rankedModels = $models
 			.filter((m) => m?.owned_by !== 'arena' && (m?.info?.meta?.hidden ?? false) !== true)
@@ -118,7 +120,8 @@
 
 	function calculateModelStats(
 		feedbacks: Feedback[],
-		similarities: Map<string, number>
+		similarities: Map<string, number>,
+		historyMap: Map<string, Array<{ timestamp: number; rating: number }>>
 	): Map<string, ModelStats> {
 		const stats = new Map<string, ModelStats>();
 		const K = 32;
@@ -127,12 +130,21 @@
 			return stats.get(modelId) || { rating: 1000, won: 0, lost: 0 };
 		}
 
-		function updateStats(modelId: string, ratingChange: number, outcome: number) {
+		function updateStats(
+			modelId: string,
+			ratingChange: number,
+			outcome: number,
+			timestamp: number
+		) {
 			const currentStats = getOrDefaultStats(modelId);
 			currentStats.rating += ratingChange;
 			if (outcome === 1) currentStats.won++;
 			else if (outcome === 0) currentStats.lost++;
 			stats.set(modelId, currentStats);
+			if (historyMap) {
+				if (!historyMap.has(modelId)) historyMap.set(modelId, []);
+				historyMap.get(modelId).push({ timestamp, rating: Math.round(currentStats.rating) });
+			}
 		}
 
 		function calculateEloChange(
@@ -172,8 +184,8 @@
 				const changeA = calculateEloChange(statsA.rating, statsB.rating, outcome, similarity);
 				const changeB = calculateEloChange(statsB.rating, statsA.rating, 1 - outcome, similarity);
 
-				updateStats(modelA, changeA, outcome);
+				updateStats(modelA, changeA, outcome, feedback.updated_at);
-				updateStats(modelB, changeB, 1 - outcome);
+				updateStats(modelB, changeB, 1 - outcome, feedback.updated_at);
 			});
 		});
 
@@ -329,10 +341,11 @@
 	});
 </script>
 
-<ModelModal
+`<ModelModal
 	bind:show={showLeaderboardModal}
 	model={selectedModel}
 	{feedbacks}
+	{modelRatingHistory}
 	onClose={closeLeaderboardModal}
 />
 

src/lib/components/admin/Evaluations/LeaderboardModal.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import Modal from '$lib/components/common/Modal.svelte';
-	import { getContext } from 'svelte';
+	import { getContext, onMount, afterUpdate } from 'svelte';
 	export let show = false;
 	export let model = null;
+	export let modelRatingHistory = new Map();
 	export let feedbacks = [];
 	export let onClose: () => void = () => {};
 	const i18n = getContext('i18n');
@@ -29,6 +30,50 @@
 			.slice(0, topN)
 			.map(([tag, count]) => ({ tag, count }));
 	};
+
+	let chartCanvas;
+	let chart;
+
+	$: chartData =
+		model && modelRatingHistory && modelRatingHistory.has(model.id)
+			? modelRatingHistory.get(model.id)
+			: [];
+
+	async function renderChart() {
+		if (!chartCanvas || !chartData || chartData.length < 2) return;
+		const { Chart, registerables } = await import('chart.js');
+		Chart.register(...registerables);
+		if (chart) chart.destroy();
+		chart = new Chart(chartCanvas, {
+			type: 'line',
+			data: {
+				labels: chartData.map((d) => new Date(d.timestamp * 1000).toLocaleDateString()),
+				datasets: [
+					{
+						label: 'Rating',
+						data: chartData.map((d) => d.rating),
+						borderColor: 'rgba(75,192,192,1)',
+						backgroundColor: 'rgba(75,192,192,0.1)',
+						tension: 0.2,
+						pointRadius: 2,
+						fill: false
+					}
+				]
+			},
+			options: {
+				scales: {
+					y: { beginAtZero: false, title: { display: true, text: 'Elo Rating' } },
+					x: { title: { display: true, text: 'Date' } }
+				},
+				plugins: { legend: { display: false } },
+				responsive: true,
+				maintainAspectRatio: false
+			}
+		});
+	}
+
+	onMount(renderChart);
+	afterUpdate(renderChart);
 </script>
 
 <Modal size="sm" bind:show>
@@ -55,13 +100,26 @@
 					<span>-</span>
 				{/if}
 			</div>
+
+			<div class="my-4" style="height:150px;">
+				{#if chartData.length > 1}
+					<canvas bind:this={chartCanvas}></canvas>
+				{:else}
+					<div class="text-xs text-gray-400 text-center py-10">
+						{i18n && i18n.t
+							? i18n.t('Not enough data for rating history')
+							: 'Not enough data for rating history'}
+					</div>
+				{/if}
+			</div>
+
 			<div class="flex justify-end pt-2">
 				<button
 					class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 					type="button"
 					on:click={close}
 				>
-					{$i18n.t('Close')}
+					{i18n && i18n.t ? i18n.t('Close') : 'Close'}
 				</button>
 			</div>
 		</div>