Skip to content

Instantly share code, notes, and snippets.

@adash333
Last active Nov 21, 2020
Embed
What would you like to do?
const CLASSES = {0:'Apple', 1:'MikanOrange'}
//-----------------------
// start button event
//-----------------------
$("#start-button").click(function(){
loadModel() ;
startWebcam();
});
//-----------------------
// load model
//-----------------------
let model;
async function loadModel() {
console.log("model loading..");
$("#console").html(`<li>model loading...</li>`);
model=await tf.loadModel(`../apple_orange/model.json`);
console.log("model loaded.");
$("#console").html(`<li>Lobe pre trained model loaded.</li>`);
};
//-----------------------
// start webcam
//-----------------------
var video;
function startWebcam() {
console.log("video streaming start.");
$("#console").html(`<li>video streaming start.</li>`);
video = $('#main-stream-video').get(0);
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true,
audio: false
}, function(stream) {
localStream = stream;
video.srcObject = stream;
video.play();
}, function(error) {
alert("Something wrong with webcam!");
});
}
//-----------------------
// predict button event
//-----------------------
$("#predict-button").click(function(){
setInterval(predict, 1000);
});
//-----------------------
// TensorFlow.js method
// predict tensor
//-----------------------
async function predict(){
let tensor = captureWebcam();
let prediction = await model.predict(tensor).data();
let results = Array.from(prediction)
.map(function(p,i){
return {
probability: p,
className: CLASSES[i]
};
}).sort(function(a,b){
return b.probability-a.probability;
}).slice(0,1);
$("#console").empty();
results.forEach(function(p){
$("#console").append(`<li>${p.className} : ${p.probability.toFixed(6)}</li>`);
console.log(p.className,p.probability.toFixed(6))
});
};
//------------------------------
// capture streaming video
// to a canvas object
//------------------------------
function captureWebcam() {
var canvas = document.createElement("canvas");
var context = canvas.getContext('2d');
canvas.width = video.width;
canvas.height = video.height;
context.drawImage(video, 0, 0, video.width, video.height);
tensor_image = preprocessImage(canvas);
return tensor_image;
}
//-----------------------
// TensorFlow.js method
// image to tensor
//-----------------------
function preprocessImage(image){
let tensor = tf.fromPixels(image).resizeNearestNeighbor([100,100]).toFloat();
let offset = tf.scalar(255);
return tensor.div(offset).expandDims();
}
//-----------------------
// clear button event
//-----------------------
$("#clear-button").click(function clear() {
location.reload();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment