Last active
November 21, 2020 15:56
-
-
Save adash333/eb9a004fbf1a4dba159152d85b95e523 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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