src/js/detect-worker.js

@@ -15,6 +15,14 @@ self.onconnect = (e) => {
           port.postMessage({error: true, message: err.message})
         })
         break
+      case 'localDetect':
+        localDetect(e.data.image).then((dets) => {
+          port.postMessage({success: true, detections: dets})
+        }).catch((err) => {
+          port.postMessage({error: true, message: err.message})
+        })
+        e.data.image.close()
+        break
       default:
         console.log('Worker message incoming:')
         console.log(e)
@@ -120,7 +128,8 @@ async function localDetect(imageData) {
         "left": dLeft,
         "bottom": dBottom,
         "right": dRight,
-        "label": this.detectorLabels[classes_data[i]].name,
+//        "label": this.detectorLabels[classes_data[i]].name,
+        "label": classes_data[i],
         "confidence": scores_data[i] * 100
       })
     }

src/pages/detect.vue

@@ -221,9 +221,6 @@
           console.log(eMount.data.message)
           f7.dialog.alert(`ALVINN AI model error: ${eMount.data.message}`)
         }
-        console.log(eMount)
-        console.log('Model loading complete.')
-        console.log(self.imageLoadMode)
         self.modelLoading = false
       }
 
@@ -232,15 +229,7 @@
         this.modelLoading = false
       } else {
         this.modelLoading = true
-        console.log('Loading model...')
         mountWorker.port.postMessage({call: 'loadModel', weights: this.modelLocation, preload: 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
-//        })
       }
       window.onresize = (e) => { if (this.$refs.image_cvs) this.selectChip('redraw') }
     },
@@ -302,6 +291,23 @@
         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 () {
+        const detectWorker = new SharedWorker('../js/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 {
+            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
+          }
+        }
+
         if (this.reloadModel) {
           await this.loadModel(this.modelLocation)
           this.reloadModel = false
@@ -309,15 +315,8 @@
         if (this.serverSettings && this.serverSettings.use) {
           this.remoteDetect()
         } else {
-          this.localDetect(this.imageView).then(dets => {
+          createImageBitmap(this.imageView).then(imData => {
-            this.detecting = false
+            detectWorker.port.postMessage({call: 'localDetect', image: imData}, [imData])
-            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}`)
           })
         }
       },
@@ -464,9 +463,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}`)