src/routes/+page.svelte

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

	Chart.register(...registerables);

	const MaxTestDurationSec = 20;

	let currentBandwidth = $state('0');
	let currentLatency = $state(0);
	let serverLocation = $state('-');
	let clientIp = $state('Detecting...');
	let clientLocation = $state('Detecting...');
	let progress = $state(0);
	let bandwidthMeasurements: number[] = $state([]);
	let timeMeasurements: string[] = $state([]);
	let testStatus = $state('Idle');

	// run ip info to get client IP and location
	onMount(async () => {
		let info = await getClientInfo();
		clientIp = info.clientIp;
		clientLocation = info.clientLocation;
	});

	// define callbacks
	let bandwidthCallback = (elapsedMs: number, loadedBytes: number, totalBytes: number, bw: number, done: boolean) => {
		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();
		}
		// update the progress state
		progress = (loadedBytes / totalBytes) * 100;
		if (testStatus == 'Stopped') {
			return true;
		}
		if (done) {
			testStatus = 'Completed';
			progress = 100;
		} else {
			testStatus = 'Running';
		}
		return false;
	};
	let latencyCallback = (latency: number) => {
		// update the latency state
		currentLatency = latency;
	};
	let serverLocationCallback = (location: string) => {
		serverLocation = location;
	};

	let testTimeoutHandler = 0;

	const startTest = () => {
		testStatus = 'Running';
		progress = 0;
		bandwidthMeasurements = [];
		timeMeasurements = [];
		currentBandwidth = '0';
		currentLatency = 0;
		bandwidthTest(bandwidthCallback, latencyCallback, serverLocationCallback);
		testTimeoutHandler = setTimeout(() => {
			testStatus = 'Completed';
		}, MaxTestDurationSec * 1000);
	};
	const stopTest = () => {
		testStatus = 'Stopped';
		clearTimeout(testTimeoutHandler);
	};
	//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();
		};
	};
	const getStatusClass = () => {
		switch (testStatus) {
			case 'Idle':
				return 'bg-gray-300';
			case 'Running':
				return 'bg-blue-500';
			case 'Completed':
				return 'bg-green-500';
			case 'Error':
				return 'bg-red-500';
			case 'Stopped':
				return 'bg-red-500';
			default:
				return 'bg-gray-300';
		}
	};
</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 {getStatusClass()} mr-2"></span>
				<span class="text-sm text-gray-500">{testStatus}</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">{progress.toFixed(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 {progress<100 && progress >0? 'wave':''}"
						 style="width: {progress}%"></div>
			</div>
		</div>
		<!-- Test Controls -->
		<div class="flex flex-col sm:flex-row justify-center gap-4">
			<button id="start-test"
							class="{testStatus === 'Running'?'bg-indigo-100 hover:bg-indigo-100':'bg-indigo-600 hover:bg-indigo-700 glow'} text-white font-medium py-3 px-6 rounded-lg transition-all flex items-center justify-center"
							onclick={startTest} disabled={testStatus!=='Idle'}>
				<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={testStatus!=='Running'} onclick={stopTest}>
				<i class="fas fa-stop mr-2"></i>
				Stop Test
			</button>
		</div>
	</div>
</div>
<!-- Connection Info Card -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8 connection-info">
	<div class="p-6 md:p-8">
		<h2 class="text-xl font-semibold text-gray-800 mb-6">Connection Information</h2>
		<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
			<div>
				<h3 class="text-sm font-medium text-gray-500 mb-2">CLIENT INFORMATION</h3>
				<div class="flex items-center mb-3">
					<i class="fas fa-laptop text-indigo-500 mr-3"></i>
					<div>
						<div class="text-sm text-gray-500">IP Address</div>
						<div id="client-ip" class="text-lg font-medium text-gray-800">{clientIp}</div>
					</div>
				</div>
				<div class="flex items-center">
					<i class="fas fa-map-marker-alt text-indigo-500 mr-3"></i>
					<div>
						<div class="text-sm text-gray-500">Approximate Location</div>
						<div id="client-location" class="text-lg font-medium text-gray-800">{clientLocation}</div>
					</div>
				</div>
			</div>
			<div>
				<h3 class="text-sm font-medium text-gray-500 mb-2">SERVER INFORMATION</h3>
				<div class="flex items-center mb-3">
					<i class="fas fa-server text-emerald-500 mr-3"></i>
					<div>
						<div class="text-sm text-gray-500">Server Location</div>
						<div id="server-location" class="text-lg font-medium text-gray-800">{serverLocation}</div>
					</div>
				</div>
				<div class="flex items-center">
					<i class="fas fa-network-wired text-emerald-500 mr-3"></i>
					<div>
						<div class="text-sm text-gray-500">Test Server</div>
						<div class="text-lg font-medium text-gray-800">huggingface.co</div>
					</div>
				</div>
			</div>
		</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>