Initial commit

.editorconfig

@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 José M. Moreno <josemmo@pm.me> (https://github.com/josemmo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,10 @@
+# Hotdog or Not Hotdog
+![Lighthouse PWA: 100/100](https://lighthouse-badge.appspot.com/?score=100&category=PWA)
+![Lighthouse Performance: 93/100](https://lighthouse-badge.appspot.com/?score=93&category=Perf)
+
+Yet another sample project using [TensorFlow.js](https://js.tensorflow.js/) and MobileNet to create a Progressive Web App (PWA) which recognizes Hotdogs and Not Hotdogs, as shown in the HBO series' Silicon Valley.
+
+[![View video](https://img.youtube.com/vi/ACmydtFDTGs/mqdefault.jpg)](https://www.youtube.com/watch?v=ACmydtFDTGs)
+
+## License
+This project in under the MIT License. You can freely do whatever you want with its code as long as you credit the author.

app.css

@@ -0,0 +1,98 @@
+/* COMMON */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: url('roboto-black.ttf') format('truetype');
+}
+body, button {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 900;
+}
+body { background: #202020 }
+* { user-select: none }
+
+
+/* CAMERA */
+#camera {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
+
+/* OVERLAY */
+#overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+#overlay .dialog {
+  position: absolute;
+  left: 30px;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 30px;
+  background: #21a8c6;
+  color: #fff;
+  border: solid 2px;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 18px;
+}
+
+#overlay .result {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 15px 0;
+  color: #ff0;
+  -webkit-text-stroke: 1.7px #000;
+  filter: drop-shadow(-2px 1px 0 #fff) drop-shadow(2px 1px 0 #fff);
+  text-align: center;
+  font-size: 40px;
+  display: none;
+}
+#overlay .result::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: calc(100% - 20px);
+  left: 50%;
+  margin-left: -50px;
+  width: 100px;
+  height: 100px;
+  background: url('images/hotdog.png') no-repeat center;
+  background-size: 80%;
+  border-radius: 50%;
+  z-index: -1;
+}
+#overlay .result.hotdog,
+#overlay .result.hotdog::after {
+  background-color: #0f0;
+}
+#overlay .result.not-hotdog,
+#overlay .result.not-hotdog::after {
+  background-color: #f00;
+}
+#overlay .result.not-hotdog::before {
+  content: '';
+  position: absolute;
+  top: calc(100% - 20px);
+  left: 50%;
+  margin-left: -50px;
+  width: 100px;
+  height: 100px;
+  background: url('images/cross.png') no-repeat center;
+  background-size: 70%;
+}

app.js

@@ -0,0 +1,214 @@
+(function() {
+
+  var MODEL_PATH = 'model/mobilenet.json';
+  var CLASSES_PATH = 'model/mobilenet.classes.json';
+  var IMAGE_SIZE = 224; // Required by this model
+  var PREDICT_INTERVAL = 1000; // Delay between predictions in milliseconds
+  var MAX_CLASSES = 8;
+
+  var overlayDialog = document.querySelector('#overlay .dialog');
+  var camera = document.getElementById('camera');
+  var notification = new Audio('notification.ogg');
+  notification.preload = 'auto';
+
+  var model, modelClasses;
+  var lastCheck = null;
+
+
+  /**
+   * Update UI
+   * @param {Boolean} isHotdog Is hotdog
+   */
+  function updateUI(isHotdog) {
+    if (lastCheck == isHotdog) return;
+
+    // Update result overlay
+    var result = document.querySelector('#overlay .result');
+    if (isHotdog) {
+      result.classList.remove('not-hotdog');
+      result.classList.add('hotdog');
+      result.innerHTML = 'Hotdog!';
+
+      // Play sound
+      notification.play();
+    } else {
+      result.classList.remove('hotdog');
+      result.classList.add('not-hotdog');
+      result.innerHTML = 'Not Hotdog!';
+    }
+    result.style.display = 'block';
+
+    // Update last state
+    lastCheck = isHotdog;
+  }
+
+
+  /**
+   * Get camera image
+   * @return {HTMLCanvasElement} Canvas with image
+   */
+  function getCameraImage() {
+    var c = document.createElement('canvas');
+    c.width = IMAGE_SIZE;
+    c.height = IMAGE_SIZE;
+    c.getContext('2d').drawImage(camera, 0, 0, c.width, c.height);
+    return c;
+  }
+
+
+  /**
+   * Connect to camera
+   * @async
+   * @return {Promise} Callback
+   */
+  function connectToCamera() {
+    return new Promise(function(resolve, reject) {
+      navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: 'environment' // For phones, prefer main camera
+        }
+      }).then(function(stream) {
+        // Start rendering camera
+        var streamURL = window.URL.createObjectURL(stream);
+        try {
+          camera.srcObject = streamURL;
+        } catch (e) {
+          camera.src = streamURL;
+        }
+
+        // Resolve promise
+        resolve();
+      }).catch(reject);
+    });
+  }
+
+
+  /**
+   * Load model
+   * @async
+   * @return {Promise} Callback
+   */
+  function loadModel() {
+    return new Promise(function(resolve, reject) {
+      tf.loadModel(MODEL_PATH).then(function(m) {
+        model = m;
+        fetch(CLASSES_PATH).then(function(res) {
+          res.json().then(function(json) {
+            modelClasses = json;
+            resolve();
+          });
+        });
+      }).catch(reject);
+    });
+  }
+
+
+  /**
+   * Start predicting
+   */
+  function startPredicting() {
+    predict().then(function(isHotdog) {
+      // Update UI
+      if (isHotdog) console.log('Hotdog found!');
+      updateUI(isHotdog);
+
+      // Schedule next prediction
+      setTimeout(function() {
+        startPredicting();
+      }, PREDICT_INTERVAL);
+    });
+  }
+
+
+  /**
+   * Predict
+   * @async
+   * @return {Promise<Boolean>} Is hotdog
+   */
+  function predict() {
+    return new Promise(function(resolve, reject) {
+      tf.tidy(function() {
+        // Get camera pixels and covert them to a tensor
+        var image = tf.fromPixels(getCameraImage()).toFloat();
+
+        // Change coordinates from [0,255] to [-1,1]
+        var offset = tf.scalar(127.5);
+        image = image.sub(offset).div(offset);
+
+        // Convert linear array to matrix
+        image = image.reshape([1, IMAGE_SIZE, IMAGE_SIZE, 3]);
+
+        // Make a prediction using loaded model
+        var logits = model.predict(image);
+        getTopClasses(logits, MAX_CLASSES).then(function(classes) {
+          console.log('Found classes', classes);
+
+          // Validate whether is Hotdog or Not Hotdog
+          var isHotdog = false;
+          for (var i=0; i<classes.length; i++) {
+            if (classes[i].name.indexOf('hotdog') > -1) {
+              isHotdog = true;
+              break;
+            }
+          }
+          resolve(isHotdog);
+        });
+      });
+    });
+  }
+
+
+  /**
+   * Get top classes
+   * @param  {tf.Tensor}      logits     Logits returned by model
+   * @param  {Integer}        maxClasses Maximum number of classes to return
+   * @return {Promise<Array>}            Top classes
+   */
+  function getTopClasses(logits, maxClasses) {
+    return new Promise(function(resolve, reject) {
+      // Get raw data from logits
+      logits.data().then(function(values) {
+        // Sort data by value, while keeping index
+        var sortedData = [];
+        for (var i=0; i<values.length; i++) {
+          sortedData.push({value: values[i], index: i});
+        }
+        sortedData.sort(function(a, b) {
+          return b.value - a.value;
+        });
+
+        // Get top entries
+        var topValues = new Float32Array(maxClasses);
+        var topIndices = new Int32Array(maxClasses);
+        for (var i=0; i<maxClasses; i++) {
+          topValues[i] = sortedData[i].value;
+          topIndices[i] = sortedData[i].index;
+        }
+
+        // Get top classes name
+        var topClasses = [];
+        for (var i=0; i<topIndices.length; i++) {
+          topClasses.push({
+            name: modelClasses[topIndices[i]],
+            probability: topValues[i]
+          });
+        }
+        resolve(topClasses);
+      });
+    });
+  }
+
+
+  /* INITIALIZE */
+  connectToCamera().then(function() {
+    overlayDialog.innerHTML = 'Cargando modelo...';
+    loadModel().then(function() {
+      overlayDialog.style.display = 'none';
+      startPredicting();
+    });
+  }).catch(function() {
+    overlayDialog.innerHTML = 'Esta app necesita acceder a la cámara de ' +
+      'tu dispositivo para funcionar';
+  });
+
+})();

index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+    <title>Hotdog or Not Hotdog</title>
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#21a8c6">
+    <link rel="icon" href="images/hotdog.png">
+    <link rel="stylesheet" href="app.css">
+  </head>
+  <body>
+    <!-- OVERLAY -->
+    <div id="overlay">
+      <div class="result"></div>
+      <div class="dialog">Concede acceso a la cámara para continuar</div>
+    </div>
+
+    <!-- CAMERA UI -->
+    <video id="camera" autoplay></video>
+
+    <!-- SCRIPTS -->
+    <script type="text/javascript" src="worker-installer.js"></script>
+    <script type="text/javascript" src="tensorflow.js"></script>
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+</html>