]> git.djapps.eu Git - pkg/ggml/sources/ggml/commitdiff
mnist : add progress indicator on the web page (#194)
authorRadoslav Gerganov <redacted>
Thu, 25 May 2023 08:27:15 +0000 (11:27 +0300)
committerGitHub <redacted>
Thu, 25 May 2023 08:27:15 +0000 (11:27 +0300)
Prevent user actions before the model and the data set is loaded

examples/mnist/web/index.html

index d62beadc5feff7f24419f2716696bb4e4bda1014..1bd01ae500bcc76c46476da8499bdaddbd41f3a5 100644 (file)
@@ -7,14 +7,14 @@
     <script src="mnist.js"></script>
 </head>
 <body>
-    <h2>MNIST digit recognizer with GGML</h2>
-    <p>Draw a single digit on the canvas below:</p>
+    <h2>MNIST digit recognizer with <a href="https://github.com/ggerganov/ggml">GGML</a></h2>
+    <p id="msg">Loading model and data set, please wait ...</p>
     <canvas id="ggCanvas" width="364" height="364" style="border:2px solid #d3d3d3;">
         Your browser does not support the HTML canvas tag.
     </canvas>
     <div>
         <button id="clear" onclick="onClear()">Clear</button>
-        <button id="random" onclick="onRandom()">Random</button>
+        <button id="random" onclick="onRandom()" disabled>Random</button>
     </div>
     <div>
         <p id="prediction"></p>
@@ -114,13 +114,19 @@ if (e.target == canvas) {
 }
 }, {passive: false});
 
-// Use the same handlers for mouse and touch events
-canvas.onmousedown = onMouseDown;
-canvas.onmouseup = onMouseUp;
-canvas.onmousemove = onMouseMove;
-canvas.ontouchstart = onMouseDown;
-canvas.ontouchend = onMouseUp;
-canvas.ontouchmove = onMouseMove;
+function onRuntimeInitialized() {
+    // Use the same handlers for mouse and touch events
+    canvas.onmousedown = onMouseDown;
+    canvas.onmouseup = onMouseUp;
+    canvas.onmousemove = onMouseMove;
+    canvas.ontouchstart = onMouseDown;
+    canvas.ontouchend = onMouseUp;
+    canvas.ontouchmove = onMouseMove;
+    document.getElementById("msg").innerHTML = "Draw a single digit on the canvas below:"
+    document.getElementById("random").disabled = false;
+}
+
+Module['onRuntimeInitialized'] = onRuntimeInitialized;
     </script>
 </body>
 </html>