feat: add bandwidth and latency testing functionality with progress tracking

src/app.css

@@ -1,2 +1,30 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+
+.progress-bar {
+    height: 9px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, #4f46e5 0%, #10b981 50%, #f59e0b 100%);
+    transition: width 0.3s ease;
+}
+.wave {
+    position: relative;
+    overflow: hidden;
+}
+.wave::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: wave 2s linear infinite;
+}
+@keyframes wave {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+.glow {
+    box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
+}

src/lib/index.ts

@@ -7,7 +7,7 @@ interface BandwidthCallback {
 		totalBytes: number,
 		bytesPerSecond: number,
 		done: boolean
-	): void;
+	): boolean;
 }
 
 export async function bandwidthTest(
@@ -18,8 +18,8 @@ export async function bandwidthTest(
 	performance.clearResourceTimings();
 	// start timer
 	const startTime = performance.now();
-	// const url = 'https://cdn-test-cloudfront.hf.co/140gb.safetensors';
-	const url = 'https://cdn-test-cloudfront.hf.co/15mb.json';
+	const url = 'https://cdn-test-cloudfront.hf.co/5gb.safetensors';
+	// const url = 'https://cdn-test-cloudfront.hf.co/15mb.json';
 	const response = await fetch(url);
 	if (!response.ok) {
 		throw new Error(`Network response was not ok: ${response.status}`);
@@ -37,15 +37,15 @@ export async function bandwidthTest(
 	// }, 2000);
 	const latency = performance.now() - startTime;
 	onLatency(latency);
-	const contentLengthHeader = response.headers.get('Content-Length');
-	const totalBytes = contentLengthHeader ? parseInt(contentLengthHeader, 10) : 0;
+	const contentLengthHeader = response.headers.get('content-length');
+	const totalBytes = contentLengthHeader ? parseInt(contentLengthHeader, 10) : 1e99;
 	const reader = response.body.getReader();
 	let loadedBytes = 0;
 	let lastTimestamp = performance.now();
 	let lastLoaded = 0;
 	const REPORT_INTERVAL_MS = 500;
 	onProgress(latency, loadedBytes, totalBytes, 0, false);
-	let bytesPerSecond= 0;
+	let bytesPerSecond = 0;
 	while (true) {
 		const { done, value } = await reader.read();
 		if (done) {
@@ -71,7 +71,12 @@ export async function bandwidthTest(
 
 			// Invoke callback
 			const elapsedMs = performance.now() - startTime;
-			onProgress(elapsedMs, loadedBytes, totalBytes, bytesPerSecond, false);
+			const stop = onProgress(elapsedMs, loadedBytes, totalBytes, bytesPerSecond, false);
+			if (stop) {
+				// stop the test
+				console.log(`Stopping bandwidth test at ${loadedBytes} bytes after ${elapsedMs} ms`);
+				break;
+			}
 
 			// Reset our “last” markers
 			lastLoaded = loadedBytes;

src/routes/+page.svelte

@@ -5,11 +5,13 @@
 
 	Chart.register(...registerables);
 
-	let currentBandwidth = $state("0");
+	let currentBandwidth = $state('0');
 	let currentLatency = $state(0);
+	let progress = $state(0);
 	let bandwidthMeasurements: number[] = $state([]);
 	let timeMeasurements: string[] = $state([]);
-	let bandwidthCallback = (elapsedMs: number, totalBytes: number, loadedBytes: number, bw: number) => {
+	let testStatus = $state('Idle');
+	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);
@@ -21,14 +23,38 @@
 			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;
-		console.log('Latency:', latency);
 	};
+
+	const startTest = () => {
+		testStatus = 'Running';
+		progress = 0;
+		bandwidthMeasurements = [];
+		timeMeasurements = [];
+		currentBandwidth = '0';
+		currentLatency = 0;
+		bandwidthTest(bandwidthCallback, latencyCallback);
+	};
+	const stopTest = () => {
+		testStatus = 'Stopped';
+	}
 	//counter(callback);
-	bandwidthTest(bandwidthCallback, latencyCallback);
+	//bandwidthTest(bandwidthCallback, latencyCallback);
 
 	let canvas: HTMLCanvasElement;
 
@@ -97,6 +123,22 @@
 			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">
@@ -104,8 +146,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>
+				<span class="h-3 w-3 rounded-full {getStatusClass()} mr-2"></span>
+				<span class="text-sm text-gray-500">{testStatus}</span>
 			</div>
 		</div>
 
@@ -132,22 +174,24 @@
 		<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>
+				<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" style="width: 0%"></div>
+				<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="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">
+							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"
+							onclick={startTest}>
 				<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>
+							disabled={testStatus!=='Running'} onclick={stopTest}>
 				<i class="fas fa-stop mr-2"></i>
 				Stop Test
 			</button>