Add detection worker (#187)

Closes: #186

This PR shifts much of the tensorflow function to a shared worker for multithreading performance.

Reviewed-on: #187

src/pages/detect.vue

@@ -177,7 +177,8 @@
         videoDeviceAvailable: false,
         videoAvailable: false,
         cameraStream: null,
-        infoLinkPos: {}
+        infoLinkPos: {},
+        workerScript: null
       }
     },
     setup() {
@@ -204,7 +205,7 @@
       }
       this.modelLocation = `${modelRoot}/models/${this.detectorName}${this.otherSettings.mini ? '-mini' : ''}/model.json`
       this.miniLocation = `${modelRoot}/models/${this.detectorName}-mini/model.json`
-      fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/${this.detectorName}/classes.json`)
+      fetch(`${modelRoot}/models/${this.detectorName}/classes.json`)
         .then((mod) => { return mod.json() })
         .then((classes) => {
           this.classesList = classes
@@ -214,18 +215,22 @@
       if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
     },
     mounted () {
+      const mountWorker = new SharedWorker('../assets/detect-worker.js',{type: 'module'})
+      mountWorker.port.onmessage = (eMount) => {
+        self = this
+        if (eMount.data.error) {
+          console.log(eMount.data.message)
+          f7.dialog.alert(`ALVINN AI model error: ${eMount.data.message}`)
+        }
+        self.modelLoading = false
+      }
+
       if (this.serverSettings && this.serverSettings.use) {
         this.getRemoteLabels()
         this.modelLoading = false
       } else {
         this.modelLoading = true
-        this.loadModel(this.modelLocation, true).then(() => {
-          this.modelLoading = false
-        }).catch((e) => {
-          console.log(e.message)
-          f7.dialog.alert(`ALVINN AI model error: ${e.message}`)
-          this.modelLoading = false
-        })
+        mountWorker.port.postMessage({call: 'loadModel', weights: this.modelLocation, preload: true})
       }
       window.onresize = (e) => { if (this.$refs.image_cvs) this.selectChip('redraw') }
     },
@@ -287,22 +292,43 @@
         return `--chip-media-gradient: conic-gradient(from ${270 - (confFactor * 360 / 2)}deg, hsl(${confFactor * 120}deg, 100%, 50%) ${confFactor}turn, hsl(${confFactor * 120}deg, 50%, 66%) ${confFactor}turn)`
       },
       async setData () {
-        if (this.reloadModel) {
-          await this.loadModel(this.modelLocation)
-          this.reloadModel = false
+        const detectWorker = new SharedWorker('../assets/detect-worker.js',{type: 'module'})
+        detectWorker.port.onmessage = (eDetect) => {
+          self = this
+          if (eDetect.data.error) {
+            self.detecting = false
+            self.resultData = {}
+            f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`)
+          } else if (eDetect.data.success == 'detection') {
+            self.detecting = false
+            self.resultData = eDetect.data.detections
+            if (self.resultData) {
+              self.resultData.detections.map(d => {d.label = self.detectorLabels[d.label].name})
+            }
+            self.uploadDirty = true
+          } else if (eDetect.data.success == 'model') {
+            this.reloadModel = false
+            loadSuccess(true)
+          }
         }
+
+        let loadSuccess = null
+        let loadFailure = null
+        let modelReloading = new Promise((res, rej) => {
+          loadSuccess = res
+          loadFailure = rej
+          if (this.reloadModel) {
+            detectWorker.port.postMessage({call: 'loadModel', weights: this.modelLocation})
+          } else {
+            loadSuccess(true)
+          }
+        })
+
         if (this.serverSettings && this.serverSettings.use) {
           this.remoteDetect()
         } else {
-          this.localDetect(this.imageView).then(dets => {
-            this.detecting = false
-            this.resultData = dets
-            this.uploadDirty = true
-          }).catch((e) => {
-            console.log(e.message)
-            this.detecting = false
-            this.resultData = {}
-            f7.dialog.alert(`ALVINN structure finding error: ${e.message}`)
+          Promise.all([modelReloading,createImageBitmap(this.imageView)]).then(res => {
+            detectWorker.port.postMessage({call: 'localDetect', image: res[1]}, [res[1]])
           })
         }
       },
@@ -449,9 +475,9 @@
            * setTimeout is not a good solution, but it's the only way
            * I can find to not cut off drawing of the canvas background
            ******/
-          setTimeout(() => {
+//          setTimeout(() => {
             this.setData()
-          }, 1)
+//          }, 1)
         }).catch((e) => {
           console.log(e.message)
           f7.dialog.alert(`Error loading image: ${e.message}`)