2c:null 2d:["$","title",null,{"children":"Using A Trained Teachable Machine Model in Observable | Mario Delgado | Observable"}] 32:T7aa,## Instructions * The zip file ***tm-my-image-model.zip*** [FileAttachment](${await FileAttachment("tm-my-image-model.zip").url()}) (along with the [sample code below](https://observablehq.com/d/8a5e996227a07377#code) ([code snippet via github](https://github.com/googlecreativelab/teachablemachine-community/blob/master/snippets/markdown/image/tensorflowjs/javascript.md))) is the export output from a [Standard Image Model](https://teachablemachine.withgoogle.com/train/image) training session on Google's [Teachable Machine](https://teachablemachine.withgoogle.com). The model was trained to look for one of the following classes: * ***Smartphone*** * ***Hand*** (right or left) * The contents of the zip file are loaded into the [model](https://observablehq.com/d/8a5e996227a07377#model) and the total number of classes trained-for are assigned to [***maxPredictions***](https://observablehq.com/d/8a5e996227a07377#maxPredictions). * Select [***Enable Webcam***](https://observablehq.com/d/8a5e996227a07377?collection=@mariodelgadosr/youre-never-too-old-to-code#enableWebcam) to authorize use of your webcam and have its images analyzed by the model in the [***predict***](https://observablehq.com/d/8a5e996227a07377#predict) function below; with results visualized in [***labelContainer***](https://observablehq.com/d/8a5e996227a07377#labelContainer). * To utilize the predictions associated with a new [Standard Image Model](https://teachablemachine.withgoogle.com/train/image) you trained, upload (via the [***Input:File***](https://observablehq.com/@observablehq/input-file)) your [exported/downloaded](https://youtu.be/n-zeeRLBgd0) zip file from the Teachable Machine: > 33:Tb57,// Code pattern is also available here: https://www.npmjs.com/package/@teachablemachine/image viewof code = Inputs.textarea({ readonly: true, monospace: true, label: "Original Code (Downloaded From TeachableMachine Training Session) That Serves As The Pattern For This Notebook:", width: 850, rows: 100, resize: true, value: `

Teachable Machine Image Model

` })34:[{"id":"9a6f9183b6f23b555d441ee21c8f913cb1d53bff936db04387cb7bbdef46ee502119c37afc9c05bc19cca834cfb268474e04caa2424e16c08302513668e33fe6","href":"https://static.observableusercontent.com/files/9a6f9183b6f23b555d441ee21c8f913cb1d53bff936db04387cb7bbdef46ee502119c37afc9c05bc19cca834cfb268474e04caa2424e16c08302513668e33fe6","name":"tm-my-image-model.zip","type":"application/zip","lastModified":1684098197337.533,"size":2246417}] 30:{"id":"8a5e996227a07377","slug":null,"title":"Using A Trained Teachable Machine Model in Observable","thumbnail":"a05f770a05511fe55bec7e82ff77899e8bbea86d25fe2493e44f7fd11f0eda30","access_level":"public","create_time":"$D2023-05-14T20:37:12.625Z","update_time":"$D2023-06-08T14:18:09.726Z","view_time":null,"first_public_time":"$D2023-05-16T09:43:42.215Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":"starter_2024"},"version":969,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}],"members":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"0dd4b0da06a9764f","slug":"youre-never-too-old-to-code","title":"You're Never Too Old To Code","owner":{"id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado "}},"type":"notebook","body":{"title":"Using A Trained Teachable Machine Model in Observable","cells":[{"id":0,"value":"# Using A Trained [Teachable Machine](https://teachablemachine.withgoogle.com) Model in Observable\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":564,"value":"toc(\"h2,h3,h4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":533,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":577,"value":"// https://github.com/observablehq/inputs/blob/main/README.md#Radio\nviewof trainedModel = Inputs.radio(\n [\"tm-my-image-model.zip in File Attachment\"],\n {\n label: \"Model:\",\n value: uploadedZip || \"tm-my-image-model.zip in File Attachment\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"// https://observablehq.com/@observablehq/input-file\nviewof uploadedZip = Inputs.file({\n label: \"Uploaded Zip File With Trained Model\",\n accept: \".zip\",\n required: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"viewof enableWebcam = Inputs.toggle({ label: \"Enable Webcam\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"// Webcam images collector\nwebcamContainer = htl.html`Webcam :

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"// Prediction probabilities visualized here\nlabelContainer = html`Predictions (${labels.join(\n \", \"\n)}):

${labels.map(\n (l) => html`

${l} : ${getVisualization(l)}

`\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"**Last 100 Predictions:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":941,"value":"viewof table = Inputs.table(Predictions.flat())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"## Code/Notebook Objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"{\n if (enableWebcam) {\n init();\n return `Predicting Started....`;\n } else {\n try {\n await webcam.pause();\n webcamContainer.querySelector(\"#status\").innerHTML = \"Paused\";\n } catch (error) {}\n\n return `Enable Webcam for Predictions`;\n } //else\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"// Either FileAttachment or uploaded zip file\nzipFile = trainedModel == \"tm-my-image-model.zip in File Attachment\"\n ? await FileAttachment(\"tm-my-image-model.zip\")\n : await uploadedZip","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"// Following pattern to get blobs in https://observablehq.com/@radames/face-landmarks-detection-tensorflow-js\n// https://www.npmjs.com/package/@teachablemachine/image\nmodel = {\n const zipFiles = await zipFile.zip(); // https://observablehq.com/@observablehq/zip\n return tmImage.loadFromFiles(\n // These files in the zip were packaged as a result of a training session on the Teachable Machine\n new File([await zipFiles.file(\"model.json\").blob()], \"model.json\"),\n new File([await zipFiles.file(\"weights.bin\").blob()], \"weights.bin\"),\n new File([await zipFiles.file(\"metadata.json\").blob()], \"metadata.json\")\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// https://www.npmjs.com/package/@teachablemachine/image\n// Number of images/classes the model was trained with\nmaxPredictions = model.getTotalClasses()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"labels = model.getClassLabels()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"// https://www.npmjs.com/package/@teachablemachine/image\n// Convenience function to setup a webcam\n//const flip = true; // whether to flip the webcam\nwebcam = new tmImage.Webcam(200, 200, true) // width, height, flip","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"// Load the image model and setup the webcam (as per code pattern)\nasync function init() {\n predictions.length = 0; // Clear out prediction history.\n\n const webcamDiv = webcamContainer.querySelector(\"#webcamDiv\");\n const tempSVG = webcamDiv.querySelector(\"#tempSVG\");\n\n await webcam.setup(); // request access to the webcam. No effect if webcam was already enabled.\n webcamContainer.querySelector(\"#status\").innerHTML = \"Loading\";\n webcamContainer.querySelector(\"#status\").className = \"blink\";\n\n await webcam.play(); // Either run initially or resume from pause\n webcamContainer.querySelector(\"#status\").innerHTML = \"Enabled\";\n webcamContainer.querySelector(\"#status\").className = \"\";\n window.requestAnimationFrame(loop); //run until paused\n\n // With webcam enabled and not yet part of DOM, add it\n if (tempSVG != null) {\n webcamDiv.removeChild(tempSVG); // Remove temporary video element\n webcamDiv.appendChild(webcam.canvas); // Add webcam\n } // if\n} // init","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"// As per code pattern\nasync function loop() {\n webcam.update(); // update the webcam frame\n await predict();\n if (enableWebcam) window.requestAnimationFrame(loop);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"// run the webcam image through the image model\n// As per code pattern\nasync function predict() {\n // predict can take in an image, video or canvas html element\n const prediction = await model.predict(webcam.canvas);\n\n // Store rolling history of predictions\n storePredictions(prediction);\n\n let className, probability;\n\n for (let i = 0; i < maxPredictions; i++) {\n //For each image/class being predicted\n className = prediction[i].className;\n probability = prediction[i].probability.toFixed(2);\n\n // Div associated with ith className\n let parentDiv =\n labelContainer.querySelector(\"div:first-of-type\").childNodes[i];\n\n // Remove previous visualization\n while (parentDiv.firstChild) {\n parentDiv.removeChild(parentDiv.firstChild);\n } // while\n\n // Add new visualization\n parentDiv.appendChild(html`${className}: `);\n parentDiv.appendChild(getVisualization(className));\n } // rinse and repeat\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"function storePredictions(prediction) {\n predictions.push(prediction);\n\n if (predictions.length > 100) predictions.shift();\n // predictions.splice(0, predictions.length - maxHistory);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"// Stores probabilities\npredictions = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"// yielded predictions for table display\nPredictions = {\n while (true)\n yield predictions\n .flat()\n .map(({ className, probability }, i) => ({\n Prediction: Math.floor(i / 2) + 1,\n className,\n probability\n }))\n .sort((a, b) => b.Prediction - a.Prediction);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"function getVisualization(predClass) {\n const predClassProbabilities = predictions\n .flat()\n .filter((obj) => obj.className == predClass)\n .map((obj) => obj.probability);\n\n return range(predClassProbabilities, {\n width: 125,\n height: 25,\n color: { fill: \"slategray\", stroke: \"slategray\" },\n text: {\n fill: \"black\",\n stroke: \"transparent\",\n font: \"9px 'Open Sans'\",\n format: \",.0%\"\n },\n domain: [\n predClassProbabilities.length == 0 ? 0 : d3.min(predClassProbabilities),\n predClassProbabilities.length == 0 ? 1 : d3.max(predClassProbabilities)\n ],\n domainline: { size: 1, stroke: \"slategray\" },\n margin: { horizontal: 0.04, vertical: 0.125 }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"// tf = require(\"@tensorflow/tfjs@latest/dist/tf.min.js\")\n// See recommendation by @mootari to specifically used tfjs 1.3.1 as opposed to @latest\n// https://talk.observablehq.com/t/issue-translating-teachable-machine-code-sample-to-run-in-observable/7938/2\ntf = require(\"@tensorflow/tfjs@1.3.1/dist/tf.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// https://www.npmjs.com/package/@teachablemachine/image\n// Import module error with: require(\"@teachablemachine/image@latest/dist/teachablemachine-image.min.js\")\n// Require debugger recommended import:\n// https://observablehq.com/@observablehq/module-require-debugger with moduleName=@teachablemachine/image\ntmImage = import(\"https://cdn.skypack.dev/@teachablemachine/image@0.8.5?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"import { range } from \"@hamzaamjad/tiny-charts\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"## Original Trained Teachable Machine [Code Pattern/Snippet](https://github.com/googlecreativelab/teachablemachine-community/blob/master/snippets/markdown/image/tensorflowjs/javascript.md)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":420,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"## References\n* [Google Creative Lab Teachable Machine on Github](https://github.com/googlecreativelab/teachablemachine-community)\n* [How to build a Teachable Machine with TensorFlow.js](https://observablehq.com/@nsthorat/how-to-build-a-teachable-machine-with-tensorflow-js)\n* [Webcam Object Detection](https://observablehq.com/d/03b5e861d1efbce2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"