Add detection settings panel (#23)

Closes #14 and #20 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#23
2023-11-29 15:51:36 -07:00
parent ff3a13826a
commit 3da3b9c1bb
3 changed files with 307 additions and 249 deletions
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -29,7 +29,7 @@
        <f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
          <img src="../assets/regions/limb.svg" />
        </f7-button>
-        <f7-button disabled="true" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
+        <f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
          <img src="../assets/regions/headneck.svg" />
        </f7-button>
      </f7-segmented>
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -3,10 +3,13 @@
    <!-- Top Navbar -->
    <f7-navbar :sliding="false" back-link="Back">
      <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
+      <f7-nav-right>
+        <f7-link icon-ios="f7:menu" icon-md="material:settings" panel-open="right"></f7-link>
+      </f7-nav-right>
    </f7-navbar>
    <f7-block class="detect-grid">
      <div class="image-container">
-            <img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: scale-down; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
+        <img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
        <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
      </div>
      <div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -16,30 +19,40 @@
        <f7-button popover-open="#region-popover">
          <img :src="imageRegion" />
        </f7-button>
-            <f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
-                <img src="../assets/icons/visibility.svg" />
-            </f7-button>
        <f7-button @click="selectImage">
          <img src="../assets/icons/image.svg" />
        </f7-button>
+        <f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
+          <img src="../assets/icons/visibility.svg" />
+        </f7-button>
        <f7-button @click="setData">
          <img src="../assets/icons/videocam.svg" />
        </f7-button>
      </f7-segmented>
      <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
    </f7-block>
+
+    <f7-panel right cover>
+      <f7-page>
+        <f7-navbar title="Detection Settings"></f7-navbar>
+        <f7-list>
+          <f7-list-input v-model:value="detectSettings.level" :label="`Confidence % threshold: ${detectSettings.level}`" type="range" />
+          <f7-list-item accordion-item title="Structures">
+            <f7-accordion-content>
+              <f7-list>
+                <f7-list-item checkbox checked checkbox-icon="end" title="All/none" @change="selectAll"></f7-list-item>
+                <f7-list-item v-for="structure in detectSettings.filter" checkbox checkbox-icon="end" v-model:checked="structure.detect" :title="structure.name"></f7-list-item>
+              </f7-list>
+            </f7-accordion-content>
+          </f7-list-item>
+        </f7-list>
+      </f7-page>
+    </f7-panel>
  </f7-page>
 </template>

 <style>
  .detect-grid {
-        /*display: flex;
-        justify-content: flex-start;
-        flex-direction: column;
-        align-items: stretch;
-        height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
-        box-sizing: border-box;
-        width: 100vw;*/
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto min-content;
@@ -60,6 +73,7 @@
    min-height: 0;
    position: relative;
    display: flex;
+    align-self: stretch;
  }

  .chip-results {
@@ -166,7 +180,12 @@
        imageLoaded: false,
        imageView: '../assets/icons/image.svg',
        reader: new FileReader(),
-            detectorName: ''
+        detectorName: '',
+        detectSettings: {
+          level: 50,
+          filter: []
+          },
+        serverSettings: {}
      }
    },
    created () {
@@ -191,6 +210,29 @@
        this.imageRegion = '../assets/regions/headneck.svg'
          break;
      }
+      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`
+        var xhr = new XMLHttpRequest()
+        xhr.open("GET", 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;
+          }
+          var detectors = JSON.parse(this.response).detectors
+          self.detectSettings.filter = detectors
+            .find( d => { return d.name == self.detectorName } ).labels
+            .filter( l => { return l != "" } ).sort()
+            .map( l => { return {'name': l, 'detect': true} } )
+        }
+        
+        xhr.send()
+      }
    },
    methods: {
      chipColor (confVal) {
@@ -200,10 +242,8 @@
      },
      setData () {
        var self = this
-                var loadServerSettings = localStorage.getItem('serverSettings')
-                if (loadServerSettings) var serverSettings = JSON.parse(loadServerSettings)
-                if (serverSettings && serverSettings.use) {
-                    var modelURL = `http://${serverSettings.address}:${serverSettings.port}/detect`
+        if (this.serverSettings && this.serverSettings.use) {
+          var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
          var xhr = new XMLHttpRequest()
          xhr.open("POST", modelURL)
          xhr.setRequestHeader('Content-Type', 'application/json')
@@ -216,19 +256,33 @@
            self.resultData = JSON.parse(this.response)
          }
          
+          var detectStructures = {}
+          if (this.detectSettings.filter.every( s => { return s.detect } )) {
+            detectStructures['*'] = this.detectSettings.level
+          } else {
+            this.detectSettings.filter.forEach( s => {
+              if (s.detect) detectStructures[s.name] = this.detectSettings.level
+            })
+          }
          var doodsData = {
            "detector_name": this.detectorName,
-                        "detect": {
-                            "*":50
+            "detect": detectStructures,
+            "data": this.reader.result.split(',')[1]
          }
-                    }
-                    doodsData.data = this.reader.result.split(',')[1]

          xhr.send(JSON.stringify(doodsData))
        } else {
+          //TODO
          f7.dialog.alert('Using built-in model')
        }
      },
+      selectAll (ev) {
+        if (ev.target.checked) {
+          this.detectSettings.filter.forEach( s => s.detect = true )
+        } else {
+          this.detectSettings.filter.forEach( s => s.detect = false )
+        }
+      },
      selectImage () {
        var loadResult = this.$refs.image_chooser.click()
      },
@@ -248,7 +302,7 @@
          imgWidth = img.offsetHeight * imgAspect
          imgHeight = img.offsetHeight
        }
-                box.style.display = "block"
+        box.style.display = 'block'
        box.style.left = `${(img.offsetWidth - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth}px`
        box.style.top = `${(img.offsetHeight - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight}px`
        box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * imgWidth}px`
@@ -260,10 +314,15 @@
        });
      },
      getImage () {
-                const example = this.$refs.image_chooser.files[0];
-                this.imageView = URL.createObjectURL(example);
-                this.reader.readAsDataURL(example)
-                this.imageLoaded = true;
+        const searchImage = this.$refs.image_chooser.files[0]
+        //Promise goes here?
+        this.imageView = URL.createObjectURL(searchImage)
+        this.reader.readAsDataURL(searchImage)
+        this.imageLoaded = true
+        this.resultData = {}
+        this.selectedChip = -1
+        const box = this.$refs.structure_box
+        box.style.display = 'none'
      }
    }
  }
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -2,7 +2,6 @@
  <f7-page name="home">
    <!-- Top Navbar -->
    <f7-navbar>
-
      <f7-nav-left>
        <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
      </f7-nav-left>
@@ -23,7 +22,7 @@
        <f7-button class="region-button limbs" href="/detect/limbs/">
          <img class="region-image" src="../assets/regions/limb.svg" />
        </f7-button>
-        <f7-button class="region-button headneck" disabled="true" href="/detect/head/">
+        <f7-button class="region-button headneck disabled" href="/detect/head/">
          <img class="region-image" src="../assets/regions/headneck.svg" />
        </f7-button>
      </div>