2e:null 2f:["$","title",null,{"children":"Doodle recognition with TensorFlow.js | Daniel Zamora | Observable"}] 34:T53c,md`# Doodle recognition with TensorFlow.js My colleague, Fred, and I lead a workshop at the Applied Machine Learning Days this year for 22 attendees during the weekend session. The goal of the workshop was to teach data scientists the basics of working with TensorFlow and the TensorFlow.js API. After first going through how to build and train a model using TensorFlow in a Jupyter notebook, we switched over to an Observable notebook, where we integrated TFJS, and used our new model to build a prediction interface. We used Google's Quick-Draw dataset to train our model, and we constructed our own drawable \`\`canvas\`\` element on which we drew our doodles. Finally, we assigned the attendees two tasks: * Build an HTML table that displays the predictions for each class * Create a bar-chart of the predictions using D3 Here's a preview of the doodles from the dataset. We didn't use the full dataset though; we trained our model to only detect 15 of the 345 classes in the dataset.`35:T425,html`This cell contains the font-imports and CSS for this notebook. `36:[] 32:{"id":"b3bd13efb506d0d9","slug":"doodle-recognition-with-tensorflow-js","title":"Doodle recognition with TensorFlow.js","thumbnail":"80fda2de3bab3ea6c48e08df719380929b53b2bafd882f04240aa535e7ac4988","access_level":"public","create_time":"$D2020-04-30T21:48:04.253Z","update_time":"$D2020-04-30T21:48:04.253Z","view_time":null,"first_public_time":"$D2020-05-04T05:11:55.847Z","has_unpublished_edits":null,"fork":{"id":"4795ed67a8c2f708","slug":"doodle-recognition-with-tensorflow-js","title":"Doodle recognition with TensorFlow.js","owner":{"id":"22a1a1f52c9eee5b","login":"xaris","name":"Xari"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3f0b37dc506376c0","login":"danurizp","name":"Daniel Zamora","avatar_url":"https://avatars-next.observableusercontent.com/0f03f9a4a06148d4621ba5d7998977108c03775e3b7ec3169c62807e466168ef","tier":"starter_2024"},"version":1761,"publish_version":1761,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7aecd6ca605d135","login":"danurizp","name":"Daniel Zamora","avatar_url":"https://avatars-next.observableusercontent.com/0f03f9a4a06148d4621ba5d7998977108c03775e3b7ec3169c62807e466168ef","tier":null}],"members":[{"type":"individual","id":"c7aecd6ca605d135","login":"danurizp","name":"Daniel Zamora","avatar_url":"https://avatars-next.observableusercontent.com/0f03f9a4a06148d4621ba5d7998977108c03775e3b7ec3169c62807e466168ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Doodle recognition with TensorFlow.js","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1423,"value":"html` $\"Google's$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"md`Below is the list of classes from the dataset that we used to train our model. Keep these in mind when you try drawing your own doodles. For example; if you try drawing a frog or a fork, your prediction won't work. But a sheep should work. As will a ship, or any of the other items in the array below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"labels = [\n \"bird\",\n \"book\",\n \"car\",\n \"cat\",\n \"chair\",\n \"flower\",\n \"plane\",\n \"sheep\",\n \"ship\",\n \"strawberry\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"md`Below is the drawable canvas element. Use your mouse to draw your doodle on it. Try drawing a chair, for example. When you're done, click the blue button below to make your prediction.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1578,"value":"canvas = drawableCanvas();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"{\n const letters = bestGuess\n .toUpperCase()\n .split(\"\")\n .map((letter, i) => {\n const rand = Math.floor(Math.random() * Math.floor(colors.length - 1));\n const fill = colors[rand];\n\n return `${letter}`;\n });\n \n const textNode = svg`${letters}`;\n \n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"// https://beta.observablehq.com/@mbostock/wait-until-button\nviewof predictButton = {\n const form = html`