refactor(ImageRecognition): Move from Node-based to Browser-based

.eslintrc.js

@@ -11,9 +11,8 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:nuxt/recommended'
   ],
-  plugins: [
-    'prettier'
-  ],
+  plugins: ['prettier'],
   rules: {
-  },
+    'nuxt/no-this-in-fetch-data': 'off'
+  }
 }

components/App/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="bg-red-500 text-white p-3 shadow-lg flex items-center">
+  <header class="bg-red-500 text-white px-3 shadow-lg flex items-center">
     <div :class="[$style.grid, 'flex-grow']">
       <div
         id="#sensor"
@@ -18,19 +18,27 @@
         class="w-3 h-3 bg-green-500 rounded-full border-white border-2"
       />
     </div>
-    <div>
-      <FileUpload v-model="prediction" />
+    <div class="py-3 mr-6">
+      <input
+        v-model="query"
+        type="search"
+        class="text-black py-2 px-3 rounded-md"
+        placeholder="Zoeken"
+      />
     </div>
+    <FileUpload class="mr-12" @input="handleFileUploadInput" />
     <div class="text-sm text-right">
-      <span class="font-bold">{{ greet }},</span> <br />
-      Floris & Adriaan
+      <span class="font-bold">{{ greet }},</span>
+      <br />Floris & Adriaan
     </div>
   </header>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import FileUpload from '../FileUpload.vue'
+import debounce from 'lodash/debounce'
+import { POKEMON_CONSTANTS } from '~/store/pokemon'
+const FileUpload = () => import('../FileUpload.vue')
 
 export default Vue.extend({
   components: {
@@ -58,6 +66,23 @@ export default Vue.extend({
       }
 
       return 'Tijd om te slapen'
+    },
+    query: {
+      get() {
+        return this.$store.getters[`pokemon/${POKEMON_CONSTANTS.SEARCH_GETTER}`]
+      },
+      set: debounce(function(value) {
+        // @ts-ignore
+        this.$store.dispatch(
+          `pokemon/${POKEMON_CONSTANTS.SEARCH_ASSIGN}`,
+          value
+        )
+      }, 250)
+    }
+  },
+  methods: {
+    handleFileUploadInput(value) {
+      this.query = value || ''
     }
   }
 })
@@ -66,7 +91,7 @@ export default Vue.extend({
 <style module>
 .grid {
   display: grid;
-  gap: theme('spacing.3');
+  gap: the me('spacing.3');
   grid-template-columns:
     theme('spacing.12') theme('spacing.3') theme('spacing.3')
     theme('spacing.3') 1fr;

components/FileUpload.vue

@@ -1,5 +1,5 @@
 <template>
-  <label class="text-white mr-8 block">
+  <label class="text-white block">
     <svg
       height="512"
       viewBox="0 0 488.455 488.455"
@@ -20,21 +20,17 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import predict from '../lib/image-recognition/predict'
 
 export default Vue.extend({
   methods: {
     async onImageChange(e) {
       const files = e.target.files || e.dataTransfer.files
-      const formData = new FormData()
-
-      formData.append('image', files[0])
-
-      const data = await fetch('/image-recognition', {
-        method: 'POST',
-        body: formData
-      }).then((response) => response.text())
-
-      this.$emit('input', data)
+      const url = URL.createObjectURL(files[0])
+      const prediction = await predict(url).catch((err) => {
+        alert(err)
+      })
+      this.$emit('input', prediction)
     }
   }
 })

serverMiddleware/image-recognition/image.ts → lib/image-recognition/image.ts

@@ -1,15 +1,12 @@
-import { promises as fs } from 'fs'
 import * as tf from '@tensorflow/tfjs'
-import * as tfnode from '@tensorflow/tfjs-node'
-
-const loadSingle = async (src) => {
-  try {
-    const buffer = await fs.readFile(src)
-    return tfnode.node.decodeImage(buffer)
-  } catch (error) {
-    throw new Error(error)
-  }
-}
+
+const loadSingle = (src) =>
+  new Promise((resolve, reject) => {
+    const img = new Image()
+    img.src = src
+    img.onload = () => resolve(tf.browser.fromPixels(img))
+    img.onerror = (err) => reject(err)
+  })
 
 const resize = (image) => tf.image.resizeBilinear(image, [224, 224])
 

serverMiddleware/image-recognition/predict.ts → lib/image-recognition/predict.ts

@@ -1,6 +1,5 @@
-import path from 'path'
 import * as tf from '@tensorflow/tfjs'
-import labels from './model/labels.json'
+import labels from './labels.json'
 import image from './image'
 
 const buildPretrainedModel = async () => {
@@ -42,12 +41,7 @@ const makePrediction = (pretrainedModel, model, imagePath) =>
     })
 
 export default async (imagePath) => {
-  const modelPath = path.join(
-    process.cwd(),
-    'serverMiddleware/image-recognition/model',
-    'model.json'
-  )
-  const model = await tf.loadLayersModel(`file://${modelPath}`)
+  const model = await tf.loadLayersModel('/image-recognition/model.json')
   const pretrainedModel = await buildPretrainedModel()
   return makePrediction(pretrainedModel, model, imagePath)
 }

nuxt.config.ts

@@ -51,13 +51,6 @@ const configuration: Configuration = {
 
   plugins: ['~/plugins/api'],
 
-  serverMiddleware: [
-    {
-      path: '/image-recognition',
-      handler: '~/serverMiddleware/image-recognition/index.ts'
-    }
-  ],
-
   pwa: {
     workbox: {
       // dev: true,