Connect detect page to model server for results (#16)

Closes #3

Allows for configuration of model server settings (address and port) and can dynamically select the model based on the detection page selected.

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

Reviewed-on: Georgi_Lab/ALVINN_f7#16

src/assets/icons/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#002F65" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>

src/assets/icons/videocam.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#002F65" height="24" viewBox="0 -960 960 960" width="24"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Zm0-80h480v-480H160v480Zm0 0v-480 480Z"/></svg>

src/assets/icons/visibility.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#002F65" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>

src/assets/regions/abdpel.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
+ <g stroke="#002f65" stroke-width=".264583px">
+  <path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none"/>
+  <path d="m15.156751 8.9427562c-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.048468 0.384152 0.1456587 0.866125 0.2843915 1.431499 0.7210773 0.130029 2.5390772 0.501293 3.0586462 0.563846 0.613348 0.03006 1.528237 0.20676 2.05877 0.334503 0.563462-1.044613 0.536275-0.982536 2.57701-4.4457368z" fill="#002f65" fill-rule="evenodd"/>
+ </g>
+</svg>

src/assets/regions/headneck.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
+ <g stroke="#002f65" stroke-width=".264583px">
+  <path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
+  <path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849 0.566485 0.8398567 1.254642 1.7575311 2.167098 2.9799951 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="#002f65" fill-rule="evenodd"/>
+ </g>
+</svg>

src/assets/regions/limb.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
+ <g stroke="#002f65" stroke-width=".264583px">
+  <path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
+  <path d="m17.24251 14.457023c0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-3.100189-4.8581326-4.866767-0.394712-3.172492 3.208384z" fill="#002f65" fill-rule="evenodd" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
+  <path d="m7.1779333 11.058645c0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.1562-5.4517681-2.8350883-3.4878487-3.3430377-1.995345z" fill="#002f65" fill-rule="evenodd" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
+ </g>
+</svg>

src/assets/regions/thorax.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
+ <g stroke="#002F65" stroke-width=".264583px">
+  <path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none" />
+  <path d="m18.247904 8.2686439c-0.987966 0.103956-3.091153 0.6741123-3.091153 0.6741123-1.652395 2.7995828-2.197177 3.7434008-2.550516 4.3811848 0 0 3.039112 0.665488 4.636275 1.133082-3e-3 0.01385 2.049744 0.445884 2.049744 0.445884s0.707693-1.135262 1.002776-2.188396c0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-0.291029-0.377705-1.38593-1.9038754-2.167098-2.9799951z" fill-rule="evenodd" fill="#002F65" />
+ </g>
+</svg>

src/components/app.vue

@@ -6,7 +6,10 @@
     <f7-view>
       <f7-page>
         <f7-navbar title="ALVINN"></f7-navbar>
-        <f7-block>Menu Settings Here</f7-block>
+        <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>
       </f7-page>
     </f7-view>
   </f7-panel>
@@ -15,20 +18,22 @@
   <f7-view main class="safe-areas" url="/"></f7-view>
 
     <!-- Popup -->
-    <f7-popup id="my-popup">
+    <f7-popover id="region-popover">
-      <f7-view>
+      <f7-segmented raised style="flex-wrap: wrap; flex-direction: column;">
-        <f7-page>
+        <f7-button style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
-          <f7-navbar title="Popup">
+          <img src="../assets/regions/thorax.svg" />
-            <f7-nav-right>
+        </f7-button>
-              <f7-link popup-close>Close</f7-link>
+        <f7-button style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
-            </f7-nav-right>
+          <img src="../assets/regions/abdpel.svg" />
-          </f7-navbar>
+        </f7-button>
-          <f7-block>
+        <f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
-            <p>Popup content goes here.</p>
+          <img src="../assets/regions/limb.svg" />
-          </f7-block>
+        </f7-button>
-        </f7-page>
+        <f7-button style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
-      </f7-view>
+          <img src="../assets/regions/headneck.svg" />
-    </f7-popup>
+        </f7-button>
+      </f7-segmented>
+    </f7-popover>
 
   </f7-app>
 </template>
@@ -72,6 +77,15 @@
           iosOverlaysWebView: true,
           androidOverlaysWebView: false,
         },
+        // Navbar settings
+        navbar: {
+          mdCenterTitle: true,
+          iosCenterTitle: true,
+        },
+        // Dialog settings
+        dialog: {
+          title: 'ALVINN'
+        }
       };
       onMounted(() => {
         f7ready(() => {

src/css/app.css

@@ -4,3 +4,16 @@
 }
 
 /* Your app custom styles here */
+.view-main {
+  --f7-theme-color: #002F65;
+}
+
+
+.navbar {
+  --f7-navbar-text-color: #002F65;
+  --f7-navbar-link-color: #002F65;
+}
+
+.navbar-bg {
+  --f7-navbar-bg-color: #BDBCAF;
+}

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="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:">
+  <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 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">

src/js/routes.js

@@ -1,9 +1,10 @@
 
 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 DynamicRoutePage from '../pages/dynamic-route.vue';
-import RequestAndLoad from '../pages/request-and-load.vue';
 import NotFoundPage from '../pages/404.vue';
 
 var routes = [
@@ -15,59 +16,20 @@ var routes = [
     path: '/about/',
     component: AboutPage,
   },
+  {
+    path: '/detect/:region/',
+    component: DetectPage,
+  },
+  {
+    path: '/settings/',
+    component: SettingsPage,
+  },
 
 
   {
     path: '/dynamic-route/blog/:blogId/post/:postId/',
     component: DynamicRoutePage,
   },
-  {
-    path: '/request-and-load/user/:userId/',
-    async: function ({ router, to, resolve }) {
-      // App instance
-      var app = router.app;
-
-      // Show Preloader
-      app.preloader.show();
-
-      // User ID from request
-      var userId = to.params.userId;
-
-      // Simulate Ajax Request
-      setTimeout(function () {
-        // We got user data from request
-        var user = {
-          firstName: 'Vladimir',
-          lastName: 'Kharlampidi',
-          about: 'Hello, i am creator of Framework7! Hope you like it!',
-          links: [
-            {
-              title: 'Framework7 Website',
-              url: 'http://framework7.io',
-            },
-            {
-              title: 'Framework7 Forum',
-              url: 'http://forum.framework7.io',
-            },
-          ]
-        };
-        // Hide Preloader
-        app.preloader.hide();
-
-        // Resolve route to load page
-        resolve(
-          {
-            component: RequestAndLoad,
-          },
-          {
-            props: {
-              user: user,
-            }
-          }
-        );
-      }, 1000);
-    },
-  },
   {
     path: '(.*)',
     component: NotFoundPage,

src/pages/404.vue

@@ -3,7 +3,7 @@
     <f7-navbar title="Not found" back-link="Back"></f7-navbar>
     <f7-block strong inset>
       <p>Sorry</p>
-      <p>Requested content not found.</p>
+      <p>A.L.V.I.N.N. can find many things, but not the page you've requested.</p>
     </f7-block>
   </f7-page>
 </template>

src/pages/about.vue

@@ -1,22 +1,21 @@
 <template>
   <f7-page name="about">
     <f7-navbar title="About" back-link="Back"></f7-navbar>
-    <f7-block-title>About My App</f7-block-title>
+    <f7-block-title>About A.L.V.I.N.N.</f7-block-title>
     <f7-block>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium
+        ALVINN is an object detection neural network specializing in the identification of anatomical structures from imagery of dissected, embalmed specimens in anatomy teaching labratories.
-        dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe
+        ALVINN is intended as a learning aid only; it is not a tool for medical diagnosis, intervention, or treatment.
-        iste consectetur in repellat ut minus quibusdam!
       </p>
       <p>
-        Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis,
+        All of the images in ALVINN's models have been collected by students and faculty of Midwestern University's anatomy classes.
-        aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius,
-        velit corrupti reprehenderit dignissimos consequatur!
       </p>
       <p>
-        Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam
+        ALVINN is conceived and created by Justin Georgi.
-        eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto
+        Other contributions from:
-        doloribus a at! Ea molestiae ullam delectus!
+        <ul>
+          <li>Alexandra Davis</li>
+        </ul>
       </p>
     </f7-block>
   </f7-page>

src/pages/detect.vue

@@ -0,0 +1,177 @@
+<template>
+    <f7-page name="detect">
+      <!-- Top Navbar -->
+      <f7-navbar :sliding="false" back-link="Back">
+        <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
+      </f7-navbar>
+      <f7-block style="display: flex; justify-content: flex-start; flex-direction: column; align-items: stretch; height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom)); box-sizing: border-box; width: 100vw;">
+        <img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100vw; min-height: 0;" />
+        <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
+        <f7-segmented class="image-menu" raised style="margin: 5px; width: 50%; max-width: 400px; min-width: 192px; flex: 0 0 auto;">
+            <f7-button popover-open="#region-popover">
+                <img :src="imageRegion" style="height: 100%;" />
+            </f7-button>
+            <f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
+                <img src="../assets/icons/visibility.svg" style="height: 100%;" />
+            </f7-button>
+            <f7-button @click="selectImage">
+                <img src="../assets/icons/image.svg" style="height: 100%;" />
+            </f7-button>
+            <f7-button @click="setData">
+                <img src="../assets/icons/videocam.svg" style="height: 100%;" />
+            </f7-button>
+        </f7-segmented>
+        <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
+        <div v-if="resultData && resultData.detections" class="chip-results" style="flex: 0 0 auto; align-self: center;">
+            <f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
+        </div>
+      </f7-block>
+    </f7-page>
+</template>
+
+<style>
+    .chip-results {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+        --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(--f7-theme-color);
+        transform: translate(-2px, -2px);
+    }
+
+    .image-menu .button {
+        aspect-ratio: 1;
+        height: auto;
+        padding: 5px;
+    }
+</style>
+
+<script>
+    import { f7 } from 'framework7-vue'
+
+    export default {
+        props: {
+            f7route: Object,
+        },
+        data () {
+            return {
+            regions: ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck'],
+            resultData: {},
+            selectedChip: -1,
+            activeRegion: 4,
+            imageRegion: '',
+            imageLoaded: false,
+            imageView: '../assets/icons/image.svg',
+            reader: new FileReader(),
+            detectorName: ''
+            }
+        },
+        created () {
+            switch (this.f7route.params.region) {
+                case 'thorax':
+                this.activeRegion = 0
+                this.imageRegion = '../assets/regions/thorax.svg'
+                this.detectorName = 'thorax'
+                    break;
+                case 'abdomen':
+                this.activeRegion = 1
+                this.imageRegion = '../assets/regions/abdpel.svg'
+                this.detectorName = 'combined'
+                    break;
+                case 'limbs':
+                this.activeRegion = 2
+                this.imageRegion = '../assets/regions/limb.svg'
+                this.detectorName = 'defaultNew'
+                    break;
+                case 'head':
+                this.activeRegion = 3
+                this.imageRegion = '../assets/regions/headneck.svg'
+                    break;
+            }
+        },
+        methods: {
+            chipColor (confVal) {
+                if (confVal >= 90) return 'green'
+                if (confVal >= 70) return 'lime'
+                return 'yellow'
+            },
+            setData () {
+                var self = this
+                var loadServerSettings = localStorage.getItem('serverSettings')
+                if (loadServerSettings) var serverSettings = JSON.parse(loadServerSettings)
+                if (serverSettings && serverSettings.use) {
+                    var modelURL = `http://${serverSettings.address}:${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(this.response)
+                            return;
+                        }
+                        self.resultData = JSON.parse(this.response)
+                    }
+                    
+                    var doodsData = {
+                        "detector_name": this.detectorName,
+                        "detect": {
+                            "*":50
+                        }
+                    }
+                    doodsData.data = this.reader.result.split(',')[1]
+
+                    xhr.send(JSON.stringify(doodsData))
+                } else {
+                    f7.dialog.alert('Using built-in model')
+                }
+            },
+            selectImage () {
+                var loadResult = this.$refs.image_chooser.click()
+            },
+            selectChip ( iChip ) {
+                var imgWidth
+                var imgHeight
+
+                this.selectedChip = iChip
+                const box = this.$refs.structure_box
+                const img = this.$refs.image_src
+                var imgAspect = img.naturalWidth / img.naturalHeight
+                var rendAspect = img.offsetWidth / img.offsetHeight
+                if (imgAspect >= rendAspect) {
+                    imgWidth = img.offsetWidth
+                    imgHeight = img.offsetWidth / imgAspect
+                } else {
+                    imgWidth = img.offsetHeight * imgAspect
+                    imgHeight = img.offsetHeight
+                }
+                box.style.display = "block"
+                box.style.left = `${(img.offsetWidth - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth}px`
+                box.style.top = `${(img.offsetHeight - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight}px`
+                box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * imgWidth}px`
+                box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * imgHeight}px`
+            },
+            deleteChip ( iChip ) {
+                f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {
+                    this.resultData.detections.splice(iChip, 1)
+                });
+            },
+            getImage () {
+                const example = this.$refs.image_chooser.files[0];
+                this.imageView = URL.createObjectURL(example);
+                this.reader.readAsDataURL(example)
+                this.imageLoaded = true;
+            }
+        }
+    }
+</script>

src/pages/home.vue

@@ -1,53 +1,31 @@
 <template>
   <f7-page name="home">
     <!-- Top Navbar -->
-    <f7-navbar large :sliding="false">
+    <f7-navbar>
       <f7-nav-left>
         <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
       </f7-nav-left>
-      <f7-nav-title sliding>ALVINN</f7-nav-title>
+      <f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title>
-      <f7-nav-title-large>A.L.V.I.N.N.</f7-nav-title-large>
     </f7-navbar>
-    <!-- Toolbar-->
-    <f7-toolbar bottom>
-      <f7-link>Left Link</f7-link>
-      <f7-link>Right Link</f7-link>
-    </f7-toolbar>
     <!-- Page content-->
     <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;">
       <h2>Anatomy Lab Visual Identification Neural Network</h2>
       <h4>Veterinary Anatomy Edition</h4>
       <p>Select a region to begin</p>
-      <f7-row style="display: flex;">
+      <f7-segmented raised style="flex-wrap: wrap;">
-        <f7-button text="thorax"></f7-button>
+        <f7-button style="height: auto; width: auto;" href="/detect/thorax/">
-        <f7-button text="abdomen"></f7-button>
+          <img src="../assets/regions/thorax.svg" />
-        <f7-button text="limbs"></f7-button>
+        </f7-button>
-        <f7-button text="head and neck"></f7-button>
+        <f7-button style="height: auto; width: auto;" href="/detect/abdomen/">
-      </f7-row>
+          <img src="../assets/regions/abdpel.svg" />
+        </f7-button>
+        <f7-button style="height: auto; width: auto;" href="/detect/limbs/">
+          <img src="../assets/regions/limb.svg" />
+        </f7-button>
+        <f7-button style="height: auto; width: auto;" href="/detect/head/">
+          <img src="../assets/regions/headneck.svg" />
+        </f7-button>
+      </f7-segmented>
     </div>
-    <f7-block-title>Navigation</f7-block-title>
-    <f7-list strong inset dividersIos>
-      <f7-list-item link="/about/" title="About"></f7-list-item>
-    </f7-list>
-
-    <f7-block-title>Modals</f7-block-title>
-    <f7-block class="grid grid-cols-2 grid-gap">
-      <f7-button fill popup-open="#my-popup">Popup</f7-button>
-    </f7-block>
-
-    <f7-list strong inset dividersIos>
-      <f7-list-item
-        title="Dynamic (Component) Route"
-        link="/dynamic-route/blog/45/post/125/?foo=bar#about"
-      ></f7-list-item>
-      <f7-list-item
-        title="Default Route (404)"
-        link="/load-something-that-doesnt-exist/"
-      ></f7-list-item>
-      <f7-list-item
-        title="Request Data & Load"
-        link="/request-and-load/user/123456/"
-      ></f7-list-item>
-    </f7-list>
   </f7-page>
 </template>

src/pages/request-and-load.vue

@@ -1,25 +0,0 @@
-<template>
-  <f7-page>
-    <f7-navbar :title="`${user.firstName} ${user.lastName}`" back-link="Back"></f7-navbar>
-    <f7-block strong inset>
-      {{ user.about }}
-    </f7-block>
-    <f7-list strong inset dividers-ios>
-      <f7-list-item
-        v-for="(link, index) in user.links"
-        :key="index"
-        :link="link.url"
-        :title="link.title"
-        external
-        target="_blank"
-      ></f7-list-item>
-    </f7-list>
-  </f7-page>
-</template>
-<script>
-export default {
-  props: {
-    user: Object,
-  },
-};
-</script>

src/pages/settings.vue

@@ -0,0 +1,72 @@
+<template>
+    <f7-page name="settings">
+      <!-- Top Navbar -->
+      <f7-navbar :sliding="false" back-link="Back">
+        <f7-nav-title sliding>Settings</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>Server Settings</f7-block-title>
+          <div style="display:flex; justify-content:space-between; width: 100%">
+            <span style="margin-left: 16px;">Use external server</span>
+            <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" />
+          </div>
+          <f7-list>
+            <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>
+          <f7-button @click="saveServerSettings" >Save</f7-button>
+        </div>
+      </f7-block>
+    </f7-page>
+</template>
+
+<script>
+    import { f7 } from 'framework7-vue'
+
+    export default {
+        data () {
+            return {
+            serverSettings: {
+              use: false,
+              address: '10.170.64.22',
+              port: '9001'
+            },
+            }
+        },
+        created () {
+            var loadServerSettings = localStorage.getItem('serverSettings')
+            if (loadServerSettings) this.serverSettings =  JSON.parse(loadServerSettings)
+        },
+        methods: {
+            saveServerSettings () {
+                let saveSetting = new Promise(
+                  (saved,failed) => {
+                    try {
+                      localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
+                      saved()
+                    } catch {
+                      failed()
+                    }
+                  }
+                )
+                saveSetting.then(
+                  () => {
+                    var toast = f7.toast.create({
+                      text: 'Settings saved',
+                      closeTimeout: 2000
+                    })
+                    toast.open()
+                  },
+                  () => {
+                    var toast = f7.toast.create({
+                      text: 'ERROR: No settings saved',
+                      closeTimeout: 2000
+                    })
+                    toast.open()
+                  }
+                )
+            },
+          }
+        }
+</script>

vite.config.js

@@ -44,6 +44,7 @@ export default async () => {
     },
     server: {
       host: true,
+      port: 9421,
     },
 
   };