Skip to content

Instantly share code, notes, and snippets.

@adash333
Last active Jan 3, 2021
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
<body>
<article id="article">
<h1 id="title" class="text-center h2">Sign Language Digits Clasification<br><small class="text-muted">with Tensorflow.js</small></h1>
<div class="container-image">
<video id="main-stream-video" width="480" height="360"></video>
</div>
<div class="container-b">
<div class="btn-toolbar">
<div class="btn-group">
<button id="start-button" class="btn btn-outline-dark">🚀 Start</button>
</div>
<div class="btn-group">
<button id="predict-button" class="btn btn-outline-dark">🤔 Predict</button>
</div>
<div class="btn-group">
<button id="clear-button" class="btn btn-outline-dark">✨ Clear</button>
</div>
</div>
</div>
<div class="container-b">
<div class="output">
<ul id="console" class="list-unstyled">
<li>hello. please load model.</li>
</ul>
</div>
</div>
</article>
<footer class="text-center">
<small>&#169; 2018 Studio Identical Twins All Rights Reserved.</small>
</footer>
<script src="js/tensorflow.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/predict.js"></script>
</div>
</section>
</body>
</html>
const CLASSES = {0:'zero', 1:'one', 2:'two', 3:'three', 4:'four',5:'five', 6:'six', 7:'seven', 8:'eight', 9:'nine'}
//-----------------------
// start button event
//-----------------------
/*
$("#start-button").click(function(){
loadModel() ;
startWebcam();
});
*/
/*
document.getElementById("start-button").onClick(function(){
loadModel() ;
startWebcam();
});
*/
const button = document.getElementById("start-button");
button.addEventListener('click', () => {
console.log('start loading model');
loadModel() ;
startWebcam();
});
//-----------------------
// load model
//-----------------------
/*
let model;
async function loadModel() {
console.log("model loading..");
$("#console").html(`<li>model loading...</li>`);
model=await tf.loadModel(`http://localhost:8080/sign_language_vgg16/model.json`);
console.log("model loaded.");
$("#console").html(`<li>VGG16 pre trained model loaded.</li>`);
};
*/
let model;
async function loadModel() {
console.log("model loading..");
document.getElementById("console").innerHTML(`<li>model loading...</li>`);
model=await tf.loadModel(`model/model.json`);
console.log("model loaded.");
document.getElementById("console").innerHTML(`<li>VGG16 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/10);
});
//-----------------------
// 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,5);
$("#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