Compare commits
1 Commits
v0.5.0-rc
...
f66450408d
| Author | SHA1 | Date | |
|---|---|---|---|
| f66450408d |
120
README.md
120
README.md
@@ -1,31 +1,101 @@
|
||||
# ALVINN
|
||||
|
||||
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 CLI 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).
|
||||
Framework7 app created with following options:
|
||||
|
||||
## 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.
|
||||
```
|
||||
{
|
||||
"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
|
||||
}
|
||||
```
|
||||
|
||||
## 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.
|
||||
## Install Dependencies
|
||||
|
||||
### 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.
|
||||
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
|
||||
@@ -17,7 +17,6 @@ const build = async () => {
|
||||
format: 'iife',
|
||||
name: 'MyApp',
|
||||
sourcemap: false,
|
||||
inlineDynamicImports :true
|
||||
});
|
||||
|
||||
// Remove old chunk files
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<widget id="edu.midwestern.alvinn" version="0.5.0-rc" 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.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">
|
||||
<name>ALVINN</name>
|
||||
<description>Anatomy Lab Visual Identification Neural Network.</description>
|
||||
<author email="jgeorg@midwestern.edu" href="https://midwestern.edu">
|
||||
|
||||
53
cordova/package-lock.json
generated
53
cordova/package-lock.json
generated
@@ -1,18 +1,20 @@
|
||||
{
|
||||
"name": "edu.midwestern.alvinn",
|
||||
"version": "0.4.0",
|
||||
"version": "0.1.0-b",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "edu.midwestern.alvinn",
|
||||
"version": "0.4.0",
|
||||
"version": "0.1.0-b",
|
||||
"license": "Apache-2.0",
|
||||
"devDependencies": {
|
||||
"cordova-android": "^12.0.1",
|
||||
"cordova-browser": "^7.0.0",
|
||||
"cordova-ios": "^7.0.1",
|
||||
"cordova-plugin-camera": "^7.0.0"
|
||||
"cordova-plugin-camera": "^7.0.0",
|
||||
"cordova-plugin-keyboard": "^1.2.0",
|
||||
"cordova-plugin-statusbar": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@netflix/nerror": {
|
||||
@@ -540,6 +542,39 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/cordova-plugin-keyboard": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/cordova-plugin-keyboard/-/cordova-plugin-keyboard-1.2.0.tgz",
|
||||
"integrity": "sha512-Zng4SgDQQ2BCqeDOvrsgNlM9tcjnxmJoh0Qhex0KltMsoR0g/ONbMTpaVvI8EhNKVO8HJPnhFxxzHxrCPLQ7sQ==",
|
||||
"dev": true,
|
||||
"engines": [
|
||||
{
|
||||
"name": "cordova",
|
||||
"version": ">=3.2.0"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/cordova-plugin-statusbar": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cordova-plugin-statusbar/-/cordova-plugin-statusbar-4.0.0.tgz",
|
||||
"integrity": "sha512-NTVdQhj9msydnarCH8ijOhASx+6fO16hg17AilAjfzWRvcBoF+4kKkPhTkZM7D2bOBePhfHEaMhEnxnA3M4Dlg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"cordovaDependencies": {
|
||||
"0.1.0": {
|
||||
"cordova": ">=3.0.0"
|
||||
},
|
||||
"4.0.0": {
|
||||
"cordova": ">=3.0.0",
|
||||
"cordova-android": ">=10.0.0",
|
||||
"cordova-ios": ">=6.0.0"
|
||||
},
|
||||
"5.0.0": {
|
||||
"cordova": ">100"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/cordova-serve": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cordova-serve/-/cordova-serve-4.0.1.tgz",
|
||||
@@ -2617,6 +2652,18 @@
|
||||
"integrity": "sha512-OVQWZTBb18Y6e5c+bbXt3E4Z1yGnYqaywh2h5vVr/+nxMcdMIE+lm527bRK5vLN/RUqhGYP/Z+5n+O7Fk7fVNw==",
|
||||
"dev": true
|
||||
},
|
||||
"cordova-plugin-keyboard": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/cordova-plugin-keyboard/-/cordova-plugin-keyboard-1.2.0.tgz",
|
||||
"integrity": "sha512-Zng4SgDQQ2BCqeDOvrsgNlM9tcjnxmJoh0Qhex0KltMsoR0g/ONbMTpaVvI8EhNKVO8HJPnhFxxzHxrCPLQ7sQ==",
|
||||
"dev": true
|
||||
},
|
||||
"cordova-plugin-statusbar": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cordova-plugin-statusbar/-/cordova-plugin-statusbar-4.0.0.tgz",
|
||||
"integrity": "sha512-NTVdQhj9msydnarCH8ijOhASx+6fO16hg17AilAjfzWRvcBoF+4kKkPhTkZM7D2bOBePhfHEaMhEnxnA3M4Dlg==",
|
||||
"dev": true
|
||||
},
|
||||
"cordova-serve": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cordova-serve/-/cordova-serve-4.0.1.tgz",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "edu.midwestern.alvinn",
|
||||
"displayName": "ALVINN",
|
||||
"version": "0.5.0-rc",
|
||||
"version": "0.1.0-b",
|
||||
"description": "Anatomy Lab Visual Identification Neural Network.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
@@ -16,10 +16,14 @@
|
||||
"cordova-android": "^12.0.1",
|
||||
"cordova-browser": "^7.0.0",
|
||||
"cordova-ios": "^7.0.1",
|
||||
"cordova-plugin-camera": "^7.0.0"
|
||||
"cordova-plugin-camera": "^7.0.0",
|
||||
"cordova-plugin-keyboard": "^1.2.0",
|
||||
"cordova-plugin-statusbar": "^4.0.0"
|
||||
},
|
||||
"cordova": {
|
||||
"plugins": {
|
||||
"cordova-plugin-statusbar": {},
|
||||
"cordova-plugin-keyboard": {},
|
||||
"cordova-plugin-camera": {
|
||||
"ANDROIDX_CORE_VERSION": "1.6.+"
|
||||
}
|
||||
|
||||
101
f7_info.md
101
f7_info.md
@@ -1,101 +0,0 @@
|
||||
# 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
|
||||
682
package-lock.json
generated
682
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "alvinn",
|
||||
"private": true,
|
||||
"version": "0.5.0-rc",
|
||||
"version": "0.1.1",
|
||||
"description": "ALVINN",
|
||||
"repository": "",
|
||||
"license": "UNLICENSED",
|
||||
@@ -14,7 +14,7 @@
|
||||
"cordova-ios": "cross-env TARGET=cordova cross-env NODE_ENV=production vite build && node ./build/build-cordova.js && cd cordova && cordova run ios",
|
||||
"build-cordova-android": "cross-env TARGET=cordova cross-env NODE_ENV=production vite build && node ./build/build-cordova.js && cd cordova && cordova build android",
|
||||
"cordova-android": "cross-env TARGET=cordova cross-env NODE_ENV=production vite build && node ./build/build-cordova.js && cd cordova && cordova run android",
|
||||
"postinstall": "cpy --flat ./node_modules/framework7-icons/fonts/*.* ./src/fonts/"
|
||||
"postinstall": "cpy --flat ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy --flat ./node_modules/material-icons/iconfont/*.* ./src/fonts/"
|
||||
},
|
||||
"browserslist": [
|
||||
"IOS >= 15",
|
||||
@@ -23,11 +23,11 @@
|
||||
"last 5 Firefox versions"
|
||||
],
|
||||
"dependencies": {
|
||||
"@tensorflow/tfjs": "^4.17.0",
|
||||
"dom7": "^4.0.6",
|
||||
"framework7": "^8.3.0",
|
||||
"framework7-icons": "^5.0.5",
|
||||
"framework7-vue": "^8.3.0",
|
||||
"material-icons": "^1.13.12",
|
||||
"skeleton-elements": "^4.0.1",
|
||||
"swiper": "^11.0.3",
|
||||
"vue": "^3.3.8"
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"version": "0.0.0-n1",
|
||||
"region": "Coco",
|
||||
"size": 640,
|
||||
"epochs": 1000,
|
||||
"name": "coco128 test",
|
||||
"yolo-version": "8.1.20 docker",
|
||||
"date": "2024-03-12",
|
||||
"export": "coco128.yaml"
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,92 +0,0 @@
|
||||
description: Ultralytics best model trained on /usr/src/ultralytics/ultralytics/cfg/datasets/coco128.yaml
|
||||
author: Ultralytics
|
||||
license: AGPL-3.0 https://ultralytics.com/license
|
||||
date: '2024-03-12T16:25:00.089873'
|
||||
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
|
||||
File diff suppressed because one or more lines are too long
@@ -1,82 +0,0 @@
|
||||
[
|
||||
"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"
|
||||
]
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"version": "0.0.0-n1",
|
||||
"region": "Coco",
|
||||
"size": 640,
|
||||
"epochs": 1000,
|
||||
"name": "coco128 test",
|
||||
"yolo-version": "8.1.20 docker",
|
||||
"date": "2024-03-12",
|
||||
"export": "coco128.yaml"
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,92 +0,0 @@
|
||||
description: Ultralytics best model trained on /usr/src/ultralytics/ultralytics/cfg/datasets/coco128.yaml
|
||||
author: Ultralytics
|
||||
license: AGPL-3.0 https://ultralytics.com/license
|
||||
date: '2024-03-12T16:25:00.089873'
|
||||
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
|
||||
File diff suppressed because one or more lines are too long
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"version": "0.1.0-n4",
|
||||
"region": "Thorax",
|
||||
"size": 640,
|
||||
"epochs": 1000,
|
||||
"name": "nano4",
|
||||
"yolo-version": "8.1.20 docker",
|
||||
"date": "2024-03-08",
|
||||
"export": "0.1.0-th"
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,53 +0,0 @@
|
||||
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-08T20:14:34.118186'
|
||||
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
|
||||
File diff suppressed because one or more lines are too long
@@ -1,43 +0,0 @@
|
||||
[
|
||||
"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"
|
||||
]
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,53 +0,0 @@
|
||||
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
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 714 KiB |
@@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<filter id="filter1847" x="-.075" y="-.075" width="1.15" height="1.15" color-interpolation-filters="sRGB">
|
||||
<feGaussianBlur stdDeviation="0.3125"/>
|
||||
</filter>
|
||||
<radialGradient id="radialGradient1903" cx="5" cy="5" r="5.75" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#ff0" offset="0"/>
|
||||
<stop stop-color="#ff0" stop-opacity="0" offset="1"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<path d="m0 5 3.833274-1.166726 1.166726-3.833274 1.166726 3.833274 3.833274 1.166726-3.833274 1.166726-1.166726 3.833274-1.166726-3.833274z" color="#000000" fill="url(#radialGradient1903)" fill-rule="evenodd" filter="url(#filter1847)" opacity=".63"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 870 B |
@@ -7,11 +7,10 @@
|
||||
<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/" 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-item link="/about/">About ALVINN</f7-list-item>
|
||||
</f7-list>
|
||||
<f7-toolbar class="panel-bar" position="bottom">
|
||||
<f7-link href="/specs/">version {{ alvinnVersion }}</f7-link>
|
||||
<span>version 0.1.1</span>
|
||||
</f7-toolbar>
|
||||
</f7-page>
|
||||
</f7-view>
|
||||
@@ -65,9 +64,7 @@
|
||||
return {
|
||||
rememberAgreement: false,
|
||||
siteAgreement: false,
|
||||
dateAgreement: null,
|
||||
showDisclaimer: true,
|
||||
alvinnVersion: store().getVersion
|
||||
showDisclaimer: true
|
||||
}
|
||||
},
|
||||
created () {
|
||||
@@ -76,18 +73,11 @@
|
||||
var loadedSettings = JSON.parse(loadSiteSettings)
|
||||
this.siteAgreement = loadedSettings.siteAgreement
|
||||
this.rememberAgreement = loadedSettings.rememberAgreement
|
||||
this.dateAgreement = loadedSettings.dateAgreement && new Date(loadedSettings.dateAgreement)
|
||||
}
|
||||
var curDate = new Date ()
|
||||
var agreeStillValid = this.dateAgreement && (curDate < this.dateAgreement.setMonth(this.dateAgreement.getMonth() + 3))
|
||||
if (this.siteAgreement && this.rememberAgreement && agreeStillValid) {
|
||||
if (this.siteAgreement && this.rememberAgreement) {
|
||||
this.showDisclaimer = false
|
||||
store().agree()
|
||||
}
|
||||
var loadServerSettings = localStorage.getItem('serverSettings')
|
||||
if (!loadServerSettings) {
|
||||
localStorage.setItem('serverSettings','{"use":false,"address":"10.188.0.98","port":"9001","previous":{"10.188.0.98":"9001"}}')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setAgreement () {
|
||||
@@ -95,8 +85,7 @@
|
||||
store().agree()
|
||||
let newSettings = {
|
||||
siteAgreement: this.siteAgreement,
|
||||
rememberAgreement: this.rememberAgreement,
|
||||
dateAgreement: new Date()
|
||||
rememberAgreement: this.rememberAgreement
|
||||
}
|
||||
let saveSiteSettings = new Promise(
|
||||
(saved,failed) => {
|
||||
@@ -132,6 +121,7 @@
|
||||
} catch {
|
||||
var darkTheme = 'auto'
|
||||
}
|
||||
//provide('isAgreed',siteAgreement)
|
||||
const f7params = {
|
||||
name: 'ALVINN', // App name
|
||||
theme: 'auto', // Automatic theme detection
|
||||
@@ -145,7 +135,7 @@
|
||||
|
||||
// Register service worker (only on production build)
|
||||
serviceWorker: process.env.NODE_ENV ==='production' ? {
|
||||
path: './service-worker.js',
|
||||
path: '/service-worker.js',
|
||||
} : {},
|
||||
|
||||
// Input settings
|
||||
|
||||
@@ -6,16 +6,10 @@
|
||||
<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"/>
|
||||
<path v-else-if="icon == 'photo_sample'" d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm40-80h400L545-420 440-280l-65-87-95 127Zm-40 80v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -33,16 +27,10 @@
|
||||
'photo_library',
|
||||
'no_photography',
|
||||
'photo_camera',
|
||||
'camera_add',
|
||||
'cloud_upload',
|
||||
'cloud_done',
|
||||
'check_list',
|
||||
'refresh_search',
|
||||
'thorax',
|
||||
'abdomen',
|
||||
'limbs',
|
||||
'head',
|
||||
'photo_sample'
|
||||
'refresh_search'
|
||||
]
|
||||
return iconList.includes(value)
|
||||
}
|
||||
|
||||
@@ -1,198 +0,0 @@
|
||||
/*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;*/
|
||||
background: var(--chip-media-gradient) !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;
|
||||
}
|
||||
|
||||
.dialog-buttons {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avn-dialog-button {
|
||||
font-size: 17px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*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;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,30 @@
|
||||
/* Material Icons Font (for MD theme) */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Material Icons'), local('MaterialIcons-Regular'),
|
||||
url(../fonts/material-icons.woff2) format('woff2'),
|
||||
url(../fonts/material-icons.woff) format('woff');
|
||||
}
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
/* Framework7 Icons Font (for iOS theme) */
|
||||
@font-face {
|
||||
font-family: 'Framework7 Icons';
|
||||
@@ -27,29 +54,3 @@
|
||||
font-feature-settings: 'liga';
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Material Icons for text editor toolbar */
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("../fonts/material-icons.woff2") format("woff2"), url("../fonts/material-icons.woff") format("woff");
|
||||
}
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
55
src/fonts/_mixins.scss
Normal file
55
src/fonts/_mixins.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss
|
||||
@function material-icons-str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace +
|
||||
material-icons-str-replace(
|
||||
str-slice($string, $index + str-length($search)),
|
||||
$search,
|
||||
$replace
|
||||
);
|
||||
}
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@mixin material-icons-font-class($font-family) {
|
||||
font-family: $font-family;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: $material-icons-font-size;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased; // Support for all WebKit browsers
|
||||
-moz-osx-font-smoothing: grayscale; // Support for Firefox
|
||||
text-rendering: optimizeLegibility; // Support for Safari and Chrome
|
||||
font-feature-settings: 'liga'; // Support for IE
|
||||
}
|
||||
|
||||
@mixin material-icons-font($font-family) {
|
||||
$class-name: to-lower-case($font-family);
|
||||
$class-name: material-icons-str-replace($class-name, ' ', '-');
|
||||
$font-file: $material-icons-font-path + $class-name;
|
||||
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $material-icons-font-display;
|
||||
src: url('#{$font-file}.woff2') format('woff2'),
|
||||
url('#{$font-file}.woff') format('woff');
|
||||
}
|
||||
|
||||
.#{$class-name} {
|
||||
@include material-icons-font-class($font-family);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin material-icons() {
|
||||
@warn "material-icons() Sass mixin has been deprecated as of 1.0. Use '@extend .material-icons;' instead of '@include material-icons();'.";
|
||||
@include material-icons-font-class('Material Icons');
|
||||
}
|
||||
3
src/fonts/_variables.scss
Normal file
3
src/fonts/_variables.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
$material-icons-font-path: './' !default;
|
||||
$material-icons-font-size: 24px !default;
|
||||
$material-icons-font-display: block !default;
|
||||
24
src/fonts/filled.css
Normal file
24
src/fonts/filled.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff");
|
||||
}
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/filled.scss
Normal file
4
src/fonts/filled.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons');
|
||||
BIN
src/fonts/material-icons-outlined.woff
Normal file
BIN
src/fonts/material-icons-outlined.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-outlined.woff2
Normal file
BIN
src/fonts/material-icons-outlined.woff2
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-round.woff
Normal file
BIN
src/fonts/material-icons-round.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-round.woff2
Normal file
BIN
src/fonts/material-icons-round.woff2
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-sharp.woff
Normal file
BIN
src/fonts/material-icons-sharp.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-sharp.woff2
Normal file
BIN
src/fonts/material-icons-sharp.woff2
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-two-tone.woff
Normal file
BIN
src/fonts/material-icons-two-tone.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-two-tone.woff2
Normal file
BIN
src/fonts/material-icons-two-tone.woff2
Normal file
Binary file not shown.
124
src/fonts/material-icons.css
Normal file
124
src/fonts/material-icons.css
Normal file
@@ -0,0 +1,124 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff");
|
||||
}
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons Outlined";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff");
|
||||
}
|
||||
.material-icons-outlined {
|
||||
font-family: "Material Icons Outlined";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons Round";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff");
|
||||
}
|
||||
.material-icons-round {
|
||||
font-family: "Material Icons Round";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons Sharp";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff");
|
||||
}
|
||||
.material-icons-sharp {
|
||||
font-family: "Material Icons Sharp";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons Two Tone";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff");
|
||||
}
|
||||
.material-icons-two-tone {
|
||||
font-family: "Material Icons Two Tone";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
5
src/fonts/material-icons.scss
Normal file
5
src/fonts/material-icons.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import 'filled';
|
||||
@import 'outlined';
|
||||
@import 'round';
|
||||
@import 'sharp';
|
||||
@import 'two-tone';
|
||||
24
src/fonts/outlined.css
Normal file
24
src/fonts/outlined.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons Outlined";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff");
|
||||
}
|
||||
.material-icons-outlined {
|
||||
font-family: "Material Icons Outlined";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/outlined.scss
Normal file
4
src/fonts/outlined.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons Outlined');
|
||||
24
src/fonts/round.css
Normal file
24
src/fonts/round.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons Round";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff");
|
||||
}
|
||||
.material-icons-round {
|
||||
font-family: "Material Icons Round";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/round.scss
Normal file
4
src/fonts/round.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons Round');
|
||||
24
src/fonts/sharp.css
Normal file
24
src/fonts/sharp.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons Sharp";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff");
|
||||
}
|
||||
.material-icons-sharp {
|
||||
font-family: "Material Icons Sharp";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/sharp.scss
Normal file
4
src/fonts/sharp.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons Sharp');
|
||||
24
src/fonts/two-tone.css
Normal file
24
src/fonts/two-tone.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons Two Tone";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff");
|
||||
}
|
||||
.material-icons-two-tone {
|
||||
font-family: "Material Icons Two Tone";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/two-tone.scss
Normal file
4
src/fonts/two-tone.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons Two Tone');
|
||||
@@ -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 'self' 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 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">
|
||||
|
||||
@@ -3,9 +3,6 @@ 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 SpecsPage from '../pages/specs.vue';
|
||||
import HelpPage from '../pages/help.vue';
|
||||
|
||||
import NotFoundPage from '../pages/404.vue';
|
||||
|
||||
@@ -18,25 +15,13 @@ var routes = [
|
||||
path: '/about/',
|
||||
component: AboutPage,
|
||||
},
|
||||
{
|
||||
path: '/help/',
|
||||
component: HelpPage,
|
||||
},
|
||||
{
|
||||
path: '/specs/',
|
||||
component: SpecsPage,
|
||||
},
|
||||
{
|
||||
path: '/detect/:region/',
|
||||
component: DetectPage,
|
||||
},
|
||||
{
|
||||
path: '/settings/',
|
||||
component: SettingsPage
|
||||
},
|
||||
{
|
||||
path: '/contact/',
|
||||
component: ContactPage,
|
||||
component: SettingsPage,
|
||||
},
|
||||
{
|
||||
path: '(.*)',
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { reactive, computed } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
disclaimerAgreement: false,
|
||||
enabledRegions: ['thorax','abdomen','limbs'],
|
||||
version: '0.5.0-rc'
|
||||
disclaimerAgreement: false
|
||||
})
|
||||
|
||||
const agree = () => {
|
||||
@@ -12,7 +10,5 @@ const agree = () => {
|
||||
|
||||
export default () => ({
|
||||
isAgreed: computed(() => state.disclaimerAgreement),
|
||||
getRegions: computed(() => state.enabledRegions),
|
||||
getVersion: computed(() => state.version),
|
||||
agree
|
||||
})
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
@@ -10,14 +10,8 @@
|
||||
<p>
|
||||
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>.
|
||||
</p>
|
||||
<h3>Credits</h3>
|
||||
<p>
|
||||
ALVINN is conceived and created by Justin Georgi.
|
||||
</p>
|
||||
<p>
|
||||
Other contributions from:
|
||||
<ul>
|
||||
<li>Alexandra Davis</li>
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
export default {
|
||||
methods: {
|
||||
async openCamera(imContain) {
|
||||
var cameraLoaded = false
|
||||
const devicesList = await navigator.mediaDevices.enumerateDevices()
|
||||
this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
|
||||
if (this.videoDeviceAvailable) {
|
||||
var vidConstraint = {
|
||||
video: {
|
||||
width: {
|
||||
ideal: imContain.offsetWidth
|
||||
},
|
||||
height: {
|
||||
ideal: imContain.offsetHeight
|
||||
},
|
||||
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())
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
<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>
|
||||
@@ -1,23 +1,15 @@
|
||||
<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-nav-right>
|
||||
<f7-link v-if="!isCordova" :icon-only="true" tooltip="Fullscreen" :icon-f7="isFullscreen ? 'viewfinder_circle_fill' : 'viewfinder'" @click="toggleFullscreen"></f7-link>
|
||||
<f7-link :icon-only="true" tooltip="ALVINN help" icon-f7="question_circle_fill" href="/help/"></f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
<f7-block class="detect-grid">
|
||||
<div class="image-container" ref="image_container">
|
||||
<SvgIcon v-if="!imageView && !videoAvailable" :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
|
||||
<div class="vid-container" :style="`display: ${videoAvailable ? 'block' : 'none'}; position: absolute; 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%); z-index: 3;" fill large>Capture</f7-button>
|
||||
<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" />
|
||||
</div>
|
||||
<canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${(imageLoaded || videoAvailable) ? '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; z-index: 2;`" />
|
||||
</div>
|
||||
<div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
|
||||
<div v-if="(resultData && resultData.detections) || detecting" 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"
|
||||
@@ -28,16 +20,16 @@
|
||||
@delete="deleteChip(result.resultIndex)"
|
||||
:style="chipGradient(result.confidence)"
|
||||
/>
|
||||
<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" />
|
||||
<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>
|
||||
<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 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%">
|
||||
<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`">
|
||||
<SvgIcon icon="check_list"/>
|
||||
</f7-button>
|
||||
<f7-button @click="setData" style="flex: 0 1 20%">
|
||||
<f7-button @click="setData">
|
||||
<SvgIcon icon="refresh_search"/>
|
||||
</f7-button>
|
||||
</div>
|
||||
@@ -45,22 +37,17 @@
|
||||
<f7-button popover-open="#region-popover">
|
||||
<RegionIcon :region="activeRegion" />
|
||||
</f7-button>
|
||||
<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 popover-open="#capture-popover">
|
||||
<SvgIcon icon="image"/>
|
||||
</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/*" style="display: none;"/>
|
||||
<img src="../assets/target.svg" ref="target_image" style="display: none;" />
|
||||
<input type="file" ref="image_chooser" @change="getImage()" accept="image/*" capture="environment" style="display: none;"/>
|
||||
</f7-block>
|
||||
|
||||
<f7-panel :id="detectorName + '-settings'" right cover :backdrop="false" :container-el="`#${detectorName}-detect-page`">
|
||||
@@ -76,16 +63,16 @@
|
||||
|
||||
<f7-popover id="region-popover" class="popover-button-menu">
|
||||
<f7-segmented raised class="segment-button-menu">
|
||||
<f7-button :class="(getRegions.includes('thorax')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
|
||||
<f7-button style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
|
||||
<RegionIcon :region="0" />
|
||||
</f7-button>
|
||||
<f7-button :class="(getRegions.includes('abdomen')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
|
||||
<f7-button style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
|
||||
<RegionIcon :region="1" />
|
||||
</f7-button>
|
||||
<f7-button :class="(getRegions.includes('limbs')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
|
||||
<f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
|
||||
<RegionIcon :region="2" />
|
||||
</f7-button>
|
||||
<f7-button :class="(getRegions.includes('head')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
|
||||
<f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
|
||||
<RegionIcon :region="3" />
|
||||
</f7-button>
|
||||
</f7-segmented>
|
||||
@@ -93,36 +80,214 @@
|
||||
|
||||
<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 v-if="otherSettings.demo" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
|
||||
<SvgIcon icon="photo_sample"/>
|
||||
</f7-button>
|
||||
</f7-segmented>
|
||||
</f7-popover>
|
||||
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<style src="../css/detect.css" />
|
||||
<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>
|
||||
|
||||
<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'
|
||||
|
||||
export default {
|
||||
mixins: [submitMixin, detectionMixin, cameraMixin],
|
||||
mixins: [submitMixin],
|
||||
props: {
|
||||
f7route: Object,
|
||||
},
|
||||
@@ -136,7 +301,6 @@
|
||||
resultData: {},
|
||||
selectedChip: -1,
|
||||
activeRegion: 4,
|
||||
classesList: [],
|
||||
imageLoaded: false,
|
||||
imageView: null,
|
||||
imageLoadMode: "environment",
|
||||
@@ -147,27 +311,12 @@
|
||||
detectorLevel: 50,
|
||||
detectorLabels: [],
|
||||
serverSettings: {},
|
||||
otherSettings: {},
|
||||
isCordova: !!window.cordova,
|
||||
isFullscreen: false,
|
||||
uploadUid: null,
|
||||
uploadDirty: false,
|
||||
modelLocation: '',
|
||||
miniLocation: '',
|
||||
modelLoading: true,
|
||||
reloadModel: false,
|
||||
videoDeviceAvailable: false,
|
||||
videoAvailable: false,
|
||||
cameraStream: null
|
||||
uploadDirty: false
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
return store()
|
||||
},
|
||||
created () {
|
||||
let loadOtherSettings = localStorage.getItem('otherSettings')
|
||||
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
|
||||
let modelRoot = this.isCordova ? 'https://localhost' : '.'
|
||||
switch (this.f7route.params.region) {
|
||||
case 'thorax':
|
||||
this.activeRegion = 0
|
||||
@@ -175,7 +324,7 @@
|
||||
break;
|
||||
case 'abdomen':
|
||||
this.activeRegion = 1
|
||||
this.detectorName = 'abdomen'
|
||||
this.detectorName = 'combined'
|
||||
break;
|
||||
case 'limbs':
|
||||
this.activeRegion = 2
|
||||
@@ -185,49 +334,34 @@
|
||||
this.activeRegion = 3
|
||||
break;
|
||||
}
|
||||
this.modelLocation = `${modelRoot}/models/${this.detectorName}${this.otherSettings.mini ? '-mini' : ''}/model.json`
|
||||
this.miniLocation = `${modelRoot}/models/${this.detectorName}-mini/model.json`
|
||||
fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/${this.detectorName}/classes.json`)
|
||||
.then((mod) => { return mod.json() })
|
||||
.then((classes) => {
|
||||
this.classesList = classes
|
||||
this.detectorLabels = this.classesList.map( l => { return {'name': l, 'detect': true} } )
|
||||
})
|
||||
var loadServerSettings = localStorage.getItem('serverSettings')
|
||||
if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
|
||||
},
|
||||
mounted () {
|
||||
var self = this
|
||||
if (this.serverSettings && this.serverSettings.use) {
|
||||
this.getRemoteLabels()
|
||||
this.modelLoading = false
|
||||
} else {
|
||||
this.modelLoading = true
|
||||
this.loadModel(this.modelLocation, true).then(() => {
|
||||
this.modelLoading = false
|
||||
}).catch((e) => {
|
||||
console.log(e.message)
|
||||
f7.dialog.alert(`ALVINN AI model error: ${e.message}`)
|
||||
this.modelLoading = false
|
||||
})
|
||||
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()
|
||||
}
|
||||
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 })
|
||||
@@ -237,10 +371,6 @@
|
||||
filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
|
||||
filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
|
||||
})
|
||||
|
||||
if (!filteredResults.some( s => s.resultIndex == this.selectedChip && s.aboveThreshold && s.isSearched && !s.isDeleted)) {
|
||||
this.selectChip(this.selectedChip)
|
||||
}
|
||||
return filteredResults
|
||||
},
|
||||
numResults () {
|
||||
@@ -258,27 +388,39 @@
|
||||
},
|
||||
methods: {
|
||||
chipGradient (confVal) {
|
||||
let confFactor = confVal / 100
|
||||
return `--chip-media-gradient: conic-gradient(from ${270 - (confFactor * 360 / 2)}deg, hsl(${confFactor * 120}deg, 100%, 50%) ${confFactor}turn, hsl(${confFactor * 120}deg, 50%, 66%) ${confFactor}turn)`
|
||||
return `--chip-media-background: hsl(${confVal / 100 * 120}deg 100% 50%)`
|
||||
},
|
||||
async setData () {
|
||||
if (this.reloadModel) {
|
||||
await this.loadModel(this.modelLocation)
|
||||
this.reloadModel = false
|
||||
}
|
||||
setData () {
|
||||
var self = this
|
||||
if (this.serverSettings && this.serverSettings.use) {
|
||||
this.remoteDetect()
|
||||
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))
|
||||
} else {
|
||||
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}`)
|
||||
})
|
||||
//TODO
|
||||
f7.dialog.alert('Using built-in model')
|
||||
}
|
||||
},
|
||||
selectAll (ev) {
|
||||
@@ -288,43 +430,18 @@
|
||||
this.detectorLabels.forEach( s => s.detect = false )
|
||||
}
|
||||
},
|
||||
async selectImage (mode) {
|
||||
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 });
|
||||
return
|
||||
} else {
|
||||
var loadResult = this.$refs.image_chooser.click()
|
||||
}
|
||||
if (mode == "camera") {
|
||||
this.videoAvailable = await this.openCamera(this.$refs.image_container)
|
||||
if (this.videoAvailable) {
|
||||
this.imageLoaded = false
|
||||
this.imageView = null
|
||||
this.$refs.image_cvs.style['background-image'] = 'none'
|
||||
this.resultData = {}
|
||||
var trackDetails = this.cameraStream.getVideoTracks()[0].getSettings()
|
||||
var vidElement = this.$refs.vid_viewer
|
||||
vidElement.width = trackDetails.width
|
||||
vidElement.height = trackDetails.height
|
||||
if (!this.otherSettings.disableVideo) {
|
||||
this.videoFrameDetect(vidElement)
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
if (mode == 'sample') {
|
||||
f7.dialog.create({
|
||||
title: 'Sample images',
|
||||
buttons: [
|
||||
{text: 'Sample 1', close: true, onClick: () => this.getImage('sample1'), cssClass: 'avn-dialog-button'},
|
||||
{text: 'Sample 2', close: true, onClick: () => this.getImage('sample2'), cssClass: 'avn-dialog-button'},
|
||||
{text: 'Sample 3', close: true, onClick: () => this.getImage('sample3'), cssClass: 'avn-dialog-button'},
|
||||
{text: 'Cancel', close: true, color: 'red', cssClass: 'avn-dialog-button'}
|
||||
],
|
||||
verticalButtons: true
|
||||
}).open()
|
||||
return
|
||||
}
|
||||
this.$refs.image_chooser.click()
|
||||
},
|
||||
onFail (message) {
|
||||
alert(`Camera fail: ${message}`)
|
||||
@@ -337,19 +454,23 @@
|
||||
return
|
||||
}
|
||||
|
||||
if (iChip == 'redraw') {
|
||||
if (this.selectedChip == -1) return
|
||||
iChip = this.selectedChip
|
||||
}
|
||||
|
||||
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)
|
||||
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
|
||||
}
|
||||
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
|
||||
imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
|
||||
this.resultData.detections[iChip].beenViewed = true
|
||||
},
|
||||
deleteChip ( iChip ) {
|
||||
@@ -371,58 +492,38 @@
|
||||
return [imCanvas, imageCtx]
|
||||
},
|
||||
getImage (searchImage) {
|
||||
let loadImage = new Promise(resolve => {
|
||||
if (this.videoAvailable) {
|
||||
this.closeCamera()
|
||||
this.detecting = true
|
||||
this.reloadModel = true
|
||||
resolve(searchImage)
|
||||
} else if (this.isCordova && this.imageLoadMode == "camera") {
|
||||
this.detecting = true
|
||||
let loadImage =new Promise(resolve => {
|
||||
if (this.isCordova && this.imageLoadMode == "camera") {
|
||||
resolve('data:image/jpg;base64,' + searchImage)
|
||||
}
|
||||
} else {
|
||||
const searchImage = this.$refs.image_chooser.files[0]
|
||||
var reader = new FileReader()
|
||||
reader.addEventListener("load", () => {
|
||||
reader.addEventListener("loadend", () => {
|
||||
this.detecting = true
|
||||
resolve(reader.result)
|
||||
})
|
||||
if (this.imageLoadMode == 'sample') {
|
||||
fetch(`${this.isCordova ? 'https://localhost' : '.'}/samples/${this.detectorName}-${searchImage}.jpeg`).then( resp => {
|
||||
return resp.blob()
|
||||
}).then(respBlob => {
|
||||
reader.readAsDataURL(respBlob)
|
||||
}).catch((e) => {
|
||||
console.log(e.message)
|
||||
f7.dialog.alert(`Error loading image: ${e.message}`)
|
||||
})
|
||||
} else {
|
||||
const fileImage = this.$refs.image_chooser.files[0]
|
||||
this.$refs.image_chooser.value=[]
|
||||
reader.readAsDataURL(fileImage)
|
||||
reader.readAsDataURL(searchImage)
|
||||
}
|
||||
})
|
||||
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})`
|
||||
/******
|
||||
* setTimeout is not a good solution, but it's the only way
|
||||
* I can find to not cut off drawing of the canvas background
|
||||
******/
|
||||
setTimeout(() => {
|
||||
this.setData()
|
||||
}, 1)
|
||||
}).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 })
|
||||
@@ -432,55 +533,6 @@
|
||||
},
|
||||
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 || boxInput.length == 0) 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
|
||||
},
|
||||
toggleFullscreen() {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen().then( () => {
|
||||
this.isFullscreen = false
|
||||
})
|
||||
} else {
|
||||
app.requestFullscreen().then( () => {
|
||||
this.isFullscreen = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
import * as tf from '@tensorflow/tfjs'
|
||||
import { f7 } from 'framework7-vue'
|
||||
|
||||
var model = null
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async loadModel(weights, preload) {
|
||||
if (model && model.modelURL == weights) {
|
||||
return model
|
||||
} else if (model) {
|
||||
model.dispose()
|
||||
}
|
||||
model = await tf.loadGraphModel(weights)
|
||||
const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
|
||||
/*****************
|
||||
* If preloading then run model
|
||||
* once on fake data to preload
|
||||
* weights for a faster response
|
||||
*****************/
|
||||
if (preload) {
|
||||
const dummyT = tf.ones([1,modelWidth,modelHeight,3])
|
||||
model.predict(dummyT)
|
||||
}
|
||||
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)
|
||||
const rawRes = tf.transpose(res,[0,2,1]).arraySync()[0]
|
||||
console.timeEnd('run prediction')
|
||||
|
||||
console.time('post-process')
|
||||
const outputSize = res.shape[1]
|
||||
let rawBoxes = []
|
||||
let rawScores = []
|
||||
|
||||
for (var i = 0; i < rawRes.length; i++) {
|
||||
var getScores = rawRes[i].slice(4)
|
||||
if (getScores.every( s => s < .05)) { continue }
|
||||
var getBox = rawRes[i].slice(0,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(getScores)
|
||||
}
|
||||
|
||||
if (rawBoxes.length > 0) {
|
||||
const tBoxes = tf.tensor2d(rawBoxes)
|
||||
let tScores = null
|
||||
let structureScores = null
|
||||
let boxes_data = []
|
||||
let scores_data = []
|
||||
let classes_data = []
|
||||
for (var c = 0; c < outputSize - 4; c++) {
|
||||
structureScores = rawScores.map(x => x[c])
|
||||
tScores = tf.tensor1d(structureScores)
|
||||
var validBoxes = await tf.image.nonMaxSuppressionAsync(tBoxes,tScores,10,0.5,.05)
|
||||
validBoxes = validBoxes.dataSync()
|
||||
if (validBoxes) {
|
||||
boxes_data.push(...rawBoxes.filter( (_, idx) => validBoxes.includes(idx)))
|
||||
var outputScores = structureScores.filter( (_, idx) => validBoxes.includes(idx))
|
||||
scores_data.push(...outputScores)
|
||||
classes_data.push(...outputScores.fill(c))
|
||||
}
|
||||
}
|
||||
|
||||
tf.dispose(tBoxes)
|
||||
tf.dispose(tScores)
|
||||
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(input)
|
||||
console.timeEnd('post-process')
|
||||
|
||||
return output || { detections: [] }
|
||||
},
|
||||
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.')
|
||||
},
|
||||
async videoFrameDetect (vidData) {
|
||||
await this.loadModel(this.miniLocation)
|
||||
const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
|
||||
const imCanvas = this.$refs.image_cvs
|
||||
const imageCtx = imCanvas.getContext("2d")
|
||||
const target = this.$refs.target_image
|
||||
await tf.nextFrame();
|
||||
imCanvas.width = imCanvas.clientWidth
|
||||
imCanvas.height = imCanvas.clientHeight
|
||||
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
|
||||
var imgWidth
|
||||
var imgHeight
|
||||
const imgAspect = vidData.width / vidData.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
|
||||
}
|
||||
while (this.videoAvailable) {
|
||||
console.time('frame-process')
|
||||
try {
|
||||
const input = tf.tidy(() => {
|
||||
return tf.image.resizeBilinear(tf.browser.fromPixels(vidData), [modelWidth, modelHeight]).div(255.0).expandDims(0)
|
||||
})
|
||||
const res = model.predict(input)
|
||||
const rawRes = tf.transpose(res,[0,2,1]).arraySync()[0]
|
||||
|
||||
let rawCoords = []
|
||||
if (rawRes) {
|
||||
for (var i = 0; i < rawRes.length; i++) {
|
||||
var getScores = rawRes[i].slice(4)
|
||||
if (getScores.some( s => s > .5)) {
|
||||
rawCoords.push(rawRes[i].slice(0,2))
|
||||
}
|
||||
}
|
||||
|
||||
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
|
||||
for (var coord of rawCoords) {
|
||||
console.log(`x: ${coord[0]}, y: ${coord[1]}`)
|
||||
let pointX = (imCanvas.width - imgWidth) / 2 + (coord[0] / modelWidth) * imgWidth -5
|
||||
let pointY = (imCanvas.height - imgHeight) / 2 + (coord[1] / modelHeight) * imgHeight -5
|
||||
imageCtx.drawImage(target, pointX, pointY, 20, 20)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
console.timeEnd('frame-process')
|
||||
await tf.nextFrame();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<f7-page name="help">
|
||||
<f7-navbar title="Help" back-link="Back"></f7-navbar>
|
||||
<f7-block>
|
||||
<h2>Quick Start</h2>
|
||||
<ol>
|
||||
<li>Select the region of the body you want to identify structures from.</li>
|
||||
<li>Load an image:
|
||||
<ul>
|
||||
<li>Click on the camera icon <SvgIcon icon="photo_camera" class="list-svg"/> to take a new picture.
|
||||
<ul>
|
||||
<li>ALVINN will highlight areas with potential structures as you aim the camera.</li>
|
||||
<li>Press <span class="cap-button">Capture</span> to use the current camera view.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Click on the image file icon <SvgIcon icon="photo_library" class="list-svg"/> to load a picture from the device storage.</li>
|
||||
<li>If demo mode is turned on, you can click on the marked image icon <SvgIcon icon="photo_sample" class="list-svg"/> to load an ALVINN sample image.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>When the picture is captured or loaded, any identifiable structures will be listed as tags below the image:
|
||||
<f7-chip text="Structure name" media=" " class="demo-chip"/>
|
||||
<ul>
|
||||
<li>Click on each tag to see the structure highlighted in the image.</li>
|
||||
<li>Tag color and proportion filled indicate ALVINN's level of confidence in the identification.</li>
|
||||
<li>If there are potential structures that do not satisfy the current detection threshold, a badge on the detection menu icon <SvgIcon icon="visibility" class="list-svg"/> will indicate the number of un-displayed structures.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
<h2>Advanced Features</h2>
|
||||
<h3>Detection Parameters</h3>
|
||||
<p>
|
||||
After an image has been loaded and structure detection has been performed, the detection parameters can be adjusted using the detection menu icon <SvgIcon icon="visibility" class="list-svg"/>.
|
||||
This button will make three tools available:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Confidence slider: You can use the slider to change the confidence threshold for identifying structures. The default threshold is 50% confidence.</li>
|
||||
<li>Refresh detections <SvgIcon icon="refresh_search" class="list-svg"/>: 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.</li>
|
||||
<li>Structure list <SvgIcon icon="check_list" class="list-svg"/>: you can view a list of all the structures available for detection in that region and select/deselect individual structures for detection.</li>
|
||||
</ol>
|
||||
<h3>Submitting Images</h3>
|
||||
<p>
|
||||
If all of the detection tags that are currently visible have been viewed, then the cloud upload button <SvgIcon icon="cloud_upload" class="list-svg"/> 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.
|
||||
</p>
|
||||
</f7-block>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
li, p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.list-svg {
|
||||
width: 2em;
|
||||
position:relative;
|
||||
top: .5em;
|
||||
}
|
||||
|
||||
.cap-button {
|
||||
background-color: var(--f7-theme-color);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.demo-chip {
|
||||
height: 24px;
|
||||
padding-left: 8px;
|
||||
--f7-chip-border-radius: 12px;
|
||||
--f7-chip-media-size: 24px;
|
||||
--f7-chip-font-weight: normal;
|
||||
}
|
||||
|
||||
.demo-chip .chip-media {
|
||||
background: conic-gradient(from 135deg, #00cc00 .75turn, #00cc0088 .75turn) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import SvgIcon from '../components/svg-icon.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -3,32 +3,30 @@
|
||||
<!-- Top Navbar -->
|
||||
<f7-navbar>
|
||||
<f7-nav-left>
|
||||
<f7-link icon-ios="f7:bars" icon-md="f7:bars" panel-open="left"></f7-link>
|
||||
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
|
||||
</f7-nav-left>
|
||||
<f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title>
|
||||
</f7-navbar>
|
||||
<!-- Page content-->
|
||||
<div style="display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content min-content 1fr; align-content: stretch; gap: 15px; min-height: 0px; max-height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top))); height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top)));">
|
||||
<h2 style="text-align: center; padding-left: 30px; padding-right: 30px;">Anatomy Lab Visual Identification Neural Network</h2>
|
||||
<h4 style="text-align: center; margin: 0;">
|
||||
Veterinary Anatomy Edition
|
||||
<f7-link @click="alphaWarn">
|
||||
ALPHA RELEASE
|
||||
<f7-badge style="margin-left: 3px;" v-if="!alphaCheck" color="red">!</f7-badge>
|
||||
</f7-link>
|
||||
</h4>
|
||||
<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 :class="`region-button thorax${isAgreed && getRegions.includes('thorax') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('thorax') && '/detect/thorax/'">
|
||||
<!--</f7-button><f7-button :class="`region-button thorax`" :href="'/detect/thorax/'">-->
|
||||
<f7-button :class="`region-button thorax${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/thorax/'">
|
||||
<RegionIcon class="region-image" :region="0" />
|
||||
</f7-button>
|
||||
<f7-button :class="`region-button abdomen${isAgreed && getRegions.includes('abdomen') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('abdomen') && '/detect/abdomen/'">
|
||||
<!--<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/'">
|
||||
<RegionIcon class="region-image" :region="1" />
|
||||
</f7-button>
|
||||
<f7-button :class="`region-button limbs${isAgreed && getRegions.includes('limbs') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('limbs') && '/detect/limbs/'">
|
||||
<!--<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/'">
|
||||
<RegionIcon class="region-image" :region="2" />
|
||||
</f7-button>
|
||||
<f7-button :class="`region-button headneck${isAgreed && getRegions.includes('head') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('head') && '/detect/head/'">
|
||||
<!--<f7-button class="region-button headneck disabled" :href="siteSettings.siteAgreement && '/detect/head/'">-->
|
||||
<f7-button class="region-button headneck disabled" :href="'/detect/head/'">
|
||||
<RegionIcon class="region-image" :region="3" />
|
||||
</f7-button>
|
||||
</div>
|
||||
@@ -95,24 +93,13 @@
|
||||
<script>
|
||||
import RegionIcon from '../components/region-icon.vue'
|
||||
import store from '../js/store'
|
||||
import { f7 } from 'framework7-vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RegionIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
alphaCheck: false
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
return store()
|
||||
},
|
||||
methods: {
|
||||
alphaWarn () {
|
||||
f7.dialog.alert('This is an alpha release. Expect bugs and use the contact page to report any bugs you encounter.', 'Warning', () => { this.alphaCheck = true })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,117 +1,61 @@
|
||||
<template>
|
||||
<f7-page name="settings">
|
||||
<!-- Top Navbar -->
|
||||
<f7-navbar :sliding="false">
|
||||
<f7-nav-left>
|
||||
<f7-link class="link icon-only ripple-inset" @click="confirmBack">
|
||||
<f7-icon class="icon-back"></f7-icon>
|
||||
</f7-link>
|
||||
</f7-nav-left>
|
||||
<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-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>
|
||||
<f7-list-item title="Light" :checked="themeSettings.darkMode.toString() == 'false'" radio name="darkmode" radio-icon="end" @change="setDarkMode(false)" ></f7-list-item>
|
||||
<f7-list-item title="Dark" :checked="themeSettings.darkMode.toString() == 'true'" radio name="darkmode" radio-icon="end" @change="setDarkMode(true)" ></f7-list-item>
|
||||
</f7-list>
|
||||
<f7-block-title @click="toggleSettingsView" medium><f7-icon :f7="showAdvanced ? 'chevron_down' : 'chevron_right'" /> Advanced Settings </f7-block-title>
|
||||
<div ref="advancedSettings" class="settings-container">
|
||||
<div style="display:flex; justify-content:space-between; width: 100%; margin-bottom: 10px;">
|
||||
<span style="margin-left: 16px;">Use mini ALVINN<f7-icon size="16" style="padding-left: 5px;" f7="question_diamond_fill" tooltip="faster, less accurate: recommended for slower devices" /></span>
|
||||
<f7-toggle v-model:checked="otherSettings.mini" style="margin-right: 16px;" @change="setDirty()" />
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; width: 100%; margin-bottom: 10px;">
|
||||
<span style="margin-left: 16px;">Enable demo mode</span>
|
||||
<f7-toggle v-model:checked="otherSettings.demo" style="margin-right: 16px;" @change="setDirty()" />
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; width: 100%; margin-bottom: 10px;">
|
||||
<span style="margin-left: 16px;">Disable video estimates<f7-icon size="16" style="padding-left: 5px;" f7="question_diamond_fill" tooltip="faster: recommended for slower devices" /></span>
|
||||
<f7-toggle v-model:checked="otherSettings.disableVideo" style="margin-right: 16px;" />
|
||||
</div>
|
||||
<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;" @change="setDirty()" />
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
<f7-button fill @click="saveAllSettings">SAVE</f7-button>
|
||||
<f7-button @click="saveAllSettings" >Save</f7-button>
|
||||
</div>
|
||||
</f7-block>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.settings-container {
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { f7 } from 'framework7-vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
showAdvanced: false,
|
||||
isDirty: false,
|
||||
otherSettings: {
|
||||
mini: false
|
||||
},
|
||||
serverSettings: {
|
||||
use: false,
|
||||
address: '10.170.64.22',
|
||||
port: '9001',
|
||||
previous: {}
|
||||
port: '9001'
|
||||
},
|
||||
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)
|
||||
var loadOtherSettings = localStorage.getItem('otherSettings')
|
||||
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
|
||||
},
|
||||
methods: {
|
||||
saveAllSettings () {
|
||||
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))
|
||||
localStorage.setItem('otherSettings',JSON.stringify(this.otherSettings))
|
||||
saved()
|
||||
} catch {
|
||||
failed()
|
||||
@@ -125,7 +69,6 @@
|
||||
closeTimeout: 2000
|
||||
})
|
||||
toast.open()
|
||||
this.isDirty = false;
|
||||
},
|
||||
() => {
|
||||
var toast = f7.toast.create({
|
||||
@@ -136,31 +79,9 @@
|
||||
}
|
||||
)
|
||||
},
|
||||
setDirty () {
|
||||
this.isDirty = true
|
||||
},
|
||||
setDarkMode (mode) {
|
||||
this.themeSettings.darkMode = mode
|
||||
f7.setDarkMode(mode)
|
||||
this.isDirty = true
|
||||
},
|
||||
setServerProps (add, port) {
|
||||
this.serverSettings.address = add
|
||||
this.serverSettings.port = port
|
||||
this.isDirty = true
|
||||
},
|
||||
toggleSettingsView () {
|
||||
this.showAdvanced = !this.showAdvanced
|
||||
this.$refs.advancedSettings.style.maxHeight = `${this.showAdvanced ? this.$refs.advancedSettings.scrollHeight : 0}px`
|
||||
},
|
||||
confirmBack () {
|
||||
if (this.isDirty) {
|
||||
f7.dialog.confirm('If you leave this page you will loose unsaved changes to your settings.', () => {
|
||||
f7.views.main.router.back()
|
||||
})
|
||||
} else {
|
||||
f7.views.main.router.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
<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: stretch;">
|
||||
<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 :class="otherSettings.mini ? 'unused-model' : ''" title="Thorax" :after="thoraxDetails.version"></f7-list-item>
|
||||
<f7-list-item title="Thorax-m" :after="miniThoraxDetails.version"></f7-list-item>
|
||||
<f7-list-item :class="otherSettings.mini ? 'unused-model' : ''" title="Abdomen/Pelvis" :after="abdomenDetails.version"></f7-list-item>
|
||||
<f7-list-item title="Abd/Pel-m" :after="miniAbdomenDetails.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>
|
||||
|
||||
<style>
|
||||
.unused-model {
|
||||
opacity: .75;
|
||||
}
|
||||
.unused-model .item-title {
|
||||
color: var(--f7-list-item-after-text-color)
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import store from '../js/store'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
thoraxDetails: {},
|
||||
miniThoraxDetails: {},
|
||||
abdomenDetails: {},
|
||||
miniAbdomenDetails: {},
|
||||
limbsDetails: { "version": "N/A" },
|
||||
headneckDetails: { "version": "N/A" },
|
||||
alvinnVersion: store().getVersion,
|
||||
isCordova: !!window.cordova,
|
||||
otherSettings: {}
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
return store()
|
||||
},
|
||||
created () {
|
||||
var loadOtherSettings = localStorage.getItem('otherSettings')
|
||||
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
|
||||
fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/thorax/descript.json`)
|
||||
.then((mod) => { return mod.json() })
|
||||
.then((desc) => { this.thoraxDetails = desc })
|
||||
fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/thorax-mini/descript.json`)
|
||||
.then((mod) => { return mod.json() })
|
||||
.then((desc) => { this.miniThoraxDetails = desc })
|
||||
fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/abdomen/descript.json`)
|
||||
.then((mod) => { return mod.json() })
|
||||
.then((desc) => { this.abdomenDetails = desc })
|
||||
fetch(`${this.isCordova ? 'https://localhost' : '.'}/models/abdomen-mini/descript.json`)
|
||||
.then((mod) => { return mod.json() })
|
||||
.then((desc) => { this.miniAbdomenDetails = desc })
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user