From 7329be037b936f8c1412838f0f668cd3ae7e6bb4 Mon Sep 17 00:00:00 2001
From: Rishit Dagli <39672672+Rishit-dagli@users.noreply.github.com>
Date: Mon, 11 May 2020 12:17:36 +0530
Subject: [PATCH 1/3] Added image_classification HTML file

---
 image_classification.html | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 image_classification.html
diff --git a/image_classification.html b/image_classification.html
new file mode 100644
index 0000000..c0020c3
--- /dev/null
+++ b/image_classification.html
@@ -0,0 +1,18 @@
+<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>
+
+    <video autoplay playsinline muted id="webcam" width="224" height="224"></video>
+    <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>
\ No newline at end of file

From 8045bb10188f129964b5b2e7d7de57b72865309d Mon Sep 17 00:00:00 2001
From: Rishit Dagli <39672672+Rishit-dagli@users.noreply.github.com>
Date: Mon, 11 May 2020 12:18:04 +0530
Subject: [PATCH 2/3] Added image classification JS file

---
 scripts/image_classification.js | 61 +++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 scripts/image_classification.js

diff --git a/scripts/image_classification.js b/scripts/image_classification.js
new file mode 100644
index 0000000..c77a3eda
--- /dev/null
+++ 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();
\ No newline at end of file

From 94939973b968c76125e38188be2c6740143d8c39 Mon Sep 17 00:00:00 2001
From: Rishit Dagli <39672672+Rishit-dagli@users.noreply.github.com>
Date: Mon, 11 May 2020 12:22:46 +0530
Subject: [PATCH 3/3] Added usage guidelines

---
 image_classification.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/image_classification.html b/image_classification.html
index c0020c3..a531597 100644
--- a/image_classification.html
+++ b/image_classification.html
@@ -7,8 +7,20 @@
   </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>
