src/routes/+page.svelte

<script lang="ts">
	import { bandwidthTest, counter } from '$lib';
	import { Chart, registerables } from 'chart.js';
	import type { Action } from 'svelte/action';

	Chart.register(...registerables);

	let currentBandwidth = $state("0");
	let currentLatency = $state(0);
	let bandwidthMeasurements: number[] = $state([]);
	let timeMeasurements: string[] = $state([]);
	let bandwidthCallback = (elapsedMs: number, totalBytes: number, loadedBytes: number, bw: number) => {
		let mbps = (bw / 1000000 * 8); // convert Bps to Mbps
		// update the bandwidth state
		currentBandwidth = mbps.toFixed(2);
		// update the bandwidth measurements array
		bandwidthMeasurements.push(mbps); // convert Bps to Mbps
		timeMeasurements.push((elapsedMs / 1000).toFixed(1)); // convert ms to seconds
		// only keep the last 20 measurements
		if (bandwidthMeasurements.length > 20) {
			bandwidthMeasurements.shift();
			timeMeasurements.shift();
		}
	};
	let latencyCallback = (latency: number) => {
		// update the latency state
		currentLatency = latency;
		console.log('Latency:', latency);
	};
	//counter(callback);
	bandwidthTest(bandwidthCallback, latencyCallback);

	let canvas: HTMLCanvasElement;

	const chart: Action<
		HTMLCanvasElement
	> = (node) => {
		let speedChart: Chart;

		function dispatch<T>(name: string, detail: T) {
			node.dispatchEvent(new CustomEvent(name, { detail }));
		}

		$effect(() => {
			const ctx = canvas.getContext('2d');
			if (speedChart) {
				speedChart.destroy();
			}
			speedChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: $state.snapshot(timeMeasurements),
					datasets: [
						{
							label: 'Download Speed (Mbps)',
							data: $state.snapshot(bandwidthMeasurements),
							borderColor: '#4f46e5',
							backgroundColor: 'rgba(79, 70, 229, 0.1)',
							tension: 0.4,
							fill: true
						}
					]
				},
				options: {
					animation: false,
					responsive: true,
					maintainAspectRatio: false,
					scales: {
						y: {
							beginAtZero: true,
							title: {
								display: true,
								text: 'Speed (Mbps)'
							}
						},
						x: {
							title: {
								display: true,
								text: 'Time (seconds)'
							}
						}
					},
					plugins: {
						legend: {
							position: 'top'
						},
						tooltip: {
							mode: 'index',
							intersect: false
						}
					}
				}
			});
		});
		dispatch('updated', bandwidthMeasurements);
		return () => {
			speedChart.destroy();
		};
	};
</script>
<!-- Main Card -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8 transition-all duration-300 hover:shadow-xl">
	<div class="p-6 md:p-8">
		<div class="flex items-center justify-between mb-6">
			<h2 class="text-xl font-semibold text-gray-800">Connection Statistics</h2>
			<div id="connection-status" class="flex items-center">
				<span class="h-3 w-3 rounded-full bg-gray-300 mr-2"></span>
				<span class="text-sm text-gray-500">Idle</span>
			</div>
		</div>

		<!-- Speed Display -->
		<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
			<div class="bg-gray-50 p-4 rounded-lg text-center">
				<div class="text-gray-500 mb-1 flex justify-center items-center">
					<i class="fas fa-download mr-2"></i>
					<span>Download Speed</span>
				</div>
				<div id="download-speed" class="text-2xl font-bold text-indigo-600">{currentBandwidth}</div>
				<div class="text-sm text-gray-400">Mbps</div>
			</div>
			<div class="bg-gray-50 p-4 rounded-lg text-center">
				<div class="text-gray-500 mb-1 flex justify-center items-center">
					<i class="fas fa-clock mr-2"></i>
					<span>Latency</span>
				</div>
				<div id="latency" class="text-2xl font-bold text-amber-500">{currentLatency}</div>
				<div class="text-sm text-gray-400">ms</div>
			</div>
		</div>
		<!-- Progress Bar -->
		<div class="mb-6">
			<div class="flex justify-between mb-2">
				<span class="text-sm font-medium text-gray-700">Test Progress</span>
				<span id="progress-percent" class="text-sm font-medium text-gray-700">0%</span>
			</div>
			<div class="w-full bg-gray-200 rounded-full h-2.5">
				<div id="progress-bar" class="progress-bar h-2.5 rounded-full" style="width: 0%"></div>
			</div>
		</div>
		<!-- Test Controls -->
		<div class="flex flex-col sm:flex-row justify-center gap-4">
			<button id="start-test"
							class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition-all flex items-center justify-center glow">
				<i class="fas fa-play mr-2"></i>
				Start Test
			</button>
			<button id="stop-test"
							class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-6 rounded-lg transition-all flex items-center justify-center"
							disabled>
				<i class="fas fa-stop mr-2"></i>
				Stop Test
			</button>
		</div>
	</div>
</div>
<!-- Results Graph -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
	<div class="p-6 md:p-8">
		<h2 class="text-xl font-semibold text-gray-800 mb-6">Speed Over Time</h2>
		<div class="h-64 relative">
			<canvas id="speed-chart" bind:this={canvas} use:chart></canvas>
		</div>
	</div>
</div>
<!-- Information Section -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
	<div class="p-6 md:p-8">
		<h2 class="text-xl font-semibold text-gray-800 mb-4">About This Test</h2>
		<div class="prose prose-indigo max-w-none text-gray-600">
			<p>
				This bandwidth test measures your connection speed to Hugging Face's servers by downloading and uploading sample
				files.
				The test calculates:
			</p>
			<ul class="list-disc pl-5 mt-2 space-y-1">
				<li><strong>Download speed:</strong> How fast data can be transferred from Hugging Face to your device</li>
				<li><strong>Latency:</strong> The time it takes to establish connection to Hugging Face server</li>
			</ul>
			<p class="mt-4">
				For accurate results, close other bandwidth-intensive applications and ensure you're not on a VPN unless testing
				through it.
			</p>
		</div>
	</div>
</div>