Add yaml format config file

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

f7_info.md

@@ -32,7 +32,7 @@ Framework7 app created with following options:
   },
   "theming": {
     "customColor": true,
-    "color": "#002f65",
+    "color": "#0f206c",
     "darkMode": false,
     "iconFonts": true
   },

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "alvinn",
-  "version": "0.4.0",
+  "version": "0.5.0-rc",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "alvinn",
-      "version": "0.4.0",
+      "version": "0.5.0-rc",
       "hasInstallScript": true,
       "license": "UNLICENSED",
       "dependencies": {
@@ -17,7 +17,8 @@
         "framework7-vue": "^8.3.0",
         "skeleton-elements": "^4.0.1",
         "swiper": "^11.0.3",
-        "vue": "^3.3.8"
+        "vue": "^3.3.8",
+        "yaml": "^2.4.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.4.1",
@@ -9844,6 +9845,17 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
+      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
@@ -16397,6 +16409,11 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "yaml": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
+      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg=="
+    },
     "yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",

package.json

@@ -30,7 +30,8 @@
     "framework7-vue": "^8.3.0",
     "skeleton-elements": "^4.0.1",
     "swiper": "^11.0.3",
-    "vue": "^3.3.8"
+    "vue": "^3.3.8",
+    "yaml": "^2.4.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.4.1",

public/conf/conf.yaml

@@ -0,0 +1,9 @@
+site:
+  demo: true
+  regions:
+    - thorax
+    - abdomen
+    - limbs
+external:
+  address: "10.188.0.98"
+  port: 9001

public/models/limbs-mini/descript.json

@@ -0,0 +1,10 @@
+{
+  "version": "0.0.1-n1",
+  "region": "Yolov8",
+  "size": 640,
+  "epochs": "NA",
+  "name": "nano1",
+  "yolo-version": "8.1.20 docker",
+  "date": "2024-03-28",
+  "export": "yolov8n.pt"
+}

public/models/limbs-mini/metadata.yaml

@@ -0,0 +1,92 @@
+description: Ultralytics YOLOv8n model trained on coco.yaml
+author: Ultralytics
+license: AGPL-3.0 https://ultralytics.com/license
+date: '2024-03-28T19:04:56.039396'
+version: 8.1.20
+stride: 32
+task: detect
+batch: 1
+imgsz:
+- 640
+- 640
+names:
+  0: person
+  1: bicycle
+  2: car
+  3: motorcycle
+  4: airplane
+  5: bus
+  6: train
+  7: truck
+  8: boat
+  9: traffic light
+  10: fire hydrant
+  11: stop sign
+  12: parking meter
+  13: bench
+  14: bird
+  15: cat
+  16: dog
+  17: horse
+  18: sheep
+  19: cow
+  20: elephant
+  21: bear
+  22: zebra
+  23: giraffe
+  24: backpack
+  25: umbrella
+  26: handbag
+  27: tie
+  28: suitcase
+  29: frisbee
+  30: skis
+  31: snowboard
+  32: sports ball
+  33: kite
+  34: baseball bat
+  35: baseball glove
+  36: skateboard
+  37: surfboard
+  38: tennis racket
+  39: bottle
+  40: wine glass
+  41: cup
+  42: fork
+  43: knife
+  44: spoon
+  45: bowl
+  46: banana
+  47: apple
+  48: sandwich
+  49: orange
+  50: broccoli
+  51: carrot
+  52: hot dog
+  53: pizza
+  54: donut
+  55: cake
+  56: chair
+  57: couch
+  58: potted plant
+  59: bed
+  60: dining table
+  61: toilet
+  62: tv
+  63: laptop
+  64: mouse
+  65: remote
+  66: keyboard
+  67: cell phone
+  68: microwave
+  69: oven
+  70: toaster
+  71: sink
+  72: refrigerator
+  73: book
+  74: clock
+  75: vase
+  76: scissors
+  77: teddy bear
+  78: hair drier
+  79: toothbrush

public/models/limbs/classes.json

@@ -0,0 +1,82 @@
+[
+  "person",
+  "bicycle",
+  "car",
+  "motorcycle",
+  "airplane",
+  "bus",
+  "train",
+  "truck",
+  "boat",
+  "traffic light",
+  "fire hydrant",
+  "stop sign",
+  "parking meter",
+  "bench",
+  "bird",
+  "cat",
+  "dog",
+  "horse",
+  "sheep",
+  "cow",
+  "elephant",
+  "bear",
+  "zebra",
+  "giraffe",
+  "backpack",
+  "umbrella",
+  "handbag",
+  "tie",
+  "suitcase",
+  "frisbee",
+  "skis",
+  "snowboard",
+  "sports ball",
+  "kite",
+  "baseball bat",
+  "baseball glove",
+  "skateboard",
+  "surfboard",
+  "tennis racket",
+  "bottle",
+  "wine glass",
+  "cup",
+  "fork",
+  "knife",
+  "spoon",
+  "bowl",
+  "banana",
+  "apple",
+  "sandwich",
+  "orange",
+  "broccoli",
+  "carrot",
+  "hot dog",
+  "pizza",
+  "donut",
+  "cake",
+  "chair",
+  "couch",
+  "potted plant",
+  "bed",
+  "dining table",
+  "toilet",
+  "tv",
+  "laptop",
+  "mouse",
+  "remote",
+  "keyboard",
+  "cell phone",
+  "microwave",
+  "oven",
+  "toaster",
+  "sink",
+  "refrigerator",
+  "book",
+  "clock",
+  "vase",
+  "scissors",
+  "teddy bear",
+  "hair drier",
+  "toothbrush"
+]

public/models/limbs/descript.json

@@ -0,0 +1,10 @@
+{
+  "version": "0.0.1-s1",
+  "region": "Yolov8",
+  "size": 640,
+  "epochs": "NA",
+  "name": "small1",
+  "yolo-version": "8.1.20 docker",
+  "date": "2024-03-28",
+  "export": "yolov8s.pt"
+}

public/models/limbs/metadata.yaml

@@ -0,0 +1,92 @@
+description: Ultralytics YOLOv8s model trained on coco.yaml
+author: Ultralytics
+license: AGPL-3.0 https://ultralytics.com/license
+date: '2024-03-28T18:46:16.622181'
+version: 8.1.20
+stride: 32
+task: detect
+batch: 1
+imgsz:
+- 640
+- 640
+names:
+  0: person
+  1: bicycle
+  2: car
+  3: motorcycle
+  4: airplane
+  5: bus
+  6: train
+  7: truck
+  8: boat
+  9: traffic light
+  10: fire hydrant
+  11: stop sign
+  12: parking meter
+  13: bench
+  14: bird
+  15: cat
+  16: dog
+  17: horse
+  18: sheep
+  19: cow
+  20: elephant
+  21: bear
+  22: zebra
+  23: giraffe
+  24: backpack
+  25: umbrella
+  26: handbag
+  27: tie
+  28: suitcase
+  29: frisbee
+  30: skis
+  31: snowboard
+  32: sports ball
+  33: kite
+  34: baseball bat
+  35: baseball glove
+  36: skateboard
+  37: surfboard
+  38: tennis racket
+  39: bottle
+  40: wine glass
+  41: cup
+  42: fork
+  43: knife
+  44: spoon
+  45: bowl
+  46: banana
+  47: apple
+  48: sandwich
+  49: orange
+  50: broccoli
+  51: carrot
+  52: hot dog
+  53: pizza
+  54: donut
+  55: cake
+  56: chair
+  57: couch
+  58: potted plant
+  59: bed
+  60: dining table
+  61: toilet
+  62: tv
+  63: laptop
+  64: mouse
+  65: remote
+  66: keyboard
+  67: cell phone
+  68: microwave
+  69: oven
+  70: toaster
+  71: sink
+  72: refrigerator
+  73: book
+  74: clock
+  75: vase
+  76: scissors
+  77: teddy bear
+  78: hair drier
+  79: toothbrush

src/components/app.vue

@@ -52,13 +52,15 @@
 </style>
 
 <script>
-  import { ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue'
-  import { f7, f7ready } from 'framework7-vue';
+  import { f7, f7ready } from 'framework7-vue'
-  import { getDevice }  from 'framework7/lite-bundle';
+  import { getDevice }  from 'framework7/lite-bundle'
-  import cordovaApp from '../js/cordova-app.js';
+  import cordovaApp from '../js/cordova-app.js'
 
-  import routes from '../js/routes.js';
+  import YAML from 'yaml'
-  import store from '../js/store';
+
+  import routes from '../js/routes.js'
+  import store from '../js/store'
 
   export default {
     data () {
@@ -67,10 +69,17 @@
         siteAgreement: false,
         dateAgreement: null,
         showDisclaimer: true,
-        alvinnVersion: store().getVersion
+        alvinnVersion: store().getVersion,
+        siteConf: {}
       }
     },
     created () {
+      fetch(`${!!window.cordova ? 'https://localhost' : '.'}/conf/conf.yaml`)
+        .then((mod) => { return mod.text() })
+        .then((confText) => {
+          this.siteConf = YAML.parse(confText)
+          console.log(this.siteConf)
+        })
       var loadSiteSettings = localStorage.getItem('siteSettings')
       if (loadSiteSettings) {
         var loadedSettings = JSON.parse(loadSiteSettings)
@@ -137,7 +146,7 @@
         theme: 'auto', // Automatic theme detection
         darkMode: darkTheme,
         colors: {
-          primary: '#002f65',
+          primary: '#0f206c',
         },
 
         // App routes

src/css/app.css

@@ -8,6 +8,7 @@ html {
   --avn-theme-color: #0f206c;
   --avn-button-bg-color: #d9d8d6;
   --avn-structure-box-color: yellow;
+  --f7-theme-color: var(--avn-theme-color) !important;
 }
 
 .dark {

src/css/detect.css

@@ -43,6 +43,12 @@
   background: var(--chip-media-gradient) !important;
 }
 
+.chip-label {
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
 .chip-results {
   display: flex;
   flex-wrap: wrap;

src/js/store.js

@@ -3,9 +3,14 @@ import { reactive, computed } from 'vue';
 const state = reactive({
     disclaimerAgreement: false,
     enabledRegions: ['thorax','abdomen','limbs'],
-    version: '0.5.0-rc'
+    version: '0.5.0-rc',
+    siteConfig: {}
   })
 
+const setConfig = (confObj) => {
+  state.siteConfig = confObj
+}
+
 const agree = () => {
   state.disclaimerAgreement = true
 }
@@ -14,5 +19,7 @@ export default () => ({
   isAgreed: computed(() => state.disclaimerAgreement),
   getRegions: computed(() => state.enabledRegions),
   getVersion: computed(() => state.version),
+  getConfig: computed(() => state.siteConfig),
+  setConfig,
   agree
 })

src/manifest.json

@@ -4,9 +4,9 @@
   "description": "ALVINN",
   "lang": "en-US",
   "start_url": "/",
-  "display": "standalone",
+  "display": "fullscreen",
-  "background_color": "#002f65",
+  "background_color": "#0f206c",
-  "theme_color": "#002f65",
+  "theme_color": "#0f206c",
   "icons": [
     {
       "src": "../icons/128x128.png",

src/pages/about.vue

@@ -11,7 +11,7 @@
         All of the images in ALVINN's models have been collected by students and faculty of Midwestern University's anatomy classes.
       </p>
       <p>
-        Source code for ALVINN can be <f7-link :external="true" target="_blank" href="https://gitea.azgeorgis.net/ALVINN/ALVINN_f7/issues">found here</f7-link>.
+        Source code for ALVINN can be <f7-link :external="true" target="_blank" href="https://gitea.azgeorgis.net/ALVINN/ALVINN_f7">found here</f7-link>.
       </p>
       <h3>Credits</h3>
       <p>

src/pages/detect.vue

@@ -168,18 +168,16 @@
       let loadOtherSettings = localStorage.getItem('otherSettings')
       if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
       let modelRoot = this.isCordova ? 'https://localhost' : '.'
-      switch (this.f7route.params.region) {
+      this.detectorName = this.f7route.params.region
+      switch (this.detectorName) {
         case 'thorax':
           this.activeRegion = 0
-          this.detectorName = 'thorax'
           break;
         case 'abdomen':
           this.activeRegion = 1
-          this.detectorName = 'abdomen'
           break;
         case 'limbs':
           this.activeRegion = 2
-          this.detectorName = 'defaultNew'
           break;
         case 'head':
           this.activeRegion = 3