I believe that things would be more honestly represented as network graphs than contact lists.
Published
Edited
Jun 11, 2019
md`# Object Detection with Tensorflow
Following along [this tutorial](https://hackernoon.com/tensorflow-js-real-time-object-detection-in-10-lines-of-code-baf15dfb95b2). Creates a video element, and connects the web cam, if available.
`
cocoSsd = require("@tensorflow-models/coco-ssd")
tf = require('@tensorflow/tfjs')
video = document.createElement('video')
md`Below, we get the media devices of your HTML5 capable device. See [this documentation](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).`
navigator
.mediaDevices
.getUserMedia({
audio: false,
video: {
facingMode: 'user',
width: video.width,
height: video.height,
}
})
.then(stream => {
video.srcObject = stream
video.onloadedmetadata = () => { video.play() }
})
md`The following is a copy of the above video stream. Frames are copied every 100ms, and copied over to this canvas element. Click to activate object detection.`
canvas = document.createElement('canvas')
output = document.createElement('output')
md`This output lists the different objects detected by the sample classifier.`
output.id = "found"
canvas.width = video.clientWidth
canvas.height = video.clientHeight;
context = canvas.getContext('2d');
renderCallbacks = []
md`The functions defined in here get called each time the image is drawn.`
video.addEventListener('play', function(){
setInterval(() => {
context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
renderCallbacks.forEach(f => f());
}, 100)
})
canvas.addEventListener('click', function(){
cocoSsd
.load()
.then(model => renderCallbacks.push(() => model.detect(context.getImageData(0, 0, canvas.clientWidth, canvas.clientHeight)).then(ps => {
ps.forEach(renderPrediction);
document.querySelector('#found').value = ps.map(p => p.class).join(', ');
})))
})
function renderPrediction(prediction){
const x = prediction.bbox[0];
const y = prediction.bbox[1];
const width = prediction.bbox[2];
const height = prediction.bbox[3];
context.strokeRect(x, y, width, height);
}
md`This is some cool technology. I look forward to training some of my own models. If in the meantime you know how much data is required to get good results on object recognition, please drop a line in the comments.`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
