Update version to 0.4.0

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Clear file input on image load
2024-03-07 16:00:21 -07:00 · 2024-03-07 15:18:35 -07:00 · 2024-03-07 14:52:48 -07:00 · 2024-03-07 14:41:58 -07:00 · 2024-03-07 13:06:14 -07:00 · 2024-03-06 16:41:18 -07:00
34 changed files with 1582 additions and 460 deletions
--- a/README.md
+++ b/README.md
@@ -1,101 +1,31 @@
 # ALVINN

-## Framework7 CLI Options
+Anatomy Lab Visual Identification Neural Net (A.L.V.I.N.N) is a f7 based app for using a computer vision neural net model to identify anatomical structures in photographic imagery.

-Framework7 app created with following options:
+## Install
+* **Android:** Download the latest Android apk in [packages](https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/packages) and open the downloaded file to install.
+* **iOS:** To do
+* **Web app:** Download the latest Web zip file in [packages](https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/packages) and extract the files to a folder location available via web access then visit that location in your web browser.
+* **Run from source:** Clone this repository and in the root directory run `npm install` followed by `npm start`.  For more information see [f7 info](f7_info.md).

-```
-{
-  "cwd": "/home/mserver/ALVINN/ALVINN_f7",
-  "type": [
-    "web",
-    "pwa",
-    "cordova"
-  ],
-  "name": "ALVINN",
-  "pkg": "edu.midwestern.alvinn",
-  "framework": "vue",
-  "template": "single-view",
-  "cssPreProcessor": false,
-  "bundler": "vite",
-  "cordova": {
-    "folder": "cordova",
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "plugins": [
-      "cordova-plugin-statusbar",
-      "cordova-plugin-keyboard",
-      "cordova-plugin-splashscreen"
-    ]
-  },
-  "theming": {
-    "customColor": true,
-    "color": "#002f65",
-    "darkMode": false,
-    "iconFonts": true
-  },
-  "customBuild": false
-}
-```
+## Quick Start
+1. From the main screen of the app, select the menu icon in the upper left corner and go to `Settings`.
+1. Make sure that `Use external server` option is selected and fill in address and port parameters to connect to a back end serving the ALVINN models (Doods2 is the default backend).
+1. Save the settings and return to the main screen.
+1. Select the region of the body you want to identify structures from.
+1. In the region page, click on the camera icon to take a new picture or load a picture from storage. When the picture load, any identifiable structures will be listed as tags below the image.
+1. Click on each tag to see the structure highlighted in the image.

-## Install Dependencies
+## Advanced Features
+### Detection Parameters
+After an image has been loaded and structure detection has been performed, the detection parameters can be adjusted using the third detection menu button (eye).
+This button will make three tools available:
+1. Confidence slider: You can use the slider to change the confidence threshold for identifying structures.
+The default threshold is 50% confidence.
+1. Refresh detections: If there has been a permanent change to the structures detections, such as deleting a tag, the detection list can be reset to its original state.
+1. Structure list: you can view a list of all the structures available for detection in that region and select/deselect individual structures for detection.

-First of all we need to install dependencies, run in terminal
-```
-npm install
-```
-
-## NPM Scripts
-
-* 🔥 `start` - run development server
-* 🔧 `dev` - run development server
-* 🔧 `build` - build web app for production
-* 📱 `build-cordova` - build cordova app
-* 📱 `build-cordova-ios` - build cordova iOS app
-* 📱 `cordova-ios` - run dev build cordova iOS app
-* 📱 `build-cordova-android` - build cordova Android app
-* 📱 `cordova-android` - run dev build cordova Android app
-
-## Vite
-
-There is a [Vite](https://vitejs.dev) bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in `/src` folder. Vite config located in `vite.config.js`.
-
-## PWA
-
-This is a PWA. Don't forget to check what is inside of your `service-worker.js`. It is also recommended that you disable service worker (or enable "Update on reload") in browser dev tools during development.
-
-## Cordova
-
-Cordova project located in `cordova` folder. You shouldn't modify content of `cordova/www` folder. Its content will be correctly generated when you call `npm run cordova-build-prod`.
-## Assets
-
-Assets (icons, splash screens) source images located in `assets-src` folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:
-
-```
-framework7 assets
-```
-
-Or launch UI where you will be able to change icons and splash screens:
-
-```
-framework7 assets --ui
-```
-
-
-
-## Documentation & Resources
-
-* [Framework7 Core Documentation](https://framework7.io/docs/)
-* [Framework7 Vue Documentation](https://framework7.io/vue/)
-
-
-* [Framework7 Icons Reference](https://framework7.io/icons/)
-* [Community Forum](https://forum.framework7.io)
-
-## Support Framework7
-
-Love Framework7? Support project by donating or pledging on:
- Patreon: https://patreon.com/framework7
- OpenCollective: https://opencollective.com/framework7
+### Submitting Images
+If all of the detection tags that are currently visible have been viewed, then the final button (cloud upload) on the detection menu will be enabled.
+This button will cause the image and the verified structures to be uploaded to the ALVINN project servers where that data will be available for further training of the neural net.
+If after the image has been uploaded, the available detection tags change, then the option to re-upload the image will be available if all the new tags have been viewed and verified.
--- a/cordova/config.xml
+++ b/cordova/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="edu.midwestern.alvinn" version="0.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
+<widget id="edu.midwestern.alvinn" version="0.4.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>ALVINN</name>
    <description>Anatomy Lab Visual Identification Neural Network.</description>
    <author email="jgeorg@midwestern.edu" href="https://midwestern.edu">
--- a/cordova/package-lock.json
+++ b/cordova/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "edu.midwestern.alvinn",
-  "version": "0.1.0-b",
+  "version": "0.3.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "edu.midwestern.alvinn",
-      "version": "0.1.0-b",
+      "version": "0.3.0",
      "license": "Apache-2.0",
      "devDependencies": {
        "cordova-android": "^12.0.1",
--- a/cordova/package.json
+++ b/cordova/package.json
@@ -1,7 +1,7 @@
 {
  "name": "edu.midwestern.alvinn",
  "displayName": "ALVINN",
-  "version": "0.1.0-b",
+  "version": "0.4.0",
  "description": "Anatomy Lab Visual Identification Neural Network.",
  "main": "index.js",
  "scripts": {
--- a/f7_info.md
+++ b/f7_info.md
@@ -0,0 +1,101 @@
+# ALVINN
+
+## Framework7 CLI Options
+
+Framework7 app created with following options:
+
+```
+{
+  "cwd": "/home/mserver/ALVINN/ALVINN_f7",
+  "type": [
+    "web",
+    "pwa",
+    "cordova"
+  ],
+  "name": "ALVINN",
+  "pkg": "edu.midwestern.alvinn",
+  "framework": "vue",
+  "template": "single-view",
+  "cssPreProcessor": false,
+  "bundler": "vite",
+  "cordova": {
+    "folder": "cordova",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "plugins": [
+      "cordova-plugin-statusbar",
+      "cordova-plugin-keyboard",
+      "cordova-plugin-splashscreen"
+    ]
+  },
+  "theming": {
+    "customColor": true,
+    "color": "#002f65",
+    "darkMode": false,
+    "iconFonts": true
+  },
+  "customBuild": false
+}
+```
+
+## Install Dependencies
+
+First of all we need to install dependencies, run in terminal
+```
+npm install
+```
+
+## NPM Scripts
+
+* 🔥 `start` - run development server
+* 🔧 `dev` - run development server
+* 🔧 `build` - build web app for production
+* 📱 `build-cordova` - build cordova app
+* 📱 `build-cordova-ios` - build cordova iOS app
+* 📱 `cordova-ios` - run dev build cordova iOS app
+* 📱 `build-cordova-android` - build cordova Android app
+* 📱 `cordova-android` - run dev build cordova Android app
+
+## Vite
+
+There is a [Vite](https://vitejs.dev) bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in `/src` folder. Vite config located in `vite.config.js`.
+
+## PWA
+
+This is a PWA. Don't forget to check what is inside of your `service-worker.js`. It is also recommended that you disable service worker (or enable "Update on reload") in browser dev tools during development.
+
+## Cordova
+
+Cordova project located in `cordova` folder. You shouldn't modify content of `cordova/www` folder. Its content will be correctly generated when you call `npm run cordova-build-prod`.
+## Assets
+
+Assets (icons, splash screens) source images located in `assets-src` folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:
+
+```
+framework7 assets
+```
+
+Or launch UI where you will be able to change icons and splash screens:
+
+```
+framework7 assets --ui
+```
+
+
+
+## Documentation & Resources
+
+* [Framework7 Core Documentation](https://framework7.io/docs/)
+* [Framework7 Vue Documentation](https://framework7.io/vue/)
+
+
+* [Framework7 Icons Reference](https://framework7.io/icons/)
+* [Community Forum](https://forum.framework7.io)
+
+## Support Framework7
+
+Love Framework7? Support project by donating or pledging on:
+- Patreon: https://patreon.com/framework7
+- OpenCollective: https://opencollective.com/framework7
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "alvinn",
  "private": true,
-  "version": "0.1.1",
+  "version": "0.4.0",
  "description": "ALVINN",
  "repository": "",
  "license": "UNLICENSED",
@@ -23,6 +23,7 @@
    "last 5 Firefox versions"
  ],
  "dependencies": {
+    "@tensorflow/tfjs": "^4.17.0",
    "dom7": "^4.0.6",
    "framework7": "^8.3.0",
    "framework7-icons": "^5.0.5",
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -7,10 +7,11 @@
        <f7-navbar title="ALVINN"></f7-navbar>
        <f7-list>
          <f7-list-item link="/settings/" view=".view-main" panel-close=".panel-left">Settings</f7-list-item>
-          <f7-list-item link="/about/">About ALVINN</f7-list-item>
+          <f7-list-item link="/about/" >About ALVINN</f7-list-item>
+          <f7-list-item link="/contact/" view=".view-main" panel-close=".panel-left">Contact</f7-list-item>
        </f7-list>
        <f7-toolbar class="panel-bar" position="bottom">
-          <span>version 0.1.1</span>
+          <span>version 0.4.0</span>
        </f7-toolbar>
      </f7-page>
    </f7-view>
@@ -64,6 +65,7 @@
      return {
        rememberAgreement: false,
        siteAgreement: false,
+        dateAgreement: null,
        showDisclaimer: true
      }
    },
@@ -73,11 +75,19 @@
        var loadedSettings = JSON.parse(loadSiteSettings)
        this.siteAgreement = loadedSettings.siteAgreement
        this.rememberAgreement = loadedSettings.rememberAgreement
+        this.dateAgreement = loadedSettings.dateAgreement && new Date(loadedSettings.dateAgreement)
      }
-      if (this.siteAgreement && this.rememberAgreement) {
+      var curDate = new Date ()
+      var agreeStillValid = this.dateAgreement && (curDate < this.dateAgreement.setMonth(this.dateAgreement.getMonth() + 3)) 
+      if (this.siteAgreement && this.rememberAgreement && agreeStillValid) {
        this.showDisclaimer = false
        store().agree()
      }
+      var loadServerSettings = localStorage.getItem('serverSettings')
+      if (!loadServerSettings) {
+        //Temp default settings for MWU deployment
+        localStorage.setItem('serverSettings','{"use":true,"address":"10.188.0.98","port":"9001","previous":{"10.188.0.98":"9001"}}')
+      }
    },
    methods: {
      setAgreement () {
@@ -85,7 +95,8 @@
        store().agree()
        let newSettings = {
          siteAgreement: this.siteAgreement,
-          rememberAgreement: this.rememberAgreement
+          rememberAgreement: this.rememberAgreement,
+          dateAgreement: new Date()
        }
        let saveSiteSettings = new Promise(
          (saved,failed) => {
@@ -135,7 +146,7 @@

        // Register service worker (only on production build)
        serviceWorker: process.env.NODE_ENV ==='production' ? {
-          path: '/service-worker.js',
+          path: './service-worker.js',
        } : {},

        // Input settings
--- a/src/components/svg-icon.vue
+++ b/src/components/svg-icon.vue
@@ -6,10 +6,15 @@
    <path v-else-if="icon == 'photo_library'" d="M360-400h400L622-580l-92 120-62-80-108 140Zm-40 160q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"/>
    <path v-else-if="icon == 'no_photography'" d="m880-195-80-80v-405H638l-73-80H395l-38 42-57-57 60-65h240l74 80h126q33 0 56.5 23.5T880-680v485Zm-720 75q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h41l80 80H160v480h601l80 80H160Zm466-215q-25 34-62.5 54.5T480-260q-75 0-127.5-52.5T300-440q0-46 20.5-83.5T375-586l58 58q-24 13-38.5 36T380-440q0 42 29 71t71 29q29 0 52-14.5t36-38.5l58 58Zm-18-233q25 24 38.5 57t13.5 71v12q0 6-1 12L456-619q6-1 12-1h12q38 0 71 13.5t57 38.5ZM819-28 27-820l57-57L876-85l-57 57ZM407-440Zm171-57Z"/>
    <path v-else-if="icon == 'photo_camera'" d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/>
+    <path v-else-if="icon == 'camera_add'" d="M440-440ZM120-120q-33 0-56.5-23.5T40-200v-480q0-33 23.5-56.5T120-760h126l50-54q11-12 26.5-19t32.5-7h165q17 0 28.5 11.5T560-800q0 17-11.5 28.5T520-760H355l-73 80H120v480h640v-320q0-17 11.5-28.5T800-560q17 0 28.5 11.5T840-520v320q0 33-23.5 56.5T760-120H120Zm640-640h-40q-17 0-28.5-11.5T680-800q0-17 11.5-28.5T720-840h40v-40q0-17 11.5-28.5T800-920q17 0 28.5 11.5T840-880v40h40q17 0 28.5 11.5T920-800q0 17-11.5 28.5T880-760h-40v40q0 17-11.5 28.5T800-680q-17 0-28.5-11.5T760-720v-40ZM440-260q75 0 127.5-52.5T620-440q0-75-52.5-127.5T440-620q-75 0-127.5 52.5T260-440q0 75 52.5 127.5T440-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Z"/>
    <path v-else-if="icon == 'cloud_upload'" d="M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H520q-33 0-56.5-23.5T440-240v-206l-64 62-56-56 160-160 160 160-56 56-64-62v206h220q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41h100v80H260Zm220-280Z"/>
    <path v-else-if="icon == 'cloud_done'" d="m414-280 226-226-58-58-169 169-84-84-57 57 142 142ZM260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Zm0-80h480q42 0 71-29t29-71q0-42-29-71t-71-29h-60v-80q0-83-58.5-141.5T480-720q-83 0-141.5 58.5T280-520h-20q-58 0-99 41t-41 99q0 58 41 99t99 41Zm220-240Z"/>
    <path v-else-if="icon == 'check_list'" d="M655-200 513-342l56-56 85 85 170-170 56 57-225 226Zm0-320L513-662l56-56 85 85 170-170 56 57-225 226ZM80-280v-80h360v80H80Zm0-320v-80h360v80H80Z"/>
    <path v-else-if="icon == 'refresh_search'" d="M822-142 592-372q-32 26-71 39t-81 13q-42 0-80-12.5T290-368l58-58q20 12 43 19t49 7q75 0 127.5-52.5T620-580q0-75-52.5-127.5T440-760q-69 0-119.5 46.5T262-598l50-50 56 56-148 148L72-592l56-56 54 52q6-103 80-173.5T440-840q109 0 184.5 75.5T700-580q0 42-13 82t-39 70l230 230-56 56Z"/>
+    <path v-else-if="icon == 'thorax'" d="M200-120q-51 0-85.5-34.5T80-240v-167l105-281q12-33 42-52.5t65-19.5q45 0 76.5 32.5T400-649v49h-80v-49q0-13-9-22t-21-9q-10 0-18.5 5.5T260-660L160-392v152q0 17 11.5 28.5T200-200h120q17 0 28.5-11.5T360-240v-80h80v80q0 51-35 85.5T320-120H200Zm559 0H639q-50 0-85-34.5T519-240v-80h80v80q0 17 11.5 28.5T639-200h120q17 0 28.5-11.5T799-240v-152L699-660q-4-9-12-14.5t-18-5.5q-13 0-21.5 9t-8.5 22v49h-80v-49q0-46 31.5-78.5T667-760q35 0 64.5 19.5T774-688l105 281v167q0 51-35 85.5T759-120ZM320-456Zm319 0Zm-159-47L376-400l-56-56 120-120v-304h80v304l120 120-57 56-103-103Z"/>
+    <path v-else-if="icon == 'abdomen'" d="M120-80v-240q0-50 35-85t85-35h80q50 0 85-35t35-85q0-17-11.5-28.5T400-600q-33 0-56.5-23.5T320-680v-200h80v200q50 0 85 35t35 85q0 83-58.5 141.5T320-360h-80q-17 0-28.5 11.5T200-320v240h-80Zm240 0h-80v-80q0-50 35-85t85-35h160q83 0 141.5-58.5T760-480v-40q0-83-58.5-141.5T560-720q-33 0-56.5-23.5T480-800v-80h80v80q117 0 198.5 81.5T840-520v40q0 117-81.5 198.5T560-200H400q-17 0-28.5 11.5T360-160v80Zm-160 0v-240q0-17 11.5-28.5T240-360h80q83 0 141.5-58.5T520-560q0-50-35-85t-85-35v-200 200q50 0 85 35t35 85q0 83-58.5 141.5T320-360h-80q-17 0-28.5 11.5T200-320v240Z"/>
+    <path v-else-if="icon == 'limbs'" d="M540-440q17 0 28.5-11.5T580-480q0-7-1.5-12.5T574-503q11-4 18.5-14t7.5-23q0-17-11.5-28.5T560-580q-13 0-23 7t-14 19l-146-70q2-4 2.5-8t.5-8q0-17-11.5-28.5T340-680q-17 0-28.5 11.5T300-640q0 6 2 11.5t5 10.5q-11 4-19 14t-8 24q0 17 11.5 28.5T320-540q14 0 24-7.5t14-19.5l146 70-4 17q0 17 11.5 28.5T540-440ZM394-80q-16-47-24-92.5t-10-86q-2-40.5-.5-74.5t4.5-58q-1 0 0 0-22-5-50.5-12.5t-61-20.5Q220-437 186-455.5T119-500l50-70q39 35 81.5 55.5t78.5 32q36 11.5 60 15l24 3.5q18 1 28.5 15t7.5 32l-4.5 33.5q-4.5 33.5-5 83.5t7.5 109q8 59 33 111h-86Zm366 0h-80v-423q0-48-25.5-87T586-649L313-772l49-67 257 117q64 29 102.5 88T760-503v423Zm-280 0q-25-52-33-111t-7.5-109q.5-50 5-83.5L449-417q3-18-7.5-32T413-464l-24-3.5q-24-3.5-60-15t-78.5-32Q208-535 169-570q39 35 81.5 55.5t78.5 32q36 11.5 60 15l24 3.5q18 1 28.5 15t7.5 32l-4.5 33.5q-4.5 33.5-5 83.5t7.5 109q8 59 33 111Z"/>
+    <path v-else-if="icon == 'head'" d="M194-80v-395h80v315h280v-193l105-105q29-29 45-65t16-77q0-40-16.5-76T659-741l-25-26-127 127H347l-43 43-57-56 67-67h160l160-160 82 82q40 40 62 90.5T800-600q0 57-22 107.5T716-402l-82 82v240H194Zm197-187L183-475q-11-11-17-26t-6-31q0-16 6-30.5t17-25.5l84-85 124 123q28 28 43.5 64.5T450-409q0 40-15 76.5T391-267Z"/>
  </svg>
 </template>
  
@@ -27,10 +32,15 @@
            'photo_library',
            'no_photography',
            'photo_camera',
+            'camera_add',
            'cloud_upload',
            'cloud_done',
            'check_list',
-            'refresh_search'
+            'refresh_search',
+            'thorax',
+            'abdomen',
+            'limbs',
+            'head'
          ]
          return iconList.includes(value)
        }
--- a/src/css/detect.css
+++ b/src/css/detect.css
@@ -0,0 +1,188 @@
+/*Styles for the structure detection page*/
+/*Basic style*/
+.detect-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr minmax(calc(var(--f7-chip-height) + 33px), auto) auto min-content;
+  grid-template-areas: 
+    "image-view"
+    "result-view"
+    "detect-settings"
+    "menu-view";
+  justify-items: center;
+  height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
+  max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
+}
+
+.image-container {
+  grid-area: image-view;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  display: flex;
+  align-self: stretch;
+}
+
+.popover-button-menu {
+  max-width: 90vw;
+  max-height: 90vh;
+  width: auto;
+}
+
+.segment-button-menu {
+  flex-wrap: nowrap;
+  flex-direction: column;
+  max-height: 100%;
+  min-height: 0px;
+}
+
+.chip-media {
+  background-color: var(--chip-media-background) !important;
+}
+
+.chip-results {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 10px;
+  --f7-chip-border-radius: 16px;
+  --f7-chip-media-size: 32px;
+  --f7-chip-font-weight: normal;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 100%;
+}
+
+.chip-results .chip {
+  padding-left: 8px;
+}
+
+.progress-hide {
+  display: hidden;
+}
+
+.selected-chip {
+  font-weight: 500;
+  box-shadow: 4px 4px 1px var(--avn-theme-color);
+  transform: translate(-2px, -2px);
+}
+
+.detect-inputs {
+  display: flex;
+  align-items: center;
+  margin: 5px;
+  width: 100%;
+  max-width: 400px;
+  min-width: 192px;
+}
+
+.level-slide-vert {
+  display: none;
+}
+
+.image-menu {
+  grid-area: menu-view;
+  margin: 5px;
+  max-width: 400px;
+  min-width: 192px;
+}
+
+.image-menu .button {
+  aspect-ratio: 1;
+  height: auto;
+  padding: 5px;
+  flex: 1 1 0%;
+}
+
+.image-menu > .button > svg {
+  aspect-ratio: 1;
+  height: auto;
+  width: 100%;
+}
+
+.segment-button-menu .button {
+  padding: 8px;
+  aspect-ratio: 1;
+  width: auto;
+  flex: 1 1 0%;
+  max-height: 100px;
+  max-width: 100px;
+}
+
+/*Additional styles for small format landscape orientation*/
+@media (max-height: 450px) and (orientation: landscape) {
+  .detect-grid {
+    grid-template-columns: minmax(0,1fr) minmax(56px,max-content) auto auto;
+    grid-template-rows: calc(100vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - 64px);
+    grid-template-areas: 
+      "image-view result-view detect-settings menu-view";
+    justify-items: stretch;
+    align-items: stretch;
+    height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
+    max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
+    position: relative;
+  }
+
+  .chip-results {
+    flex-direction: column;
+    max-height: 100%;
+    justify-self: start;
+    flex-wrap: nowrap;
+  }
+  
+  .detect-inputs {
+    flex-direction: column;
+    min-width: 0;
+    max-width: 72px;
+  }
+
+  .level-slide-horz {
+    display: none;
+  }
+
+  .level-slide-vert {
+    display: block;
+  }
+
+
+  .image-container {
+    flex-direction: column;
+  }
+
+  .image-menu {
+    flex-direction: column;
+    aspect-ratio: .25;
+    width: auto;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .image-menu .button {
+    aspect-ratio: 1;
+    width: auto;
+    height: 100%;
+    flex: 1 1 0%;
+    border-bottom: 1px solid var(--f7-segmented-raised-divider-color);
+    border-bottom-left-radius: 0px !important;
+  }
+
+  .segment-button-menu {
+    flex-direction: row;
+    max-height: 100%;
+    min-height: 0px;
+  }
+
+  .segment-button-menu .button {
+    height: auto;
+    flex: 1 1 0%;
+    max-height: 100px;
+    max-width: 100px;
+  }
+
+  .button > svg {
+    width: 100%;
+    height: auto;
+  }
+}
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
    * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
      * Enable inline JS: add 'unsafe-inline' to default-src
  -->
-  <meta http-equiv="Content-Security-Policy" content="worker-src blob:;  child-src blob: gap:; img-src 'self' blob: data:; default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:">
+  <meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:;  child-src blob: gap:; img-src 'self' blob: data:; default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

  <meta name="theme-color" content="#fff">
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -3,6 +3,7 @@ import HomePage from '../pages/home.vue';
 import AboutPage from '../pages/about.vue';
 import SettingsPage from '../pages/settings.vue';
 import DetectPage from '../pages/detect.vue';
+import ContactPage from  '../pages/contact.vue';

 import NotFoundPage from '../pages/404.vue';

@@ -23,6 +24,10 @@ var routes = [
    path: '/settings/',
    component: SettingsPage,
  },
+  {
+    path: '/contact/',
+    component: ContactPage,
+  },
  {
    path: '(.*)',
    component: NotFoundPage,
--- a/src/js/store.js
+++ b/src/js/store.js
@@ -1,7 +1,8 @@
 import { reactive, computed } from 'vue';

 const state = reactive({
-    disclaimerAgreement: false
+    disclaimerAgreement: false,
+    enabledRegions: ['thorax','abdomen','limbs']
  })

 const agree = () => {
@@ -10,5 +11,6 @@ const agree = () => {

 export default () => ({
  isAgreed: computed(() => state.disclaimerAgreement),
+  getRegions: computed(() => state.enabledRegions),
  agree
 })
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -9,32 +9,32 @@
  "theme_color": "#002f65",
  "icons": [
    {
-      "src": "/icons/128x128.png",
+      "src": "../icons/128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
-      "src": "/icons/144x144.png",
+      "src": "../icons/144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
-      "src": "/icons/152x152.png",
+      "src": "../icons/152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
-      "src": "/icons/192x192.png",
+      "src": "../icons/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
-      "src": "/icons/256x256.png",
+      "src": "../icons/256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
-      "src": "/icons/512x512.png",
+      "src": "../icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
--- a/src/models/thorax/classes.json
+++ b/src/models/thorax/classes.json
@@ -0,0 +1,43 @@
+[
+  "Abdominal diaphragm",
+  "Aorta",
+  "Azygous vein",
+  "Brachiocephalic trunk",
+  "Caudal vena cava",
+  "Cranial vena cava",
+  "Esophagus",
+  "External abdominal oblique",
+  "Iliocostalis",
+  "Latissimus dorsi",
+  "Left atrium",
+  "Left auricle",
+  "Left lung",
+  "Left subclavian artery",
+  "Left ventricle",
+  "Longissimus",
+  "Pectoralis profundus",
+  "Pectoralis superficialis",
+  "Pericardium",
+  "Phrenic nerve",
+  "Primary bronchus",
+  "Pulmonary artery",
+  "Pulmonary trunk",
+  "Pulmonary vein",
+  "Rectus abdominis",
+  "Rectus thoracis",
+  "Recurrent laryngeal nerve",
+  "Rhomboideus",
+  "Right atrium",
+  "Right auricle",
+  "Right lung",
+  "Right ventricle",
+  "Scalenus",
+  "Serratus dorsalis caudalis",
+  "Serratus dorsalis cranialis",
+  "Serratus ventralis",
+  "Spinalis",
+  "Sympathetic chain",
+  "Trachea",
+  "Trapezius",
+  "Vagus nerve"
+]
--- a/src/models/thorax/group1-shard10of11.bin
+++ b/src/models/thorax/group1-shard10of11.bin
--- a/src/models/thorax/group1-shard11of11.bin
+++ b/src/models/thorax/group1-shard11of11.bin
--- a/src/models/thorax/group1-shard1of11.bin
+++ b/src/models/thorax/group1-shard1of11.bin
--- a/src/models/thorax/group1-shard2of11.bin
+++ b/src/models/thorax/group1-shard2of11.bin
--- a/src/models/thorax/group1-shard3of11.bin
+++ b/src/models/thorax/group1-shard3of11.bin
--- a/src/models/thorax/group1-shard4of11.bin
+++ b/src/models/thorax/group1-shard4of11.bin
--- a/src/models/thorax/group1-shard5of11.bin
+++ b/src/models/thorax/group1-shard5of11.bin
--- a/src/models/thorax/group1-shard6of11.bin
+++ b/src/models/thorax/group1-shard6of11.bin
--- a/src/models/thorax/group1-shard7of11.bin
+++ b/src/models/thorax/group1-shard7of11.bin
--- a/src/models/thorax/group1-shard8of11.bin
+++ b/src/models/thorax/group1-shard8of11.bin
--- a/src/models/thorax/group1-shard9of11.bin
+++ b/src/models/thorax/group1-shard9of11.bin
--- a/src/models/thorax/metadata.yaml
+++ b/src/models/thorax/metadata.yaml
@@ -0,0 +1,53 @@
+description: Ultralytics best model trained on /data/ALVINN/Thorax/Thorax 0.1.0/thorax.yaml
+author: Ultralytics
+license: AGPL-3.0 https://ultralytics.com/license
+date: '2024-03-07T16:03:03.296997'
+version: 8.1.20
+stride: 32
+task: detect
+batch: 1
+imgsz:
+- 640
+- 640
+names:
+  0: Abdominal diaphragm
+  1: Aorta
+  2: Azygous vein
+  3: Brachiocephalic trunk
+  4: Caudal vena cava
+  5: Cranial vena cava
+  6: Esophagus
+  7: External abdominal oblique
+  8: Iliocostalis
+  9: Latissimus dorsi
+  10: Left atrium
+  11: Left auricle
+  12: Left lung
+  13: Left subclavian artery
+  14: Left ventricle
+  15: Longissimus
+  16: Pectoralis profundus
+  17: Pectoralis superficialis
+  18: Pericardium
+  19: Phrenic nerve
+  20: Primary bronchus
+  21: Pulmonary artery
+  22: Pulmonary trunk
+  23: Pulmonary vein
+  24: Rectus abdominis
+  25: Rectus thoracis
+  26: Recurrent laryngeal nerve
+  27: Rhomboideus
+  28: Right atrium
+  29: Right auricle
+  30: Right lung
+  31: Right ventricle
+  32: Scalenus
+  33: Serratus dorsalis caudalis
+  34: Serratus dorsalis cranialis
+  35: Serratus ventralis
+  36: Spinalis
+  37: Sympathetic chain
+  38: Trachea
+  39: Trapezius
+  40: Vagus nerve
--- a/src/models/thorax/model.json
+++ b/src/models/thorax/model.json
--- a/src/pages/camera-mixin.js
+++ b/src/pages/camera-mixin.js
@@ -0,0 +1,45 @@
+export default {
+  methods: {
+    async openCamera() {
+      var cameraLoaded = false
+      const devicesList = await navigator.mediaDevices.enumerateDevices()
+      this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
+      if (this.videoDeviceAvailable) {
+        navigator.mediaDevices.getUserMedia({video: true})
+        var vidConstraint = {
+          video: {
+            width: {
+              ideal: 1920
+            },
+            height: {
+              ideal: 1080
+            },
+            facingMode: 'environment'
+          },
+          audio: false
+        }
+        const stream = await navigator.mediaDevices.getUserMedia(vidConstraint);
+        cameraLoaded = true
+        this.cameraStream = stream
+      }
+      return cameraLoaded
+    },
+    closeCamera () {
+      this.cameraStream.getTracks().forEach( t => t.stop())
+      this.videoAvailable = false
+    },
+    captureVidFrame() {
+      const vidViewer = this.$refs.vid_viewer
+      vidViewer.pause()
+      let tempCVS = document.createElement('canvas')
+      tempCVS.height = vidViewer.videoHeight || parseInt(vidViewer.style.height)
+      tempCVS.width = vidViewer.videoWidth || parseInt(vidViewer.style.width)
+      const tempCtx = tempCVS.getContext('2d')
+      tempCtx.drawImage(vidViewer, 0, 0)
+      this.getImage(tempCVS.toDataURL())
+    },
+    async videoStream() {
+      //TODO
+    }
+  }
+}
--- a/src/pages/contact.vue
+++ b/src/pages/contact.vue
@@ -0,0 +1,95 @@
+<template>
+  <f7-page name="contact">
+    <f7-navbar title="Contact" back-link="Back"></f7-navbar>
+    <f7-block-title medium style="text-align: center;">Contact the ALVINN team</f7-block-title>
+    <f7-block style="display: flex; justify-content: center;">
+      <div class="form-container"> 
+        <p>
+          ALVINN can only get better with your feedback.  Use the form below to send us any questions or let us know how we can improve.
+        </p>
+        <f7-list class="form-element">
+          <f7-list-input v-model:value="userEmail" label="E-mail (optional)" type="email" placeholder="Your e-mail" clear-button />
+          <f7-list-input v-model:value="commentType" label="This is a... (optional)" type="select" placeholder="Select comment type">
+            <option value="20">Bug</option>
+            <option value="22">Feature request</option>
+            <option value="25">Question</option>
+          </f7-list-input>
+          <f7-list-input v-model:value="commentTitle" label="Subject of comment (optional)" type="textarea" resizable placeholder="Type here" />
+        </f7-list>
+        <f7-text-editor class="form-element comment-editor"/>
+        <div style="align-self: flex-end; display: flex; gap: 15px;">
+          <f7-button fill @click="clearForm">
+            Clear form
+          </f7-button>
+          <f7-button fill @click="sendFeedback">
+            Send feedback
+          </f7-button>
+        </div>
+      </div>
+    </f7-block>
+  </f7-page>
+</template>
+
+<style>
+  .form-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .form-element {
+    align-self: stretch;
+  }
+</style>
+
+<script>
+  import { f7 } from 'framework7-vue'
+
+  export default {
+    data () {
+      return {
+        commentTitle: "",
+        userEmail: "",
+        commentType: ""
+      }
+    },
+    computed: {
+      commentText () {
+        var text = f7.textEditor.get('.comment-editor').getValue()
+        if (this.userEmail) {
+          text += `\\n\\nSubmitted by: ${this.userEmail}`
+        }
+        return text
+      }
+    },
+    methods: {
+      sendFeedback () {
+        var self = this
+        var issueURL = `https://gitea.azgeorgis.net/api/v1/repos/Georgi_Lab/ALVINN_f7/issues?access_token=9af8ae15b1ee5a98afcb3083bb488e4cf3c683af`
+        var xhr = new XMLHttpRequest()
+        xhr.open("POST", issueURL)
+        xhr.setRequestHeader('Content-Type', 'application/json')
+        xhr.setRequestHeader('accept', 'application/json')
+        xhr.onload = function () {
+          if (this.status !== 201) {
+            console.log(xhr.response)
+            const errorResponse = JSON.parse(xhr.response)
+            f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
+            return;
+          }
+          f7.dialog.alert('Thank you for your feedback.')
+          self.clearForm()
+        }
+        xhr.send(`{"body": "${this.commentText}", "labels": [${this.commentType}], "title": "${this.commentTitle || 'User submitted comment'}"}`)
+      },
+      clearForm () {
+        this.commentTitle = ''
+        this.userEmail = ''
+        this.commentType = ''
+        f7.textEditor.get('.comment-editor').clearValue();
+      }
+    }
+  }
+
+</script>
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -1,15 +1,19 @@
 <template>
  <f7-page name="detect" :id="detectorName + '-detect-page'">
    <!-- Top Navbar -->
-    <f7-navbar :sliding="false" back-link="true" back-link-url="/" back-link-force>
+    <f7-navbar :sliding="false" :back-link="true" back-link-url="/" back-link-force>
      <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
    </f7-navbar>
    <f7-block class="detect-grid">
      <div class="image-container">
-        <canvas id="im-draw" ref="image_cvs" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
-        <SvgIcon v-if="!imageView"  icon="image" fill-color="var(--avn-theme-color)" @click="selectImage" />
+        <canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
+        <SvgIcon v-if="!imageView && !videoAvailable" :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
+        <div class="vid-container" v-if="videoAvailable" style="width: 100%; height: 100%">
+          <video id="vid-view" ref="vid_viewer" :srcObject="cameraStream" :autoPlay="true" style="width: 100%; height: 100%"></video>
+          <f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);" fill large>Capture</f7-button>
+        </div>
      </div>
-      <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
+      <div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
        <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
          :class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
          :text="result.label"
@@ -20,16 +24,16 @@
          @delete="deleteChip(result.resultIndex)"
          :style="chipGradient(result.confidence)"
        />
-        <span v-if="numResults == 0 && !detecting" style="height: var(--f7-chip-height); font-size: calc(var(--f7-chip-height) - 4px); font-weight: bolder; margin: 2px;">No results.</span>
-        <f7-preloader v-if="detecting" size="32" style="color: var(--avn-theme-color);" />
+        <div v-if="!numResults" style="height: var(--f7-chip-height); width: 100%; text-align: center; font-size: calc(var(--f7-chip-height) - 4px); font-weight: bolder; margin: 2px;">{{  message }}</div>
+        <f7-progressbar v-if="(detecting || modelLoading)" style="width: 100%;" :infinite="true" />
      </div>
      <div v-if="showDetectSettings" class="detect-inputs" style="grid-area: detect-settings;">
-        <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
-        <f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
-        <f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`">
+        <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/>
+        <f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/>
+        <f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`" style="flex: 0 1 20%">
          <SvgIcon icon="check_list"/>
        </f7-button>
-        <f7-button @click="setData">
+        <f7-button @click="setData" style="flex: 0 1 20%">
          <SvgIcon icon="refresh_search"/>
        </f7-button>
      </div>
@@ -37,17 +41,21 @@
        <f7-button popover-open="#region-popover">
          <RegionIcon :region="activeRegion" />
        </f7-button>
-        <f7-button popover-open="#capture-popover">
-          <SvgIcon icon="image"/>
+        <f7-button v-if="!videoAvailable" :class="(!modelLoading) ? '' : 'disabled'" popover-open="#capture-popover">
+          <SvgIcon icon="camera_add"/>
+        </f7-button>
+        <f7-button v-if="videoAvailable" @click="closeCamera()">
+          <SvgIcon icon="no_photography"/>
        </f7-button>
        <f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'">
          <SvgIcon icon="visibility"/>
+          <f7-badge v-if="numResults && (showResults.length != numResults)" color="red" style="position: absolute; right: 15%; top: 15%;">{{ showResults.length - numResults }}</f7-badge>
        </f7-button>
        <f7-button :class="(numResults && uploadDirty && viewedAll) ? '' : 'disabled'" @click="submitData">
          <SvgIcon :icon="(uploadUid) ? 'cloud_done' : 'cloud_upload'"/>
        </f7-button>
      </f7-segmented>
-      <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" capture="environment" style="display: none;"/>
+      <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
    </f7-block>

    <f7-panel :id="detectorName + '-settings'" right cover :backdrop="false" :container-el="`#${detectorName}-detect-page`">
@@ -63,16 +71,16 @@

    <f7-popover id="region-popover" class="popover-button-menu">
      <f7-segmented raised class="segment-button-menu">
-        <f7-button style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
+        <f7-button :class="(getRegions.includes('thorax')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
          <RegionIcon :region="0" />
        </f7-button>
-        <f7-button style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
+        <f7-button :class="(getRegions.includes('abdomen')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
          <RegionIcon :region="1" />
        </f7-button>
-        <f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
+        <f7-button :class="(getRegions.includes('limbs')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
          <RegionIcon :region="2" />
        </f7-button>
-        <f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
+        <f7-button :class="(getRegions.includes('head')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
          <RegionIcon :region="3" />
        </f7-button>
      </f7-segmented>
@@ -80,214 +88,38 @@

    <f7-popover id="capture-popover" class="popover-button-menu">
      <f7-segmented raised class="segment-button-menu">
-        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" class="disabled" @click="videoStream">
-          <SvgIcon icon="videocam"/>
-        </f7-button>
        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('camera')">
          <SvgIcon icon="photo_camera" />
        </f7-button>
        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
          <SvgIcon icon="photo_library" />
        </f7-button>
+        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="videoStream">
+          <SvgIcon icon="videocam"/>
+        </f7-button>
      </f7-segmented>
    </f7-popover>

  </f7-page>
 </template>

-<style>
-  .detect-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto auto min-content;
-    grid-template-areas: 
-      "image-view"
-      "result-view"
-      "detect-settings"
-      "menu-view";
-    justify-items: center;
-    height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
-    max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
-  }
-
-  .image-container {
-    grid-area: image-view;
-    max-width: 100%;
-    max-height: 100%;
-    min-width: 0;
-    min-height: 0;
-    position: relative;
-    display: flex;
-    align-self: stretch;
-  }
-
-  .popover-button-menu {
-    max-width: 90vw;
-    max-height: 90vh;
-    width: auto;
-  }
-  
-  .segment-button-menu {
-    flex-wrap: nowrap;
-    flex-direction: column;
-    max-height: 100%;
-    min-height: 0px;
-  }
-
-  .chip-media {
-    background-color: var(--chip-media-background) !important;
-  }
-
-  .chip-results {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-    padding: 10px;
-    --f7-chip-border-radius: 16px;
-    --f7-chip-media-size: 32px;
-    --f7-chip-font-weight: normal;
-  }
-
-  .chip-results .chip {
-    padding-left: 8px;
-  }
-
-  .selected-chip {
-    font-weight: 500;
-    box-shadow: 4px 4px 1px var(--avn-theme-color);
-    transform: translate(-2px, -2px);
-  }
-
-  .detect-inputs {
-    display: flex;
-    align-items: center;
-    margin: 5px;
-    width: 100%;
-    max-width: 400px;
-    min-width: 192px;
-  }
-
-  .level-slide-vert {
-    display: none;
-  }
-
-  .image-menu {
-    grid-area: menu-view;
-    margin: 5px;
-    /*width: 90%;*/
-    max-width: 400px;
-    min-width: 192px;
-  }
-
-  .image-menu .button {
-    aspect-ratio: 1;
-    height: auto;
-    padding: 5px;
-    flex: 1 1 0%;
-  }
-
-  .image-menu > .button > svg {
-    aspect-ratio: 1;
-    height: auto;
-    width: 100%;
-  }
-
-  .segment-button-menu .button {
-    padding: 8px;
-    aspect-ratio: 1;
-    width: auto;
-    flex: 1 1 0%;
-    max-height: 100px;
-    max-width: 100px;
-  }
-
-  @media (max-height: 450px) and (orientation: landscape) {
-    .detect-grid {
-      grid-template-columns: minmax(0,1fr) max-content auto auto;
-      grid-template-rows: calc(100vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - 64px);
-      grid-template-areas: 
-        "image-view result-view detect-settings menu-view";
-      justify-items: stretch;
-      align-items: stretch;
-      height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
-      max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
-      position: relative;
-    }
-
-    .chip-results {
-      flex-direction: column;
-      max-height: 100%;
-      justify-self: start;
-      flex-wrap: nowrap;
-      overflow-y: scroll;
-    }
-    
-    .detect-inputs {
-      flex-direction: column;
-      min-width: 0;
-      max-width: 72px;
-    }
-
-    .level-slide-horz {
-      display: none;
-    }
-
-    .level-slide-vert {
-      display: block;
-    }
-
-
-    .image-container {
-      flex-direction: column;
-    }
-
-    .image-menu {
-      flex-direction: column;
-      aspect-ratio: .25;
-      width: auto;
-      min-width: 0;
-      height: 100%;
-    }
-
-    .image-menu .button {
-      aspect-ratio: 1;
-      width: auto;
-      height: 100%;
-      flex: 1 1 0%;
-      border-bottom: 1px solid var(--f7-segmented-raised-divider-color);
-      border-bottom-left-radius: 0px !important;
-    }
-  
-    .segment-button-menu {
-      flex-direction: row;
-      max-height: 100%;
-      min-height: 0px;
-    }
-
-    .segment-button-menu .button {
-      height: auto;
-      flex: 1 1 0%;
-      max-height: 100px;
-      max-width: 100px;
-    }
-
-    .button > svg {
-      width: 100%;
-      height: auto;
-    }
-  }
-</style>
+<style src="../css/detect.css" />

 <script>
  import { f7 } from 'framework7-vue'

+  import store from '../js/store'
  import RegionIcon from '../components/region-icon.vue'
  import SvgIcon from '../components/svg-icon.vue'

  import submitMixin from './submit-mixin'
+  import detectionMixin from './detection-mixin'
+  import cameraMixin from './camera-mixin'
+
+  import thoraxClasses from '../models/thorax/classes.json'

  export default {
-    mixins: [submitMixin],
+    mixins: [submitMixin, detectionMixin, cameraMixin],
    props: {
      f7route: Object,
    },
@@ -301,6 +133,7 @@
        resultData: {},
        selectedChip: -1,
        activeRegion: 4,
+        classesList: [],
        imageLoaded: false,
        imageView: null,
        imageLoadMode: "environment",
@@ -313,55 +146,77 @@
        serverSettings: {},
        isCordova: !!window.cordova,
        uploadUid: null,
-        uploadDirty: false
+        uploadDirty: false,
+        modelLocation: '',
+        modelLoading: true,
+        videoDeviceAvailable: false,
+        videoAvailable: false,
+        cameraStream: null
      }
    },
+    setup() {
+      return store()
+    },
    created () {
      switch (this.f7route.params.region) {
        case 'thorax':
-        this.activeRegion = 0
-        this.detectorName = 'thorax'
+          this.activeRegion = 0
+          this.detectorName = 'thorax'
+          this.classesList = thoraxClasses
+          /* VITE setting */
+          this.modelLocation = '../models/thorax/model.json'
+          /* PWA Build setting */
+          //this.modelLocation = './models/thorax/model.json'
+          this.modelLocationCordova = 'https://localhost/models/thorax/model.json'
          break;
        case 'abdomen':
-        this.activeRegion = 1
-        this.detectorName = 'combined'
-          break;
+          this.activeRegion = 1
+          this.detectorName = 'combined'
+            break;
        case 'limbs':
-        this.activeRegion = 2
-        this.detectorName = 'defaultNew'
+          this.activeRegion = 2
+          this.detectorName = 'defaultNew'
          break;
        case 'head':
-        this.activeRegion = 3
+          this.activeRegion = 3
          break;
      }
      var loadServerSettings = localStorage.getItem('serverSettings')
      if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
-      var self = this
+    },
+    mounted () {
      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(xhr.response)
-            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()
+        this.getRemoteLabels()
+        this.modelLoading = false
+      } else {
+        this.modelLoading = true
+        this.detectorLabels = this.classesList.map( l => { return {'name': l, 'detect': true} } )
+        this.loadModel(this.isCordova ? this.modelLocationCordova : this.modelLocation).then(() => {
+          this.modelLoading = false
+        }).catch((e) => {
+          console.log(e.message)
+          f7.dialog.alert(`ALVINN AI model error: ${e.message}`)
+          this.modelLoading = false
+        })
      }
+      window.onresize = (e) => { this.selectChip('redraw') }
    },
    computed: {
+      message () {
+        if (this.modelLoading) {
+          return "Preparing ALVINN..."
+        } else if (this.detecting) {
+          return "Finding structures..."
+        } else if (this.numResults == 0 && this.imageLoaded) {
+          return "No results."
+        } else {
+          return "ALVINN is ready."
+        }
+      },
      showResults () {
        var filteredResults = this.resultData.detections
        if (!filteredResults) return []
+
        var allSelect = this.detectorLabels.every( s => { return s.detect } )
        var selectedLabels = this.detectorLabels
            .filter( l => { return l.detect })
@@ -371,7 +226,11 @@
          filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
          filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
        })
-          return filteredResults
+
+        if (!filteredResults.some( s => s.resultIndex == this.selectedChip && s.aboveThreshold && s.isSearched && !s.isDeleted)) {
+          this.selectChip(this.selectedChip)
+        }
+        return filteredResults
      },
      numResults () {
        return this.showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted }).length
@@ -391,36 +250,19 @@
        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`
-          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(xhr.response)
-              self.detecting = false
-              return;
-            }
-            self.resultData = JSON.parse(xhr.response)
-            self.uploadDirty = true
-            self.detecting = false
-          }
-          
-          var doodsData = {
-            "detector_name": this.detectorName,
-            "detect": {
-              "*": 1
-            },
-            "data": this.imageView.src.split(',')[1]
-          }
-
-          xhr.send(JSON.stringify(doodsData))
+          this.remoteDetect()
        } else {
-          //TODO
-          f7.dialog.alert('Using built-in model')
+          this.localDetect(this.imageView).then(dets => {
+            this.detecting = false
+            this.resultData = dets
+            this.uploadDirty = true
+          }).catch((e) => {
+            console.log(e.message)
+            this.detecting = false
+            this.resultData = {}
+            f7.dialog.alert(`ALVINN structure finding error: ${e.message}`)
+          })
        }
      },
      selectAll (ev) {
@@ -430,18 +272,17 @@
          this.detectorLabels.forEach( s => s.detect = false )
        }
      },
-      selectImage (mode) {
+      async selectImage (mode) {
        this.imageLoadMode = mode
-        if (mode == "camera") {
-          this.$refs.image_chooser.setAttribute("capture","environment")
-        } else {
-          this.$refs.image_chooser.removeAttribute("capture")
-        }
        if (this.isCordova && mode == "camera") {
-            navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
-        } else {
-          var loadResult = this.$refs.image_chooser.click()
+          navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
+          return
        }
+        if (mode == "camera") {
+          this.videoAvailable = await this.openCamera()
+          if (this.videoAvailable) { return }
+        }
+        this.$refs.image_chooser.click()
      },
      onFail (message) {
        alert(`Camera fail: ${message}`)
@@ -454,23 +295,19 @@
          return
        }

-        var imgWidth
-        var imgHeight
-        this.selectedChip = iChip
-        var imgAspect = this.imageView.width / this.imageView.height
-        var rendAspect = imCanvas.width / imCanvas.height
-        if (imgAspect >= rendAspect) {
-          imgWidth = imCanvas.width
-          imgHeight = imCanvas.width / imgAspect
-        } else {
-          imgWidth = imCanvas.height * imgAspect
-          imgHeight = imCanvas.height
+        if (iChip == 'redraw') {
+          if (this.selectedChip == -1) return
+          iChip = this.selectedChip
        }
-        var boxLeft = (imCanvas.width - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth
-        var boxTop = (imCanvas.height - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight
-        var boxWidth = (Math.min(this.resultData.detections[iChip].right, 1) - Math.max(this.resultData.detections[iChip].left, 0)) * imgWidth
-        var boxHeight = (Math.min(this.resultData.detections[iChip].bottom, 1) - Math.max(this.resultData.detections[iChip].top, 0)) * imgHeight
+
+        const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
+
+        var boxLeft = boxCoords.cvsLeft
+        var boxTop = boxCoords.cvsTop
+        var boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
+        var boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
        imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
+        this.selectedChip = iChip
        this.resultData.detections[iChip].beenViewed = true
      },
      deleteChip ( iChip ) {
@@ -492,13 +329,19 @@
        return [imCanvas, imageCtx]
      },
      getImage (searchImage) {
-        let loadImage =new Promise(resolve => {
-          if (this.isCordova && this.imageLoadMode == "camera") {
+        let loadImage = new Promise(resolve => {
+          if (this.videoAvailable) {
+            this.closeCamera()
+            this.detecting = true
+            resolve(searchImage)
+          } else if (this.isCordova && this.imageLoadMode == "camera") {
+            this.detecting = true
            resolve('data:image/jpg;base64,' + searchImage)
          } else {
            const searchImage = this.$refs.image_chooser.files[0]
+            this.$refs.image_chooser.value=[]
            var reader = new FileReader()
-            reader.addEventListener("loadend", () => {
+            reader.addEventListener("load", () => {
              this.detecting = true
              resolve(reader.result)
            })
@@ -508,22 +351,25 @@
        loadImage.then((imgData) => {
          this.imageLoaded = true
          this.resultData = {}
+          this.selectedChip = -1
          this.imageView = new Image()
          this.imageView.src = imgData
          return(this.imageView.decode())
        }).then( () => {
          const [imCanvas, _]  = this.resetView()
          imCanvas.style['background-image'] = `url(${this.imageView.src})`
-          this.setData()
+          /******
+           * setTimeout is not a good solution, but it's the only way
+           * I can find to not cut off drawing of the progress spinner
+           ******/
+          setTimeout(() => {
+            this.setData()
+          }, 250)
        }).catch((e) => {
          console.log(e.message)
          f7.dialog.alert(`Error loading image: ${e.message}`)
        })
      },
-      videoStream() {
-        //TODO
-        return null
-      },
      async submitData () {
        var uploadData = this.showResults
          .filter( d => { return d.aboveThreshold && d.isSearched && !d.isDeleted })
@@ -533,6 +379,44 @@
      },
      onLevelChange(value) {
        this.detectorLevel = value
+      },
+      structureClick(e) {
+        const boxCoords = this.box2cvs(this.showResults)
+        var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= e.offsetX &&
+            r.cvsRight >= e.offsetX &&
+            r.cvsTop <= e.offsetY &&
+            r.cvsBottom >= e.offsetY &&
+            this.resultData.detections[i].resultIndex > this.selectedChip &&
+            this.resultData.detections[i].aboveThreshold &&
+            this.resultData.detections[i].isSearched &&
+            !this.resultData.detections[i].isDeleted
+        })
+        this.selectChip(findBox >= 0 ? this.resultData.detections[findBox].resultIndex : this.selectedChip)
+      },
+      box2cvs(boxInput) {
+        if (!boxInput) return []
+        const boxList = boxInput.length ? boxInput : [boxInput]
+        const [imCanvas, imageCtx] = this.resetView()
+        var imgWidth
+        var imgHeight
+        const imgAspect = this.imageView.width / this.imageView.height
+        const rendAspect = imCanvas.width / imCanvas.height
+        if (imgAspect >= rendAspect) {
+          imgWidth = imCanvas.width
+          imgHeight = imCanvas.width / imgAspect
+        } else {
+          imgWidth = imCanvas.height * imgAspect
+          imgHeight = imCanvas.height
+        }
+        const cvsCoords = boxList.map( (d, i) => {
+          return {
+            "cvsLeft": (imCanvas.width - imgWidth) / 2 + d.left * imgWidth,
+            "cvsRight": (imCanvas.width - imgWidth) / 2 + d.right * imgWidth,
+            "cvsTop": (imCanvas.height - imgHeight) / 2 + d.top * imgHeight,
+            "cvsBottom": (imCanvas.height - imgHeight) / 2 + d.bottom * imgHeight
+          }
+        })
+        return cvsCoords
      }
    }
  }
--- a/src/pages/detection-mixin.js
+++ b/src/pages/detection-mixin.js
@@ -0,0 +1,151 @@
+import * as tf  from '@tensorflow/tfjs'
+import { f7 } from 'framework7-vue'
+import { nextTick } from 'vue'
+
+var model = null
+
+export default {
+  methods: {
+    async loadModel(weights) {
+      await nextTick()
+      model = await tf.loadGraphModel(weights)
+      const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
+      const dummyT = tf.ones([1,modelWidth,modelHeight,3])
+      model.predict(dummyT) //Run model once to preload weights for better response time
+      return model
+    },
+    async localDetect(imageData) {
+      console.time('pre-process')
+      const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
+      const input = tf.tidy(() => {
+        return tf.image.resizeBilinear(tf.browser.fromPixels(imageData), [modelWidth, modelHeight]).div(255.0).expandDims(0)
+      })
+      console.timeEnd('pre-process')
+
+      console.time('run prediction')
+      const res = model.predict(input)
+      console.timeEnd('run prediction')
+
+      console.time('post-process')
+      const detectAttempts = res.shape[2]
+      const outputSize = res.shape[1]
+      const rawRes = tf.transpose(res,[0,2,1]).dataSync()
+      let rawBoxes = []
+      let rawScores = []
+
+      for (var i = 0; i < detectAttempts; i++) {
+        var getBox = rawRes.slice((i * outputSize),(i * outputSize) + 4)
+        var boxCalc = [
+          (getBox[0] - (getBox[2] / 2)) / modelWidth,
+          (getBox[1] - (getBox[3] / 2)) / modelHeight,
+          (getBox[0] + (getBox[2] / 2)) / modelWidth,
+          (getBox[1] + (getBox[3] / 2)) / modelHeight,
+        ]
+        rawBoxes.push(boxCalc)
+        rawScores.push(rawRes.slice((i * outputSize) + 4,(i + 1) * outputSize))
+      }
+      const tBoxes = tf.tensor2d(rawBoxes)
+      let tScores = null
+      let boxes_data = []
+      let scores_data = []
+      let classes_data = []
+      for (var c = 0; c < outputSize - 4; c++) {
+        tScores = rawScores.map(x => x[c])
+        var validBoxes = await tf.image.nonMaxSuppressionAsync(tBoxes,tf.tensor1d(tScores),10,0.5,.05)
+        validBoxes = validBoxes.dataSync()
+        if (validBoxes) {
+          boxes_data.push(...rawBoxes.filter( (_, idx) => validBoxes.includes(idx)))
+          var outputScores = tScores.filter( (_, idx) => validBoxes.includes(idx))
+          scores_data.push(...outputScores)
+          classes_data.push(...outputScores.fill(c))
+        }
+      }
+
+      const valid_detections_data = classes_data.length
+      var output = {
+        detections: []
+      }
+      for (var i =0; i < valid_detections_data; i++) {
+        var [dLeft, dTop, dRight, dBottom] = boxes_data[i]
+        output.detections.push({
+          "top": dTop,
+          "left": dLeft,
+          "bottom": dBottom,
+          "right": dRight,
+          "label": this.detectorLabels[classes_data[i]].name,
+          "confidence": scores_data[i] * 100
+        })
+      }
+
+      tf.dispose(res)
+      tf.dispose(tBoxes)
+      console.timeEnd('post-process')
+
+      return output
+    },
+    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.onerror = function (e) {
+        f7.dialog.alert('ALVINN has encountered an unknown server error')
+        return
+      }
+      
+      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.')
+    }
+
+  }
+}
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -13,20 +13,16 @@
      <h4 style="text-align: center; margin: 0;">Veterinary Anatomy Edition</h4>
      <p style="text-align: center; margin: 0;">Select a region to begin.</p>
      <div class="region-grid">
-        <!--</f7-button><f7-button :class="`region-button thorax`" :href="'/detect/thorax/'">-->
-        <f7-button :class="`region-button thorax${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/thorax/'">
+        <f7-button :class="`region-button thorax${isAgreed && getRegions.includes('thorax') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('thorax') && '/detect/thorax/'">
          <RegionIcon class="region-image" :region="0" />
        </f7-button>
-        <!--<f7-button :class="`region-button abdomen${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/abdomen/'">-->
-        <f7-button :class="`region-button abdomen${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/abdomen/'">
+        <f7-button :class="`region-button abdomen${isAgreed && getRegions.includes('abdomen') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('abdomen') && '/detect/abdomen/'">
          <RegionIcon class="region-image" :region="1" />
        </f7-button>
-        <!--<f7-button :class="`region-button limbs${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/limbs/'">-->
-        <f7-button :class="`region-button limbs${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/limbs/'">
+        <f7-button :class="`region-button limbs${isAgreed && getRegions.includes('limbs') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('limbs') && '/detect/limbs/'">
          <RegionIcon class="region-image" :region="2" />
        </f7-button>
-        <!--<f7-button class="region-button headneck disabled" :href="siteSettings.siteAgreement && '/detect/head/'">-->
-        <f7-button class="region-button headneck disabled" :href="'/detect/head/'">
+        <f7-button :class="`region-button headneck${isAgreed && getRegions.includes('head') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('head') && '/detect/head/'">
          <RegionIcon class="region-image" :region="3" />
        </f7-button>
      </div>
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -15,6 +15,11 @@
            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
          </f7-list>
+          <span>Other servers</span>
+          <f7-list :dividers="true" :outline="true" :strong="true" :inset="true" style="width: calc(100% - 32px); margin-top: 0;">
+            <f7-list-item v-for="(port, add) in otherIp" :disabled="!serverSettings.use" :title="add" @click="setServerProps(add, port)">{{ port }}</f7-list-item>
+            <f7-list-item v-if="Object.keys(otherIp).length == 0" title="No previous server settings"></f7-list-item>
+          </f7-list>
          <f7-block-title medium>Dark Mode</f7-block-title>
          <f7-list style="width: 100%;">
            <f7-list-item title="Auto" :checked="themeSettings.darkMode == 'auto'" radio name="darkmode" radio-icon="end" @change="setDarkMode('auto')" ></f7-list-item>
@@ -36,16 +41,29 @@
              serverSettings: {
                use: false,
                address: '10.170.64.22',
-                port: '9001'
+                port: '9001',
+                previous: {}
              },
              themeSettings: {
                darkMode: 'auto'
              }
            }
        },
+        computed: {
+          otherIp () {
+            let filteredIps = {}
+            for (var oldIp in this.serverSettings.previous) {
+              if (oldIp != this.serverSettings.address) {
+                filteredIps[oldIp] = this.serverSettings.previous[oldIp]
+              }
+            }
+            return filteredIps
+          }
+        },
        created () {
            var loadServerSettings = localStorage.getItem('serverSettings')
            if (loadServerSettings) this.serverSettings =  JSON.parse(loadServerSettings)
+            if (!this.serverSettings.previous) this.serverSettings.previous = {}
            var loadThemeSettings = localStorage.getItem('themeSettings')
            if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
        },
@@ -54,6 +72,9 @@
                let saveSetting = new Promise(
                  (saved,failed) => {
                    try {
+                      if (this.serverSettings.use) {
+                        this.serverSettings.previous[this.serverSettings.address] = this.serverSettings.port
+                      }
                      localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
                      localStorage.setItem('themeSettings',JSON.stringify(this.themeSettings))
                      saved()
@@ -82,6 +103,10 @@
            setDarkMode (mode) {
              this.themeSettings.darkMode = mode
              f7.setDarkMode(mode)
+            },
+            setServerProps (add, port) {
+              this.serverSettings.address = add
+              this.serverSettings.port = port
            }
          }
        }
Author	SHA1	Message	Date
Justin Georgi	1cc76c5950	Update version to 0.4.0 Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-07 16:00:21 -07:00
Justin Georgi	091a38f7ab	Clear file input on image load Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-07 15:18:35 -07:00
Justin Georgi	5ec51d9ad9	Add hidden structures badge Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-07 14:52:48 -07:00
Justin Georgi	4d356df02a	Add stop camera button Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-07 14:41:58 -07:00
Justin Georgi	4af06f0fe5	Update thorax model and improve model performance (#125 ) Closes: #117 This bumps the thorax model from the yolo nano to the yolo sm (64 x 640 size) but greatly improves model performance by running a fake detection event on page load to get the model parameters in memory. As a result of that change a new loading message was required so the f7 preloader was switched out for an f7 progress bar and more messaging was added during various stages. The progress bar fixes the previous issue with the preloader. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: #125	2024-03-07 13:06:14 -07:00
Justin Georgi	0e99679e00	Fix PWA build errors Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-06 16:41:18 -07:00
Justin Georgi	1f25a75cec	Split detect.vue (#122 ) Closes: #112 New mixins for camera and detection (remote and local) and new css for detection page. Reviewed-on: #122	2024-03-06 14:36:27 -07:00
Justin Georgi	b00b5cf492	Add performance tracking to local detection Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-05 15:51:28 -07:00
Justin Georgi	5086a52849	Return to standard model folder locations Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-05 15:06:01 -07:00
Justin Georgi	77240fe9bf	Fix missing detection progress indicator on camera load Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-05 06:48:07 -07:00
Justin Georgi	7f9a7cb2d2	Cordova thorax model location update Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-04 17:18:15 -07:00
Justin Georgi	c452776689	Add better camera access for non-cordova deployments (#116 ) This adds direct javascript access to the camera (with permission requests). Capturing an image with the camera now happens right on the detect page and not a separate window. This also opens the possibility of live detection on the web app. Reviewed-on: Georgi_Lab/ALVINN_f7#116	2024-03-04 17:03:28 -07:00
Justin Georgi	239558194e	Cordova package upgrade Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-03-04 16:58:59 -07:00
Justin Georgi	069ad74e30	Add full yolov8 compatible post-processing (#115 ) This updates the local detection to yolov8-based models from the older yolov5 based models. This includes significant additional post-processing of the raw yolov8 output, but also means that the smaller nano yolo model is available as well as all of the updated ALVINN thorax training data. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#115	2024-03-04 15:03:20 -07:00
Justin Georgi	7f1aa63f07	Add site agreement expiration Closes: #88 Reviewed-on: Georgi_Lab/ALVINN_f7#111	2024-02-23 22:00:05 -07:00
Justin Georgi	e644aa26f0	Add PWA to README Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-02-22 20:28:45 -07:00
Justin Georgi	19a669dc98	Fix decoding error on android image load (#108 ) Closes: #105 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#108	2024-02-22 17:29:44 -07:00
Justin Georgi	6ff63bfd65	Release 0.3.0 Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-02-22 09:34:40 -07:00
Justin Georgi	45a86399e4	Fix chip results scroll bar always on Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-02-22 09:27:49 -07:00
Justin Georgi	72f2d5c488	Fix Cordova mobile and PWA model locations (#104 ) Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#104	2024-02-21 17:55:23 -07:00
Justin Georgi	ede015ef70	Fix results scrolling (#102 ) Closes: #96 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#102	2024-02-20 20:19:35 -07:00
Justin Georgi	55ecae0961	Fix structure box visibility errors (#101 ) Closes: #100 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#101	2024-02-20 20:08:16 -07:00
Justin Georgi	69ede91f7b	Fix fetch issue in android cordova (#99 ) Tensorflow fetch failed on android with basic configuration. More specific protocol and location for model.json required. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#99	2024-02-20 08:44:37 -07:00
Justin Georgi	79d2d1bc83	Add contact form (#98 ) Closes: #92 This adds a new link to the left panel to open a contact form. Filling out the form will allow the user to submit a comment which will be registered as a new issue on this repo. Reviewed-on: Georgi_Lab/ALVINN_f7#98	2024-02-16 21:49:54 -07:00
Justin Georgi	94d4bbb979	Add Tensorflow based local detection (#95 ) Closes: #12 Reviewed-on: Georgi_Lab/ALVINN_f7#95	2024-02-14 19:42:32 -07:00
Justin Georgi	7757d2348a	Release version number update Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-02-11 11:59:58 -07:00
Justin Georgi	3c287bf5e5	Add enabled regions to store (#93 ) Closes: #91 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#93	2024-02-11 10:51:16 -07:00
Justin Georgi	d99db4f337	Update version number to 0.2.0 Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-02-09 14:24:39 -07:00
Justin Georgi	bbe1db82e1	Add default server settings for MWU deployment (#90 ) Closes: #86 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#90	2024-02-09 14:00:05 -07:00
Justin Georgi	7617c277b0	Fix sizing issues on Safari (#89 ) Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#89	2024-02-09 10:38:24 -07:00
Justin Georgi	741a59f5c5	Improve request error handling (#87 ) Closes: #79 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#87	2024-02-05 15:16:41 -07:00
Justin Georgi	8f4984e543	Update ReadMe (#85 ) Closes: #83 First draft of a new ALVINN specific readme file. Reviewed-on: Georgi_Lab/ALVINN_f7#85	2024-01-31 17:41:39 -07:00
Justin Georgi	679e61a241	Update some icons (#84 ) Each region now has an appropriate placeholder image instead of a generic image and the get image button is a more obvious icon. Reviewed-on: Georgi_Lab/ALVINN_f7#84	2024-01-30 08:48:10 -07:00
Justin Georgi	09cb078f63	Fix structure box errors (#82 ) Closes: #80 Closes: #81 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#82	2024-01-27 17:12:58 -07:00
Justin Georgi	39975ec35b	Select detections by image click (#78 ) Closes: #77 If the user clocks on the image, any detections present at that location will be selecting in descending order of confidence. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#78	2024-01-22 10:51:50 -07:00
Justin Georgi	d7842f907f	Store list of used doods servers in settings (#76 ) Closes: #75 Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#76	2024-01-16 21:31:33 -07:00
Justin Georgi	df424420d3	Fix back-link boolean value Navbar back -link was "true" not `true`. Signed-off-by: Justin Georgi <justin.georgi@gmail.com>	2024-01-12 21:30:41 -07:00
Justin Georgi	712c3d90c7	Add preloader animation (#72 ) Closes: #70 Adds a prelaoder animation to the results container while the image is loading and being processed for detections. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#72	2024-01-12 21:29:14 -07:00