2b:null 2c:["$","title",null,{"children":"Sketch calculator | GnimOay | Observable"}] 31:T4d5,genPad = (name, w = 80, h = 80) => { const canvas = DOM.canvas(w, h); const ctx = canvas.getContext('2d'); let isDrawing = false; let lastPoint = [0, 0]; //// Setting Up //////////// canvas.className = 'sketch-pad ' + name; ctx.fillStyle = '#333'; ctx.lineWidth = strokeWidth; //////////// Function //// canvas.clear = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); trainingFlags[name] = false; }; //// Evt Reg //////////// //////// Evt Reg //////// canvas.ontouchstart = canvas.onmousedown = evt => { isDrawing = true; lastPoint = [evt.layerX, evt.layerY]; ctx.beginPath(); ctx.moveTo(lastPoint[0], lastPoint[1]); }; canvas.onmousemove = canvas.ontouchmove = evt => { evt.preventDefault(); const currentPoint = [evt.layerX, evt.layerY]; if (isDrawing) { ctx.lineTo(currentPoint[0], currentPoint[1]); ctx.stroke(); } lastPoint = currentPoint; }; canvas.onmouseup = canvas.ontouchend = evt => { isDrawing = false; trainingFlags[name] = true; mutable currentCanvas=name mutable tick = { ...mutable tick, [name]: mutable tick.hasOwnProperty(name) ? mutable tick[name] + 1 : 0 }; }; return canvas; }32:[] 2f:{"id":"71d09e820debb958","slug":"sketch-calculator","title":"Sketch calculator","thumbnail":"895933c5e25b9bbb7187e4dc73efff303f9c5d9d4774df9fc39113cc36250cbe","access_level":"public","create_time":"$D2020-02-25T20:41:24.392Z","update_time":"$D2020-03-17T14:20:25.402Z","view_time":null,"first_public_time":"$D2020-02-25T20:43:27.705Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":938,"publish_version":938,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Sketch calculator","cells":[{"id":0,"value":"md`# Sketch calculator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"md`Write your numbers and operator in three blocks respectively \n__e.g.__ 3, +, 2 \n- only write one digit in a block\n- supported operators including ADD MULTIPLY DIVIDE and MINUS\n\nyou can draw whatever you like and tell its meaning to the machine`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"strokeWidth = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"imgSize = 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":916,"value":"md`#### Instructions\n1. Use the dropdown to define your equation\n2. Teach the machine how to write your equation\n3. Click the \"Teach\" button\n4. Teach until the machine recognizes your equation very well\n4. Change the equation and re-teach\n\nChange the ${tex`k`} value of KNN algorithm to see which is the best number for prediction.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"viewof _k = slider({\n min: 1,\n max: 20, \n step: 1,\n value:3 , \n title: tex`k`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"{\n const a = html`${[viewof num1, viewof operator, viewof num2]}`;\n a.style =\n 'display:flex;flex-direction:row; width:270px; justify-content:space-around;';\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"{\n const n1 = genPad('num1', Math.min(100, width / 3 - 10), 120);\n const n2 = genPad('num2', Math.min(100, width / 3 - 10), 120);\n const ope = genPad('operator', Math.min(100, width / 3 - 10), 120);\n dataSrc.n1 = n1;\n dataSrc.n2 = n2;\n dataSrc.ope = ope;\n\n const c1 = button('clear');\n const cOpe = button('clear');\n const c2 = button('clear');\n c1.onclick = evt => n1.clear();\n c2.onclick = evt => n2.clear();\n cOpe.onclick = evt => ope.clear();\n\n const predArea = html`${[\n html`

${[c1, n1]}

`,\n html`

${[cOpe, ope]}

`,\n html`

${[c2, n2]}

`\n ]}`;\n predArea.className = 'pred-area';\n return predArea;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":920,"value":"md`##### Below is the fingerprint of your last drawing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":830,"value":"{\n const canvas = DOM.canvas(width, 5);\n const ctx = canvas.getContext('2d');\n const tmpMap = featureMap.reduce((acc, cur) => {\n acc[cur[0]] = cur[1];\n return acc;\n }, {});\n let k;\n if (currentCanvas == 'num1') k = 'n1';\n else if (currentCanvas == 'num2') k = 'n2';\n else if (currentCanvas == 'operator') k = 'ope';\n if (tmpMap[k])\n for (let i = 0; i < tmpMap[k].length; i++) {\n ctx.fillRect(i, 0, 1, tmpMap[k][i]);\n // console.log(i, tmpMap[k][i]);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":451,"value":"viewof btnCorrect = {\n const btnCorrect = button('Teach');\n btnCorrect.onclick = evt => {\n // trainingFlags.shouldAddSample = true;\n // if (!trainingFlags.shouldAddSample) return 'no update';\n // console.log(shouldAddSample, 'click correct btn', trainingFlags.num1);\n if (trainingFlags.num1) {\n console.log('train num1');\n numClassifier.addExample(featureTensor.n1, num1);\n }\n if (trainingFlags.num2) {\n console.log('train num2');\n numClassifier.addExample(featureTensor.n2, num2);\n }\n if (trainingFlags.operator) {\n console.log('train operator');\n opeClassifier.addExample(featureTensor.ope, operator);\n }\n // trainingFlags.shouldAddSample = false;\n // clear canvas after training\n Object.keys(dataSrc).map(k => dataSrc[k].clear());\n trainingFlags.num1 = false;\n trainingFlags.num2 = false;\n trainingFlags.operator = false;\n // saveModel();\n };\n return btnCorrect;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"{\n const a = html`\n

\n ${predNum1 &&\n `

${predNum1.label}

${(predNum1.confidences &&\n (\n predNum1.confidences.hasOwnProperty(predNum1.label) &&\n predNum1.confidences[predNum1.label] * 100\n ).toFixed(2)) + '%'}

\n`}\n

\n${predOpe &&\n `

${predOpe.label}

${(predOpe.confidences &&\n (predOpe.confidences[predOpe.label] * 100).toFixed(2)) + '%'}

`}\n

${predNum2.label}

${(predNum2.confidences &&\n (predNum2.confidences[predNum2.label] * 100).toFixed(2)) + '%'}

${calcRslt}

`;\n a.style = `display:flex;flex-direction:row;width:${Math.min(\n 350,\n width\n )}px;justify-content:space-around;background:#345;border-radius:5px;color:white;font-weight:bold;font-size:29px;`;\n a.className = 'full-predict';\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":934,"value":"md`__Reminder:__ You may ignore the error before first time teaching`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":761,"value":"md`---\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":775,"value":"{\n const clearAll = button('Clear All');\n clearAll.onclick = evt => {\n numClassifier.clearAllClasses();\n opeClassifier.clearAllClasses();\n };\n return clearAll;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":847,"value":"currentCanvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":744,"value":"// (viewof num1[0].options.selectedIndex = )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":791,"value":"[num1, operator, num2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":640,"value":"trainingFlags","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"featureMap = {\n tick; // update after drawing\n // formatter\n const formatter = imgFormatter('fsmt', imgSize, imgSize);\n return Object.keys(dataSrc).map(k => {\n formatter.copyFrom(dataSrc[k]);\n const arry = formatter\n .getContext('2d')\n .getImageData(0, 0, formatter.width, formatter.height).data;\n let l = [];\n for (let i = 3; i <= arry.length; i += 4) l.push(arry[i]);\n return [k, l];\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"featureTensor = featureMap.reduce((acc, cur) => {\n acc[cur[0]] = tf.tensor(cur[1]);\n return acc;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":876,"value":"function saveModel() {\n localStorage.setItem(\n 'numClassifier',\n JSON.stringify(numClassifier.getClassifierDataset())\n );\n localStorage.setItem(\n 'opeClassifier',\n JSON.stringify(opeClassifier.getClassifierDataset())\n );\n console.log('saved the model to localStorage');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":884,"value":"function loadModel() {\n const a = localStorage.getItem('numClassifier');\n // if (a) {\n // numClassifier.setClassifierDataset(JSON.parse(a));\n // console.log('loaded numClassifier', JSON.parse(a));\n // }\n const b = localStorage.getItem('opeClassifier');\n if (b) {\n opeClassifier.setClassifierDataset(JSON.parse(b));\n console.log('loaded opeClassifier');\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":550,"value":"md`#### Prediction result`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"mutable predNum1 = featureTensor.hasOwnProperty('n1') &&\n (await numClassifier.predictClass(featureTensor.n1, _k))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"mutable predNum2 = featureTensor.hasOwnProperty('n2') &&\n (await numClassifier.predictClass(featureTensor.n2, _k))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"mutable predOpe = featureTensor.hasOwnProperty('ope') &&\n (await opeClassifier.predictClass(featureTensor.ope, _k))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"mutable shouldAddSample = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"trainingFlags = {\n return { num1: false, num2: false, operator: false ,shouldAddSample:false};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"dataSrc = {\n return {};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"mutable tick = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":827,"value":"mutable currentCanvas='num1'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"{\n // viewof num1[0].selectedIndex = 5;\n // return viewof num1[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"calcRslt = {\n const n1 = parseInt(predNum1.label);\n const n2 = parseInt(predNum2.label);\n switch (predOpe.label) {\n case '+':\n return n1 + n2;\n case '-':\n return n1 - n2;\n case 'x':\n return n1 * n2;\n case '÷':\n return n1 / n2;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"imgFormatter = (name, w = 32, h = 32) => {\n const canvas = DOM.canvas(w, h);\n const ctx = canvas.getContext('2d');\n\n //// Setting Up ////////////\n canvas.className = 'sketch-pad ' + name;\n ctx.fillStyle = '#333';\n\n //////////// Function ////\n canvas.clear = () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n };\n canvas.copyFrom = img => {\n canvas.clear();\n ctx.drawImage(img, 0, 0, w, h);\n };\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"numClassifier = knnClassifier.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"opeClassifier = knnClassifier.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"{\n // loadModel();\n // return \"load model if there is any\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"canvaNum1=document.querySelector('.num1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"canvaNum2=document.querySelector('.num2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"canvaOpe = document.querySelector('.operator')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"md`### GUI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"viewof num1 = {\n const a = select(['0', \"1\", \"2\", \"3\", \"4\", '5', '6', '7', '8', '9']);\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"viewof num2 = select(['0',\"1\", \"2\", \"3\", \"4\",'5','6','7','8','9','0'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"viewof operator = select([\"+\", \"-\", \"x\", \"÷\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"tf.tensor([2, 3, 4])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"md`### import`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"import { button, slider, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"tf = require('@tensorflow/tfjs')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"knnClassifier = require(\"https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"