2b:null 2c:["$","title",null,{"children":"TF --> TF.js for C4B | Praful Bhawsar | Observable"}] 31:T4f7,canvas = { const ctx = DOM.context2d(420, 420); const canvas = ctx.canvas; canvas.style.cursor = "crosshair"; ctx.fillStyle = "black"; ctx.fillRect(0, 0, 420, 420); ctx.strokeStyle = "white"; ctx.lineWidth = "16"; let isDrawing = false; canvas.onmousemove = async (e) => { e.preventDefault(); if (isDrawing) { const x = e.pageX - canvas.getBoundingClientRect().left; const y = e.pageY - canvas.getBoundingClientRect().top; ctx.lineTo(x, y); ctx.stroke(); const imageBitmap = await createImageBitmap(canvas, { resizeWidth: 28, resizeHeight: 28, resizeQuality: "high" }); const inference = await model.predict( (await tfjs.browser.fromPixels(imageBitmap, 1)).reshape([1, 28, 28, 1]) ); mutable canvasPrediction = inference.argMax(1).data(); mutable activations = (await inference.data()).reduce((obj, cur, ind) => { obj[ind] = cur.toPrecision(2); return obj; }, {}); } }; canvas.onmousedown = (e) => { e.preventDefault(); ctx.beginPath(); isDrawing = true; }; canvas.onmouseup = async (e) => { e.preventDefault(); isDrawing = false; }; return canvas; }32:[{"id":"ba06c4563680f6ddcd330af026130df27d7fdbc575deb128fba5dbfa42ca68264cb35e8379700a14ea475b8e35f22733efab06efc0fb837891549f0f39f0e466","href":"https://static.observableusercontent.com/files/ba06c4563680f6ddcd330af026130df27d7fdbc575deb128fba5dbfa42ca68264cb35e8379700a14ea475b8e35f22733efab06efc0fb837891549f0f39f0e466","name":"b33fe139df28c1f6.png","type":"image/png","lastModified":1640798751114.207,"size":249}] 2f:{"id":"750220d1415b7ee1","slug":"tf-tfjs-for-c4b","title":"TF --> TF.js for C4B","thumbnail":"90616889b3f497ddd80ca6342258a4a7330097c5cdb0860d82ae575a681bb3da","access_level":"public","create_time":"$D2021-12-29T15:25:28.657Z","update_time":"$D2024-08-08T18:32:19.650Z","view_time":null,"first_public_time":"$D2021-12-29T15:34:46.915Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b0b4412d0985303e","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":"starter_2024"},"version":726,"publish_version":726,"role":null,"authored":false,"authors":[{"type":"individual","id":"49bdf3232a315bf5","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":null}],"members":[{"type":"individual","id":"49bdf3232a315bf5","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":null,"role":"editor"}],"comments":[{"id":"0ec4572bd0ae77c2","reply_to_id":null,"content":"can I have the training data to calculate novelty?","create_time":"$D2022-01-28T20:02:40.404Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null}},{"id":"03ef03be384b0c95","reply_to_id":"0ec4572bd0ae77c2","content":"Praful: you can get it from https://observablehq.com/@prafulb/zarr-js-take-1","create_time":"$D2022-01-28T20:03:36.535Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null}},{"id":"dfac8cbd695c7415","reply_to_id":"0ec4572bd0ae77c2","content":"Try getImage(\"train\", 0) to get the RGBA pixel data.","create_time":"$D2022-02-04T16:58:10.052Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"49bdf3232a315bf5","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"TF --> TF.js for C4B","cells":[{"id":0,"value":"# TF --> TF.js for C4B","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"tfjs = await require(\"@tensorflow/tfjs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"model = tfjs.loadLayersModel(\"https://cloud4bio.github.io/data/model.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"html`

Model Summary:

${modelSummary}`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`Weights of the final activation layer:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"await model.getWeights()[0].data()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`Test Image: ${await FileAttachment(\"b33fe139df28c1f6.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"{\n const prediction = (\n await model\n .predict(\n (\n await tfjs.browser.fromPixels(\n await FileAttachment(\"b33fe139df28c1f6.png\").image(),\n 1\n )\n ).reshape([1, 28, 28, 1])\n )\n .argMax(1)\n .data()\n )[0];\n return md`Predicted value: **${prediction}** ✅`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"## Next, let's try real hand-drawn numbers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"md`Predicted Value: **${canvasPrediction === -1 ? \"--\" : canvasPrediction}**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"activations","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"viewof clearCanvas = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"### Predicting on Daniel's 9","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":598,"value":"image = {\n const image = new Image();\n image.width = 28;\n image.height = 28;\n image.src = \"https://episphere.github.io/fair/my9.png\";\n image.crossOrigin = \"anonymous\";\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"prediction = (\n await model.predict(\n (await tfjs.browser.fromPixels(image, 1)).reshape([1, 28, 28, 1])\n )\n).data()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"{\n clearCanvas;\n let ctx = canvas.getContext(\"2d\");\n canvas.getContext(\"2d\").clearRect(0, 0, 560, 560);\n canvas.getContext(\"2d\").fillStyle = \"black\";\n canvas.getContext(\"2d\").fillRect(0, 0, 560, 560);\n mutable canvasPrediction = -1;\n mutable activations = undefined;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"mutable canvasPrediction = -1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"mutable activations = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"{\n mutable modelSummary = \"\";\n model.summary(undefined, undefined, printOutput);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"printOutput = (msg) => {\n if (!modelSummary)\n mutable modelSummary = \"\"\n mutable modelSummary += `${msg}
`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"mutable modelSummary = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":698,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"## Get Image to evaluate model \"applicability\"\n\n-> `getImage(group, imageIndex, toRGBA)`\n\nParams:\n\n_group_ - What image set to retrieve from. Can be \"train\"/\"test\"\n\n_index_ - Index of the image in the requested set. 0-59999 for the training set, 0-9999 for the test set\n\n\nExample:\n```\nawait getImage(\"train\", 14)\n=> Output: \n {\n \"imageData\": ,\n \"label\": \n }\n\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":640,"value":"getImage = async (groupSelector=\"train\", imageIndex=0, toRGBA=true) => {\n const { data: imageData, label } = await getImageForPrediction(\n groupSelector,\n imageIndex\n );\n \n const rgbaImgData = []\n \n imageData.forEach((row) => {\n row.forEach(([pixelIntensity]) => {\n const tempArr = [];\n tempArr.push(Math.ceil(pixelIntensity * 255));\n tempArr.push(Math.ceil(pixelIntensity * 255));\n tempArr.push(Math.ceil(pixelIntensity * 255));\n tempArr.push(255);\n rgbaImgData.push(tempArr);\n });\n });\n \n return {\n imageData,\n label\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"import {getImageForPrediction} from \"@prafulb/zarr-js-take-1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"