3e:null 3f:["$","title",null,{"children":"Machine learning with Tensorflow.JS | Ruby | Observable"}] 45:T614,predictWebcam = { // Now let's start classifying a frame in the stream. objDetectionModel.detect(video).then(function (predictions) { console.log(predictions); // Remove any highlighting we did previous frame. for (let i = 0; i < children.length; i++) { liveView.removeChild(children[i]); } children.splice(0); // Now lets loop through predictions and draw them to the live view if // they have a high confidence score. for (let n = 0; n < predictions.length; n++) { // If we are over 66% sure we are sure we classified it right, draw it! if (predictions[n].score > 0.66) { const p = document.createElement('p'); p.innerText = predictions[n].class + ' - with ' + Math.round(parseFloat(predictions[n].score) * 100) + '% confidence.'; p.style = 'margin-left: ' + predictions[n].bbox[0] + 'px; margin-top: ' + (predictions[n].bbox[1] - 10) + 'px; width: ' + (predictions[n].bbox[2] - 10) + 'px; top: 0; left: 0;'; const highlighter = document.createElement('div'); highlighter.setAttribute('class', 'highlighter'); highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: ' + predictions[n].bbox[1] + 'px; width: ' + predictions[n].bbox[2] + 'px; height: ' + predictions[n].bbox[3] + 'px;'; liveView.appendChild(highlighter); liveView.appendChild(p); children.push(highlighter); children.push(p); } } }); }46:[] 43:{"id":"f049ec0817edb3f2","slug":null,"title":"Machine learning with Tensorflow.JS","thumbnail":"9a04369197b250b0d34f3e9fefdf48fb467db708b03e3e36fb674224806f29ae","access_level":"public","create_time":"$D2023-04-26T07:05:05.841Z","update_time":"$D2023-05-23T09:59:01.825Z","view_time":null,"first_public_time":"$D2023-05-22T07:18:32.807Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"48413fa70c880850","login":"ruby-private-lab","name":"Ruby","avatar_url":"https://avatars-next.observableusercontent.com/0effffe162be27ddb9aa9504317a7f7692428efd5e1e3a0b528c76e2c251faf1","tier":"starter_2024","bio":"","following":false},"version":380,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc89345ecb5cab18","login":"crazyruby68","name":"Quynh","avatar_url":"https://avatars-next.observableusercontent.com/1780eea489ac1eed20018b9ea2af7bca5807d4bb2457887476a82d7dc7f6f2e9","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dc89345ecb5cab18","login":"crazyruby68","name":"Quynh","avatar_url":"https://avatars-next.observableusercontent.com/1780eea489ac1eed20018b9ea2af7bca5807d4bb2457887476a82d7dc7f6f2e9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Machine learning with Tensorflow.JS","cells":[{"id":0,"value":"# Machine learning with Tensorflow.JS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"Prepare Tensor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"tf = require('@tensorflow/tfjs');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"# 1. Custom models\n\n**Example 1: Guess the rule between X and Y**\n\n| x | 2 | 5 | 3 | 12 |\n|---|---|----|---|----|\n| y | 5 | 11 | 7 | 25 |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"We can guess that y = 2x+1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"inputData = [\n {\n x:2,\n y:5\n },\n {\n x:5,\n y:11\n },\n {\n x:3,\n y:7\n },\n {\n x:12,\n y:25\n },\n {\n x:15,\n y:31\n },\n {\n x:20,\n y:41\n },\n {\n x:30,\n y:61\n },\n {\n x:50,\n y:101\n },\n {\n x:80,\n y:161\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"model = {\n const model1 = tf.sequential();\n model1.add(tf.layers.dense({units: 1, inputShape: [1]}));\n model1.compile({optimizer: 'sgd', loss: 'meanSquaredError'});\n\n return model1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"train = {\n const xs = tf.tensor1d(inputData.map(data => data.x));\n const ys = tf.tensor1d(inputData.map(data => data.y));\n await model.fit(xs, ys, {epochs: 400});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"Let's check if machine learning can give approximately correct answers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"predict = {\n const predictData = [\n { x: 6 },\n { x: 8 },\n { x: 9 },\n { x: 23 },\n { x: 68 },\n ];\n \n const test = model.predict(tf.tensor1d(predictData.map(data => data.x)));\n const result = test.arraySync();\n\n result.forEach((item, index) => {\n predictData[index].y = item[0];\n });\n \n return predictData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"Plot.plot({\n marks: [\n Plot.line(inputData, {x: \"x\", y: \"y\"}),\n Plot.dot(predict, {x: \"x\", y: \"y\"})\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"# 2. Use pre-trained model","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"** Example 1: Multiple object detection using pre trained model in TensorFlow.js **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":336,"value":"Load object dectection model","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"cocoSsd = require('https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"objDetectionModel = await cocoSsd.load();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"mutable isVideoOn = false;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"mutable isVideoReady = false;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"videoToggle = { \n const toggle = html``;\n toggle.onclick = () => {\n mutable isVideoOn = !isVideoOn;\n mutable isVideoReady = false; \n };\n return toggle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"video = {\n if (isVideoOn) {\n const vid = document.querySelector('#webcam1');\n navigator.mediaDevices.getUserMedia({\n video: {facingMode: \"environment\", width: 640, height: 480}, \n audio: false\n }).then((stream) => {\n vid.srcObject = stream;\n vid.onloadeddata = () => {\n vid.play();\n mutable isVideoReady = true; \n }\n });\n return vid;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"children = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"liveView = document.querySelector('#liveView');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"