Set worker use as configuration setting

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

public/conf/conf.yaml

@@ -6,6 +6,7 @@ regions:
   - limbs
   - head
 useExternal: none
+disableWorkers: true
 external:
   - name: Mserver
     address: "192.169.1.105"

src/components/app.vue

@@ -99,6 +99,9 @@
       store().set('siteDemo',this.siteConf?.demo)
       store().set('infoUrl',this.siteConf?.infoUrl)
       const loadServerSettings = localStorage.getItem('serverSettings')
+      if (this.siteConf.disableWorkers) {
+        store().disableWorkers()
+      }
       if (this.siteConf?.useExternal) {
         if (!['none','list','optional','required'].includes(this.siteConf.useExternal)) {
           console.warn(`'${this.siteConf.useExternal}' is not a valid value for useExternal configuration: using 'optional'`)

src/js/store.js

@@ -7,6 +7,7 @@ const state = reactive({
     version: '0.5.0-alpha',
     fullscreen: false,
     useExternal: 'optional',
+    workersEnabled: 'true',
     siteDemo: false,
     externalServerList: [],
     infoUrl: false,
@@ -26,6 +27,10 @@ const safariDetected = () => {
   state.safariBrowser = true
 }
 
+const disableWorkers = () => {
+  state.workersEnabled = false
+}
+
 const getServerList = () => {
   if (state.useExternal == 'required') {
     return state.externalServerList[0]
@@ -51,6 +56,7 @@ export default () => ({
   isFullscreen: computed(() => state.fullscreen),
   demoMode: computed(() => state.siteDemo),
   externalType: computed(() => state.useExternal),
+  useWorkers: computed(() => state.workersEnabled),
   getRegions: computed(() => state.enabledRegions),
   getVersion: computed(() => state.version),
   getIconSet: computed(() => state.regionIconSet),
@@ -59,6 +65,7 @@ export default () => ({
   set,
   agree,
   safariDetected,
+  disableWorkers,
   getServerList,
   toggleFullscreen
 })

src/pages/detect.vue

@@ -209,8 +209,6 @@
       let miniJ = `../models/${this.detectorName}-mini/model.json`
       this.modelLocation = new URL(modelJ,import.meta.url).href
       this.miniLocation = new URL(miniJ,import.meta.url).href
-      console.log(this.modelLocation)
-      console.log(this.miniLocation)
       let classesJ = `../models/${this.detectorName}/classes.json`
       fetch(new URL(classesJ,import.meta.url).href)
         .then((mod) => { return mod.json() })
@@ -222,30 +220,12 @@
       if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
     },
     mounted () {
-      this.detectWorker = new detectionWorker()
-      this.detectWorker.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
-      }
-      this.vidWorker = new detectionWorker()
-      this.vidWorker.onmessage = (eMount) => {
-        self = this
-        if (eMount.data.error) {
-          console.log(eMount.data.message)
-          f7.dialog.alert(`ALVINN AI nano model error: ${eMount.data.message}`)
-        }
-      }
-
       if (this.serverSettings && this.serverSettings.use) {
         this.getRemoteLabels()
         this.modelLoading = false
       } else {
         this.modelLoading = true
-        if (this.isSafari) {
+        if (!this.useWorkers) {
           this.loadModel(this.modelLocation, true).then(() => {
             this.modelLoading = false
           }).catch((e) => {
@@ -254,6 +234,23 @@
             this.modelLoading = false
           })
         } else {
+          this.detectWorker = new detectionWorker()
+          this.detectWorker.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
+          }
+          this.vidWorker = new detectionWorker()
+          this.vidWorker.onmessage = (eMount) => {
+            self = this
+            if (eMount.data.error) {
+              console.log(eMount.data.message)
+              f7.dialog.alert(`ALVINN AI nano model error: ${eMount.data.message}`)
+            }
+          }
           this.detectWorker.postMessage({call: 'loadModel', weights: this.modelLocation, preload: true})
           this.vidWorker.postMessage({call: 'loadModel', weights: this.miniLocation, preload: true})
         }
@@ -318,30 +315,32 @@
         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 () {
-        this.detectWorker.onmessage = (eDetect) => {
+        if (this.detectWorker) {
-          self = this
+          this.detectWorker.onmessage = (eDetect) => {
-          if (eDetect.data.error) {
+            self = this
-            self.detecting = false
+            if (eDetect.data.error) {
-            self.resultData = {}
+              self.detecting = false
-            loadFailure()
+              self.resultData = {}
-            f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`)
+              loadFailure()
-          } else if (eDetect.data.success == 'detection') {
+              f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`)
-            self.detecting = false
+            } else if (eDetect.data.success == 'detection') {
-            self.resultData = eDetect.data.detections
+              self.detecting = false
-            if (self.resultData) {
+              self.resultData = eDetect.data.detections
-              self.resultData.detections.map(d => {d.label = self.detectorLabels[d.label].name})
+              if (self.resultData) {
+                self.resultData.detections.map(d => {d.label = self.detectorLabels[d.label].name})
+              }
+              self.uploadDirty = true
+            } else if (eDetect.data.success == 'model') {
+              self.reloadModel = false
+              loadSuccess()
             }
-            self.uploadDirty = true
-          } else if (eDetect.data.success == 'model') {
-            self.reloadModel = false
-            loadSuccess()
           }
         }
 
         let loadSuccess = null
         let loadFailure = null
         let modelReloading = null
-        if (this.isSafari && this.reloadModel) {
+        if (!this.useWorkers && this.reloadModel) {
           await this.loadModel(this.modelLocation)
           this.reloadModel = false          
         } else {
@@ -358,7 +357,7 @@
 
         if (this.serverSettings && this.serverSettings.use) {
           this.remoteDetect()
-        } else if (!this.isSafari) {
+        } else if (this.useWorkers) {
           Promise.all([modelReloading,createImageBitmap(this.imageView)]).then(res => {
             this.detectWorker.postMessage({call: 'localDetect', image: res[1]}, [res[1]])
           })
@@ -400,7 +399,7 @@
             var vidElement = this.$refs.vid_viewer
             vidElement.width = trackDetails.width
             vidElement.height = trackDetails.height
-            if (this.isSafari) {
+            if (!this.useWorkers) {
               this.videoFrameDetect(vidElement)
             } else {
               this.videoFrameDetectWorker(vidElement)

src/pages/specs.vue

@@ -8,7 +8,7 @@
         <f7-block-title medium>Details</f7-block-title>
         <f7-list>
           <f7-list-item title="Version" :after="alvinnVersion"></f7-list-item>
-          <f7-list-item v-if="isSafari" title="Safari" after="Workers disabled"></f7-list-item>
+          <f7-list-item title="Workers" :after="useWorkers ? 'Enabled' : 'Disabled'"></f7-list-item>
         </f7-list>
         <f7-block-title medium>Models</f7-block-title>
         <f7-list style="width: 100%;">
@@ -54,6 +54,7 @@
         alvinnVersion: store().getVersion,
         isCordova: !!window.cordova,
         isSafari: store().isSafari,
+        useWorkers: store().useWorkers,
         otherSettings: {}
       }
     },