2f:null 30:["$","title",null,{"children":"How to build a Teachable Machine with TensorFlow.js | Nikhil Thorat | Observable"}] 35:T88c,md`[Teachable Machine](https://teachablemachine.withgoogle.com/) lets anyone build their own image classification model with no coding required. All you need is a webcam. ${html`

`} This notebook will walk you through how we built Teachable Machine. We've also released a [small library](https://github.com/tensorflow/tfjs-models/tree/master/knn-classifier) that implements the algorithm behind Teachable Machine, which doesn't require understanding the implementation details described in this notebook. ### Approach: "transfer learning" The approach we're going to take is called *transfer learning*. This technique starts with an already trained model and specializes it for the task at hand. This lets you train far more quickly and with less data than if you were to train from scratch. In this case, we'll bootstrap our model from a pre-trained model called [MobileNet](https://github.com/tensorflow/models/blob/master/research/slim/nets/mobilenet_v1.md). Our system will learn to make predictions using our own classes that were never seen by MobileNet. We do this by using the activations produced by this pretrained model, which informally represent high-level semantic features of the image that the model has learned. The pretraining is so effective that we don't have to have to do anything fancy like train another neural network, but instead we just use a nearest neighbors approach. What we do is feed an image through MobileNet and find other examples in the dataset that have similar activations to this image. In practice, this is noisy, so instead we choose the ${tex`k`} nearest neighbors and choose the class with the most representation. By bootstrapping our model with MobileNet and using ${tex`k`} nearest neighbors, we can train a realistic classifier in a short amount of time, with very little data, all in the browser. Doing this fully end-to-end, from pixels to prediction, would require too much time and data for an interactive application.`36:T414,{ const catImg = tf.fromPixels(catEl); // Make a prediction through the model. const topK = 5; const predictions = await mobilenet.classify(catImg, topK); const text = predictions.map(prediction => prediction.probability.toFixed(3) + ': ' + prediction.className + '
'); const rows = predictions.map(prediction => `

${prediction.className}

${prediction.probability.toFixed(3)}

${imagenetClassIdx[prediction.className]}

`); return html`

class name

probability

imagenet class id

${rows.join('')}` }37:T473,md`Neural network models, like MobileNet, typically consist of a stack of layers, which are mathematical transformations of tensors with parameters that are automatically tuned by the training process. We call the output of each of these layers "activations". In this MobileNet model, the last layer is a [softmax](https://developers.google.com/machine-learning/crash-course/multi-class-neural-networks/softmax) normalization function. Intuitively, this function "squashes" a vector of unnormalized predictions, generating a probability for each of the 1000 classes (normalized predictions). The unnormalized predictions vector is usually called [logits](https://developers.google.com/machine-learning/crash-course/glossary#logits). This is the activation we'll use for transfer learning. The logits are represented as a vector with 1000 elements. In TensorFlow.js, this is represented as a tensor with shape \`[1000]\`, where each value contains a number representing the prediction for that class: ${tex`\begin{bmatrix} l_{1} & l_{2} & l_{3} & \dots & l_{1000} \\ \end{bmatrix} `} For the cat image above, they look like this:`38:T531,md`### ${tex`k`}-nearest neighbors Let's say we want to distinguish between images of different kinds of objects we hold up to the webcam. Our process will be to collect a number of images for each class, and compare new images to this dataset and find the most similar class. The particular algorithm we're going to take to find similar images from our collected dataset is called ${tex`k`}-nearest neighbors. We'll use the semantic information represented in the logits from MobileNet to do our comparison. In ${tex`k`}-nearest neighbors, we look for the most similar ${tex`k`} examples to the input we're making a prediction on, and choose the class with the highest representation in that set. #### Let's illustrate this with a small example Imagine we have a set of 2D points that are labeled "blue" or "red" and we want to determine whether a new point should be labeled "blue" or "red". In the visualization below try ${isMobile ? 'tapping' : 'hovering your mouse over'} the chart. The location of your pointer represents a point that we want to classify. For each of the existing data points, we compute the euclidian distance between the mouse and the point. We then sort the points by their distance to the mouse, and choose a class (color) that has the most representation in the top ${tex`k`} sorted distances.`39:T42d,md`#### Cosine similarity In the Teachable Machine application we use a slightly different way to measure the similarity of two points called *cosine similarity* instead of euclidian distance. Cosine similarity is convenient because we can use a dot product between the two vectors that we want to compute similarity for! Dot products are advantageous because they are much easier to accelerate than euclidian distance, especially in high dimensions (including in TensorFlow.js). Moreover, this metric has a natural intepretation in terms of the angle between two vectors (${tex`\theta`}). If you are interested in the linear algebra: ${tex`\displaystyle \mathbf v \cdot \mathbf w = \left\Vert{\mathbf v}\right\Vert \left\Vert{\mathbf w}\right\Vert \cos \theta`} Notice that if ${tex`\left\Vert{\mathbf v}\right\Vert = \left\Vert{\mathbf w}\right\Vert = 1`} then ${tex`\displaystyle \mathbf v \cdot \mathbf w = \cos \theta`}. This means that if we normalize all of our logits vectors to unit length, then we can compute similarities by computing the dot product. `3a:T695,md`#### Data collection For each of the 3 classes, we'll create a matrix of shape \`[N, 1000]\` where \`N\` is the number of samples collected for that class. When we collect a new image for a class, we'll feed it through MobileNet to get a logits activation, normalize it to unit length, and concatenate it to the end of our matrix, creating a new row. To normalize the vector to unit length, we divide each component of the vector by the length of the vector: ${tex`u = \frac{v}{||v||}`} The following matrix represents the dataset for class A with ${tex`N_a`} examples collected. ${tex`\begin{bmatrix} a_{1,1} & a_{1,2} & a_{1,3} & \dots & a_{1,1000} \\ a_{2,1} & a_{2,2} & a_{2,3} & \dots & a_{2,1000} \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ a_{N_a,1} & a_{N_a,2} & a_{N_a,3} & \dots & a_{N_a,1000} \end{bmatrix}`} With our example logits in a matrix of this shape, we can use a matrix multiply to compute the dot product between **all** of the points in this class with a new input example. We separate each class into their own matrix and stack them into a single matrix for convenience and efficient computation: ${tex`\begin{bmatrix} a_{1,1} & a_{1,2} & a_{1,3} & \dots & a_{1,1000} \\ a_{2,1} & a_{2,2} & a_{2,3} & \dots & a_{2,1000} \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ b_{1,1} & b_{1,2} & b_{1,3} & \dots & b_{1,1000} \\ b_{2,1} & b_{2,2} & b_{2,3} & \dots & b_{2,1000} \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ c_{1,1} & c_{1,2} & c_{1,3} & \dots & c_{1,1000} \\ c_{2,1} & c_{2,2} & c_{2,3} & \dots & c_{2,1000} \\ \vdots & \vdots & \vdots & \ddots & \vdots \end{bmatrix}`} `3b:T891,md`#### Prediction When making a prediction, we feed our input through MobileNet to get the logits vector, then normalize it. This gives a vector, ${tex`x`}, of shape \`[1000]\`. We'll show it as a column vector: ${tex`x = \begin{bmatrix} x_{1} \\ x_{2} \\ x_{3} \\ \vdots \\ x_{1000} \end{bmatrix}`} Now we can use a matrix multiply to compute the dot product between each row vector from our dataset with the input vector, ${tex`x`}. ${tex`\begin{bmatrix} a_{1,1} & a_{1,2} & a_{1,3} & \dots & a_{1,1000} \\ a_{2,1} & a_{2,2} & a_{2,3} & \dots & a_{2,1000} \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ b_{1,1} & b_{1,2} & b_{1,3} & \dots & b_{1,1000} \\ b_{2,1} & b_{2,2} & b_{2,3} & \dots & b_{2,1000} \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ c_{1,1} & c_{1,2} & c_{1,3} & \dots & c_{1,1000} \\ c_{2,1} & c_{2,2} & c_{2,3} & \dots & c_{2,1000} \\ \vdots & \vdots & \vdots & \ddots & \vdots \end{bmatrix} \times \begin{bmatrix} x_{1} \\ x_{2} \\ x_{3} \\ \vdots \\ x_{1000} \end{bmatrix} = \begin{bmatrix} a_{1,1-1000} \cdot x \\ a_{2,1-1000} \cdot x \\ a_{3,1-1000} \cdot x \\ \vdots \\ b_{1,1-1000} \cdot x \\ b_{2,1-1000} \cdot x \\ b_{3,1-1000} \cdot x \\ \vdots \\ c_{1,1-1000} \cdot x \\ c_{2,1-1000} \cdot x \\ c_{3,1-1000} \cdot x \\ \vdots \end{bmatrix} `} On the right, we've used the notation ${tex`a_{n,1-1000} \cdot x`} to mean the dot product of the ${tex`n`}th row of the dataset and ${tex`x`}. Notice that each row of the result is the dot product of each row of the dataset matrix (a single dataset example) and the ${tex`x`} we're making a prediction over. This means we get a cosine similarity between all dataset examples and our new vector! Now, all we have to do is sort the resulting vector of similarities, truncate it to ${tex`k`} top values, and select the class that appears most in the nearest neighbors. This process of computing all of these dot products at once is known as "vectorization", allowing us to take advantage of GPU parallelism. [Here is another notebook](https://beta.observablehq.com/@nsthorat/introduction-to-deeplearn-js) about vectorization. `3c:T466,md`Thanks for reading! All of the code behind this demo is shown below. If you want to apply k-nearest neighbors to your own application, check out [this TensorFlow.js utility](https://github.com/tensorflow/tfjs-models/tree/master/knn-classifier). You can use this approach for any input data, not just images! #### Acknowledgements Thanks [Yannick Assogba](https://twitter.com/tafsiri), [Daniel Smilkov](https://twitter.com/dsmilkov), [Martin Wattenberg](https://twitter.com/wattenberg), [Jonas Jongejan](https://twitter.com/halfdanj), [Been Kim](https://twitter.com/_beenkim), and [Mahima Pushkarna](https://twitter.com/mahimapushkarna) for reviewing and giving extremely helpful comments. A special thanks to [Mike Bostock](https://twitter.com/mbostock) for constantly helping me with Observable questions and visualization feedback! ${html`The original Teachable Machine application was developed by friends from Støj, Use All Five and Creative Lab and TensorFlow.js teams at Google.

`} `3d:T479,calculateTopClass = (topKIndices, kVal) => { /** * Computes the most likely class from a topk calculation. */ let imageClass = -1; const confidences = {}; if (topKIndices == null) { // No class predicted return {classIndex: imageClass, confidences}; } const indicesForClasses = []; const topKCountsForClasses = []; for (const i in dataset) { topKCountsForClasses.push(0); let num = classExampleCount[i]; if (+i > 0) { num += indicesForClasses[+i - 1]; } indicesForClasses.push(num); } for (let i = 0; i < topKIndices.length; i++) { for (let classForEntry = 0; classForEntry < indicesForClasses.length; classForEntry++) { if (topKIndices[i] < indicesForClasses[classForEntry]) { topKCountsForClasses[classForEntry]++; break; } } } let topConfidence = 0; for (const i in dataset) { const probability = topKCountsForClasses[i] / kVal; if (probability > topConfidence) { topConfidence = probability; imageClass = +i; } confidences[i] = probability; } return {classIndex: imageClass, confidences}; }3e:T194a,angle = (height = 400, showBeta = false, showTheta = true, initialTheta = Math.PI / 4) => { const width = height; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; let currentTheta = initialTheta; /* "Canvas" setup */ // Create the canvas const svg = DOM.svg(width, height); const canvas = d3.select(svg); // Style the canvas canvas.style('border', '1px solid rgba(0,0,0,0.05)') .style('font-family', 'monospace'); /* Constants */ const origin = {x: width / 2, y: height / 2}; // Center of the canvas // Length of the ray const rayLength = 200; // The x scale for the ray const scaleX = d3.scaleLinear() .domain([-2, 2]) .range([margin.left, width - margin.right]); // The y scale for the ray const scaleY = d3.scaleLinear() .domain([2, -2]) .range([margin.top, height - margin.bottom]); // define the x axis var xAxis = d3.axisBottom() .scale(scaleX) // define the y axis var yAxis = d3.axisLeft() .scale(scaleY) canvas.append("g") .attr("class", "axis") .attr("transform", "translate(0, " + (height / 2) + ")") .call(xAxis); canvas.append("g") .attr("class", "axis") .attr("transform", "translate(" + width / 2 + ", 0)") .call(yAxis); // Arc Transformation // Arcs are offset by 90 degrees with transform const arcTransform = `translate(${origin.x}, ${origin.y}), rotate(90)` /* Helpers */ // Convert radians to arc units // @see https://github.com/d3/d3-shape#arc_endAngle const angle2Arc = (angle) => - angle; // Calculate Radius (Ray) Endpoint Coordinates const radiusEndpoint = (angle) => [scaleX(Math.cos(angle)), scaleY(Math.sin(angle))]; // Calculate Radius (Ray) Coordinates const radiusCoords = (angle, x, y) => [[origin.x, origin.y], [x, y]]; /* Variables */ const h = Math.sqrt(Math.pow(datapoint.x, 2) + Math.pow(datapoint.y, 2)); const arcStartAngle = -Math.cos(datapoint.x / h) /* Elements */ // Create the visualization group element const vis = canvas.append('g').attr('class', 'visualization'); // Draw the initial point / vertex const point = vis.append('circle') .style("fill", 'black') .attr("cx", origin.x) .attr("cy", origin.y) .attr("r", 6); vis.append('circle') .style("fill", "red") .attr("cx", scaleX(datapoint.x)) .attr("cy", scaleY(datapoint.y)) .attr("r", 5); // Arcs // Angle Arc Generator const arcGen = d3.arc() .outerRadius(30) .innerRadius(30) .startAngle(arcStartAngle) // Theta angle arc const thetaArc = vis.append('path') .attr('class', 'arc arc-theta') .attr('fill', 'transparent') .attr('stroke', showTheta ? colors.thetaArc : 'transparent') .attr('transform', arcTransform) // Beta angle arc const betaArc = vis.append('path') .attr('class', 'arc arc-beta') .attr('fill', 'transparent') .attr('stroke', showBeta ? colors.betaArc : 'transparent') .attr('transform', arcTransform); // Rays const rayGen = d3.line(); // Static Ray const staticRay = vis.append('path') .attr('class', 'ray ray--static') .attr('stroke', 'black') .attr('marker-end', (d) => "url(#arrow)") .attr('d', rayGen([[scaleX(0), scaleY(0)], [scaleX(datapoint.x), scaleY(datapoint.y)]])); // Dynamic Ray const dynamicRay = vis.append('path') .attr('class', 'ray ray--dynamic') .attr("stroke", "black") .attr('marker-end', (d) => "url(#arrow)"); /* Annotations */ // Create Annotations Group const annotations = canvas.append('g') .attr('class', 'annotations') // Angle Labels const labelArcGen = d3.arc() .outerRadius(76) .innerRadius(76) .startAngle(arcStartAngle) // Theta label const thetaLabel = annotations.append("text") .attr('class', 'annotation annotation-theta') .attr('fill', showTheta ? colors.thetaArc : 'transparent') .attr('dx','-4') .attr('dy','4') .text('θ'); // Beta label const betaLabel = annotations.append("text") .attr('class', 'annotation annotation-beta') .attr('fill', showBeta ? colors.betaArc : 'transparent') .attr('dx','-4') .attr('dy','4') .text('β'); // Add an arrow-head marker to the ray canvas.append("svg:defs").append("svg:marker") .attr("id", "arrow") .attr("viewBox", "0 -5 10 10") //.attr('refX', 0) //Adjust the arrow head position along the line .attr("markerWidth", 5) .attr("markerHeight", 5) .attr("orient", "auto") .append("svg:path") .attr("d", "M0,-5L10,0L0,5"); /* Methods */ const updatePositions = (angle, x, y) => { // Arcs // Theta Arc thetaArc.attr('d', arcGen.endAngle(angle2Arc(angle))); // Beta Arc betaArc.attr('d', arcGen.endAngle(angle2Arc(angle) + 2 * Math.PI )); // Ray dynamicRay.attr('d', rayGen(radiusCoords(angle, x, y))); // Labels // Theta Label const thetaLabelCentroid = labelArcGen.endAngle(angle2Arc(angle) + Math.PI).centroid(); thetaLabel.attr('transform', `translate(${thetaLabelCentroid[0] + origin.x}, ${thetaLabelCentroid[1] + origin.y})`) // Beta Label const betaLabelCentroid = labelArcGen.endAngle(angle2Arc(angle) + 3 * Math.PI ).centroid(); betaLabel.attr('transform', `translate(${betaLabelCentroid[0] + origin.x}, ${betaLabelCentroid[1] + origin.y})`) // For Debugging //labelArc.attr('d', labelArcGen.endAngle(angle2Arc(angle))); //labelPoint.attr('cx', thetaLabelCentroid[0] + origin.x).attr('cy', thetaLabelCentroid[1] + origin.y); } // END updatePositions const handleMouse = (x,y) => { // Get the current angle using the arctangent // Calculate the arctangent const a = Math.atan2( y - origin.y, x - origin.x); // Calculate the actual angle const angle = a > 0 ? 2 * Math.PI - a : - a; // Set the external theta angle currentTheta = angle; svg.value = currentTheta; svg.dispatchEvent(new CustomEvent('input')); // Update the visualization updatePositions(angle, x, y); } // Mouse position listener canvas.on("mousemove", function() { const mouse = d3.mouse(this); // Update element positions handleMouse(mouse[0], mouse[1]); }); /* Initialization */ updatePositions(currentTheta); svg.value = currentTheta; return svg; }3f:T460,datasets = { return { 'simple 2-class': [ {x: 1, y: 1, label: 1}, {x: 1.2, y: .9, label: 1}, {x: .7, y: 1.5, label: 1}, {x: 1.5, y: 1.1, label: 1}, {x: 1.6, y: 1.1, label: 1}, {x: 1.1, y: 1.2, label: 1}, {x: -1.5, y: -1.0, label: 2}, {x: -1.5, y: -1.1, label: 2}, {x: -1.3, y: -1.2, label: 2}, {x: -.9, y: -1.2, label: 2}, {x: -.780, y: -.8, label: 2}, {x: -1.2, y: -.84, label: 2}, ], 'simple 3-class': [ {x: 1, y: 1, label: 1}, {x: 1.2, y: .9, label: 1}, {x: .7, y: 1.5, label: 1}, {x: 1.5, y: 1.1, label: 1}, {x: 1.6, y: 1.1, label: 1}, {x: 1.1, y: 1.2, label: 1}, {x: -1.5, y: -1.0, label: 2}, {x: -1.5, y: -1.1, label: 2}, {x: -1.3, y: -1.2, label: 2}, {x: -.9, y: -1.2, label: 2}, {x: -.780, y: -.8, label: 2}, {x: -1.2, y: -.84, label: 2}, {x: -.3, y: .4, label: 3}, {x: -.5, y: 1.1, label: 3}, {x: -.3, y: 1.2, label: 3}, {x: -.9, y: 1.2, label: 3}, {x: -.780, y: .8, label: 3}, {x: -.2, y: .84, label: 3}, ] } }40:T142d,knnPlot = (points, k, generalize) => { const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const realHeight = 500; const realWidth = 500; const width = realWidth - margin.left - margin.right; const height = realHeight - margin.top - margin.bottom; const div = document.createElement('div'); div.style.height = realHeight + 'px'; div.style.width = realWidth + 'px'; const range = {x: [-2, 2], y: [-2, 2]}; // set up the x scale const xScale = d3.scaleLinear() .domain([range.x[0], range.x[1]]) .range([0, width]); const xScaleInv = d3.scaleLinear() .domain([0, width]) .range([range.x[0], range.x[1]]) // set up the y scale const yScale = d3.scaleLinear() .domain([range.y[0], range.y[1]]) .range([height, 0]); const yScaleInv = d3.scaleLinear() .range([range.y[0], range.y[1]]) .domain([height, 0]); const labelColors = {1: '#a5a5ff', 2: 'red', 3: 'orange'}; if (generalize) { const canvas = document.createElement('canvas'); div.appendChild(canvas); canvas.width = width; canvas.height = height; canvas.style.position = 'absolute'; canvas.style.left = margin.left + 'px'; canvas.style.top = margin.right + 'px'; const ctx = canvas.getContext('2d'); canvas.style.opacity = .5; const resolution = .04; for (let x = range.x[0]; x < range.x[1]; x+= resolution) { for (let y = range.y[0]; y < range.y[1]; y+= resolution) { const winner = knn(x, y, points, k); const canvx = width * (x - range.x[0]) / (range.x[1] - range.x[0]); const canvy = height * (range.y[1] - y) / (range.y[1] - range.y[0]); const canvr = width * resolution / (range.x[1] - range.x[0]); ctx.fillStyle = labelColors[winner.winnerLabel]; ctx.fillRect(canvx, canvy, canvr + 1, canvr + 1); } } } let distances = []; // create the svg container let svgEl = DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom); div.appendChild(svgEl); svgEl.style.position = 'absolute'; svgEl.style.left = 0; svgEl.style.top = 0; const svg = d3.select(svgEl) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //svg.append("text").attr("x", xScale(-1.9)).attr("y", -12).text(`k = ${k}`); function updatevis(mousex, mousey, knnResult = {}) { const circle = svg.selectAll("circle.data") .data(points) const circleEnter = circle.enter() .append("circle").attr("class", "data") circle.merge(circleEnter) .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 5) .style("fill", d => labelColors[d.label]); const data = knnResult.winnerLabel != null ? [{winnerLabel: knnResult.winnerLabel}] : []; // Correct point const circleMouse = svg.selectAll("circle.mouse") .data(data); const circleMouseEnter = circleMouse.enter() .append("circle").attr("class", "mouse"); circleMouse.merge(circleMouseEnter) .attr("cx", d => xScale(mousex)) .attr("cy", d => yScale(mousey)) .attr("r", 5) .style("fill", d => labelColors[knnResult.winnerLabel]); if (knnResult.distances != null) { const circleWinners = svg.selectAll("circle.winners") .data(knnResult.distances.filter(d => d.top)); const circleWinnersEnter = circleWinners.enter() .append("circle").attr("class", "winners"); circleWinners.merge(circleWinnersEnter) .attr("cx", (d, i) => xScale(-2.0 + i * .1) + 5) .attr("cy", (d, i) => -13) .attr("r", 5) .style("fill", d => labelColors[d.label]) } const line = svg.selectAll("line.distances").data(distances); const lineEnter = line.enter().append("line").attr("class", "distances"); line .merge(lineEnter) .attr("x1", d => xScale(d.x0)) // .attr("y1", d => yScale(d.y0)) // .attr("x2", d => xScale(d.x1)) .attr("y2", d => yScale(d.y1)) .attr("opacity", d => d.top ? 1 : 0) .attr("stroke", d => d.top ? labelColors[d.label] : "#dedede") .attr("stroke-width", d => d.top ? 3 :1); } d3.select(div).on('mousemove', function () { const mouse = d3.mouse(this); const x = 2 * 2 * ((mouse[0] - margin.left - width / 2) / width); const y = -2 * 2 * ((mouse[1] - margin.top - height / 2) / height); let winnerLabel; let result = knn(x, y, points, k); distances = result.distances; updatevis(x, y, result); }); const pointerEl = pointer(); div.appendChild(pointerEl); pointerEl.style.position = 'absolute'; pointerEl.style.left = '0px'; pointerEl.style.top = '0px'; updatevis(); // define the x axis var xAxis = d3.axisBottom() .scale(xScale) // define the y axis var yAxis = d3.axisLeft() .scale(yScale) svg.append("g") .attr("class", "axis") .attr("transform", "translate(0, " + (height / 2) + ")") .call(xAxis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + width / 2 + ", 0)") .call(yAxis); return div; }41:Tbdd,pointer = () => html``42:T8c2d,imagenetClasses = { return { '0': 'tench, Tinca tinca', '1': 'goldfish, Carassius auratus', '2': 'great white shark, white shark, man-eater, man-eating shark, ' + 'Carcharodon carcharias', '3': 'tiger shark, Galeocerdo cuvieri', '4': 'hammerhead, hammerhead shark', '5': 'electric ray, crampfish, numbfish, torpedo', '6': 'stingray', '7': 'cock', '8': 'hen', '9': 'ostrich, Struthio camelus', '10': 'brambling, Fringilla montifringilla', '11': 'goldfinch, Carduelis carduelis', '12': 'house finch, linnet, Carpodacus mexicanus', '13': 'junco, snowbird', '14': 'indigo bunting, indigo finch, indigo bird, Passerina cyanea', '15': 'robin, American robin, Turdus migratorius', '16': 'bulbul', '17': 'jay', '18': 'magpie', '19': 'chickadee', '20': 'water ouzel, dipper', '21': 'kite', '22': 'bald eagle, American eagle, Haliaeetus leucocephalus', '23': 'vulture', '24': 'great grey owl, great gray owl, Strix nebulosa', '25': 'European fire salamander, Salamandra salamandra', '26': 'common newt, Triturus vulgaris', '27': 'eft', '28': 'spotted salamander, Ambystoma maculatum', '29': 'axolotl, mud puppy, Ambystoma mexicanum', '30': 'bullfrog, Rana catesbeiana', '31': 'tree frog, tree-frog', '32': 'tailed frog, bell toad, ribbed toad, tailed toad, Ascaphus trui', '33': 'loggerhead, loggerhead turtle, Caretta caretta', '34': 'leatherback turtle, leatherback, leathery turtle, Dermochelys coriacea', '35': 'mud turtle', '36': 'terrapin', '37': 'box turtle, box tortoise', '38': 'banded gecko', '39': 'common iguana, iguana, Iguana iguana', '40': 'American chameleon, anole, Anolis carolinensis', '41': 'whiptail, whiptail lizard', '42': 'agama', '43': 'frilled lizard, Chlamydosaurus kingi', '44': 'alligator lizard', '45': 'Gila monster, Heloderma suspectum', '46': 'green lizard, Lacerta viridis', '47': 'African chameleon, Chamaeleo chamaeleon', '48': 'Komodo dragon, Komodo lizard, dragon lizard, giant lizard, ' + 'Varanus komodoensis', '49': 'African crocodile, Nile crocodile, Crocodylus niloticus', '50': 'American alligator, Alligator mississipiensis', '51': 'triceratops', '52': 'thunder snake, worm snake, Carphophis amoenus', '53': 'ringneck snake, ring-necked snake, ring snake', '54': 'hognose snake, puff adder, sand viper', '55': 'green snake, grass snake', '56': 'king snake, kingsnake', '57': 'garter snake, grass snake', '58': 'water snake', '59': 'vine snake', '60': 'night snake, Hypsiglena torquata', '61': 'boa constrictor, Constrictor constrictor', '62': 'rock python, rock snake, Python sebae', '63': 'Indian cobra, Naja naja', '64': 'green mamba', '65': 'sea snake', '66': 'horned viper, cerastes, sand viper, horned asp, Cerastes cornutus', '67': 'diamondback, diamondback rattlesnake, Crotalus adamanteus', '68': 'sidewinder, horned rattlesnake, Crotalus cerastes', '69': 'trilobite', '70': 'harvestman, daddy longlegs, Phalangium opilio', '71': 'scorpion', '72': 'black and gold garden spider, Argiope aurantia', '73': 'barn spider, Araneus cavaticus', '74': 'garden spider, Aranea diademata', '75': 'black widow, Latrodectus mactans', '76': 'tarantula', '77': 'wolf spider, hunting spider', '78': 'tick', '79': 'centipede', '80': 'black grouse', '81': 'ptarmigan', '82': 'ruffed grouse, partridge, Bonasa umbellus', '83': 'prairie chicken, prairie grouse, prairie fowl', '84': 'peacock', '85': 'quail', '86': 'partridge', '87': 'African grey, African gray, Psittacus erithacus', '88': 'macaw', '89': 'sulphur-crested cockatoo, Kakatoe galerita, Cacatua galerita', '90': 'lorikeet', '91': 'coucal', '92': 'bee eater', '93': 'hornbill', '94': 'hummingbird', '95': 'jacamar', '96': 'toucan', '97': 'drake', '98': 'red-breasted merganser, Mergus serrator', '99': 'goose', '100': 'black swan, Cygnus atratus', '101': 'tusker', '102': 'echidna, spiny anteater, anteater', '103': 'platypus, duckbill, duckbilled platypus, duck-billed platypus, ' + 'Ornithorhynchus anatinus', '104': 'wallaby, brush kangaroo', '105': 'koala, koala bear, kangaroo bear, native bear, Phascolarctos cinereus', '106': 'wombat', '107': 'jelly fish', '108': 'sea anemone, anemone', '109': 'brain coral', '110': 'flatworm, platyhelminth', '111': 'nematode, nematode worm, roundworm', '112': 'conch', '113': 'snail', '114': 'slug', '115': 'sea slug, nudibranch', '116': 'chiton, coat-of-mail shell, sea cradle, polyplacophore', '117': 'chambered nautilus, pearly nautilus, nautilus', '118': 'Dungeness crab, Cancer magister', '119': 'rock crab, Cancer irroratus', '120': 'fiddler crab', '121': 'king crab, Alaska crab, Alaskan king crab, Alaska king crab, ' + 'Paralithodes camtschatica', '122': 'American lobster, Northern lobster, Maine lobster, Homarus americanus', '123': 'spiny lobster, langouste, rock lobster, crawfish, crayfish, sea ' + 'crawfish', '124': 'crayfish, crawfish, crawdad, crawdaddy', '125': 'hermit crab', '126': 'isopod', '127': 'white stork, Ciconia ciconia', '128': 'black stork, Ciconia nigra', '129': 'spoonbill', '130': 'flamingo', '131': 'little blue heron, Egretta caerulea', '132': 'American egret, great white heron, Egretta albus', '133': 'bittern', '134': 'crane', '135': 'limpkin, Aramus pictus', '136': 'European gallinule, Porphyrio porphyrio', '137': 'American coot, marsh hen, mud hen, water hen, Fulica americana', '138': 'bustard', '139': 'ruddy turnstone, Arenaria interpres', '140': 'red-backed sandpiper, dunlin, Erolia alpina', '141': 'redshank, Tringa totanus', '142': 'dowitcher', '143': 'oystercatcher, oyster catcher', '144': 'pelican', '145': 'king penguin, Aptenodytes patagonica', '146': 'albatross, mollymawk', '147': 'grey whale, gray whale, devilfish, Eschrichtius gibbosus, ' + 'Eschrichtius robustus', '148': 'killer whale, killer, orca, grampus, sea wolf, Orcinus orca', '149': 'dugong, Dugong dugon', '150': 'sea lion', '151': 'Chihuahua', '152': 'Japanese spaniel', '153': 'Maltese dog, Maltese terrier, Maltese', '154': 'Pekinese, Pekingese, Peke', '155': 'Shih-Tzu', '156': 'Blenheim spaniel', '157': 'papillon', '158': 'toy terrier', '159': 'Rhodesian ridgeback', '160': 'Afghan hound, Afghan', '161': 'basset, basset hound', '162': 'beagle', '163': 'bloodhound, sleuthhound', '164': 'bluetick', '165': 'black-and-tan coonhound', '166': 'Walker hound, Walker foxhound', '167': 'English foxhound', '168': 'redbone', '169': 'borzoi, Russian wolfhound', '170': 'Irish wolfhound', '171': 'Italian greyhound', '172': 'whippet', '173': 'Ibizan hound, Ibizan Podenco', '174': 'Norwegian elkhound, elkhound', '175': 'otterhound, otter hound', '176': 'Saluki, gazelle hound', '177': 'Scottish deerhound, deerhound', '178': 'Weimaraner', '179': 'Staffordshire bullterrier, Staffordshire bull terrier', '180': 'American Staffordshire terrier, Staffordshire terrier, American pit ' + 'bull terrier, pit bull terrier', '181': 'Bedlington terrier', '182': 'Border terrier', '183': 'Kerry blue terrier', '184': 'Irish terrier', '185': 'Norfolk terrier', '186': 'Norwich terrier', '187': 'Yorkshire terrier', '188': 'wire-haired fox terrier', '189': 'Lakeland terrier', '190': 'Sealyham terrier, Sealyham', '191': 'Airedale, Airedale terrier', '192': 'cairn, cairn terrier', '193': 'Australian terrier', '194': 'Dandie Dinmont, Dandie Dinmont terrier', '195': 'Boston bull, Boston terrier', '196': 'miniature schnauzer', '197': 'giant schnauzer', '198': 'standard schnauzer', '199': 'Scotch terrier, Scottish terrier, Scottie', '200': 'Tibetan terrier, chrysanthemum dog', '201': 'silky terrier, Sydney silky', '202': 'soft-coated wheaten terrier', '203': 'West Highland white terrier', '204': 'Lhasa, Lhasa apso', '205': 'flat-coated retriever', '206': 'curly-coated retriever', '207': 'golden retriever', '208': 'Labrador retriever', '209': 'Chesapeake Bay retriever', '210': 'German short-haired pointer', '211': 'vizsla, Hungarian pointer', '212': 'English setter', '213': 'Irish setter, red setter', '214': 'Gordon setter', '215': 'Brittany spaniel', '216': 'clumber, clumber spaniel', '217': 'English springer, English springer spaniel', '218': 'Welsh springer spaniel', '219': 'cocker spaniel, English cocker spaniel, cocker', '220': 'Sussex spaniel', '221': 'Irish water spaniel', '222': 'kuvasz', '223': 'schipperke', '224': 'groenendael', '225': 'malinois', '226': 'briard', '227': 'kelpie', '228': 'komondor', '229': 'Old English sheepdog, bobtail', '230': 'Shetland sheepdog, Shetland sheep dog, Shetland', '231': 'collie', '232': 'Border collie', '233': 'Bouvier des Flandres, Bouviers des Flandres', '234': 'Rottweiler', '235': 'German shepherd, German shepherd dog, German police dog, alsatian', '236': 'Doberman, Doberman pinscher', '237': 'miniature pinscher', '238': 'Greater Swiss Mountain dog', '239': 'Bernese mountain dog', '240': 'Appenzeller', '241': 'EntleBucher', '242': 'boxer', '243': 'bull mastiff', '244': 'Tibetan mastiff', '245': 'French bulldog', '246': 'Great Dane', '247': 'Saint Bernard, St Bernard', '248': 'Eskimo dog, husky', '249': 'malamute, malemute, Alaskan malamute', '250': 'Siberian husky', '251': 'dalmatian, coach dog, carriage dog', '252': 'affenpinscher, monkey pinscher, monkey dog', '253': 'basenji', '254': 'pug, pug-dog', '255': 'Leonberg', '256': 'Newfoundland, Newfoundland dog', '257': 'Great Pyrenees', '258': 'Samoyed, Samoyede', '259': 'Pomeranian', '260': 'chow, chow chow', '261': 'keeshond', '262': 'Brabancon griffon', '263': 'Pembroke, Pembroke Welsh corgi', '264': 'Cardigan, Cardigan Welsh corgi', '265': 'toy poodle', '266': 'miniature poodle', '267': 'standard poodle', '268': 'Mexican hairless', '269': 'timber wolf, grey wolf, gray wolf, Canis lupus', '270': 'white wolf, Arctic wolf, Canis lupus tundrarum', '271': 'red wolf, maned wolf, Canis rufus, Canis niger', '272': 'coyote, prairie wolf, brush wolf, Canis latrans', '273': 'dingo, warrigal, warragal, Canis dingo', '274': 'dhole, Cuon alpinus', '275': 'African hunting dog, hyena dog, Cape hunting dog, Lycaon pictus', '276': 'hyena, hyaena', '277': 'red fox, Vulpes vulpes', '278': 'kit fox, Vulpes macrotis', '279': 'Arctic fox, white fox, Alopex lagopus', '280': 'grey fox, gray fox, Urocyon cinereoargenteus', '281': 'tabby, tabby cat', '282': 'tiger cat', '283': 'Persian cat', '284': 'Siamese cat, Siamese', '285': 'Egyptian cat', '286': 'cougar, puma, catamount, mountain lion, painter, panther, ' + 'Felis concolor', '287': 'lynx, catamount', '288': 'leopard, Panthera pardus', '289': 'snow leopard, ounce, Panthera uncia', '290': 'jaguar, panther, Panthera onca, Felis onca', '291': 'lion, king of beasts, Panthera leo', '292': 'tiger, Panthera tigris', '293': 'cheetah, chetah, Acinonyx jubatus', '294': 'brown bear, bruin, Ursus arctos', '295': 'American black bear, black bear, Ursus americanus, Euarctos ' + 'americanus', '296': 'ice bear, polar bear, Ursus Maritimus, Thalarctos maritimus', '297': 'sloth bear, Melursus ursinus, Ursus ursinus', '298': 'mongoose', '299': 'meerkat, mierkat', '300': 'tiger beetle', '301': 'ladybug, ladybeetle, lady beetle, ladybird, ladybird beetle', '302': 'ground beetle, carabid beetle', '303': 'long-horned beetle, longicorn, longicorn beetle', '304': 'leaf beetle, chrysomelid', '305': 'dung beetle', '306': 'rhinoceros beetle', '307': 'weevil', '308': 'fly', '309': 'bee', '310': 'ant, emmet, pismire', '311': 'grasshopper, hopper', '312': 'cricket', '313': 'walking stick, walkingstick, stick insect', '314': 'cockroach, roach', '315': 'mantis, mantid', '316': 'cicada, cicala', '317': 'leafhopper', '318': 'lacewing, lacewing fly', '319': 'dragonfly, darning needle, devil\'s darning needle, sewing needle, ' + 'snake feeder, snake doctor, mosquito hawk, skeeter hawk', '320': 'damselfly', '321': 'admiral', '322': 'ringlet, ringlet butterfly', '323': 'monarch, monarch butterfly, milkweed butterfly, Danaus plexippus', '324': 'cabbage butterfly', '325': 'sulphur butterfly, sulfur butterfly', '326': 'lycaenid, lycaenid butterfly', '327': 'starfish, sea star', '328': 'sea urchin', '329': 'sea cucumber, holothurian', '330': 'wood rabbit, cottontail, cottontail rabbit', '331': 'hare', '332': 'Angora, Angora rabbit', '333': 'hamster', '334': 'porcupine, hedgehog', '335': 'fox squirrel, eastern fox squirrel, Sciurus niger', '336': 'marmot', '337': 'beaver', '338': 'guinea pig, Cavia cobaya', '339': 'sorrel', '340': 'zebra', '341': 'hog, pig, grunter, squealer, Sus scrofa', '342': 'wild boar, boar, Sus scrofa', '343': 'warthog', '344': 'hippopotamus, hippo, river horse, Hippopotamus amphibius', '345': 'ox', '346': 'water buffalo, water ox, Asiatic buffalo, Bubalus bubalis', '347': 'bison', '348': 'ram, tup', '349': 'bighorn, bighorn sheep, cimarron, Rocky Mountain bighorn, Rocky ' + 'Mountain sheep, Ovis canadensis', '350': 'ibex, Capra ibex', '351': 'hartebeest', '352': 'impala, Aepyceros melampus', '353': 'gazelle', '354': 'Arabian camel, dromedary, Camelus dromedarius', '355': 'llama', '356': 'weasel', '357': 'mink', '358': 'polecat, fitch, foulmart, foumart, Mustela putorius', '359': 'black-footed ferret, ferret, Mustela nigripes', '360': 'otter', '361': 'skunk, polecat, wood pussy', '362': 'badger', '363': 'armadillo', '364': 'three-toed sloth, ai, Bradypus tridactylus', '365': 'orangutan, orang, orangutang, Pongo pygmaeus', '366': 'gorilla, Gorilla gorilla', '367': 'chimpanzee, chimp, Pan troglodytes', '368': 'gibbon, Hylobates lar', '369': 'siamang, Hylobates syndactylus, Symphalangus syndactylus', '370': 'guenon, guenon monkey', '371': 'patas, hussar monkey, Erythrocebus patas', '372': 'baboon', '373': 'macaque', '374': 'langur', '375': 'colobus, colobus monkey', '376': 'proboscis monkey, Nasalis larvatus', '377': 'marmoset', '378': 'capuchin, ringtail, Cebus capucinus', '379': 'howler monkey, howler', '380': 'titi, titi monkey', '381': 'spider monkey, Ateles geoffroyi', '382': 'squirrel monkey, Saimiri sciureus', '383': 'Madagascar cat, ring-tailed lemur, Lemur catta', '384': 'indri, indris, Indri indri, Indri brevicaudatus', '385': 'Indian elephant, Elephas maximus', '386': 'African elephant, Loxodonta africana', '387': 'lesser panda, red panda, panda, bear cat, cat bear, Ailurus fulgens', '388': 'giant panda, panda, panda bear, coon bear, Ailuropoda melanoleuca', '389': 'barracouta, snoek', '390': 'eel', '391': 'coho, cohoe, coho salmon, blue jack, silver salmon, Oncorhynchus ' + 'kisutch', '392': 'rock beauty, Holocanthus tricolor', '393': 'anemone fish', '394': 'sturgeon', '395': 'gar, garfish, garpike, billfish, Lepisosteus osseus', '396': 'lionfish', '397': 'puffer, pufferfish, blowfish, globefish', '398': 'abacus', '399': 'abaya', '400': 'academic gown, academic robe, judge\'s robe', '401': 'accordion, piano accordion, squeeze box', '402': 'acoustic guitar', '403': 'aircraft carrier, carrier, flattop, attack aircraft carrier', '404': 'airliner', '405': 'airship, dirigible', '406': 'altar', '407': 'ambulance', '408': 'amphibian, amphibious vehicle', '409': 'analog clock', '410': 'apiary, bee house', '411': 'apron', '412': 'ashcan, trash can, garbage can, wastebin, ash bin, ash-bin, ashbin, ' + 'dustbin, trash barrel, trash bin', '413': 'assault rifle, assault gun', '414': 'backpack, back pack, knapsack, packsack, rucksack, haversack', '415': 'bakery, bakeshop, bakehouse', '416': 'balance beam, beam', '417': 'balloon', '418': 'ballpoint, ballpoint pen, ballpen, Biro', '419': 'Band Aid', '420': 'banjo', '421': 'bannister, banister, balustrade, balusters, handrail', '422': 'barbell', '423': 'barber chair', '424': 'barbershop', '425': 'barn', '426': 'barometer', '427': 'barrel, cask', '428': 'barrow, garden cart, lawn cart, wheelbarrow', '429': 'baseball', '430': 'basketball', '431': 'bassinet', '432': 'bassoon', '433': 'bathing cap, swimming cap', '434': 'bath towel', '435': 'bathtub, bathing tub, bath, tub', '436': 'beach wagon, station wagon, wagon, estate car, beach waggon, station ' + 'waggon, waggon', '437': 'beacon, lighthouse, beacon light, pharos', '438': 'beaker', '439': 'bearskin, busby, shako', '440': 'beer bottle', '441': 'beer glass', '442': 'bell cote, bell cot', '443': 'bib', '444': 'bicycle-built-for-two, tandem bicycle, tandem', '445': 'bikini, two-piece', '446': 'binder, ring-binder', '447': 'binoculars, field glasses, opera glasses', '448': 'birdhouse', '449': 'boathouse', '450': 'bobsled, bobsleigh, bob', '451': 'bolo tie, bolo, bola tie, bola', '452': 'bonnet, poke bonnet', '453': 'bookcase', '454': 'bookshop, bookstore, bookstall', '455': 'bottlecap', '456': 'bow', '457': 'bow tie, bow-tie, bowtie', '458': 'brass, memorial tablet, plaque', '459': 'brassiere, bra, bandeau', '460': 'breakwater, groin, groyne, mole, bulwark, seawall, jetty', '461': 'breastplate, aegis, egis', '462': 'broom', '463': 'bucket, pail', '464': 'buckle', '465': 'bulletproof vest', '466': 'bullet train, bullet', '467': 'butcher shop, meat market', '468': 'cab, hack, taxi, taxicab', '469': 'caldron, cauldron', '470': 'candle, taper, wax light', '471': 'cannon', '472': 'canoe', '473': 'can opener, tin opener', '474': 'cardigan', '475': 'car mirror', '476': 'carousel, carrousel, merry-go-round, roundabout, whirligig', '477': 'carpenter\'s kit, tool kit', '478': 'carton', '479': 'car wheel', '480': 'cash machine, cash dispenser, automated teller machine, automatic ' + 'teller machine, automated teller, automatic teller, ATM', '481': 'cassette', '482': 'cassette player', '483': 'castle', '484': 'catamaran', '485': 'CD player', '486': 'cello, violoncello', '487': 'cellular telephone, cellular phone, cellphone, cell, mobile phone', '488': 'chain', '489': 'chainlink fence', '490': 'chain mail, ring mail, mail, chain armor, chain armour, ring armor, ' + 'ring armour', '491': 'chain saw, chainsaw', '492': 'chest', '493': 'chiffonier, commode', '494': 'chime, bell, gong', '495': 'china cabinet, china closet', '496': 'Christmas stocking', '497': 'church, church building', '498': 'cinema, movie theater, movie theatre, movie house, picture palace', '499': 'cleaver, meat cleaver, chopper', '500': 'cliff dwelling', '501': 'cloak', '502': 'clog, geta, patten, sabot', '503': 'cocktail shaker', '504': 'coffee mug', '505': 'coffeepot', '506': 'coil, spiral, volute, whorl, helix', '507': 'combination lock', '508': 'computer keyboard, keypad', '509': 'confectionery, confectionary, candy store', '510': 'container ship, containership, container vessel', '511': 'convertible', '512': 'corkscrew, bottle screw', '513': 'cornet, horn, trumpet, trump', '514': 'cowboy boot', '515': 'cowboy hat, ten-gallon hat', '516': 'cradle', '517': 'crane', '518': 'crash helmet', '519': 'crate', '520': 'crib, cot', '521': 'Crock Pot', '522': 'croquet ball', '523': 'crutch', '524': 'cuirass', '525': 'dam, dike, dyke', '526': 'desk', '527': 'desktop computer', '528': 'dial telephone, dial phone', '529': 'diaper, nappy, napkin', '530': 'digital clock', '531': 'digital watch', '532': 'dining table, board', '533': 'dishrag, dishcloth', '534': 'dishwasher, dish washer, dishwashing machine', '535': 'disk brake, disc brake', '536': 'dock, dockage, docking facility', '537': 'dogsled, dog sled, dog sleigh', '538': 'dome', '539': 'doormat, welcome mat', '540': 'drilling platform, offshore rig', '541': 'drum, membranophone, tympan', '542': 'drumstick', '543': 'dumbbell', '544': 'Dutch oven', '545': 'electric fan, blower', '546': 'electric guitar', '547': 'electric locomotive', '548': 'entertainment center', '549': 'envelope', '550': 'espresso maker', '551': 'face powder', '552': 'feather boa, boa', '553': 'file, file cabinet, filing cabinet', '554': 'fireboat', '555': 'fire engine, fire truck', '556': 'fire screen, fireguard', '557': 'flagpole, flagstaff', '558': 'flute, transverse flute', '559': 'folding chair', '560': 'football helmet', '561': 'forklift', '562': 'fountain', '563': 'fountain pen', '564': 'four-poster', '565': 'freight car', '566': 'French horn, horn', '567': 'frying pan, frypan, skillet', '568': 'fur coat', '569': 'garbage truck, dustcart', '570': 'gasmask, respirator, gas helmet', '571': 'gas pump, gasoline pump, petrol pump, island dispenser', '572': 'goblet', '573': 'go-kart', '574': 'golf ball', '575': 'golfcart, golf cart', '576': 'gondola', '577': 'gong, tam-tam', '578': 'gown', '579': 'grand piano, grand', '580': 'greenhouse, nursery, glasshouse', '581': 'grille, radiator grille', '582': 'grocery store, grocery, food market, market', '583': 'guillotine', '584': 'hair slide', '585': 'hair spray', '586': 'half track', '587': 'hammer', '588': 'hamper', '589': 'hand blower, blow dryer, blow drier, hair dryer, hair drier', '590': 'hand-held computer, hand-held microcomputer', '591': 'handkerchief, hankie, hanky, hankey', '592': 'hard disc, hard disk, fixed disk', '593': 'harmonica, mouth organ, harp, mouth harp', '594': 'harp', '595': 'harvester, reaper', '596': 'hatchet', '597': 'holster', '598': 'home theater, home theatre', '599': 'honeycomb', '600': 'hook, claw', '601': 'hoopskirt, crinoline', '602': 'horizontal bar, high bar', '603': 'horse cart, horse-cart', '604': 'hourglass', '605': 'iPod', '606': 'iron, smoothing iron', '607': 'jack-o\'-lantern', '608': 'jean, blue jean, denim', '609': 'jeep, landrover', '610': 'jersey, T-shirt, tee shirt', '611': 'jigsaw puzzle', '612': 'jinrikisha, ricksha, rickshaw', '613': 'joystick', '614': 'kimono', '615': 'knee pad', '616': 'knot', '617': 'lab coat, laboratory coat', '618': 'ladle', '619': 'lampshade, lamp shade', '620': 'laptop, laptop computer', '621': 'lawn mower, mower', '622': 'lens cap, lens cover', '623': 'letter opener, paper knife, paperknife', '624': 'library', '625': 'lifeboat', '626': 'lighter, light, igniter, ignitor', '627': 'limousine, limo', '628': 'liner, ocean liner', '629': 'lipstick, lip rouge', '630': 'Loafer', '631': 'lotion', '632': 'loudspeaker, speaker, speaker unit, loudspeaker system, speaker ' + 'system', '633': 'loupe, jeweler\'s loupe', '634': 'lumbermill, sawmill', '635': 'magnetic compass', '636': 'mailbag, postbag', '637': 'mailbox, letter box', '638': 'maillot', '639': 'maillot, tank suit', '640': 'manhole cover', '641': 'maraca', '642': 'marimba, xylophone', '643': 'mask', '644': 'matchstick', '645': 'maypole', '646': 'maze, labyrinth', '647': 'measuring cup', '648': 'medicine chest, medicine cabinet', '649': 'megalith, megalithic structure', '650': 'microphone, mike', '651': 'microwave, microwave oven', '652': 'military uniform', '653': 'milk can', '654': 'minibus', '655': 'miniskirt, mini', '656': 'minivan', '657': 'missile', '658': 'mitten', '659': 'mixing bowl', '660': 'mobile home, manufactured home', '661': 'Model T', '662': 'modem', '663': 'monastery', '664': 'monitor', '665': 'moped', '666': 'mortar', '667': 'mortarboard', '668': 'mosque', '669': 'mosquito net', '670': 'motor scooter, scooter', '671': 'mountain bike, all-terrain bike, off-roader', '672': 'mountain tent', '673': 'mouse, computer mouse', '674': 'mousetrap', '675': 'moving van', '676': 'muzzle', '677': 'nail', '678': 'neck brace', '679': 'necklace', '680': 'nipple', '681': 'notebook, notebook computer', '682': 'obelisk', '683': 'oboe, hautboy, hautbois', '684': 'ocarina, sweet potato', '685': 'odometer, hodometer, mileometer, milometer', '686': 'oil filter', '687': 'organ, pipe organ', '688': 'oscilloscope, scope, cathode-ray oscilloscope, CRO', '689': 'overskirt', '690': 'oxcart', '691': 'oxygen mask', '692': 'packet', '693': 'paddle, boat paddle', '694': 'paddlewheel, paddle wheel', '695': 'padlock', '696': 'paintbrush', '697': 'pajama, pyjama, pj\'s, jammies', '698': 'palace', '699': 'panpipe, pandean pipe, syrinx', '700': 'paper towel', '701': 'parachute, chute', '702': 'parallel bars, bars', '703': 'park bench', '704': 'parking meter', '705': 'passenger car, coach, carriage', '706': 'patio, terrace', '707': 'pay-phone, pay-station', '708': 'pedestal, plinth, footstall', '709': 'pencil box, pencil case', '710': 'pencil sharpener', '711': 'perfume, essence', '712': 'Petri dish', '713': 'photocopier', '714': 'pick, plectrum, plectron', '715': 'pickelhaube', '716': 'picket fence, paling', '717': 'pickup, pickup truck', '718': 'pier', '719': 'piggy bank, penny bank', '720': 'pill bottle', '721': 'pillow', '722': 'ping-pong ball', '723': 'pinwheel', '724': 'pirate, pirate ship', '725': 'pitcher, ewer', '726': 'plane, carpenter\'s plane, woodworking plane', '727': 'planetarium', '728': 'plastic bag', '729': 'plate rack', '730': 'plow, plough', '731': 'plunger, plumber\'s helper', '732': 'Polaroid camera, Polaroid Land camera', '733': 'pole', '734': 'police van, police wagon, paddy wagon, patrol wagon, wagon, black ' + 'Maria', '735': 'poncho', '736': 'pool table, billiard table, snooker table', '737': 'pop bottle, soda bottle', '738': 'pot, flowerpot', '739': 'potter\'s wheel', '740': 'power drill', '741': 'prayer rug, prayer mat', '742': 'printer', '743': 'prison, prison house', '744': 'projectile, missile', '745': 'projector', '746': 'puck, hockey puck', '747': 'punching bag, punch bag, punching ball, punchball', '748': 'purse', '749': 'quill, quill pen', '750': 'quilt, comforter, comfort, puff', '751': 'racer, race car, racing car', '752': 'racket, racquet', '753': 'radiator', '754': 'radio, wireless', '755': 'radio telescope, radio reflector', '756': 'rain barrel', '757': 'recreational vehicle, RV, R.V.', '758': 'reel', '759': 'reflex camera', '760': 'refrigerator, icebox', '761': 'remote control, remote', '762': 'restaurant, eating house, eating place, eatery', '763': 'revolver, six-gun, six-shooter', '764': 'rifle', '765': 'rocking chair, rocker', '766': 'rotisserie', '767': 'rubber eraser, rubber, pencil eraser', '768': 'rugby ball', '769': 'rule, ruler', '770': 'running shoe', '771': 'safe', '772': 'safety pin', '773': 'saltshaker, salt shaker', '774': 'sandal', '775': 'sarong', '776': 'sax, saxophone', '777': 'scabbard', '778': 'scale, weighing machine', '779': 'school bus', '780': 'schooner', '781': 'scoreboard', '782': 'screen, CRT screen', '783': 'screw', '784': 'screwdriver', '785': 'seat belt, seatbelt', '786': 'sewing machine', '787': 'shield, buckler', '788': 'shoe shop, shoe-shop, shoe store', '789': 'shoji', '790': 'shopping basket', '791': 'shopping cart', '792': 'shovel', '793': 'shower cap', '794': 'shower curtain', '795': 'ski', '796': 'ski mask', '797': 'sleeping bag', '798': 'slide rule, slipstick', '799': 'sliding door', '800': 'slot, one-armed bandit', '801': 'snorkel', '802': 'snowmobile', '803': 'snowplow, snowplough', '804': 'soap dispenser', '805': 'soccer ball', '806': 'sock', '807': 'solar dish, solar collector, solar furnace', '808': 'sombrero', '809': 'soup bowl', '810': 'space bar', '811': 'space heater', '812': 'space shuttle', '813': 'spatula', '814': 'speedboat', '815': 'spider web, spider\'s web', '816': 'spindle', '817': 'sports car, sport car', '818': 'spotlight, spot', '819': 'stage', '820': 'steam locomotive', '821': 'steel arch bridge', '822': 'steel drum', '823': 'stethoscope', '824': 'stole', '825': 'stone wall', '826': 'stopwatch, stop watch', '827': 'stove', '828': 'strainer', '829': 'streetcar, tram, tramcar, trolley, trolley car', '830': 'stretcher', '831': 'studio couch, day bed', '832': 'stupa, tope', '833': 'submarine, pigboat, sub, U-boat', '834': 'suit, suit of clothes', '835': 'sundial', '836': 'sunglass', '837': 'sunglasses, dark glasses, shades', '838': 'sunscreen, sunblock, sun blocker', '839': 'suspension bridge', '840': 'swab, swob, mop', '841': 'sweatshirt', '842': 'swimming trunks, bathing trunks', '843': 'swing', '844': 'switch, electric switch, electrical switch', '845': 'syringe', '846': 'table lamp', '847': 'tank, army tank, armored combat vehicle, armoured combat vehicle', '848': 'tape player', '849': 'teapot', '850': 'teddy, teddy bear', '851': 'television, television system', '852': 'tennis ball', '853': 'thatch, thatched roof', '854': 'theater curtain, theatre curtain', '855': 'thimble', '856': 'thresher, thrasher, threshing machine', '857': 'throne', '858': 'tile roof', '859': 'toaster', '860': 'tobacco shop, tobacconist shop, tobacconist', '861': 'toilet seat', '862': 'torch', '863': 'totem pole', '864': 'tow truck, tow car, wrecker', '865': 'toyshop', '866': 'tractor', '867': 'trailer truck, tractor trailer, trucking rig, rig, articulated ' + 'lorry, semi', '868': 'tray', '869': 'trench coat', '870': 'tricycle, trike, velocipede', '871': 'trimaran', '872': 'tripod', '873': 'triumphal arch', '874': 'trolleybus, trolley coach, trackless trolley', '875': 'trombone', '876': 'tub, vat', '877': 'turnstile', '878': 'typewriter keyboard', '879': 'umbrella', '880': 'unicycle, monocycle', '881': 'upright, upright piano', '882': 'vacuum, vacuum cleaner', '883': 'vase', '884': 'vault', '885': 'velvet', '886': 'vending machine', '887': 'vestment', '888': 'viaduct', '889': 'violin, fiddle', '890': 'volleyball', '891': 'waffle iron', '892': 'wall clock', '893': 'wallet, billfold, notecase, pocketbook', '894': 'wardrobe, closet, press', '895': 'warplane, military plane', '896': 'washbasin, handbasin, washbowl, lavabo, wash-hand basin', '897': 'washer, automatic washer, washing machine', '898': 'water bottle', '899': 'water jug', '900': 'water tower', '901': 'whiskey jug', '902': 'whistle', '903': 'wig', '904': 'window screen', '905': 'window shade', '906': 'Windsor tie', '907': 'wine bottle', '908': 'wing', '909': 'wok', '910': 'wooden spoon', '911': 'wool, woolen, woollen', '912': 'worm fence, snake fence, snake-rail fence, Virginia fence', '913': 'wreck', '914': 'yawl', '915': 'yurt', '916': 'web site, website, internet site, site', '917': 'comic book', '918': 'crossword puzzle, crossword', '919': 'street sign', '920': 'traffic light, traffic signal, stoplight', '921': 'book jacket, dust cover, dust jacket, dust wrapper', '922': 'menu', '923': 'plate', '924': 'guacamole', '925': 'consomme', '926': 'hot pot, hotpot', '927': 'trifle', '928': 'ice cream, icecream', '929': 'ice lolly, lolly, lollipop, popsicle', '930': 'French loaf', '931': 'bagel, beigel', '932': 'pretzel', '933': 'cheeseburger', '934': 'hotdog, hot dog, red hot', '935': 'mashed potato', '936': 'head cabbage', '937': 'broccoli', '938': 'cauliflower', '939': 'zucchini, courgette', '940': 'spaghetti squash', '941': 'acorn squash', '942': 'butternut squash', '943': 'cucumber, cuke', '944': 'artichoke, globe artichoke', '945': 'bell pepper', '946': 'cardoon', '947': 'mushroom', '948': 'Granny Smith', '949': 'strawberry', '950': 'orange', '951': 'lemon', '952': 'fig', '953': 'pineapple, ananas', '954': 'banana', '955': 'jackfruit, jak, jack', '956': 'custard apple', '957': 'pomegranate', '958': 'hay', '959': 'carbonara', '960': 'chocolate sauce, chocolate syrup', '961': 'dough', '962': 'meat loaf, meatloaf', '963': 'pizza, pizza pie', '964': 'potpie', '965': 'burrito', '966': 'red wine', '967': 'espresso', '968': 'cup', '969': 'eggnog', '970': 'alp', '971': 'bubble', '972': 'cliff, drop, drop-off', '973': 'coral reef', '974': 'geyser', '975': 'lakeside, lakeshore', '976': 'promontory, headland, head, foreland', '977': 'sandbar, sand bar', '978': 'seashore, coast, seacoast, sea-coast', '979': 'valley, vale', '980': 'volcano', '981': 'ballplayer, baseball player', '982': 'groom, bridegroom', '983': 'scuba diver', '984': 'rapeseed', '985': 'daisy', '986': 'yellow lady\'s slipper, yellow lady-slipper, Cypripedium calceolus, ' + 'Cypripedium parviflorum', '987': 'corn', '988': 'acorn', '989': 'hip, rose hip, rosehip', '990': 'buckeye, horse chestnut, conker', '991': 'coral fungus', '992': 'agaric', '993': 'gyromitra', '994': 'stinkhorn, carrion fungus', '995': 'earthstar', '996': 'hen-of-the-woods, hen of the woods, Polyporus frondosus, Grifola ' + 'frondosa', '997': 'bolete', '998': 'ear, spike, capitulum', '999': 'toilet tissue, toilet paper, bathroom tissue' } }43:[] 33:{"id":"d365ab888027092f","slug":"how-to-build-a-teachable-machine-with-tensorflow-js","title":"How to build a Teachable Machine with TensorFlow.js","thumbnail":"369dc6214f416466c58db78fe303c82f22ac9c488910ff309cf486b9712880af","access_level":"public","create_time":"$D2018-06-15T00:40:30.374Z","update_time":"$D2018-09-21T19:11:19.396Z","view_time":null,"first_public_time":"$D2018-06-20T17:52:14.491Z","fork":false,"stars":159,"starred":false,"owner":{"type":"team","id":"a9fc173995ab08d5","login":"nsthorat","name":"Nikhil Thorat","avatar_url":"https://avatars-next.observableusercontent.com/4218b28e5c23afa3c359a69391d95a74f8454ca3a0d9dd9f8fbf86d2c339be52","tier":"starter_2024"},"version":2164,"publish_version":2164,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e192177220a2983","login":"nsthorat","name":"Nikhil Thorat","avatar_url":"https://avatars-next.observableusercontent.com/4218b28e5c23afa3c359a69391d95a74f8454ca3a0d9dd9f8fbf86d2c339be52","tier":null}],"members":[{"type":"individual","id":"4e192177220a2983","login":"nsthorat","name":"Nikhil Thorat","avatar_url":"https://avatars-next.observableusercontent.com/4218b28e5c23afa3c359a69391d95a74f8454ca3a0d9dd9f8fbf86d2c339be52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":101,"collection":{"id":"936bb5e9815c44d2","slug":"explorables","title":"Explorables","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"How to build a Teachable Machine with TensorFlow.js","cells":[{"id":0,"value":"md`# How to build a Teachable Machine with TensorFlow.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`\n## Background\n\n${html`

`}\n### MobileNet\n\nLet's first take a look at an off-the-shelf MobileNet, a model that is trained on [ImageNet](http://www.image-net.org/) a dataset of millions of images with labels for 1000 different classes of objects, like dogs, cats, and fruits.\n\nLet's see what a prediction through this image of a cute cat looks like:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"catEl = new Promise((resolve, reject) => {\n let image = new Image();\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.crossOrigin = \"anonymous\";\n image.src = 'https://raw.githubusercontent.com/tensorflow/tfjs-examples/master/mobilenet/cat.jpg';\n image.width = 227;\n image.height = 227;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md`We can visualize the full probability distribution over the 1000 classes by using a bar chart, where each number in the domain corresponds to a class from ImageNet (like \"Egyptian cat\" or \"remote control, remote\") and the height of the bar chart represents the probability of that class:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"{\n const tensor = tf.fromPixels(catEl);\n return drawChart(tensor, 'reshape_2', null, 'cat softmax');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"{\n const tensor = tf.fromPixels(catEl);\n return drawChart(tensor, 'conv_preds', null, 'cat logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md`Notice that the values are not normalized, and the peaks around index 285 (Egyptian cat) lines up with the softmax probabilities in the chart above.\n\nWe can consider the logits produced by running our image through MobileNet as a \"semantic fingerprint\" of the image.\n\nJust by crudely visualizing the logits with a bar chart, you can already see that semantically similar images have a similar logits activation. Luckily for this visualization, the classes in ImageNet tend also to be organized by super-classes. Many dog breeds are in the indices 150 - 280, fish in 390 - 400 range, and fruits in the high 900 range.\n\nLet's inspect the logits for some golden retrievers, goldfish, and bananas:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"dogsEl = ims([\n 'https://i.imgur.com/wUr8iq1.jpg', 'https://i.imgur.com/p2mewNT.jpg', 'https://i.imgur.com/NE7hVXb.jpg'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"{\n const tensor = tf.fromPixels(dogsEl.querySelectorAll('img')[0]);\n return drawChart(tensor, 'conv_preds', null, 'dog 1 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"{\n const tensor = tf.fromPixels(dogsEl.querySelectorAll('img')[1]);\n return drawChart(tensor, 'conv_preds', null, 'dog 2 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"{\n const tensor = tf.fromPixels(dogsEl.querySelectorAll('img')[2]);\n return drawChart(tensor, 'conv_preds', null, 'dog 3 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"fishEl = ims([\n 'https://i.imgur.com/DPM3srH.jpg', 'https://i.imgur.com/DggGHu7.jpg', 'https://i.imgur.com/DKxWVoU.jpg'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"{\n const tensor = tf.fromPixels(fishEl.querySelectorAll('img')[0]);\n return drawChart(tensor, 'conv_preds', null, 'goldfish 1 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"{\n const tensor = tf.fromPixels(fishEl.querySelectorAll('img')[1]);\n return drawChart(tensor, 'conv_preds', null, 'goldfish 2 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"{\n const tensor = tf.fromPixels(fishEl.querySelectorAll('img')[2]);\n return drawChart(tensor, 'conv_preds', null, 'goldfish 3 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"bananaEl = ims([\n 'https://i.imgur.com/C80YZFr.jpg', 'https://i.imgur.com/kxo5lwM.jpg', 'https://i.imgur.com/YbcFmdO.jpg'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"{\n const tensor = tf.fromPixels(bananaEl.querySelectorAll('img')[0]);\n return drawChart(tensor, 'conv_preds', null, 'banana 1 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"{\n const tensor = tf.fromPixels(bananaEl.querySelectorAll('img')[1]);\n return drawChart(tensor, 'conv_preds', null, 'banana 2 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"{\n const tensor = tf.fromPixels(bananaEl.querySelectorAll('img')[2]);\n return drawChart(tensor, 'conv_preds', null, 'banana 3 logits');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"/**md`\n[Mike Bostock](https://twitter.com/mbostock) graciously offered another way to visualize logits using a space filling Hilbert curve, which for brevity I've not included in this notebook. However if you want to see that technique of visualizing the logits check out [his notebook](https://beta.observablehq.com/d/b1e67a6383f9d374).`**/md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"md`### Try it on your webcam!\n\nClick the checkbox below to turn on the webcam and visualize these logits live. Try holding up different items or make different poses -- you should already be able to see the characteristic logits for each item.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"viewof enableWebcam = {\n const check = checkbox({\n options: [\n { value: 'on', label: 'Enable webcam' }\n ]\n });\n check.value = false;\n return check;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"webcam = {\n if (enableWebcam) {\n const stream = navigator.mediaDevices\n ? navigator.mediaDevices.getUserMedia({video: true})\n : new Promise((y, n) => navigator.getUserMedia({video: true}, y, n));\n const video = html`

`;\n video.style.maxWidth = \"100%\";\n const vid = await stream.then(stream => {\n if (\"srcObject\" in video) video.srcObject = stream;\n else video.src = URL.createObjectURL(stream);\n invalidation.then(() => {\n stream.getTracks().forEach(t => t.stop());\n URL.revokeObjectURL(video.src);\n });\n return video;\n });\n return vid;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"chart0 = {\n if (enableWebcam) {\n const div = document.createElement('div');\n div.id = 'chart';\n return div;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1718,"value":"{\n let valid = true;\n invalidation.then(() => valid = false);\n \n while(enableWebcam && valid) {\n const tensor = tf.fromPixels(webcam);\n chart0.innerHTML = '';\n chart0.appendChild(await drawChart(tensor, 'conv_preds', [-15, 15]));\n\n console.log('hello', enableWebcam);\n tensor.dispose();\n await visibility();\n await tf.nextFrame();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"viewof knndataset = select({\n title: \"Dataset\",\n options: [\"simple 2-class\", \"simple 3-class\"],\n value: \"simple 2-class\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"viewof K = slider({\n min: 1,\n max: 11, \n step: 1,\n value: 3, \n title: tex`k`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"//viewof generalize = html``\nviewof generalize = {\n const box = checkbox({\n options: [\n { value: 'toggle', label: 'show decision boundaries' }\n ]\n });\n box.value = false;\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"knnPlot(datasets[knndataset], K, generalize)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"md`## Let's make it!\n\nOur custom Teachable Machine application will have two phases, data collection and prediction. In this example, we'll use 3 classes, \"a\", \"b\", and \"c\", but this algorithm will work for an arbitrary amount of classes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"md`### Live webcam demo\n\nPutting it all together, we have a full Teachable Machine application!\n\nWith your webcam enabled, use the buttons below to add examples for each class. Each time you click a button, it will add the current webcam image as an example for that class.\n\nAfter you have added your first example, we'll start making predictions on the live webcam stream!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"viewof K_demo = slider({\n min: 1,\n max: 11, \n step: 1,\n value: 3, \n title: tex`k`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"viewof enableWebcam2 = {\n const check = checkbox({\n options: [\n { value: 'on', label: 'Enable webcam' }\n ]\n });\n check.value = false;\n return check;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"webcam2 = {\n if (!enableWebcam2) {\n return false;\n }\n const stream = navigator.mediaDevices\n ? navigator.mediaDevices.getUserMedia({video: true})\n : new Promise((y, n) => navigator.getUserMedia({video: true}, y, n));\n const video = html`

`;\n video.style.maxWidth = \"100%\";\n \n await stream.then(stream => {\n if (\"srcObject\" in video) video.srcObject = stream;\n else video.src = URL.createObjectURL(stream);\n invalidation.then(() => {\n stream.getTracks().forEach(t => t.stop());\n URL.revokeObjectURL(video.src);\n });\n return video;\n });\n await visibility();\n return video;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"html`a: ${numexamples(0)} examples
\nb: ${numexamples(1)} examples
\nc: ${numexamples(2)} examples
\n\n${topClass.classIndex != null ?\n `Class ${['A', 'B', 'C'][topClass.classIndex]}: ${(topClass.confidences[topClass.classIndex] * 100).toFixed(2)}%` : ''}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"{\n let run = true;\n invalidation.then(() => run = false);\n \n while (run) {\n await visibility();\n if (totalExamples > 0) {\n mutable topClass = await predict();\n }\n await tf.nextFrame();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"{ \n const buttonA = createButton(`Add class A`);\n const buttonB = createButton(`Add class B`);\n const buttonC = createButton(`Add class C`);\n const clear = createButton('Clear all');\n \n buttonA.addEventListener('click', () => addExample(0));\n buttonB.addEventListener('click', () => addExample(1));\n buttonC.addEventListener('click', () => addExample(2));\n\n clear.addEventListener('click', ev => {\n mutable dataset = {0: null, 1: null, 2: null};\n mutable topClass = {};\n });\n \n return html`

\n ${buttonA}\n ${buttonB}\n ${buttonC}\n ${clear}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"md` ### The code behind the demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"addExample = classId => {\n /**\n * Reads a frame from the webcam, feeds it through MobileNet, normalizes it\n */\n tf.tidy(() => {\n // Compute the logits vector from the current webcam frame.\n const logits = getNormalizedLogitsFromWebcam();\n // Reshape the logits so its a [1, 1000] matrix instead of a [1000] vector. This allows us to concatenate it\n // to the dataset.\n const logits2d = logits.expandDims(0);\n\n if (dataset[classId] == null) {\n // No matrix has been defined for the class yet, store a [1, 1000] matrix.\n dataset[classId] = tf.keep(logits2d);\n } else {\n // Concatenate the logits with the matrix for the class, creating an [N_prev + 1, 1000] matrix.\n const oldDataset = dataset[classId];\n dataset[classId] = tf.keep(dataset[classId].concat(logits2d, 0));\n }\n\n // Observable hack to update the dataset.\n const res = dataset;\n mutable dataset = res;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1623,"value":"predict = async () => {\n const similarities = tf.tidy(() => {\n // Get the logits from the webcam and reshape it to a matrix of [1, 1000].\n const logits = getNormalizedLogitsFromWebcam().expandDims(1);\n // Compte the matrix multiply of the dataset and the logits to compute similarities.\n // This is a vector of shape [N].\n return datasetConcatenated.matMul(logits);\n });\n\n const values = await similarities.data();\n // Compute the top k indices and values in our similarities vector.\n const top = topk(values, Math.min(totalExamples, K_demo));\n // Compute the winner.\n const topClass = calculateTopClass(top.indices, K_demo);\n similarities.dispose();\n return topClass;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"topk = (values, k) => {\n /**\n * Given an unsorted array of values, compute the top k indices and values.\n */\n const valuesAndIndices = [];\n for (let i = 0; i < values.length; i++) {\n valuesAndIndices.push({value: values[i], index: i});\n }\n valuesAndIndices.sort((a, b) => {\n return b.value - a.value;\n });\n const topkValues = new Float32Array(k);\n const topkIndices = new Int32Array(k);\n for (let i = 0; i < k; i++) {\n topkValues[i] = valuesAndIndices[i].value;\n topkIndices[i] = valuesAndIndices[i].index;\n }\n return {values: topkValues, indices: topkIndices};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"getNormalizedLogitsFromWebcam = () => {\n return tf.tidy(() => {\n // Make a prediction through mobilenet and flatten to a vector.\n const result = mobilenet.infer(tf.fromPixels(webcam2), 'conv_preds').flatten();\n \n // Normalize the result to unit length.\n return result.div(result.norm());\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"md`#### Utils and data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"mutable dataset = {\n return {0: null, 1: null, 2: null}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1647,"value":"mutable topClass = {return {}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"classExampleCount = {\n return {\n 0: dataset[0] != null ? dataset[0].shape[0] : 0,\n 1: dataset[1] != null ? dataset[1].shape[0] : 0,\n 2: dataset[2] != null ? dataset[2].shape[0] : 0\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"numexamples = id => dataset[id] == null ? 0 : dataset[id].shape[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"totalExamples = numexamples(0) + numexamples(1) + numexamples(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"datasetConcatenated = {\n const y = tf.tidy(() => concatWithNulls(concatWithNulls(dataset[0], dataset[1]), dataset[2]));\n\n return Generators.disposable(y, () => y != null ? y.dispose() : null);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"concatWithNulls = (x1, x2) => {\n if (x1 == null && x2 == null) {\n return null;\n }\n if (x2 == null) {\n return x1.clone();\n } else if (x1 === null) {\n return x2.clone();\n }\n return x1.concat(x2, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"createButton = (text = '') => {\n const button = html``;\n button.style.width = \"150px\";\n button.style.height = \"40px\";\n button.style.backgroundImage = \"linear-gradient(#f3f3f3, #efefef)\";\n button.style.borderRadius = \"4px\";\n button.style.marginBottom = \"8px\";\n button.innerHTML = `${text}`;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"// Colors to be used\ncolors = ({\n\tbetaArc: 'silver',\n thetaArc: '#7bc4e5'\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"datapoint = {return {x: 1.2, y: 1.1}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1945,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"knn = (x, y, points, k) => {\n let distances = points.map(d => {\n return {\n distance: Math.sqrt(Math.pow(d.x - x, 2) + Math.pow(d.y - y, 2)),\n x0: d.x,\n y0: d.y,\n x1: x,\n y1: y,\n label: d.label,\n top: false\n };\n });\n distances = distances.sort((a, b) => {\n return a.distance > b.distance ? 1 : -1;\n });\n const winners = {};\n for (let i = 0; i < 10; i++) {\n winners['' + (i + 1)] = 0;\n }\n\n for (let i = 0; i < k; i++) {\n winners[distances[i].label]++;\n distances[i].top = true;\n }\n let max = 0;\n let winnerLabel;\n for (const idx in winners) {\n if (winners[idx] > max) {\n max = winners[idx];\n winnerLabel = idx;\n }\n }\n return {distances, winnerLabel};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"drawChart = async (tensor, endpoint = 'conv_preds', domain = null, title = \"logits\") => {\n const y = mobilenet.infer(tensor, endpoint);\n tensor.dispose();\n const result = Array.from(await y.data());\n y.dispose();\n \n const data = result.map((x, i) => {return {imagenetClassId: i, value: x, className: imagenetClasses[i]}})\n \n const def = {\n \"title\": title,\n \"data\": {values: data},\n \"mark\": \"bar\",\n \"height\": 100,\n \"width\": width,\n \"encoding\": {\n \"x\": {\n \"field\": \"imagenetClassId\",\n \"type\": \"ordinal\"\n },\n \"y\": {\n \"field\": \"value\",\n \"type\": \"quantitative\",\n \"axis\": {title: null}\n },\n \"tooltip\": {\"field\": \"className\"}\n },\n\n };\n if (domain != null) {\n def['encoding']['y']['scale'] = {\"domain\": domain};\n }\n \n const pointerEl = pointer();\n const chart = vegalite(def);\n const div = document.createElement('div');\n div.appendChild(pointerEl);\n div.appendChild(chart);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"im = src => {\n return new Promise((resolve, reject) => {\n let image = new Image();\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.crossOrigin = \"anonymous\";\n image.src = src;\n image.width = 227;\n image.height = 227;\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"ims = async srcs => {\n const promises = srcs.map(src => im(src));\n const imgs = await Promise.all(promises);\n const div = document.createElement('div');\n div.style.textAlign = 'center';\n imgs.forEach((im, i) => {\n im.className = `${i}`;\n im.style.marginRight = '5px';\n div.appendChild(im);\n });\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"mobilenet.endpoints[mobilenet.endpoints.length - 3]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"mobilenet = (await require('@tensorflow-models/mobilenet@0.2')).load()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"imagenetClassIdx = {\n const result = {};\n for (let i = 0; i < 1000; i++) {\n const className = imagenetClasses[i + ''];\n result[className] = i;\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"tf = require('@tensorflow/tfjs@0.12')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"vegalite = require(\"@observablehq/vega-lite@0.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1981,"value":"isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"import {checkbox, slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W43","stdlib":"1","titling":"auto"}} 34:"$33:body"