Separate out remote server based detection

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

src/pages/detect.vue

@@ -109,12 +109,13 @@
   import SvgIcon from '../components/svg-icon.vue'
 
   import submitMixin from './submit-mixin'
-  import detectMixin from './local-detect'
+  import localDetectMixin from './local-detect'
+  import remoteDetectMixin from './remote-detect'
 
   import thoraxClasses from '../models/thorax/classes.json'
 
   export default {
-    mixins: [submitMixin, detectMixin],
+    mixins: [submitMixin, localDetectMixin, remoteDetectMixin],
     props: {
       f7route: Object,
     },
@@ -178,35 +179,13 @@
       }
       var loadServerSettings = localStorage.getItem('serverSettings')
       if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
-      var self = this
       if (this.serverSettings && this.serverSettings.use) {
-        var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detectors`
+        this.getRemoteLabels()
-        var xhr = new XMLHttpRequest()
-        xhr.open("GET", modelURL)
-        xhr.setRequestHeader('Content-Type', 'application/json')
-        xhr.timeout = 10000
-        xhr.ontimeout = this.remoteTimeout
-        xhr.onload = function () {
-          if (this.status !== 200) {
-            console.log(xhr.response)
-            const errorResponse = JSON.parse(xhr.response)
-            f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
-            return;
-          }
-          var detectors = JSON.parse(xhr.response).detectors
-          var findLabel = detectors
-            .find( d => { return d.name == self.detectorName } )?.labels
-            .filter( l => { return l != "" } ).sort()
-            .map( l => { return {'name': l, 'detect': true} } )
-          self.detectorLabels = findLabel || []
-        }
-        
-        xhr.send()
       } else {
-        self.modelLoading = true
+        this.modelLoading = true
-        self.detectorLabels = self.classesList.map( l => { return {'name': l, 'detect': true} } )
+        this.detectorLabels = this.classesList.map( l => { return {'name': l, 'detect': true} } )
-        self.loadModel(self.isCordova ? self.modelLocationCordova : self.modelLocation).then(() => {
+        this.loadModel(this.isCordova ? this.modelLocationCordova : this.modelLocation).then(() => {
-          self.modelLoading = false
+          this.modelLoading = false
         }).catch((e) => {
           console.log(e.message)
           f7.dialog.alert(`ALVINN AI model error: ${e.message}`)
@@ -252,52 +231,21 @@
         return `--chip-media-background: hsl(${confVal / 100 * 120}deg 100% 50%)`
       },
       setData () {
-        var self = this
         if (this.serverSettings && this.serverSettings.use) {
-          var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
+          this.remoteDetect()
-          var xhr = new XMLHttpRequest()
-          xhr.open("POST", modelURL)
-          xhr.timeout = 10000
-          xhr.ontimeout = this.remoteTimeout
-          xhr.setRequestHeader('Content-Type', 'application/json')
-          xhr.onload = function () {
-            self.detecting = false
-            if (this.status !== 200) {
-              console.log(xhr.response)
-              const errorResponse = JSON.parse(xhr.response)
-              f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
-              return;
-            }
-            self.resultData = JSON.parse(xhr.response)
-            self.uploadDirty = true
-          }
-          
-          var doodsData = {
-            "detector_name": this.detectorName,
-            "detect": {
-              "*": 1
-            },
-            "data": this.imageView.src.split(',')[1]
-          }
-
-          xhr.send(JSON.stringify(doodsData))
         } else {
           this.localDetect(this.imageView).then(dets => {
-            self.detecting = false
+            this.detecting = false
-            self.resultData = dets
+            this.resultData = dets
-            self.uploadDirty = true
+            this.uploadDirty = true
           }).catch((e) => {
             console.log(e.message)
-            self.detecting = false
+            this.detecting = false
-            self.resultData = {}
+            this.resultData = {}
             f7.dialog.alert(`ALVINN structure finding error: ${e.message}`)
           })
         }
       },
-      remoteTimeout () {
-        this.detecting = false
-        f7.dialog.alert('No connection to remote ALVINN instance.  Please check app settings.')
-      },
       selectAll (ev) {
         if (ev.target.checked) {
           this.detectorLabels.forEach( s => s.detect = true )

src/pages/remote-detect.js

@@ -0,0 +1,63 @@
+export default {
+  methods: {
+    getRemoteLabels() {
+      var self = this
+      var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detectors`
+      var xhr = new XMLHttpRequest()
+      xhr.open("GET", modelURL)
+      xhr.setRequestHeader('Content-Type', 'application/json')
+      xhr.timeout = 10000
+      xhr.ontimeout = this.remoteTimeout
+      xhr.onload = function () {
+        if (this.status !== 200) {
+          console.log(xhr.response)
+          const errorResponse = JSON.parse(xhr.response)
+          f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
+          return
+        }
+        var detectors = JSON.parse(xhr.response).detectors
+        var findLabel = detectors
+          .find( d => { return d.name == self.detectorName } )?.labels
+          .filter( l => { return l != "" } ).sort()
+          .map( l => { return {'name': l, 'detect': true} } )
+        self.detectorLabels = findLabel || []
+      }
+      
+      xhr.send()
+    },
+    remoteDetect() {
+      var self = this
+      var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
+      var xhr = new XMLHttpRequest()
+      xhr.open("POST", modelURL)
+      xhr.timeout = 10000
+      xhr.ontimeout = this.remoteTimeout
+      xhr.setRequestHeader('Content-Type', 'application/json')
+      xhr.onload = function () {
+        self.detecting = false
+        if (this.status !== 200) {
+          console.log(xhr.response)
+          const errorResponse = JSON.parse(xhr.response)
+          f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
+          return;
+        }
+        self.resultData = JSON.parse(xhr.response)
+        self.uploadDirty = true
+      }
+      
+      var doodsData = {
+        "detector_name": this.detectorName,
+        "detect": {
+          "*": 1
+        },
+        "data": this.imageView.src.split(',')[1]
+      }
+
+      xhr.send(JSON.stringify(doodsData))
+    },
+    remoteTimeout () {
+      this.detecting = false
+      f7.dialog.alert('No connection to remote ALVINN instance.  Please check app settings.')
+    }
+  }
+}