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/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>