Connect detect page to model server for results (#16)

Closes #3

Allows for configuration of model server settings (address and port) and can dynamically select the model based on the detection page selected.

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

Reviewed-on: Georgi_Lab/ALVINN_f7#16

src/pages/detect.vue

@@ -58,7 +58,6 @@
 
 <script>
     import { f7 } from 'framework7-vue'
-    import fakeData from './testData.js'
 
     export default {
         props: {
@@ -73,6 +72,8 @@
             imageRegion: '',
             imageLoaded: false,
             imageView: '../assets/icons/image.svg',
+            reader: new FileReader(),
+            detectorName: ''
             }
         },
         created () {
@@ -80,14 +81,17 @@
                 case 'thorax':
                 this.activeRegion = 0
                 this.imageRegion = '../assets/regions/thorax.svg'
+                this.detectorName = 'thorax'
                     break;
                 case 'abdomen':
                 this.activeRegion = 1
                 this.imageRegion = '../assets/regions/abdpel.svg'
+                this.detectorName = 'combined'
                     break;
                 case 'limbs':
                 this.activeRegion = 2
                 this.imageRegion = '../assets/regions/limb.svg'
+                this.detectorName = 'defaultNew'
                     break;
                 case 'head':
                 this.activeRegion = 3
@@ -99,18 +103,38 @@
             chipColor (confVal) {
                 if (confVal >= 90) return 'green'
                 if (confVal >= 70) return 'lime'
-                return 'yellow';
+                return 'yellow'
             },
             setData () {
+                var self = this
                 var loadServerSettings = localStorage.getItem('serverSettings')
                 if (loadServerSettings) var serverSettings = JSON.parse(loadServerSettings)
                 if (serverSettings && serverSettings.use) {
-                    f7.dialog.alert(`Using server at ${serverSettings.address}`)
+                    var modelURL = `http://${serverSettings.address}:${serverSettings.port}/detect`
+                    var xhr = new XMLHttpRequest()
+                    xhr.open("POST", modelURL)
+                    xhr.setRequestHeader('Content-Type', 'application/json')
+                    xhr.onload = function () {
+                        if (this.status !== 200) {
+                            //this.response.text().then(function(message){alert(message)})
+                            console.log(this.response)
+                            return;
+                        }
+                        self.resultData = JSON.parse(this.response)
+                    }
+                    
+                    var doodsData = {
+                        "detector_name": this.detectorName,
+                        "detect": {
+                            "*":50
+                        }
+                    }
+                    doodsData.data = this.reader.result.split(',')[1]
+
+                    xhr.send(JSON.stringify(doodsData))
                 } else {
                     f7.dialog.alert('Using built-in model')
                 }
-                //Placeholder data
-                this.resultData = fakeData.testData
             },
             selectImage () {
                 var loadResult = this.$refs.image_chooser.click()
@@ -143,8 +167,9 @@
                 });
             },
             getImage () {
-                var example = this.$refs.image_chooser.files[0];
+                const example = this.$refs.image_chooser.files[0];
                 this.imageView = URL.createObjectURL(example);
+                this.reader.readAsDataURL(example)
                 this.imageLoaded = true;
             }
         }

src/pages/testData.js

@@ -1,55 +0,0 @@
-export default {
-    testData: {
-        "id": "manual",
-        "detections": [
-            {
-            "top": 0.5543267130851746,
-            "left": 0.514180064201355,
-            "bottom": 0.7492024302482605,
-            "right": 0.5877177715301514,
-            "label": "Lung, Right",
-            "confidence": 91.04458093643188
-            },
-            {
-            "top": 0.24095627665519714,
-            "left": 0.5838792324066162,
-            "bottom": 0.9880742430686951,
-            "right": 0.8479938507080078,
-            "label": "Diaphragm",
-            "confidence": 88.7181043624878
-            },
-            {
-            "top": 0.3355500102043152,
-            "left": 0.3559962809085846,
-            "bottom": 0.4628722071647644,
-            "right": 0.6606560349464417,
-            "label": "Aorta",
-            "confidence": 85.63258051872253
-            },
-            {
-            "top": 0.46723803877830505,
-            "left": 0.28829023241996765,
-            "bottom": 0.8604505658149719,
-            "right": 0.5213174819946289,
-            "label": "Heart",
-            "confidence": 85.21404266357422
-            },
-            {
-            "top": 0.428698867559433,
-            "left": 0.1482502520084381,
-            "bottom": 0.5519284009933472,
-            "right": 0.5934896469116211,
-            "label": "Phrenic nerve",
-            "confidence": 81.82616829872131
-            },
-            {
-            "top": 0.4919853210449219,
-            "left": 0.4810255169868469,
-            "bottom": 0.5394672155380249,
-            "right": 0.5925238728523254,
-            "label": "Vena Cava, Caudal",
-            "confidence": 75.55835843086243
-            }
-        ]
-    }
-}