Add specs page and link from version in panel (#130)

Closes: #126

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

Reviewed-on: #130

src/components/app.vue

@@ -7,11 +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/" view=".view-main"  panel-close=".panel-left">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.4.0</span>
+          <f7-link href="/specs/">version {{ alvinnVersion }}</f7-link>
         </f7-toolbar>
       </f7-page>
     </f7-view>
@@ -66,7 +66,8 @@
         rememberAgreement: false,
         siteAgreement: false,
         dateAgreement: null,
-        showDisclaimer: true
+        showDisclaimer: true,
+        alvinnVersion: store().getVersion
       }
     },
     created () {

src/js/routes.js

@@ -4,6 +4,7 @@ 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 SpecsPage from  '../pages/specs.vue';
 
 import NotFoundPage from '../pages/404.vue';
 
@@ -16,6 +17,10 @@ var routes = [
     path: '/about/',
     component: AboutPage,
   },
+  {
+    path: '/specs/',
+    component: SpecsPage,
+  },
   {
     path: '/detect/:region/',
     component: DetectPage,

src/js/store.js

@@ -2,7 +2,8 @@ import { reactive, computed } from 'vue';
 
 const state = reactive({
     disclaimerAgreement: false,
-    enabledRegions: ['thorax','abdomen','limbs']
+    enabledRegions: ['thorax','abdomen','limbs'],
+    version: '0.4.0'
   })
 
 const agree = () => {
@@ -12,5 +13,6 @@ const agree = () => {
 export default () => ({
   isAgreed: computed(() => state.disclaimerAgreement),
   getRegions: computed(() => state.enabledRegions),
+  getVersion: computed(() => state.version),
   agree
 })

src/models/thorax/descript.json

@@ -0,0 +1,10 @@
+{
+  "version": "0.1.0-s1",
+  "region": "Thorax",
+  "size": 640,
+  "epochs": 1000,
+  "name": "small1",
+  "yolo-version": "8.1.20 docker",
+  "date": "2024-03-07",
+  "export": "0.1.0-th"
+}

src/pages/about.vue

@@ -1,8 +1,8 @@
 <template>
   <f7-page name="about">
     <f7-navbar title="About" back-link="Back"></f7-navbar>
-    <f7-block-title>About A.L.V.I.N.N.</f7-block-title>
     <f7-block>
+      <h2>About A.L.V.I.N.N.</h2>
       <p>
         ALVINN is an object detection neural network specializing in the identification of anatomical structures from imagery of dissected, embalmed specimens in anatomy teaching labratories.
         ALVINN is intended as a learning aid only; it is not a tool for medical diagnosis, intervention, or treatment.

src/pages/detect.vue

@@ -116,8 +116,6 @@
   import detectionMixin from './detection-mixin'
   import cameraMixin from './camera-mixin'
 
-  import thoraxClasses from '../models/thorax/classes.json'
-
   export default {
     mixins: [submitMixin, detectionMixin, cameraMixin],
     props: {
@@ -162,7 +160,7 @@
         case 'thorax':
           this.activeRegion = 0
           this.detectorName = 'thorax'
-          this.classesList = thoraxClasses
+          //this.classesList = thoraxClasses
           /* VITE setting */
           this.modelLocation = '../models/thorax/model.json'
           /* PWA Build setting */
@@ -181,6 +179,10 @@
           this.activeRegion = 3
           break;
       }
+      import(`../models/${this.detectorName}/classes.json`).then((mod) => {
+        this.classesList = mod.default
+        this.detectorLabels = this.classesList.map( l => { return {'name': l, 'detect': true} } )
+      })
       var loadServerSettings = localStorage.getItem('serverSettings')
       if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
     },
@@ -190,7 +192,6 @@
         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) => {

src/pages/specs.vue

@@ -0,0 +1,49 @@
+<template>
+  <f7-page name="specs">
+    <f7-navbar :sliding="false" back-link="Back">
+      <f7-nav-title sliding>Tech Specs</f7-nav-title>
+    </f7-navbar>
+    <f7-block style="display: flex; flex-direction: column; align-items: center;">
+      <div style="display: flex; flex-direction: column; align-items: center;">
+        <f7-block-title medium>Details</f7-block-title>
+        <f7-list>
+          <f7-list-item title="Version" :after="alvinnVersion"></f7-list-item>
+        </f7-list>
+        <f7-block-title medium>Models</f7-block-title>
+        <f7-list style="width: 100%;">
+          <f7-list-item title="Thorax" :after="thoraxDetails.version"></f7-list-item>
+          <f7-list-item title="Abdomen/Pelvis" :after="abdomenDetails.version"></f7-list-item>
+          <f7-list-item title="Limbs" :after="limbsDetails.version"></f7-list-item>
+          <f7-list-item title="Head/Neck" :after="headneckDetails.version"></f7-list-item>
+        </f7-list>
+      </div>
+    </f7-block>
+  </f7-page>
+</template>
+
+<script>
+  import store from '../js/store'
+
+  export default {
+    data () {
+      return {
+        thoraxDetails: {},
+        abdomenDetails: { "version": "Model not available" },
+        limbsDetails: { "version": "Model not available" },
+        headneckDetails: { "version": "Model not available" },
+        alvinnVersion: store().getVersion
+      }
+    },
+    setup() {
+      return store()
+    },
+    created () {
+      import('../models/thorax/descript.json')
+        .then((mod) => {
+          this.thoraxDetails = mod.default
+        })
+    },
+    methods: {
+    }
+  }
+</script>