kaj/WebGPU-Neural-Network-Trainer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Virtual Machine Activity

added preloader

Browse Source
This commit is contained in:
kaj dijkstra
2026-01-02 11:44:05 +01:00
parent 012da8ff54
commit c75eb60c5b
3 changed files with 167 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@@ -10,9 +10,57 @@
canvas { image-rendering: pixelated; background:#000; border:1px solid #555; } canvas { image-rendering: pixelated; background:#000; border:1px solid #555; }
button { font-size:16px; padding:8px 14px; cursor:pointer; } button { font-size:16px; padding:8px 14px; cursor:pointer; }
#log { white-space:pre; font-size:14px; max-height:240px; overflow-y:auto; background:#222; padding:8px; } #log { white-space:pre; font-size:14px; max-height:240px; overflow-y:auto; background:#222; padding:8px; }
#preloader {
position: fixed;
inset: 0;
background: #0b0b0b;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
#preloaderBox {
width: 320px;
text-align: center;
}
#preloaderText {
margin-bottom: 10px;
font-size: 14px;
color: #ccc;
}
#preloaderBarOuter {
width: 100%;
height: 8px;
background: #222;
border-radius: 4px;
overflow: hidden;
}
#preloaderBarInner {
height: 100%;
width: 0%;
background: #4ade80;
transition: width 0.2s linear;
}
</style> </style>
</head> </head>
<body> <body>
<div id="preloader">
<div id="preloaderBox">
<div id="preloaderText">Loading MNIST…</div>
<div id="preloaderBarOuter">
<div id="preloaderBarInner"></div>
</div>
</div>
</div>
<h2>WebGPU MNIST Training — Batch 64</h2> <h2>WebGPU MNIST Training — Batch 64</h2>
<button id="trainBtn">Train</button> <button id="trainBtn">Train</button>
<div id="log"></div> <div id="log"></div>

51
mnist_loader.js
View File

@@ -1,11 +1,31 @@
export async function loadMNIST(device, sampleCount = 1000) { export async function loadMNIST( device, sampleCount = 1000, preloader ) {
async function loadFile(path) {
async function loadFile( path, progress ) {
const res = await fetch( path ); const res = await fetch( path );
return new Uint8Array(await res.arrayBuffer()); const buffer = await res.arrayBuffer();
if ( preloader ) {
preloader.setProgress( progress );
} }
const imgRaw = await loadFile("./models/train-images-idx3-ubyte"); return new Uint8Array( buffer );
const lblRaw = await loadFile("./models/train-labels-idx1-ubyte");
}
if ( preloader ) preloader.setText( "Loading MNIST images…" );
const imgRaw = await loadFile(
"./models/train-images-idx3-ubyte",
40
);
if ( preloader ) preloader.setText( "Loading MNIST labels…" );
const lblRaw = await loadFile(
"./models/train-labels-idx1-ubyte",
60
);
const header = 16; const header = 16;
const fullCount = lblRaw.length - 8; const fullCount = lblRaw.length - 8;
@@ -15,13 +35,34 @@ export async function loadMNIST(device, sampleCount = 1000) {
const labels = new Uint32Array( count ); const labels = new Uint32Array( count );
for ( let i = 0; i < count; i++ ) { for ( let i = 0; i < count; i++ ) {
labels[ i ] = lblRaw[ 8 + i ]; labels[ i ] = lblRaw[ 8 + i ];
const src = header + i * 784; const src = header + i * 784;
const dst = i * 784; const dst = i * 784;
for ( let j = 0; j < 784; j++ ) { for ( let j = 0; j < 784; j++ ) {
images[ dst + j ] = imgRaw[ src + j ] / 255; images[ dst + j ] = imgRaw[ src + j ] / 255;
} }
if ( preloader && ( i % 64 === 0 ) ) {
preloader.setProgress(
60 + ( i / count ) * 40
);
}
}
if ( preloader ) {
preloader.setProgress( 100 );
} }
return { images, labels, count }; return { images, labels, count };
} }

58
training.js
View File

@@ -8,6 +8,46 @@ const numberOfClasses = 10;
const learningRateValue = 0.05; const learningRateValue = 0.05;
const numberOfEpochs = 20; 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) { function drawMNISTPreview(canvas, pixelData, trueLabel, predictedLabel) {
const context = canvas.getContext("2d"); const context = canvas.getContext("2d");
const image = context.createImageData(28, 28); const image = context.createImageData(28, 28);
@@ -36,7 +76,23 @@ async function main() {
const device = await adapter.requestDevice(); const device = await adapter.requestDevice();
// Load MNIST subset → inputImages & targetLabels are GPU buffers // 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 inputImages = mnist.images;
const targetLabels = mnist.labels; const targetLabels = mnist.labels;