Update TensorFlow.js API usage

README.md

@@ -1,7 +1,7 @@
 # tensorflow-image-recognition-chrome-extension
 Chrome browser extension for using TensorFlow image recognition on web pages
 
-This is a simple test on how to use TensorFlow.js image recognition in Google Chrome extension. This extension is intercepting all image fetch requests made by the browser and pushing them to TensorFlow pretrained ImageNet model (mobilenet_v1_0.25_244) to recognize items in images. The model is downloaded when the extension is started. After that it will start automatically modifying IMG element title (mouse hover text) html attribute to display image URL, original title and prediction results.
+This is a simple test on how to use TensorFlow.js image recognition in Google Chrome extension. This extension is intercepting all image fetch requests made by the browser and pushing them to TensorFlow pretrained ImageNet model (mobilenet_v1_0.25_224) to recognize items in images. The model is downloaded when the extension is started. After that it will start automatically modifying IMG element title (mouse hover text) html attribute to display image URL, original title and prediction results.
 
 It will only run the recognition if width or height of the image is larger than 128px. It fails to update the title sometimes when there is some fancy lazyloading module (or some other js manipulation) used on page or the images are embedded (data:image/png;base64, ...). You can inspect the background page view (on chrome extensions page) to see more information about what is happening behind the scenes.
 

src/background.js

@@ -2,7 +2,7 @@ import 'babel-polyfill';
 import * as tf from '@tensorflow/tfjs';
 import { IMAGENET_CLASSES } from './imagenet_classes';
 
-const MOBILENET_MODEL_PATH = 'https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json';
+const MOBILENET_MODEL_PATH = 'https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.50_224/model.json';
 const IMAGE_SIZE = 224;
 const TOPK_PREDICTIONS = 10;
 
@@ -26,18 +26,22 @@ class BackgroundProcessing {
   async loadModel() {
     console.log('Loading model...');
     const startTime = performance.now();
-    this.model = await tf.loadModel(MOBILENET_MODEL_PATH);
-    this.model.predict(tf.zeros([1, IMAGE_SIZE, IMAGE_SIZE, 3])).dispose();
-
-    const totalTime = Math.floor(performance.now() - startTime);
-    console.log(`Model loaded and initialized in ${totalTime}ms...`);
+    try {
+      this.model = await tf.loadGraphModel(MOBILENET_MODEL_PATH);
+      this.model.predict(tf.zeros([1, IMAGE_SIZE, IMAGE_SIZE, 3])).dispose();
+      const totalTime = Math.floor(performance.now() - startTime);
+      console.log(`Model loaded and initialized in ${totalTime}ms...`);
+    } catch (error) {
+      console.error('Error loading model:', error);
+    }
   }
 
   async loadImage(src) {
     return new Promise(resolve => {
       var img = document.createElement('img');
       img.crossOrigin = "anonymous";
       img.onerror = function(e) {
+        console.error('Error loading image:', e);
         resolve(null);
       };
       img.onload = function(e) {
@@ -84,19 +88,24 @@ class BackgroundProcessing {
   async predict(imgElement) {
     console.log('Predicting...');
     const startTime = performance.now();
-    const logits = tf.tidy(() => {
-      const img = tf.fromPixels(imgElement).toFloat();
-      const offset = tf.scalar(127.5);
-      const normalized = img.sub(offset).div(offset);
-      const batched = normalized.reshape([1, IMAGE_SIZE, IMAGE_SIZE, 3]);
-      return this.model.predict(batched);
-    });
-
-    // Convert logits to probabilities and class names.
-    const predictions = await this.getTopKClasses(logits, TOPK_PREDICTIONS);
-    const totalTime = Math.floor(performance.now() - startTime);
-    console.log(`Prediction done in ${totalTime}ms:`, predictions);
-    return predictions;
+    try {
+      const logits = tf.tidy(() => {
+        const img = tf.browser.fromPixels(imgElement).toFloat();
+        const offset = tf.scalar(127.5);
+        const normalized = img.sub(offset).div(offset);
+        const batched = normalized.reshape([1, IMAGE_SIZE, IMAGE_SIZE, 3]);
+        return this.model.predict(batched);
+      });
+
+      // Convert logits to probabilities and class names.
+      const predictions = await this.getTopKClasses(logits, TOPK_PREDICTIONS);
+      const totalTime = Math.floor(performance.now() - startTime);
+      console.log(`Prediction done in ${totalTime}ms:`, predictions);
+      return predictions;
+    } catch (error) {
+      console.error('Error during prediction:', error);
+      return null;
+    }
   }
 
   async analyzeImage(src) {

tensorflow-image-recognition-chrome-extension/.gitignore

@@ -0,0 +1,4 @@
+.cache
+dist/src
+node_modules
+.DS_Store

tensorflow-image-recognition-chrome-extension/README.md

@@ -0,0 +1,47 @@
+# tensorflow-image-recognition-chrome-extension
+Chrome browser extension for using TensorFlow image recognition on web pages
+
+This is a simple test on how to use TensorFlow.js image recognition in Google Chrome extension. This extension is intercepting all image fetch requests made by the browser and pushing them to TensorFlow pretrained ImageNet model (mobilenet_v1_0.25_244) to recognize items in images. The model is downloaded when the extension is started. After that it will start automatically modifying IMG element title (mouse hover text) html attribute to display image URL, original title and prediction results.
+
+It will only run the recognition if width or height of the image is larger than 128px. It fails to update the title sometimes when there is some fancy lazyloading module (or some other js manipulation) used on page or the images are embedded (data:image/png;base64, ...). You can inspect the background page view (on chrome extensions page) to see more information about what is happening behind the scenes.
+
+## How to try it?
+
+```sh
+git clone https://github.com/JK0N/tensorflow-image-recognition-chrome-extension.git
+```
+
+```sh
+cd tensorflow-image-recognition-chrome-extension/
+```
+
+```sh
+npm i
+```
+
+```sh
+npm run build
+```
+
+- Open Google Chrome extensions page: chrome://extensions/
+
+- Enable developer mode
+
+- Click [LOAD UNPACKED]
+
+- Select tensorflow-image-recognition-chrome-extension/dist/ -folder!
+
+- Hover over images on web pages to display image recognition details.
+
+
+## Examples
+
+<p>
+  <img src="https://raw.githubusercontent.com/JK0N/tensorflow-image-recognition-chrome-extension/master/examples/lion-fish.png" />
+  <b>Lion fish</b>
+</p>
+
+<p>
+  <img src="https://raw.githubusercontent.com/JK0N/tensorflow-image-recognition-chrome-extension/master/examples/hotdog.png" />
+  <b>Hot dog</b>
+</p>