experimental/web/sample_static/index.html - 3p/openxla/iree - Git at Google

 <!DOCTYPE html>
 <html>

 <!--
 Copyright 2022 The IREE Authors

 Licensed under the Apache License v2.0 with LLVM Exceptions.
 See https://llvm.org/LICENSE.txt for license information.
 SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
 -->

 <head>
   <meta charset="utf-8" />
   <title>IREE Static Web Sample</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" href="./ghost.svg" type="image/svg+xml">

   <script src="./easeljs.min.js"></script>
   <script src="./iree_api.js"></script>
 </head>

 <body style="background-color: #2b2c30; color: #ABB2BF">
   <h1>IREE Static Web Sample</h1>

   <canvas id="drawingCanvas" width="256" height="256"
           style="border:2px solid #000000; background-color: #FFFFFF;"
           oncontextmenu="return false;">
   </canvas>
   <canvas id="rescaledCanvas" width="28" height="28"
           style="border:2px solid #000000; background-color: #FFFFFF;">
   </canvas>

   <br>
   <div style="border:2px solid #000000; background-color: #CCCCCC; padding: 8px; color: #111111; width:440px">
     <button id="predictButton" disabled onclick="predictDigit()">Predict handwritten digit</button>
     <button id="clearCanvasButton" onclick="clearCanvas()">Clear canvas</button>
     <br>
     Prediction result: <div id="predictionResult" style="display:inline"></div>
   </div>

   <script>
     // <canvas> drawing using easeljs forked from:
     //   https://createjs.com/demos/easeljs/curveto
     //   https://github.com/CreateJS/EaselJS/blob/master/examples/CurveTo.html

     const predictButtonElement = document.getElementById('predictButton');
     const predictionResultElement = document.getElementById('predictionResult');
     const drawingCanvasElement = document.getElementById("drawingCanvas");
     const rescaledCanvasElement = document.getElementById("rescaledCanvas");
     const rescaledCanvasContext = rescaledCanvasElement.getContext("2d");
     let stage;
     let drawingCanvasShape;
     let oldPt, oldMidPt;
     let titleText;
     let ireeInitialized = false;
     const primaryColor = "#000000";
     const eraseColor = "#FFFFFF";
     const stroke = 32;

     function predictDigit() {
       // TODO(scotttodd): debounce / rate limit this?
       ireePredictDigit(getRescaledCanvasData()).then((result) => {
         predictionResultElement.innerHTML = result;
       }).catch((error) => {
         console.error('error predicting digit:', error);
         predictionResultElement.innerHTML = "<b>" + error + "</b>";
       });
     }

     function clearCanvas() {
       stage.clear();
       stage.removeAllChildren();

       drawingCanvasShape = new createjs.Shape();
       stage.addChild(drawingCanvasShape);
       stage.update();

       updateRescaledCanvas();
     }

     function initDrawing() {
       rescaledCanvasContext.imageSmoothingEnabled = false;
       rescaledCanvasContext.mozImageSmoothingEnabled = false;
       rescaledCanvasContext.webkitImageSmoothingEnabled = false;
       rescaledCanvasContext.msImageSmoothingEnabled = false;

       stage = new createjs.Stage(drawingCanvasElement);
       stage.autoClear = false;
       stage.enableDOMEvents(true);

       createjs.Touch.enable(stage);
       createjs.Ticker.framerate = 24;

       stage.addEventListener("stagemousedown", handleMouseDown);
       stage.addEventListener("stagemouseup", handleMouseUp);

       drawingCanvasShape = new createjs.Shape();
       stage.addChild(drawingCanvasShape);

       // Add instruction text.
       titleText = new createjs.Text("Click and Drag to draw", "18px Arial", "#000000");
       titleText.x = 30;
       titleText.y = 100;
       stage.addChild(titleText);

       stage.update();
     }

     function handleMouseDown(event) {
       if (!event.primary && !event.secondary) { return; }

       if (stage.contains(titleText)) {
         stage.clear();
         stage.removeChild(titleText);
       }

       oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
       oldMidPt = oldPt.clone();
       stage.addEventListener("stagemousemove", handleMouseMove);
     }

     function handleMouseMove(event) {
       if (!event.primary && !event.secondary) { return; }

       const midPt = new createjs.Point(
         oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);

       const color = event.nativeEvent.which == 1 ? primaryColor : eraseColor;
       drawingCanvasShape.graphics.clear()
           .setStrokeStyle(stroke, 'round', 'round')
           .beginStroke(color).moveTo(midPt.x, midPt.y)
           .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

       oldPt.x = stage.mouseX;
       oldPt.y = stage.mouseY;
       oldMidPt.x = midPt.x;
       oldMidPt.y = midPt.y;

       stage.update();
       updateRescaledCanvas();

       if (ireeInitialized) {
         predictDigit();
       }
     }

     function handleMouseUp(event) {
       if (!event.primary && !event.default) { return; }
       stage.removeEventListener("stagemousemove", handleMouseMove);
     }

     function updateRescaledCanvas() {
       rescaledCanvasContext.clearRect(
         0, 0, rescaledCanvasElement.width, rescaledCanvasElement.height);
       rescaledCanvasContext.drawImage(
           drawingCanvasElement,
           /*sx=*/0, /*sy=*/0,
           /*sWidth=*/256, /*sHeight=*/256,
           /*dx=*/0, /*dy=*/0,
           /*dWidth=*/28, /*dHeight=*/28);
     }

     function getRescaledCanvasData() {
       return rescaledCanvasContext.getImageData(0, 0, 28, 28);
     }

     initDrawing();

     ireeInitializeWorker().then((result) => {
       predictButtonElement.disabled = false;
       ireeInitialized = true;
     }).catch((error) => {
       console.error("Failed to initialize IREE, error: '" + error + "'");
     });
   </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<!--
	Copyright 2022 The IREE Authors

	Licensed under the Apache License v2.0 with LLVM Exceptions.
	See https://llvm.org/LICENSE.txt for license information.
	SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
	-->

	<head>
	<meta charset="utf-8" />
	<title>IREE Static Web Sample</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="./ghost.svg" type="image/svg+xml">

	<script src="./easeljs.min.js"></script>
	<script src="./iree_api.js"></script>
	</head>

	<body style="background-color: #2b2c30; color: #ABB2BF">
	<h1>IREE Static Web Sample</h1>

	<canvas id="drawingCanvas" width="256" height="256"
	style="border:2px solid #000000; background-color: #FFFFFF;"
	oncontextmenu="return false;">
	</canvas>
	<canvas id="rescaledCanvas" width="28" height="28"
	style="border:2px solid #000000; background-color: #FFFFFF;">
	</canvas>

	<br>
	<div style="border:2px solid #000000; background-color: #CCCCCC; padding: 8px; color: #111111; width:440px">
	<button id="predictButton" disabled onclick="predictDigit()">Predict handwritten digit</button>
	<button id="clearCanvasButton" onclick="clearCanvas()">Clear canvas</button>
	<br>
	Prediction result: <div id="predictionResult" style="display:inline"></div>
	</div>

	<script>
	// <canvas> drawing using easeljs forked from:
	// https://createjs.com/demos/easeljs/curveto
	// https://github.com/CreateJS/EaselJS/blob/master/examples/CurveTo.html

	const predictButtonElement = document.getElementById('predictButton');
	const predictionResultElement = document.getElementById('predictionResult');
	const drawingCanvasElement = document.getElementById("drawingCanvas");
	const rescaledCanvasElement = document.getElementById("rescaledCanvas");
	const rescaledCanvasContext = rescaledCanvasElement.getContext("2d");
	let stage;
	let drawingCanvasShape;
	let oldPt, oldMidPt;
	let titleText;
	let ireeInitialized = false;
	const primaryColor = "#000000";
	const eraseColor = "#FFFFFF";
	const stroke = 32;

	function predictDigit() {
	// TODO(scotttodd): debounce / rate limit this?
	ireePredictDigit(getRescaledCanvasData()).then((result) => {
	predictionResultElement.innerHTML = result;
	}).catch((error) => {
	console.error('error predicting digit:', error);
	predictionResultElement.innerHTML = "<b>" + error + "</b>";
	});
	}

	function clearCanvas() {
	stage.clear();
	stage.removeAllChildren();

	drawingCanvasShape = new createjs.Shape();
	stage.addChild(drawingCanvasShape);
	stage.update();

	updateRescaledCanvas();
	}

	function initDrawing() {
	rescaledCanvasContext.imageSmoothingEnabled = false;
	rescaledCanvasContext.mozImageSmoothingEnabled = false;
	rescaledCanvasContext.webkitImageSmoothingEnabled = false;
	rescaledCanvasContext.msImageSmoothingEnabled = false;

	stage = new createjs.Stage(drawingCanvasElement);
	stage.autoClear = false;
	stage.enableDOMEvents(true);

	createjs.Touch.enable(stage);
	createjs.Ticker.framerate = 24;

	stage.addEventListener("stagemousedown", handleMouseDown);
	stage.addEventListener("stagemouseup", handleMouseUp);

	drawingCanvasShape = new createjs.Shape();
	stage.addChild(drawingCanvasShape);

	// Add instruction text.
	titleText = new createjs.Text("Click and Drag to draw", "18px Arial", "#000000");
	titleText.x = 30;
	titleText.y = 100;
	stage.addChild(titleText);

	stage.update();
	}

	function handleMouseDown(event) {
	if (!event.primary && !event.secondary) { return; }

	if (stage.contains(titleText)) {
	stage.clear();
	stage.removeChild(titleText);
	}

	oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
	oldMidPt = oldPt.clone();
	stage.addEventListener("stagemousemove", handleMouseMove);
	}

	function handleMouseMove(event) {
	if (!event.primary && !event.secondary) { return; }

	const midPt = new createjs.Point(
	oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);

	const color = event.nativeEvent.which == 1 ? primaryColor : eraseColor;
	drawingCanvasShape.graphics.clear()
	.setStrokeStyle(stroke, 'round', 'round')
	.beginStroke(color).moveTo(midPt.x, midPt.y)
	.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

	oldPt.x = stage.mouseX;
	oldPt.y = stage.mouseY;
	oldMidPt.x = midPt.x;
	oldMidPt.y = midPt.y;

	stage.update();
	updateRescaledCanvas();

	if (ireeInitialized) {
	predictDigit();
	}
	}

	function handleMouseUp(event) {
	if (!event.primary && !event.default) { return; }
	stage.removeEventListener("stagemousemove", handleMouseMove);
	}

	function updateRescaledCanvas() {
	rescaledCanvasContext.clearRect(
	0, 0, rescaledCanvasElement.width, rescaledCanvasElement.height);
	rescaledCanvasContext.drawImage(
	drawingCanvasElement,
	/sx=/0, /sy=/0,
	/sWidth=/256, /sHeight=/256,
	/dx=/0, /dy=/0,
	/dWidth=/28, /dHeight=/28);
	}

	function getRescaledCanvasData() {
	return rescaledCanvasContext.getImageData(0, 0, 28, 28);
	}

	initDrawing();

	ireeInitializeWorker().then((result) => {
	predictButtonElement.disabled = false;
	ireeInitialized = true;
	}).catch((error) => {
	console.error("Failed to initialize IREE, error: '" + error + "'");
	});
	</script>
	</body>

	</html>