thepracticaldev · Rishit-dagli · May 11, 2020 · May 11, 2020 · May 11, 2020
diff --git a/image_classification.html b/image_classification.html
@@ -0,0 +1,30 @@
+<html>
+  <head>
+    <!-- Load the latest version of TensorFlow.js -->
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier"></script>
+  </head>
+  <body>
+    <div id="console"></div>
+	<h1>
+		Image classification right in browser
+	</h1>
+	<br>
+	<h2>
+		Using the script
+	</h2>
+	<br>
+	<p>Capture some images right from your webcam and add them in the 3 classes A, B and C with the buttons down here</p>
+	<br>
+	<p>Now, have fun! and see the vrowser classifying your images into the 3 classes</p>
+
+    <video autoplay playsinline muted id="webcam" width="224" height="224"></video>
+	<br>
+    <button id="class-a">Add A</button>
+    <button id="class-b">Add B</button>
+    <button id="class-c">Add C</button>
+    <!-- Load image_classification.js after the content of the page -->
+    <script src="scripts/image_classification.js>
+  </body>
+</html>
diff --git a/scripts/image_classification.js b/scripts/image_classification.js
@@ -0,0 +1,61 @@
+const webcamElement = document.getElementById('webcam');
+let net;
+const classifier = knnClassifier.create();
+
+async function app() {
+    console.log('Loading mobilenet..');
+
+    // Load the model.
+    net = await mobilenet.load();
+    console.log('Successfully loaded model');
+
+    // Create an object from Tensorflow.js data API which could capture image 
+    // from the web camera as Tensor.
+    const webcam = await tf.data.webcam(webcamElement);
+
+    // Reads an image from the webcam and associates it with a specific class
+    // index.
+    const addExample = async classId => {
+      // Capture an image from the web camera.
+      const img = await webcam.capture();
+
+      // Get the intermediate activation of MobileNet 'conv_preds' and pass that
+      // to the KNN classifier.
+      const activation = net.infer(img, true);
+
+      // Pass the intermediate activation to the classifier.
+      classifier.addExample(activation, classId);
+
+      // Dispose the tensor to release the memory.
+      img.dispose();
+    };
+
+    // When clicking a button, add an example for that class.
+    document.getElementById('class-a').addEventListener('click', () => addExample(0));
+    document.getElementById('class-b').addEventListener('click', () => addExample(1));
+    document.getElementById('class-c').addEventListener('click', () => addExample(2));
+
+    while (true) {
+      if (classifier.getNumClasses() > 0) {
+        const img = await webcam.capture();
+
+        // Get the activation from mobilenet from the webcam.
+        const activation = net.infer(img, 'conv_preds');
+        // Get the most likely class and confidence from the classifier module.
+        const result = await classifier.predictClass(activation);
+
+        const classes = ['A', 'B', 'C'];
+        document.getElementById('console').innerText = `
+          prediction: ${classes[result.label]}\n
+          probability: ${result.confidences[result.label]}
+        `;
+
+        // Dispose the tensor to release the memory.
+        img.dispose();
+      }
+
+      await tf.nextFrame();
+    }
+  }
+
+app();