Add demo function to site settings

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

public/conf/conf.yaml

@@ -1,9 +1,11 @@
 site:
   demo: true
+  agreeExpire: 3
   regions:
     - thorax
     - abdomen
     - limbs
+  useExternal: false
 external:
   address: "10.188.0.98"
   port: 9001

site_settings.md

@@ -0,0 +1,17 @@
+Configuring aspects of the hosted ALVINN PWA is done through the `conf.yaml` file in the `conf` folder.
+Settings are divided into the top level categories: `site`, `external`.
+### Site settings
+Site settings configure aspects of this specific ALVINN instance.
+| name | description | default |
+| --- | --- | --- |
+| agreeExpire | number of months before users are shown the site agreement dialog again | 3 |
+| demo | set to true to enable demo mode by default | false
+| regions | array of regions names to enable | [thorax, abdomen, limbs, head] |
+| useExternal | set to true to enable use of external detection server by default | false |
+
+### External settings
+ALVINN can use an external object detection server instead of the built in models; settings for that external server are configured here.
+| name | description | default |
+| --- | --- | --- |
+| address | ip or url of external server | *none* |
+| port | port to access on external server | 9001 |

src/components/app.vue

@@ -73,13 +73,12 @@
         siteConf: {}
       }
     },
-    created () {
-      fetch(`${!!window.cordova ? 'https://localhost' : '.'}/conf/conf.yaml`)
+    async created () {
+      var confText = await fetch(`${!!window.cordova ? 'https://localhost' : '.'}/conf/conf.yaml`)
         .then((mod) => { return mod.text() })
-        .then((confText) => {
-          this.siteConf = YAML.parse(confText)
-          console.log(this.siteConf)
-        })
+      this.siteConf = YAML.parse(confText)
+      store().set('enabledRegions',this.siteConf?.site?.regions)
+      store().set('siteDemo',this.siteConf?.site?.demo)
       var loadSiteSettings = localStorage.getItem('siteSettings')
       if (loadSiteSettings) {
         var loadedSettings = JSON.parse(loadSiteSettings)
@@ -88,7 +87,8 @@
         this.dateAgreement = loadedSettings.dateAgreement && new Date(loadedSettings.dateAgreement)
       }
       var curDate = new Date ()
-      var agreeStillValid = this.dateAgreement && (curDate < this.dateAgreement.setMonth(this.dateAgreement.getMonth() + 3)) 
+      var expireMonth = this.dateAgreement.getMonth() + (this.siteConf?.site?.agreeExpire || 3)
+      var agreeStillValid = this.dateAgreement && (curDate < this.dateAgreement.setMonth(expireMonth))
       if (this.siteAgreement && this.rememberAgreement && agreeStillValid) {
         this.showDisclaimer = false
         store().agree()

src/js/store.js

@@ -4,11 +4,14 @@ const state = reactive({
     disclaimerAgreement: false,
     enabledRegions: ['thorax','abdomen','limbs'],
     version: '0.5.0-rc',
-    siteConfig: {}
+    useExternal: false,
+    siteDemo: false,
+    externalServer: {}
   })
 
-const setConfig = (confObj) => {
-  state.siteConfig = confObj
+const set = (config, confObj) => {
+  if (confObj === undefined) { return }
+  state[config] = confObj
 }
 
 const agree = () => {
@@ -17,9 +20,11 @@ const agree = () => {
 
 export default () => ({
   isAgreed: computed(() => state.disclaimerAgreement),
+  demoMode: computed(() => state.siteDemo),
+  defaultExternal: computed(() => state.useExternal),
   getRegions: computed(() => state.enabledRegions),
   getVersion: computed(() => state.version),
-  getConfig: computed(() => state.siteConfig),
-  setConfig,
+  getServer: computed(() => state.externalServer),
+  set,
   agree
 })

src/pages/detect.vue

@@ -99,7 +99,7 @@
         <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
           <SvgIcon icon="photo_library" />
         </f7-button>
-        <f7-button v-if="otherSettings.demo" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
+        <f7-button v-if="demoEnabled" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
           <SvgIcon icon="photo_sample"/>
         </f7-button>
       </f7-segmented>
@@ -120,6 +120,7 @@
   import submitMixin from './submit-mixin'
   import detectionMixin from './detection-mixin'
   import cameraMixin from './camera-mixin'
+import { Conv2DBackpropFilter } from '@tensorflow/tfjs'
 
   export default {
     mixins: [submitMixin, detectionMixin, cameraMixin],
@@ -252,6 +253,9 @@
         } else {
           return false
         }
+      },
+      demoEnabled () {
+        return this.otherSettings.demo || this.demoMode
       }
     },
     methods: {