From 2046fca96a5b778c7b5a9d334d0e3ab119e19418 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Sat, 23 Mar 2024 18:24:37 -0700
Subject: [PATCH] Switch models between video and full detection

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/pages/detect.vue         | 17 ++++++++++++++---
 src/pages/detection-mixin.js | 18 ++++++++++++++----
 src/pages/settings.vue       |  4 ++++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index dec4a40..193845b 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -148,7 +148,9 @@
         uploadUid: null,
         uploadDirty: false,
         modelLocation: '',
+        miniLocation: '',
         modelLoading: true,
+        reloadModel: false,
         videoDeviceAvailable: false,
         videoAvailable: false,
         cameraStream: null
@@ -166,6 +168,7 @@
           this.detectorName = 'thorax'
           /* VITE setting */
           this.modelLocation = `../models/thorax${this.otherSettings.mini ? '-mini' : ''}/model.json`
+          this.miniLocation = `../models/thorax-mini/model.json`
           /* PWA Build setting */
           //this.modelLocation = `./models/thorax${this.otherSettings.mini ? '-mini' : ''}/model.json`
           this.modelLocationCordova = `https://localhost/models/thorax${this.otherSettings.mini ? '-mini' : ''}/model.json`
@@ -175,6 +178,7 @@
           this.detectorName = 'abdomen'
           /* VITE setting */
           this.modelLocation = `../models/abdomen${this.otherSettings.mini ? '-mini' : ''}/model.json`
+          this.miniLocation = `../models/abdomen-mini/model.json`
           /* PWA Build setting */
           //this.modelLocation = `./models/abdomen${this.otherSettings.mini ? '-mini' : ''}/model.json`
           this.modelLocationCordova = `https://localhost/models/abdomen${this.otherSettings.mini ? '-mini' : ''}/model.json`
@@ -200,7 +204,7 @@
         this.modelLoading = false
       } else {
         this.modelLoading = true
-        this.loadModel(this.isCordova ? this.modelLocationCordova : this.modelLocation).then(() => {
+        this.loadModel(this.isCordova ? this.modelLocationCordova : this.modelLocation, true).then(() => {
           this.modelLoading = false
         }).catch((e) => {
           console.log(e.message)
@@ -258,7 +262,11 @@
       chipGradient (confVal) {
         return `--chip-media-background: hsl(${confVal / 100 * 120}deg 100% 50%)`
       },
-      setData () {
+      async setData () {
+        if (this.reloadModel) {
+          await this.loadModel(this.isCordova ? this.modelLocationCordova : this.modelLocation)
+          this.reloadModel = false
+        }
         if (this.serverSettings && this.serverSettings.use) {
           this.remoteDetect()
         } else {
@@ -294,7 +302,9 @@
             var vidElement = this.$refs.vid_viewer
             vidElement.width = trackDetails.width
             vidElement.height = trackDetails.height
-            this.videoFrameDetect(vidElement)
+            if (!this.otherSettings.disableVideo) {
+              this.videoFrameDetect(vidElement)
+            }
             return
           }
         }
@@ -362,6 +372,7 @@
           if (this.videoAvailable) {
             this.closeCamera()
             this.detecting = true
+            this.reloadModel = true
             resolve(searchImage)
           } else if (this.isCordova && this.imageLoadMode == "camera") {
             this.detecting = true
diff --git a/src/pages/detection-mixin.js b/src/pages/detection-mixin.js
index c3f6129..2dbd615 100644
--- a/src/pages/detection-mixin.js
+++ b/src/pages/detection-mixin.js
@@ -5,14 +5,23 @@ var model = null
 
 export default {
   methods: {
-    async loadModel(weights) {
+    async loadModel(weights, preload) {
+      if (model && model.modelURL == weights) {
+        return model
+      } else if (model) {
+        model.dispose()
+      }
       model = await tf.loadGraphModel(weights)
       const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
-      const dummyT = tf.ones([1,modelWidth,modelHeight,3])
       /*****************
-       * Run model once to preload weights for better response time
+       * If preloading then run model
+       * once on fake data to preload
+       * weights for a faster response
        *****************/
-      model.predict(dummyT)
+      if (preload) {
+        const dummyT = tf.ones([1,modelWidth,modelHeight,3])
+        model.predict(dummyT)
+      }
       return model
     },
     async localDetect(imageData) {
@@ -155,6 +164,7 @@ export default {
       f7.dialog.alert('No connection to remote ALVINN instance.  Please check app settings.')
     },
     async videoFrameDetect (vidData) {
+      await this.loadModel(this.miniLocation)
       const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
       const imCanvas = this.$refs.image_cvs
       const imageCtx = imCanvas.getContext("2d")
diff --git a/src/pages/settings.vue b/src/pages/settings.vue
index 5cec503..c249f97 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -27,6 +27,10 @@
             <span style="margin-left: 16px;">Enable demo mode</span>
             <f7-toggle v-model:checked="otherSettings.demo" style="margin-right: 16px;" @change="setDirty()" />
           </div>
+          <div style="display:flex; justify-content:space-between; width: 100%; margin-bottom: 10px;">
+            <span style="margin-left: 16px;">Disable video estimates<f7-icon size="16" style="padding-left: 5px;" f7="question_diamond_fill" tooltip="faster: recommended for slower devices" /></span>
+            <f7-toggle v-model:checked="otherSettings.disableVideo" style="margin-right: 16px;" />
+          </div>
           <div style="display:flex; justify-content:space-between; width: 100%">
             <span style="margin-left: 16px;">Use external server</span>
             <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" @change="setDirty()" />