adash333/index.html

## index.html
<!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>

## predict.js
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();
});
	<!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>© 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();
	});