2d:null 2e:["$","title",null,{"children":"Interactive Handwritten Digit Classification with CNN | Martin C. Arnold | Observable"}] 33:T903,viewof canvasContainer = { // Create the main container const container = document.createElement('div'); container.style.display = 'flex'; container.style.flexDirection = 'column'; // Stack elements vertically container.style.alignItems = 'center'; container.style.gap = '10px'; // Space between vertical elements // Create the top row container const topRow = document.createElement('div'); topRow.style.display = 'flex'; topRow.style.flexDirection = 'row'; // Arrange children horizontally topRow.style.justifyContent = 'center'; topRow.style.alignItems = 'flex-start'; // Align items to the top //topRow.style.gap = '10px'; // Space between canvases and bar plot // --- Input Canvas --- const inputLabel = document.createElement('div'); inputLabel.style.textAlign = 'center'; inputLabel.style.color = 'darkgray'; inputLabel.innerHTML = `Input Canvas
`; inputLabel.appendChild(theCanvas); // Your input canvas inputLabel.style.marginLeft = "20px" topRow.appendChild(inputLabel); // --- Predicted Digit Output Canvas --- const outputLabel = document.createElement('div'); outputLabel.style.textAlign = 'center'; outputLabel.style.color = 'darkgray'; outputLabel.innerHTML = `Predicted Digit
`; outputLabel.appendChild(outputCanvas); // Your output canvas topRow.appendChild(outputLabel); // --- Probability Bar Plot --- const probChartContainer = document.createElement('div'); probChartContainer.innerHTML = `Class Probabilities
`; probChartContainer.style.textAlign = 'center'; probChartContainer.style.color = 'darkgray'; probChartContainer.style.width = '235px'; // Set width to align with output canvas probChartContainer.appendChild(probabilityChart); // Your probability chart probChartContainer.style.marginRight = "20px" topRow.appendChild(probChartContainer); // Append the top row to the main container container.appendChild(topRow); // --- Buttons Below --- const buttons = document.createElement('div'); buttons.style.display = 'flex'; buttons.style.gap = '10px'; buttons.style.justifyContent = 'center'; buttons.appendChild(predictButton); buttons.appendChild(clearButton); container.appendChild(buttons); return container; }34:Ta1a,probabilityChart = { // Check if there are predicted probabilities to display if (!predictedProbabilities.length) { // Display a placeholder if no prediction has been made yet const placeholder = document.createElement('div'); placeholder.style.display = 'flex'; placeholder.style.alignItems = 'center'; // v centering placeholder.style.justifyContent = 'center'; // h centering placeholder.style.height = '255px'; // roughly matches the SVG height placeholder.style.color = "darkgrey"; placeholder.innerHTML = `No prediction yet.
Draw a digit!
`; return placeholder; } // Prepare data const data = predictedProbabilities.map((prob, index) => ({ class: index, probability: prob, })); // Define dimensions and margins const width = 200; const height = 255; const margin = { top: 25, right: 15, bottom: 50, left: 10 }; // Create SVG container const svg = d3.select(DOM.svg(width, height)); // Define X scale (Probability) const x = d3.scaleLinear() .domain([0, 1]) // Probability range from 0 to 1 .range([margin.left, width - margin.right]); // Pixel range // Define Y scale (Classes) const y = d3.scaleBand() .domain(data.map(d => d.class)) .range([margin.top, height - margin.bottom]) .padding(0.1); // Padding between bars // Draw Bars svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", margin.left) // Start at margin.left .attr("y", d => y(d.class)) .attr("width", d => x(d.probability) - margin.left) // Width based on probability .attr("height", y.bandwidth()) .attr("fill", d => d.class === predictedDigit ? "#4CAF50" : "#2196F3") .append("title") // Tooltip for exact probability .text(d => `${d.class}: ${(d.probability * 100).toFixed(2)}%`); // Add Y Axis (Classes) svg.append("g") .attr("transform", `translate(${width},0)`) // Position at margin.left .call(d3.axisLeft(y).tickSize(0)) // Remove tick lines .attr("font-size", '10px'); // Remove Y Axis domain line for a cleaner look svg.selectAll(".domain").remove(); // Add X Axis (Probability) svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) // Position at bottom margin .call(d3.axisBottom(x).ticks(5).tickFormat(d => `${(d * 100).toFixed(0)}%`)) // Format ticks as percentages .attr("font-size", '10px'); // Remove X Axis domain line svg.selectAll(".domain").remove(); return svg.node(); }35:T808,theCanvas = { const canvas = DOM.canvas(200, 200); const context = canvas.getContext("2d"); context.fillStyle = "#ffffff"; context.fillRect(0, 0, canvas.width, canvas.height); let drawing = false; let lastX; let lastY; // Mouse event handlers const handleMousedown = (e) => { drawing = true; const { x, y } = getMousePos(canvas, e); [lastX, lastY] = [x, y]; }; const handleMouseup = () => { drawing = false; [lastX, lastY] = [undefined, undefined]; }; const handleMousemove = (e) => { if (!drawing) return; const { x, y } = getMousePos(canvas, e); [lastX, lastY] = drawLine(context, x, y, lastX, lastY); }; // Touch event handlers const handleTouchStart = (e) => { e.preventDefault(); // Prevent scrolling when touching the canvas drawing = true; const { x, y } = getTouchPos(canvas, e); [lastX, lastY] = [x, y]; }; const handleTouchEnd = () => { drawing = false; [lastX, lastY] = [undefined, undefined]; }; const handleTouchMove = (e) => { e.preventDefault(); // Prevent scrolling when touching the canvas if (!drawing) return; const { x, y } = getTouchPos(canvas, e); [lastX, lastY] = drawLine(context, x, y, lastX, lastY); }; // Event listeners for mouse events canvas.addEventListener("mousedown", handleMousedown); canvas.addEventListener("mouseup", handleMouseup); canvas.addEventListener("mouseout", handleMouseup); canvas.addEventListener("mousemove", handleMousemove); // Event listeners for touch events canvas.addEventListener("touchstart", handleTouchStart, { passive: false }); canvas.addEventListener("touchend", handleTouchEnd); canvas.addEventListener("touchcancel", handleTouchEnd); canvas.addEventListener("touchmove", handleTouchMove, { passive: false }); // Styling the canvas canvas.style.border = '1px solid black'; canvas.style.margin = "20px"; canvas.style.borderRadius = "15px"; // Draw grid on the canvas drawGrid(context, canvas.width, canvas.height); return canvas; }36:T6db,processCanvasImage = (canvas) => { // off-screen canvas for resizing const offScreenCanvas = document.createElement('canvas'); const offScreenCtx = offScreenCanvas.getContext('2d'); // get the original canvas image data const origWidth = canvas.width; const origHeight = canvas.height; const ctx = canvas.getContext('2d'); const imageData = ctx.getImageData(0, 0, origWidth, origHeight); let data = imageData.data; // convert to grayscale, create a 2D array let gray2D = []; for (let y = 0; y < origHeight; y++) { let row = []; for (let x = 0; x < origWidth; x++) { const i = (y * origWidth + x) * 4; const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; // grayscale conversion const grayscale = r * 0.299 + g * 0.587 + b * 0.114; // invert colors const inverted = 255 - grayscale; // normalization to [0, 1] const normalized = inverted / 255; row.push(normalized); } gray2D.push(row); } // detect the bounding box of the digit const boundingBox = getBoundingBox(gray2D); // crop the image to the bounding box const croppedData = cropImage(gray2D, boundingBox); // resize the cropped image to 20x20 const resizedData = resizeImage(croppedData, 20, 20); // put resized image onto a 28x28 canvas and center const finalData = centerImage(resizedData, 28, 28); // flatten the 2D array into a flat array const flatData = finalData.reduce((arr, row) => arr.concat(row), []); // con to [28, 28, 1] tensor using the flat array data const tensor3d = tf.tensor3d(flatData, [28, 28, 1]); // add batch dimension to get shape [1, 28, 28, 1] const inputTensor = tensor3d.expandDims(0); return inputTensor; }37:T948,mnistData = { const imgSize = 28 * 28; const numClasses = 10; const numData = 65000; const trainTestSplit = 0.8; const [imagesResponse, labelsResponse] = await Promise.all([ fetch('https://storage.googleapis.com/learnjs-data/model-builder/mnist_images.png'), fetch('https://storage.googleapis.com/learnjs-data/model-builder/mnist_labels_uint8') ]); // load images const img = new Image(); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const imagesPromise = new Promise((resolve) => { img.crossOrigin = ''; img.onload = () => { img.width = img.naturalWidth; img.height = img.naturalHeight; const datasetBytesBuffer = new ArrayBuffer(numData * imgSize * 4); const chunkSize = 5000; canvas.width = img.width; canvas.height = chunkSize; for (let i = 0; i < numData / chunkSize; i++) { const datasetBytesView = new Float32Array( datasetBytesBuffer, i * imgSize * chunkSize * 4, imgSize * chunkSize ); ctx.drawImage( img, 0, i * chunkSize, img.width, chunkSize, 0, 0, img.width, chunkSize ); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (let j = 0; j < imageData.data.length / 4; j++) { datasetBytesView[j] = imageData.data[j * 4] / 255; } } resolve(new Float32Array(datasetBytesBuffer)); }; img.src = 'https://storage.googleapis.com/learnjs-data/model-builder/mnist_images.png'; }); // labels const labelsBuffer = await labelsResponse.arrayBuffer(); const labels = new Uint8Array(labelsBuffer); const datasetImages = await imagesPromise; const trainSize = Math.floor(trainTestSplit * numData); const testSize = numData - trainSize; const xTrain = datasetImages.slice(0, trainSize * imgSize); const yTrain = labels.slice(0, trainSize * numClasses); const xTest = datasetImages.slice(trainSize * imgSize); const yTest = labels.slice(trainSize * numClasses); return { xTrain: tf.tensor2d(xTrain, [trainSize, imgSize]), yTrain: tf.tensor2d(yTrain, [trainSize, numClasses]), xTest: tf.tensor2d(xTest, [testSize, imgSize]), yTest: tf.tensor2d(yTest, [testSize, numClasses]) }; }38:[{"id":"d6e0ae491a38d97f934d1c8a7cffe579f0450d0732bfe8dfa6225d70d8e0355ee39fcd024af5b042d51a14b1cacbe694166e1e96092619450f80deb21c8550e4","href":"https://static.observableusercontent.com/files/d6e0ae491a38d97f934d1c8a7cffe579f0450d0732bfe8dfa6225d70d8e0355ee39fcd024af5b042d51a14b1cacbe694166e1e96092619450f80deb21c8550e4","name":"model@3.json","type":"application/json","lastModified":1728632476584.293,"size":8467},{"id":"e8776ea9c106545632d38aaa988ab3bdee3e23bf8f1ce7c32722764b4368b6cc74ca7b94517dab0adef980831d0cd85586f47ed12c018a0f472c734a45762304","href":"https://static.observableusercontent.com/files/e8776ea9c106545632d38aaa988ab3bdee3e23bf8f1ce7c32722764b4368b6cc74ca7b94517dab0adef980831d0cd85586f47ed12c018a0f472c734a45762304","name":"group1-shard1of1@3.bin","type":"application/octet-stream","lastModified":1728632469531.488,"size":900144}] 31:{"id":"80b72a3fc45f82da","slug":"mnist_cnn","title":"Interactive Handwritten Digit Classification with CNN","thumbnail":"61ba0370145695c8fdd91e6464e52cde40085a678be350850b57b9e12859f301","access_level":"public","create_time":"$D2024-10-08T20:51:39.444Z","update_time":"$D2024-12-13T17:22:42.780Z","view_time":null,"first_public_time":"$D2024-12-20T12:22:37.652Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a15f09cdacc76604","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":"starter_2024"},"version":534,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"904bd4d0c1146834","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":null}],"members":[{"type":"individual","id":"904bd4d0c1146834","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":null,"role":"editor"},{"type":"team","id":"a15f09cdacc76604","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interactive Handwritten Digit Classification with CNN","cells":[{"id":0,"value":"# Interactive Handwritten Digit Classification with CNN","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"outputCanvas = {\n const canvas = DOM.canvas(200, 200);\n const context = canvas.getContext(\"2d\");\n\n context.fillStyle = \"rgba(46, 46, 51, 0)\"; // Transparent fill \n context.fillRect(0, 0, 200, 200);\n\n canvas.style.border = '1px solid white';\n canvas.style.margin = \"20px\";\n canvas.style.borderRadius = \"15px\";\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"predictButton = {\n const button = document.createElement('button');\n button.textContent = 'Predict';\n button.style.display = 'block';\n button.style.margin = '10px';\n button.style.width = '90px';\n\n button.onclick = async () => {\n await predictDigitt();\n };\n \n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"clearButton = {\n const button = document.createElement('button');\n button.textContent = 'Clear Canvas';\n button.style.display = 'block';\n button.style.margin = '10px';\n button.style.width = '90px';\n\n button.onclick = () => {\n let ctx = theCanvas.getContext('2d');\n ctx.fillStyle = '#ffffff';\n ctx.fillRect(0, 0, theCanvas.width, theCanvas.height);\n drawGrid(ctx, theCanvas.width, theCanvas.height);\n\n ctx = outputCanvas.getContext('2d');\n ctx.fillStyle = \"#2e2e33\";\n ctx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);\n\n // Reset mutables\n mutable predictedDigit = null;\n mutable predictedProbabilities = [];\n };\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function drawLine(context, x, y, lastX, lastY) {\n context.strokeStyle = \"black\";\n context.lineWidth = 15; // \"brush size\"\n context.lineCap = \"round\";\n context.beginPath();\n if (lastX !== undefined && lastY !== undefined) {\n context.moveTo(lastX, lastY);\n } else {\n context.moveTo(x, y);\n }\n context.lineTo(x, y);\n context.stroke();\n context.closePath();\n return [x, y];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"centerOfMass = (img) => {\n let total = 0;\n let sumX = 0;\n let sumY = 0;\n\n for (let y = 0; y < img.length; y++) {\n for (let x = 0; x < img[y].length; x++) {\n const val = img[y][x];\n total += val;\n sumX += x * val;\n sumY += y * val;\n }\n }\n\n return [sumX / total, sumY / total];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"shift = (img, shiftX, shiftY) => {\n const width = img[0].length;\n const height = img.length;\n const shifted = [];\n\n for (let y = 0; y < height; y++) {\n shifted[y] = [];\n for (let x = 0; x < width; x++) {\n const srcX = x - shiftX;\n const srcY = y - shiftY;\n\n if (srcX >= 0 && srcX < width && srcY >= 0 && srcY < height) {\n shifted[y][x] = img[srcY][srcX];\n } else {\n shifted[y][x] = 0; // fill with black pixels\n }\n }\n }\n\n return shifted;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"predictDigitt = () => {\n // process the canvas image\n const inputTensor = processCanvasImage(theCanvas);\n\n // model prediction\n const inputNodeName = mdl.inputs[0].name;\n const outputNodeName = mdl.outputs[0].name;\n const prediction = mdl.execute(\n { [inputNodeName]: inputTensor },\n outputNodeName\n );\n\n const predictedClassTensor = prediction.argMax(-1);\n const predictedClassArray = predictedClassTensor.dataSync();\n const predictedClass = predictedClassArray[0];\n\n // update mutable prediction variable\n mutable predictedDigit = predictedClass;\n\n // probabilities\n const probabilities = prediction.dataSync();\n mutable predictedProbabilities = Array.from(probabilities);\n\n // dispose tensors\n inputTensor.dispose();\n prediction.dispose();\n predictedClassTensor.dispose();\n\n // display predicted digit\n displayPerfectDigit(predictedClass);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"function getBoundingBox(image) {\n const height = image.length;\n const width = image[0].length;\n let top = height, bottom = 0, left = width, right = 0;\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n if (image[y][x] > 0.05) { // threshold to detect non-background pixels\n if (x < left) left = x;\n if (x > right) right = x;\n if (y < top) top = y;\n if (y > bottom) bottom = y;\n }\n }\n }\n\n return { top, bottom, left, right };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"function cropImage(image, bbox) {\n const cropped = [];\n for (let y = bbox.top; y <= bbox.bottom; y++) {\n const row = image[y].slice(bbox.left, bbox.right + 1);\n cropped.push(row);\n }\n return cropped;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"function resizeImage(image, targetHeight, targetWidth) {\n const srcHeight = image.length;\n const srcWidth = image[0].length;\n const resized = [];\n\n for (let y = 0; y < targetHeight; y++) {\n const srcY = Math.floor(y * srcHeight / targetHeight);\n const row = [];\n for (let x = 0; x < targetWidth; x++) {\n const srcX = Math.floor(x * srcWidth / targetWidth);\n row.push(image[srcY][srcX]);\n }\n resized.push(row);\n }\n\n return resized;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"function centerImage(image, canvasHeight, canvasWidth) {\n const imgHeight = image.length;\n const imgWidth = image[0].length;\n const offsetY = Math.floor((canvasHeight - imgHeight) / 2);\n const offsetX = Math.floor((canvasWidth - imgWidth) / 2);\n\n const centered = [];\n for (let y = 0; y < canvasHeight; y++) {\n const row = [];\n for (let x = 0; x < canvasWidth; x++) {\n if (\n y >= offsetY &&\n y < offsetY + imgHeight &&\n x >= offsetX &&\n x < offsetX + imgWidth\n ) {\n row.push(image[y - offsetY][x - offsetX]);\n } else {\n row.push(0); // background pixel\n }\n }\n centered.push(row);\n }\n\n return centered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"digitImages = ({\n 0: generateDigitImage(0),\n 1: generateDigitImage(1),\n 2: generateDigitImage(2),\n 3: generateDigitImage(3),\n 4: generateDigitImage(4),\n 5: generateDigitImage(5),\n 6: generateDigitImage(6),\n 7: generateDigitImage(7),\n 8: generateDigitImage(8),\n 9: generateDigitImage(9)\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"function generateDigitImage(digit) { \n const canvas = document.createElement('canvas');\n canvas.width = outputCanvas.width;\n canvas.height = outputCanvas.height;\n const ctx = canvas.getContext('2d');\n\n // background\n ctx.fillStyle = '#2e2e33';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // digit\n ctx.font = 'bold 200px Arial';\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText(digit.toString(), canvas.width / 2, canvas.height / 2 + 15);\n\n // return data URL of the image\n return canvas.toDataURL();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"function displayPerfectDigit(digit) {\n const ctx = outputCanvas.getContext('2d');\n\n // clear canvas\n ctx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);\n\n // get the image data URL for the predicted digit\n const imageUrl = digitImages[digit];\n\n const img = new Image();\n img.onload = () => {\n // draw on output canvas\n ctx.drawImage(img, 0, 0, outputCanvas.width, outputCanvas.height);\n };\n img.src = imageUrl;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"function drawGrid(ctx, width, height) {\n ctx.strokeStyle = '#e0e0e0';\n ctx.lineWidth = 1;\n\n // Draw vertical lines\n for (let x = 0; x <= width; x += width / 10) {\n ctx.beginPath();\n ctx.moveTo(x, 0);\n ctx.lineTo(x, height);\n ctx.stroke();\n }\n\n // Draw horizontal lines\n for (let y = 0; y <= height; y += height / 10) {\n ctx.beginPath();\n ctx.moveTo(0, y);\n ctx.lineTo(width, y);\n ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"function getMousePos(canvas, evt) {\n const rect = canvas.getBoundingClientRect();\n return {\n x: evt.clientX - rect.left,\n y: evt.clientY - rect.top\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"function getTouchPos(canvas, evt) {\n const rect = canvas.getBoundingClientRect();\n const touch = evt.touches[0];\n return {\n x: touch.clientX - rect.left,\n y: touch.clientY - rect.top\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"tf = require('@tensorflow/tfjs');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"## Data and Model","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"mdl = {\n // load model.json content\n let modelJSON = await FileAttachment(\"model@3.json\").json();\n\n // load the weight file as ArrayBuffer\n let weightData = await FileAttachment(\"group1-shard1of1@3.bin\").arrayBuffer();\n\n // assemble model artifacts\n let modelArtifacts = {\n modelTopology: modelJSON.modelTopology || modelJSON.graph,\n weightSpecs: modelJSON.weightsManifest[0].weights,\n weightData: weightData\n };\n\n // IOHandler\n const ioHandler = {\n load: async function() {\n return modelArtifacts;\n }\n };\n\n // load the model using tf.loadGraphModel\n return await tf.loadGraphModel(ioHandler);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"## Mutables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":320,"value":"mutable predictedDigit = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"mutable predictedProbabilities = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"