added preloader

training.js

@@ -8,6 +8,46 @@ const numberOfClasses = 10;
 const learningRateValue = 0.05;
 const numberOfEpochs = 20;
 
+class Preloader {
+
+	constructor() {
+
+		this.root  = document.getElementById( "preloader" );
+		this.text  = document.getElementById( "preloaderText" );
+		this.bar   = document.getElementById( "preloaderBarInner" );
+
+	}
+
+	setText( value ) {
+
+		this.text.textContent = value;
+
+	}
+
+	setProgress( value ) {
+
+		this.bar.style.width = Math.min( 100, value ) + "%";
+
+	}
+
+	done() {
+
+		this.root.style.opacity = "0";
+		this.root.style.pointerEvents = "none";
+
+		setTimeout( () => {
+
+			this.root.remove();
+
+		}, 300 );
+
+	}
+
+}
+
+const preloader = new Preloader();
+
+
 function drawMNISTPreview(canvas, pixelData, trueLabel, predictedLabel) {
     const context = canvas.getContext("2d");
     const image = context.createImageData(28, 28);
@@ -36,7 +76,23 @@ async function main() {
     const device  = await adapter.requestDevice();
 
     // Load MNIST subset → inputImages & targetLabels are GPU buffers
-    const mnist = await loadMNIST(device, batchSize);
+ //   const mnist = await loadMNIST(device, batchSize);
+
+
+preloader.setText( "Initializing WebGPU…" );
+preloader.setProgress( 10 );
+
+const mnist = await loadMNIST(
+	device,
+	batchSize,
+	preloader
+);
+
+preloader.setText( "Finalizing setup…" );
+preloader.setProgress( 100 );
+preloader.done();
+
+
     const inputImages  = mnist.images;
     const targetLabels = mnist.labels;