Compare commits
33 Commits
7a19b9c43c
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 71b7b16bdd | |||
| 1936d90550 | |||
| 8bf74e51ea | |||
| 21e46713a7 | |||
| 726d56131c | |||
| 874901086d | |||
| a98577e206 | |||
| 9e90823858 | |||
| 269e62b5fb | |||
| 1c62f2783c | |||
| 9ba3580056 | |||
| 9415fa3783 | |||
| 966782d8b9 | |||
| ce76528958 | |||
| c3420dbcdf | |||
| f32f107078 | |||
| 43ccf20561 | |||
| 8c2a135afb | |||
| ab6af04e5b | |||
| 8ba930ed2e | |||
| d2ee45c61a | |||
| e4a3d1ab46 | |||
| 862773d622 | |||
| 47ec235cfa | |||
| dcdde0289b | |||
| 390faf0a29 | |||
| 523b50ec65 | |||
| f35b28a7fb | |||
| 94995a7a74 | |||
| daf17bcdff | |||
| 56a6d85f75 | |||
| 46b5ba7d6e | |||
| 401e5831c7 |
@@ -13,6 +13,8 @@ jobs:
|
||||
uses: actions/checkout@v4
|
||||
- name: Install node modules
|
||||
run: npm install
|
||||
- name: Add build number
|
||||
run: sed -i 's/####/#${{ github.run_number }}/' ./src/js/store.js
|
||||
- name: Build pwa
|
||||
run: npm run build
|
||||
- name: Replace previous dev pwa
|
||||
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
@@ -40,7 +40,8 @@ cordova/platforms/
|
||||
cordova/plugins/
|
||||
cordova/www/
|
||||
|
||||
|
||||
|
||||
# Production build
|
||||
www/
|
||||
|
||||
# VSCode settings
|
||||
.vscode/settings.json
|
||||
|
||||
@@ -47,9 +47,10 @@ The following site settings are avaible:
|
||||
| name | description | values | default |
|
||||
| --- | --- | --- | --- |
|
||||
| `agreeExpire` | number of months before users are shown the site agreement dialog again<br />set to 0 to display dialog on every reload | integer >= 0 | 3 |
|
||||
| `demo` | set to **true** to enable demo mode by default | boolean | false
|
||||
| `demo` | set to **true** to enable demo mode by default | boolean | false |
|
||||
| `regions` | array of regions names to enable | thorax, abdomen, limbs, head | [thorax, abdomen, limbs, head] |
|
||||
| `useExternal` | detemines the ability to use an external detection server:<br />**none** - external server cannot be configured<br />**optional** - external server can be configured in the app's settings page<br />**list** - external server can be selected in the app's settings page but only the configured server(s) may be selected<br />**required** - external server settings from conf file will be used by default and disable server options in the settings page | none, optional, list, required | **optional** |
|
||||
| `disableWorkers` | force app to use a single thread for detection computations instead of multi threading web workers | boolean | **optional** |
|
||||
| `external` | properties of the external server(s) ALVINN may connect to<br />This setting must be a single element array if **useExternal** is set to **required**.<br />This setting must be an array of one or more elements if **useExternal** is set to **list** | external server settings array | []|
|
||||
| `infoUrl` | root url for links to information about identified structures<br />Structure labels with spaces replaced by underscores will be appended to this value for full information links (*e.g.,* Abdominal_diapragm) | string | info link not shown |
|
||||
|
||||
|
||||
@@ -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.5.0-alpha" 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">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "edu.midwestern.alvinn",
|
||||
"displayName": "ALVINN",
|
||||
"version": "0.5.0-rc",
|
||||
"version": "0.5.0-alpha",
|
||||
"description": "Anatomy Lab Visual Identification Neural Network.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
173
package-lock.json
generated
173
package-lock.json
generated
@@ -1,16 +1,16 @@
|
||||
{
|
||||
"name": "alvinn",
|
||||
"version": "0.5.0-rc",
|
||||
"version": "0.5.0-alpha",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "alvinn",
|
||||
"version": "0.5.0-rc",
|
||||
"version": "0.5.0-alpha",
|
||||
"hasInstallScript": true,
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@tensorflow/tfjs": "^4.17.0",
|
||||
"@tensorflow/tfjs": "^4.21.0",
|
||||
"dom7": "^4.0.6",
|
||||
"framework7": "^8.3.0",
|
||||
"framework7-icons": "^5.0.5",
|
||||
@@ -3354,16 +3354,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tensorflow/tfjs": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.17.0.tgz",
|
||||
"integrity": "sha512-yXRBhpM3frlNA/YaPp6HNk9EfIi8han5RYeQA3R8OCa0Od+AfoG1PUmlxV8fE2wCorlGVyHsgpiJ6M9YZPB56w==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.21.0.tgz",
|
||||
"integrity": "sha512-7D/+H150ptvt+POMbsME3WlIvLiuBR2rCC2Z0hOKKb/5Ygkj7xsp/K2HzOvUj0g0yjk+utkU45QEYhnhjnbHRA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@tensorflow/tfjs-backend-cpu": "4.17.0",
|
||||
"@tensorflow/tfjs-backend-webgl": "4.17.0",
|
||||
"@tensorflow/tfjs-converter": "4.17.0",
|
||||
"@tensorflow/tfjs-core": "4.17.0",
|
||||
"@tensorflow/tfjs-data": "4.17.0",
|
||||
"@tensorflow/tfjs-layers": "4.17.0",
|
||||
"@tensorflow/tfjs-backend-cpu": "4.21.0",
|
||||
"@tensorflow/tfjs-backend-webgl": "4.21.0",
|
||||
"@tensorflow/tfjs-converter": "4.21.0",
|
||||
"@tensorflow/tfjs-core": "4.21.0",
|
||||
"@tensorflow/tfjs-data": "4.21.0",
|
||||
"@tensorflow/tfjs-layers": "4.21.0",
|
||||
"argparse": "^1.0.10",
|
||||
"chalk": "^4.1.0",
|
||||
"core-js": "3.29.1",
|
||||
@@ -3375,9 +3376,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tensorflow/tfjs-backend-cpu": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.17.0.tgz",
|
||||
"integrity": "sha512-2VSCHnX9qhYTjw9HiVwTBSnRVlntKXeBlK7aSVsmZfHGwWE2faErTtO7bWmqNqw0U7gyznJbVAjlow/p+0RNGw==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.21.0.tgz",
|
||||
"integrity": "sha512-yS9Oisg4L48N7ML6677ilv1eP5Jt59S74skSU1cCsM4yBAtH4DAn9b89/JtqBISh6JadanfX26b4HCWQvMvqFg==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@types/seedrandom": "^2.4.28",
|
||||
"seedrandom": "^3.0.5"
|
||||
@@ -3386,15 +3388,16 @@
|
||||
"yarn": ">= 1.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tensorflow/tfjs-core": "4.17.0"
|
||||
"@tensorflow/tfjs-core": "4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tensorflow/tfjs-backend-webgl": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.17.0.tgz",
|
||||
"integrity": "sha512-CC5GsGECCd7eYAUaKq0XJ48FjEZdgXZWPxgUYx4djvfUx5fQPp35hCSP9w/k463jllBMbjl2tKRg8u7Ia/LYzg==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.21.0.tgz",
|
||||
"integrity": "sha512-7k6mb7dd0uF9jI51iunF3rhEXjvR/a613kjWZ0Rj3o1COFrneyku2C7cRMZERWPhbgXZ+dF+j9MdpGIpgtShIQ==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@tensorflow/tfjs-backend-cpu": "4.17.0",
|
||||
"@tensorflow/tfjs-backend-cpu": "4.21.0",
|
||||
"@types/offscreencanvas": "~2019.3.0",
|
||||
"@types/seedrandom": "^2.4.28",
|
||||
"seedrandom": "^3.0.5"
|
||||
@@ -3403,21 +3406,23 @@
|
||||
"yarn": ">= 1.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tensorflow/tfjs-core": "4.17.0"
|
||||
"@tensorflow/tfjs-core": "4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tensorflow/tfjs-converter": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.17.0.tgz",
|
||||
"integrity": "sha512-qFxIjPfomCuTrYxsFjtKbi3QfdmTTCWo+RvqD64oCMS0sjp7sUDNhJyKDoLx6LZhXlwXpHIVDJctLMRMwet0Zw==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.21.0.tgz",
|
||||
"integrity": "sha512-cUhU+F1lGx2qnKk/gRy8odBh0PZlFz0Dl71TG8LVnj0/g352DqiNrKXlKO/po9aWzP8x0KUGC3gNMSMJW+T0DA==",
|
||||
"license": "Apache-2.0",
|
||||
"peerDependencies": {
|
||||
"@tensorflow/tfjs-core": "4.17.0"
|
||||
"@tensorflow/tfjs-core": "4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tensorflow/tfjs-core": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.17.0.tgz",
|
||||
"integrity": "sha512-v9Q5430EnRpyhWNd9LVgXadciKvxLiq+sTrLKRowh26BHyAsams4tZIgX3lFKjB7b90p+FYifVMcqLTTHgjGpQ==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.21.0.tgz",
|
||||
"integrity": "sha512-ZbECwXps5wb9XXcGq4ZXvZDVjr5okc3I0+i/vU6bpQ+nVApyIrMiyEudP8f6vracVTvNmnlN62vUXoEsQb2F8g==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@types/long": "^4.0.1",
|
||||
"@types/offscreencanvas": "~2019.7.0",
|
||||
@@ -3434,28 +3439,31 @@
|
||||
"node_modules/@tensorflow/tfjs-core/node_modules/@types/offscreencanvas": {
|
||||
"version": "2019.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
|
||||
"integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="
|
||||
"integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tensorflow/tfjs-data": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.17.0.tgz",
|
||||
"integrity": "sha512-aPKrDFip+gXicWOFALeNT7KKQjRXFkHd/hNe/zs4mCFcIN00hy1PkZ6xkYsgrsdLDQMBSGeS4B4ZM0k5Cs88QA==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.21.0.tgz",
|
||||
"integrity": "sha512-LpJ/vyQMwYHkcVCqIRg7IVVw13VBY7rNAiuhmKP9S5NP/2ye4KA8BJ4XwDIDgjCVQM7glK9L8bMav++xCDf7xA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@types/node-fetch": "^2.1.2",
|
||||
"node-fetch": "~2.6.1",
|
||||
"string_decoder": "^1.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tensorflow/tfjs-core": "4.17.0",
|
||||
"@tensorflow/tfjs-core": "4.21.0",
|
||||
"seedrandom": "^3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@tensorflow/tfjs-layers": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.17.0.tgz",
|
||||
"integrity": "sha512-DEE0zRKvf3LJ0EcvG5XouJYOgFGWYAneZ0K1d23969z7LfSyqVmBdLC6BTwdLKuJk3ouUJIKXU1TcpFmjDuh7g==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.21.0.tgz",
|
||||
"integrity": "sha512-a8KaMYlY3+llvE9079nvASKpaaf8xpCMdOjbgn+eGhdOGOcY7QuFUkd/2odvnXDG8fK/jffE1LoNOlfYoBHC4w==",
|
||||
"license": "Apache-2.0 AND MIT",
|
||||
"peerDependencies": {
|
||||
"@tensorflow/tfjs-core": "4.17.0"
|
||||
"@tensorflow/tfjs-core": "4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tensorflow/tfjs/node_modules/regenerator-runtime": {
|
||||
@@ -3472,7 +3480,8 @@
|
||||
"node_modules/@types/long": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz",
|
||||
"integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="
|
||||
"integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/minimist": {
|
||||
"version": "1.2.5",
|
||||
@@ -3492,6 +3501,7 @@
|
||||
"version": "2.6.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz",
|
||||
"integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*",
|
||||
"form-data": "^4.0.0"
|
||||
@@ -3506,7 +3516,8 @@
|
||||
"node_modules/@types/offscreencanvas": {
|
||||
"version": "2019.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.3.0.tgz",
|
||||
"integrity": "sha512-esIJx9bQg+QYF0ra8GnvfianIY8qWB0GBx54PK5Eps6m+xTj86KLavHv6qDhzKcu5UUOgNfJ2pWaIIV7TRUd9Q=="
|
||||
"integrity": "sha512-esIJx9bQg+QYF0ra8GnvfianIY8qWB0GBx54PK5Eps6m+xTj86KLavHv6qDhzKcu5UUOgNfJ2pWaIIV7TRUd9Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.17.1",
|
||||
@@ -3520,7 +3531,8 @@
|
||||
"node_modules/@types/seedrandom": {
|
||||
"version": "2.4.34",
|
||||
"resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-2.4.34.tgz",
|
||||
"integrity": "sha512-ytDiArvrn/3Xk6/vtylys5tlY6eo7Ane0hvcx++TKo6RxQXuVfW0AF/oeWqAj9dN29SyhtawuXstgmPlwNcv/A=="
|
||||
"integrity": "sha512-ytDiArvrn/3Xk6/vtylys5tlY6eo7Ane0hvcx++TKo6RxQXuVfW0AF/oeWqAj9dN29SyhtawuXstgmPlwNcv/A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.6",
|
||||
@@ -3646,7 +3658,8 @@
|
||||
"node_modules/@webgpu/types": {
|
||||
"version": "0.1.38",
|
||||
"resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.38.tgz",
|
||||
"integrity": "sha512-7LrhVKz2PRh+DD7+S+PVaFd5HxaWQvoMqBbsV9fNJO1pjUs1P8bM2vQVNfk+3URTqbuTI7gkXi0rfsN0IadoBA=="
|
||||
"integrity": "sha512-7LrhVKz2PRh+DD7+S+PVaFd5HxaWQvoMqBbsV9fNJO1pjUs1P8bM2vQVNfk+3URTqbuTI7gkXi0rfsN0IadoBA==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.11.2",
|
||||
@@ -3814,7 +3827,8 @@
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/at-least-node": {
|
||||
"version": "1.0.0",
|
||||
@@ -4412,6 +4426,7 @@
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
@@ -4872,6 +4887,7 @@
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
@@ -5357,6 +5373,7 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
@@ -6577,7 +6594,8 @@
|
||||
"node_modules/long": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
|
||||
"integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
|
||||
"integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/lower-case": {
|
||||
"version": "2.0.2",
|
||||
@@ -6688,6 +6706,7 @@
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
@@ -6696,6 +6715,7 @@
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
@@ -6823,6 +6843,7 @@
|
||||
"version": "2.6.13",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.13.tgz",
|
||||
"integrity": "sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"whatwg-url": "^5.0.0"
|
||||
},
|
||||
@@ -6841,17 +6862,20 @@
|
||||
"node_modules/node-fetch/node_modules/tr46": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
|
||||
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
|
||||
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-fetch/node_modules/webidl-conversions": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
|
||||
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
|
||||
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/node-fetch/node_modules/whatwg-url": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
|
||||
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tr46": "~0.0.3",
|
||||
"webidl-conversions": "^3.0.0"
|
||||
@@ -8481,7 +8505,8 @@
|
||||
"node_modules/seedrandom": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
|
||||
"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
|
||||
"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
@@ -11858,16 +11883,16 @@
|
||||
}
|
||||
},
|
||||
"@tensorflow/tfjs": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.17.0.tgz",
|
||||
"integrity": "sha512-yXRBhpM3frlNA/YaPp6HNk9EfIi8han5RYeQA3R8OCa0Od+AfoG1PUmlxV8fE2wCorlGVyHsgpiJ6M9YZPB56w==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.21.0.tgz",
|
||||
"integrity": "sha512-7D/+H150ptvt+POMbsME3WlIvLiuBR2rCC2Z0hOKKb/5Ygkj7xsp/K2HzOvUj0g0yjk+utkU45QEYhnhjnbHRA==",
|
||||
"requires": {
|
||||
"@tensorflow/tfjs-backend-cpu": "4.17.0",
|
||||
"@tensorflow/tfjs-backend-webgl": "4.17.0",
|
||||
"@tensorflow/tfjs-converter": "4.17.0",
|
||||
"@tensorflow/tfjs-core": "4.17.0",
|
||||
"@tensorflow/tfjs-data": "4.17.0",
|
||||
"@tensorflow/tfjs-layers": "4.17.0",
|
||||
"@tensorflow/tfjs-backend-cpu": "4.21.0",
|
||||
"@tensorflow/tfjs-backend-webgl": "4.21.0",
|
||||
"@tensorflow/tfjs-converter": "4.21.0",
|
||||
"@tensorflow/tfjs-core": "4.21.0",
|
||||
"@tensorflow/tfjs-data": "4.21.0",
|
||||
"@tensorflow/tfjs-layers": "4.21.0",
|
||||
"argparse": "^1.0.10",
|
||||
"chalk": "^4.1.0",
|
||||
"core-js": "3.29.1",
|
||||
@@ -11883,35 +11908,35 @@
|
||||
}
|
||||
},
|
||||
"@tensorflow/tfjs-backend-cpu": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.17.0.tgz",
|
||||
"integrity": "sha512-2VSCHnX9qhYTjw9HiVwTBSnRVlntKXeBlK7aSVsmZfHGwWE2faErTtO7bWmqNqw0U7gyznJbVAjlow/p+0RNGw==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-cpu/-/tfjs-backend-cpu-4.21.0.tgz",
|
||||
"integrity": "sha512-yS9Oisg4L48N7ML6677ilv1eP5Jt59S74skSU1cCsM4yBAtH4DAn9b89/JtqBISh6JadanfX26b4HCWQvMvqFg==",
|
||||
"requires": {
|
||||
"@types/seedrandom": "^2.4.28",
|
||||
"seedrandom": "^3.0.5"
|
||||
}
|
||||
},
|
||||
"@tensorflow/tfjs-backend-webgl": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.17.0.tgz",
|
||||
"integrity": "sha512-CC5GsGECCd7eYAUaKq0XJ48FjEZdgXZWPxgUYx4djvfUx5fQPp35hCSP9w/k463jllBMbjl2tKRg8u7Ia/LYzg==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-4.21.0.tgz",
|
||||
"integrity": "sha512-7k6mb7dd0uF9jI51iunF3rhEXjvR/a613kjWZ0Rj3o1COFrneyku2C7cRMZERWPhbgXZ+dF+j9MdpGIpgtShIQ==",
|
||||
"requires": {
|
||||
"@tensorflow/tfjs-backend-cpu": "4.17.0",
|
||||
"@tensorflow/tfjs-backend-cpu": "4.21.0",
|
||||
"@types/offscreencanvas": "~2019.3.0",
|
||||
"@types/seedrandom": "^2.4.28",
|
||||
"seedrandom": "^3.0.5"
|
||||
}
|
||||
},
|
||||
"@tensorflow/tfjs-converter": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.17.0.tgz",
|
||||
"integrity": "sha512-qFxIjPfomCuTrYxsFjtKbi3QfdmTTCWo+RvqD64oCMS0sjp7sUDNhJyKDoLx6LZhXlwXpHIVDJctLMRMwet0Zw==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-converter/-/tfjs-converter-4.21.0.tgz",
|
||||
"integrity": "sha512-cUhU+F1lGx2qnKk/gRy8odBh0PZlFz0Dl71TG8LVnj0/g352DqiNrKXlKO/po9aWzP8x0KUGC3gNMSMJW+T0DA==",
|
||||
"requires": {}
|
||||
},
|
||||
"@tensorflow/tfjs-core": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.17.0.tgz",
|
||||
"integrity": "sha512-v9Q5430EnRpyhWNd9LVgXadciKvxLiq+sTrLKRowh26BHyAsams4tZIgX3lFKjB7b90p+FYifVMcqLTTHgjGpQ==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-core/-/tfjs-core-4.21.0.tgz",
|
||||
"integrity": "sha512-ZbECwXps5wb9XXcGq4ZXvZDVjr5okc3I0+i/vU6bpQ+nVApyIrMiyEudP8f6vracVTvNmnlN62vUXoEsQb2F8g==",
|
||||
"requires": {
|
||||
"@types/long": "^4.0.1",
|
||||
"@types/offscreencanvas": "~2019.7.0",
|
||||
@@ -11930,9 +11955,9 @@
|
||||
}
|
||||
},
|
||||
"@tensorflow/tfjs-data": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.17.0.tgz",
|
||||
"integrity": "sha512-aPKrDFip+gXicWOFALeNT7KKQjRXFkHd/hNe/zs4mCFcIN00hy1PkZ6xkYsgrsdLDQMBSGeS4B4ZM0k5Cs88QA==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-data/-/tfjs-data-4.21.0.tgz",
|
||||
"integrity": "sha512-LpJ/vyQMwYHkcVCqIRg7IVVw13VBY7rNAiuhmKP9S5NP/2ye4KA8BJ4XwDIDgjCVQM7glK9L8bMav++xCDf7xA==",
|
||||
"requires": {
|
||||
"@types/node-fetch": "^2.1.2",
|
||||
"node-fetch": "~2.6.1",
|
||||
@@ -11940,9 +11965,9 @@
|
||||
}
|
||||
},
|
||||
"@tensorflow/tfjs-layers": {
|
||||
"version": "4.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.17.0.tgz",
|
||||
"integrity": "sha512-DEE0zRKvf3LJ0EcvG5XouJYOgFGWYAneZ0K1d23969z7LfSyqVmBdLC6BTwdLKuJk3ouUJIKXU1TcpFmjDuh7g==",
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/@tensorflow/tfjs-layers/-/tfjs-layers-4.21.0.tgz",
|
||||
"integrity": "sha512-a8KaMYlY3+llvE9079nvASKpaaf8xpCMdOjbgn+eGhdOGOcY7QuFUkd/2odvnXDG8fK/jffE1LoNOlfYoBHC4w==",
|
||||
"requires": {}
|
||||
},
|
||||
"@types/estree": {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "alvinn",
|
||||
"private": true,
|
||||
"version": "0.5.0-rc",
|
||||
"version": "0.5.0-alpha",
|
||||
"description": "ALVINN",
|
||||
"repository": "",
|
||||
"license": "UNLICENSED",
|
||||
@@ -14,7 +14,8 @@
|
||||
"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/",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"browserslist": [
|
||||
"IOS >= 15",
|
||||
@@ -23,7 +24,7 @@
|
||||
"last 5 Firefox versions"
|
||||
],
|
||||
"dependencies": {
|
||||
"@tensorflow/tfjs": "^4.17.0",
|
||||
"@tensorflow/tfjs": "^4.21.0",
|
||||
"dom7": "^4.0.6",
|
||||
"framework7": "^8.3.0",
|
||||
"framework7-icons": "^5.0.5",
|
||||
|
||||
@@ -6,6 +6,7 @@ regions:
|
||||
- limbs
|
||||
- head
|
||||
useExternal: none
|
||||
disableWorkers: false
|
||||
external:
|
||||
- name: Mserver
|
||||
address: "192.169.1.105"
|
||||
|
||||
@@ -5,7 +5,7 @@ let model = null
|
||||
onmessage = function (e) {
|
||||
switch (e.data.call) {
|
||||
case 'loadModel':
|
||||
loadModel('.' + e.data.weights,e.data.preload).then(() => {
|
||||
loadModel(e.data.weights,e.data.preload).then(() => {
|
||||
postMessage({success: 'model'})
|
||||
}).catch((err) => {
|
||||
postMessage({error: true, message: err.message})
|
||||
@@ -57,7 +57,7 @@ async function loadModel(weights, preload) {
|
||||
}
|
||||
|
||||
async function localDetect(imageData) {
|
||||
console.time('pre-process')
|
||||
console.time('sw: pre-process')
|
||||
const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
|
||||
let gTense = null
|
||||
const input = tf.tidy(() => {
|
||||
@@ -65,24 +65,28 @@ async function localDetect(imageData) {
|
||||
return tf.concat([gTense,gTense,gTense],3)
|
||||
})
|
||||
tf.dispose(gTense)
|
||||
console.timeEnd('pre-process')
|
||||
console.timeEnd('sw: pre-process')
|
||||
|
||||
console.time('run prediction')
|
||||
console.time('sw: run prediction')
|
||||
const res = model.predict(input)
|
||||
const tRes = tf.transpose(res,[0,2,1])
|
||||
const rawRes = tRes.arraySync()[0]
|
||||
console.timeEnd('run prediction')
|
||||
console.timeEnd('sw: run prediction')
|
||||
|
||||
console.time('post-process')
|
||||
console.time('sw: post-process')
|
||||
const outputSize = res.shape[1]
|
||||
const output = {
|
||||
detections: []
|
||||
}
|
||||
let rawBoxes = []
|
||||
let rawScores = []
|
||||
let getScores, getBox, boxCalc
|
||||
|
||||
for (var i = 0; i < rawRes.length; i++) {
|
||||
var getScores = rawRes[i].slice(4)
|
||||
for (let i = 0; i < rawRes.length; i++) {
|
||||
getScores = rawRes[i].slice(4)
|
||||
if (getScores.every( s => s < .05)) { continue }
|
||||
var getBox = rawRes[i].slice(0,4)
|
||||
var boxCalc = [
|
||||
getBox = rawRes[i].slice(0,4)
|
||||
boxCalc = [
|
||||
(getBox[0] - (getBox[2] / 2)) / modelWidth,
|
||||
(getBox[1] - (getBox[3] / 2)) / modelHeight,
|
||||
(getBox[0] + (getBox[2] / 2)) / modelWidth,
|
||||
@@ -101,7 +105,7 @@ async function localDetect(imageData) {
|
||||
let boxes_data = []
|
||||
let scores_data = []
|
||||
let classes_data = []
|
||||
for (var c = 0; c < outputSize - 4; c++) {
|
||||
for (let c = 0; c < outputSize - 4; c++) {
|
||||
structureScores = rawScores.map(x => x[c])
|
||||
tScores = tf.tensor1d(structureScores)
|
||||
resBoxes = await tf.image.nonMaxSuppressionAsync(tBoxes,tScores,10,0.5,.05)
|
||||
@@ -109,7 +113,7 @@ async function localDetect(imageData) {
|
||||
tf.dispose(resBoxes)
|
||||
if (validBoxes) {
|
||||
boxes_data.push(...rawBoxes.filter( (_, idx) => validBoxes.includes(idx)))
|
||||
var outputScores = structureScores.filter( (_, idx) => validBoxes.includes(idx))
|
||||
let outputScores = structureScores.filter( (_, idx) => validBoxes.includes(idx))
|
||||
scores_data.push(...outputScores)
|
||||
classes_data.push(...outputScores.fill(c))
|
||||
}
|
||||
@@ -119,18 +123,15 @@ async function localDetect(imageData) {
|
||||
tf.dispose(tBoxes)
|
||||
tf.dispose(tScores)
|
||||
tf.dispose(tRes)
|
||||
tf.dispose(resBoxes)
|
||||
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]
|
||||
for (let i =0; i < valid_detections_data; i++) {
|
||||
let [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,
|
||||
"label": classes_data[i],
|
||||
"confidence": scores_data[i] * 100
|
||||
})
|
||||
@@ -138,14 +139,14 @@ async function localDetect(imageData) {
|
||||
}
|
||||
tf.dispose(res)
|
||||
tf.dispose(input)
|
||||
console.timeEnd('post-process')
|
||||
console.timeEnd('sw: post-process')
|
||||
|
||||
return output || { detections: [] }
|
||||
}
|
||||
|
||||
async function videoFrame (vidData) {
|
||||
const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
|
||||
console.time('frame-process')
|
||||
console.time('sw: frame-process')
|
||||
let rawCoords = []
|
||||
try {
|
||||
const input = tf.tidy(() => {
|
||||
@@ -155,7 +156,7 @@ async function videoFrame (vidData) {
|
||||
const rawRes = tf.transpose(res,[0,2,1]).arraySync()[0]
|
||||
|
||||
if (rawRes) {
|
||||
for (var i = 0; i < rawRes.length; i++) {
|
||||
for (let i = 0; i < rawRes.length; i++) {
|
||||
let getScores = rawRes[i].slice(4)
|
||||
if (getScores.some( s => s > .5)) {
|
||||
let foundTarget = rawRes[i].slice(0,2)
|
||||
@@ -171,6 +172,6 @@ async function videoFrame (vidData) {
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
console.timeEnd('frame-process')
|
||||
console.timeEnd('sw: frame-process')
|
||||
return {cds: rawCoords, mW: modelWidth, mH: modelHeight}
|
||||
}
|
||||
@@ -74,6 +74,14 @@
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.code == 'KeyR') {
|
||||
console.log(f7.views.main.router.history)
|
||||
}
|
||||
if (e.code == 'KeyB') {
|
||||
f7.views.main.router.back()
|
||||
}
|
||||
})
|
||||
if (!window.cordova) {
|
||||
const confText = await fetch('./conf/conf.yaml')
|
||||
.then((mod) => { return mod.text() })
|
||||
@@ -98,6 +106,9 @@
|
||||
store().set('siteDemo',this.siteConf?.demo)
|
||||
store().set('infoUrl',this.siteConf?.infoUrl)
|
||||
const loadServerSettings = localStorage.getItem('serverSettings')
|
||||
if (this.siteConf.disableWorkers) {
|
||||
store().disableWorkers()
|
||||
}
|
||||
if (this.siteConf?.useExternal) {
|
||||
if (!['none','list','optional','required'].includes(this.siteConf.useExternal)) {
|
||||
console.warn(`'${this.siteConf.useExternal}' is not a valid value for useExternal configuration: using 'optional'`)
|
||||
|
||||
@@ -17,6 +17,9 @@
|
||||
<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"/>
|
||||
<path v-else-if="icon == 'reset_slide'" d="M520-330v-60h160v60H520Zm60 210v-50h-60v-60h60v-50h60v160h-60Zm100-50v-60h160v60H680Zm40-110v-160h60v50h60v60h-60v50h-60Zm111-280h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/>
|
||||
<path v-else-if="icon == 'zoom_to'" d="M440-40v-167l-44 43-56-56 140-140 140 140-56 56-44-43v167h-80ZM220-340l-56-56 43-44H40v-80h167l-43-44 56-56 140 140-140 140Zm520 0L600-480l140-140 56 56-43 44h167v80H753l43 44-56 56Zm-260-80q-25 0-42.5-17.5T420-480q0-25 17.5-42.5T480-540q25 0 42.5 17.5T540-480q0 25-17.5 42.5T480-420Zm0-180L340-740l56-56 44 43v-167h80v167l44-43 56 56-140 140Z"/>
|
||||
<path v-else-if="icon == 'reset_zoom'" d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/>
|
||||
<path v-else-if="icon == 'clipboard'" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h167q11-35 43-57.5t70-22.5q40 0 71.5 22.5T594-840h166q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560h-80v120H280v-120h-80v560Zm280-560q17 0 28.5-11.5T520-800q0-17-11.5-28.5T480-840q-17 0-28.5 11.5T440-800q0 17 11.5 28.5T480-760Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -44,7 +47,10 @@
|
||||
'limbs',
|
||||
'head',
|
||||
'photo_sample',
|
||||
'reset_slide'
|
||||
'reset_slide',
|
||||
'zoom_to',
|
||||
'reset_zoom',
|
||||
'clipboard'
|
||||
]
|
||||
return iconList.includes(value)
|
||||
}
|
||||
|
||||
@@ -150,8 +150,7 @@
|
||||
.structure-info {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
color: rgb(15, 32, 108);
|
||||
background: yellow;
|
||||
color: #0f206c;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<title>ALVINN</title>
|
||||
<% if (TARGET === 'web') { %>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
|
||||
<link rel="icon" href="icons/favicon.png">
|
||||
|
||||
@@ -4,9 +4,11 @@ const state = reactive({
|
||||
disclaimerAgreement: false,
|
||||
enabledRegions: ['thorax','abdomen','limbs','head'],
|
||||
regionIconSet: Math.floor(Math.random() * 3) + 1,
|
||||
version: '0.5.0-rc',
|
||||
version: '0.5.0-alpha',
|
||||
build: '####',
|
||||
fullscreen: false,
|
||||
useExternal: 'optional',
|
||||
workersEnabled: 'true',
|
||||
siteDemo: false,
|
||||
externalServerList: [],
|
||||
infoUrl: false
|
||||
@@ -21,6 +23,10 @@ const agree = () => {
|
||||
state.disclaimerAgreement = true
|
||||
}
|
||||
|
||||
const disableWorkers = () => {
|
||||
state.workersEnabled = false
|
||||
}
|
||||
|
||||
const getServerList = () => {
|
||||
if (state.useExternal == 'required') {
|
||||
return state.externalServerList[0]
|
||||
@@ -46,12 +52,15 @@ export default () => ({
|
||||
isFullscreen: computed(() => state.fullscreen),
|
||||
demoMode: computed(() => state.siteDemo),
|
||||
externalType: computed(() => state.useExternal),
|
||||
useWorkers: computed(() => state.workersEnabled),
|
||||
getRegions: computed(() => state.enabledRegions),
|
||||
getVersion: computed(() => state.version),
|
||||
getBuild: computed(() => state.build),
|
||||
getIconSet: computed(() => state.regionIconSet),
|
||||
getInfoUrl: computed(() => state.infoUrl),
|
||||
set,
|
||||
agree,
|
||||
disableWorkers,
|
||||
getServerList,
|
||||
toggleFullscreen
|
||||
})
|
||||
|
||||
157
src/js/structures.js
Normal file
157
src/js/structures.js
Normal file
@@ -0,0 +1,157 @@
|
||||
class Coordinate {
|
||||
constructor(x, y) {
|
||||
this.x = x
|
||||
this.y = y
|
||||
}
|
||||
|
||||
toRefFrame(...frameArgs) {
|
||||
if (frameArgs.length == 0) {
|
||||
return {x: this.x, y: this.y}
|
||||
}
|
||||
let outFrames = []
|
||||
//Get Coordinates in Image Reference Frame
|
||||
if (frameArgs[0].tagName == 'IMG' && frameArgs[0].width && frameArgs[0].height) {
|
||||
outFrames.push({
|
||||
x: this.x * frameArgs[0].width,
|
||||
y: this.y * frameArgs[0].height
|
||||
})
|
||||
} else {
|
||||
throw new Error('Coordinate: invalid reference frame for frameType: Image')
|
||||
}
|
||||
//Get Coordinates in Canvas Reference Frame
|
||||
if (frameArgs[1]) {
|
||||
if (frameArgs[1].tagName == 'CANVAS' && frameArgs[1].width && frameArgs[1].height) {
|
||||
let imgWidth
|
||||
let imgHeight
|
||||
const imgAspect = frameArgs[0].width / frameArgs[0].height
|
||||
const rendAspect = frameArgs[1].width / frameArgs[1].height
|
||||
if (imgAspect >= rendAspect) {
|
||||
imgWidth = frameArgs[1].width
|
||||
imgHeight = frameArgs[1].width / imgAspect
|
||||
} else {
|
||||
imgWidth = frameArgs[1].height * imgAspect
|
||||
imgHeight = frameArgs[1].height
|
||||
}
|
||||
outFrames.push({
|
||||
x: (frameArgs[1].width - imgWidth) / 2 + this.x * imgWidth,
|
||||
y: (frameArgs[1].height - imgHeight) / 2 + this.y * imgHeight
|
||||
})
|
||||
} else {
|
||||
throw new Error('Coordinate: invalid reference frame for frameType: Canvas')
|
||||
}
|
||||
}
|
||||
//Get Coordinates in Screen Reference Frame
|
||||
if (frameArgs[2]) {
|
||||
if (frameArgs[2].zoom && frameArgs[2].offset && frameArgs[2].offset.x !== undefined && frameArgs[2].offset.y !== undefined) {
|
||||
outFrames.push({
|
||||
x: outFrames[1].x * frameArgs[2].zoom + frameArgs[2].offset.x,
|
||||
y: outFrames[1].y * frameArgs[2].zoom + frameArgs[2].offset.y
|
||||
})
|
||||
} else {
|
||||
throw new Error('Coordinate: invalid reference frame for frameType: Screen')
|
||||
}
|
||||
}
|
||||
|
||||
return outFrames
|
||||
}
|
||||
|
||||
toString() {
|
||||
return `(x: ${this.x}, y: ${this.y})`
|
||||
}
|
||||
}
|
||||
|
||||
export class StructureBox {
|
||||
constructor(top, left, bottom, right) {
|
||||
this.topLeft = new Coordinate(left, top)
|
||||
this.bottomRight = new Coordinate(right, bottom)
|
||||
}
|
||||
|
||||
getBoxes(boxType, ...frameArgs) {
|
||||
let lowerH, lowerV, calcSide
|
||||
switch (boxType) {
|
||||
case 'point':
|
||||
lowerH = 'right'
|
||||
lowerV = 'bottom'
|
||||
break
|
||||
case 'side':
|
||||
lowerH = 'width'
|
||||
lowerV = 'height'
|
||||
calcSide = true
|
||||
break
|
||||
default:
|
||||
throw new Error(`StructureBox: invalid boxType - ${boxType}`)
|
||||
}
|
||||
if (frameArgs.length == 0) {
|
||||
return {
|
||||
left: this.topLeft.x,
|
||||
top: this.topLeft.y,
|
||||
[lowerH]: this.bottomRight.x - ((calcSide) ? this.topLeft.x : 0),
|
||||
[lowerV]: this.bottomRight.y - ((calcSide) ? this.topLeft.y : 0)
|
||||
}
|
||||
}
|
||||
const tL = this.topLeft.toRefFrame(...frameArgs)
|
||||
const bR = this.bottomRight.toRefFrame(...frameArgs)
|
||||
let outBoxes = []
|
||||
tL.forEach((cd, i) => {
|
||||
outBoxes.push({
|
||||
left: cd.x,
|
||||
top: cd.y,
|
||||
[lowerH]: bR[i].x - ((calcSide) ? cd.x : 0),
|
||||
[lowerV]: bR[i].y - ((calcSide) ? cd.y : 0)
|
||||
})
|
||||
})
|
||||
return outBoxes
|
||||
}
|
||||
}
|
||||
|
||||
export class Structure {
|
||||
constructor(structResult) {
|
||||
this.label = structResult.label
|
||||
this.confidence = structResult.confidence
|
||||
this.box = new StructureBox(
|
||||
structResult.top,
|
||||
structResult.left,
|
||||
structResult.bottom,
|
||||
structResult.right
|
||||
)
|
||||
this.deleted = false
|
||||
this.index = -1
|
||||
this.passThreshold = true
|
||||
this.searched = false
|
||||
}
|
||||
|
||||
get resultIndex() {
|
||||
return this.index
|
||||
}
|
||||
|
||||
set resultIndex(newIdx) {
|
||||
this.index = newIdx
|
||||
}
|
||||
|
||||
get isDeleted() {
|
||||
return this.deleted
|
||||
}
|
||||
|
||||
set isDeleted(del) {
|
||||
this.deleted = !!del
|
||||
}
|
||||
|
||||
get isSearched() {
|
||||
return this.searched
|
||||
}
|
||||
|
||||
set isSearched(ser) {
|
||||
this.searched = !!ser
|
||||
}
|
||||
|
||||
get aboveThreshold() {
|
||||
return this.passThreshold
|
||||
}
|
||||
|
||||
setThreshold(level) {
|
||||
if (typeof level != 'number') {
|
||||
throw new Error(`Structure: invalid threshold level ${level}`)
|
||||
}
|
||||
this.passThreshold = this.confidence >= level
|
||||
}
|
||||
}
|
||||
@@ -3,11 +3,11 @@ import { f7 } from 'framework7-vue'
|
||||
export default {
|
||||
methods: {
|
||||
async openCamera(imContain) {
|
||||
var cameraLoaded = false
|
||||
let cameraLoaded = false
|
||||
const devicesList = await navigator.mediaDevices.enumerateDevices()
|
||||
this.videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
|
||||
if (this.videoDeviceAvailable) {
|
||||
var vidConstraint = {
|
||||
let videoDeviceAvailable = devicesList.some( d => d.kind == "videoinput")
|
||||
if (videoDeviceAvailable) {
|
||||
let vidConstraint = {
|
||||
video: {
|
||||
width: {
|
||||
ideal: imContain.offsetWidth
|
||||
@@ -41,24 +41,24 @@ export default {
|
||||
tempCtx.drawImage(vidViewer, 0, 0)
|
||||
this.getImage(tempCVS.toDataURL())
|
||||
},
|
||||
async videoFrameDetect (vidData) {
|
||||
async videoFrameDetectWorker (vidData, vidWorker) {
|
||||
const startDetection = () => {
|
||||
createImageBitmap(vidData).then(imVideoFrame => {
|
||||
this.vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame])
|
||||
vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame])
|
||||
})
|
||||
}
|
||||
vidData.addEventListener('resize',startDetection,{once: true})
|
||||
this.vidWorker.onmessage = (eVid) => {
|
||||
vidWorker.onmessage = (eVid) => {
|
||||
if (eVid.data.error) {
|
||||
console.log(eVid.data.message)
|
||||
f7.dialog.alert(`ALVINN AI model error: ${eVid.data.message}`)
|
||||
} else if (this.videoAvailable) {
|
||||
createImageBitmap(vidData).then(imVideoFrame => {
|
||||
this.vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame])
|
||||
vidWorker.postMessage({call: 'videoFrame', image: imVideoFrame}, [imVideoFrame])
|
||||
})
|
||||
if (eVid.data.coords) {
|
||||
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
|
||||
for (var coord of eVid.data.coords) {
|
||||
for (let coord of eVid.data.coords) {
|
||||
let pointX = (imCanvas.width - imgWidth) / 2 + (coord[0] / eVid.data.modelWidth) * imgWidth - 10
|
||||
let pointY = (imCanvas.height - imgHeight) / 2 + (coord[1] / eVid.data.modelHeight) * imgHeight - 10
|
||||
console.debug(`cx: ${pointX}, cy: ${pointY}`)
|
||||
@@ -72,8 +72,7 @@ export default {
|
||||
const imCanvas = this.$refs.image_cvs
|
||||
const imageCtx = imCanvas.getContext("2d")
|
||||
const target = this.$refs.target_image
|
||||
var imgWidth
|
||||
var imgHeight
|
||||
let imgWidth, imgHeight
|
||||
f7.utils.nextFrame(() => {
|
||||
imCanvas.width = imCanvas.clientWidth
|
||||
imCanvas.height = imCanvas.clientHeight
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
},
|
||||
computed: {
|
||||
commentText () {
|
||||
var text = f7.textEditor.get('.comment-editor').getValue()
|
||||
let text = f7.textEditor.get('.comment-editor').getValue()
|
||||
if (this.userEmail) {
|
||||
text += `\\n\\nSubmitted by: ${this.userEmail}`
|
||||
}
|
||||
@@ -65,9 +65,9 @@
|
||||
},
|
||||
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()
|
||||
let self = this
|
||||
const issueURL = `https://gitea.azgeorgis.net/api/v1/repos/Georgi_Lab/ALVINN_f7/issues?access_token=9af8ae15b1ee5a98afcb3083bb488e4cf3c683af`
|
||||
let xhr = new XMLHttpRequest()
|
||||
xhr.open("POST", issueURL)
|
||||
xhr.setRequestHeader('Content-Type', 'application/json')
|
||||
xhr.setRequestHeader('accept', 'application/json')
|
||||
|
||||
@@ -1,23 +1,36 @@
|
||||
<template>
|
||||
<f7-page name="detect" :id="detectorName + '-detect-page'">
|
||||
<f7-page name="detect" :id="detectorName + '-detect-page'" @wheel="(e = $event) => e.preventDefault()" @touchmove="(e = $event) => e.preventDefault()">
|
||||
<!-- Top Navbar -->
|
||||
<f7-navbar :sliding="false" :back-link="true" back-link-url="/" back-link-force>
|
||||
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
|
||||
<f7-nav-title sliding>{{ regionTitle }}</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 style="position: absolute;">{{ debugInfo ? JSON.stringify(debugInfo) : "No Info Available" }}</div>-->
|
||||
<div class="image-container" ref="image_container">
|
||||
<SvgIcon v-if="!imageView.src && !videoAvailable" :icon="f7route.params.region" fill-color="var(--avn-theme-color)"/>
|
||||
<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>
|
||||
<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;`" />
|
||||
<f7-link v-if="getInfoUrl && (selectedChip > -1)"
|
||||
:style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(calc(-50% - ${infoLinkPos.adj}px),calc(-50% - ${infoLinkPos.adj}px));`"
|
||||
<canvas
|
||||
id="im-draw"
|
||||
ref="image_cvs"
|
||||
@wheel="spinWheel($event)"
|
||||
@mousedown.middle="startMove($event)"
|
||||
@mousemove="makeMove($event)"
|
||||
@mouseup.middle="endMove($event)"
|
||||
@touchstart="startTouch($event)"
|
||||
@touchend="endTouch($event)"
|
||||
@touchmove="moveTouch($event)"
|
||||
@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;`"
|
||||
></canvas>
|
||||
<f7-link v-if="getInfoUrl && (selectedChip > -1) && showResults[selectedChip]"
|
||||
:style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(-50%,-50%); background: hsla(${showResults[selectedChip].confidence / 100 * 120}deg, 100%, 50%, .5)`"
|
||||
class="structure-info"
|
||||
:icon-only="true"
|
||||
icon-f7="info"
|
||||
@@ -61,16 +74,19 @@
|
||||
</f7-button>
|
||||
</div>
|
||||
<f7-segmented class="image-menu" raised>
|
||||
<f7-button popover-open="#region-popover">
|
||||
<RegionIcon :region="activeRegion" :iconSet="getIconSet" />
|
||||
</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>
|
||||
<f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'">
|
||||
<f7-button v-if="!structureZoomed && selectedChip >= 0" style="height: auto; width: auto;" popover-close="#image-popover" @click="zoomToSelected()">
|
||||
<SvgIcon icon="zoom_to" />
|
||||
</f7-button>
|
||||
<f7-button v-else :class="(canvasZoom != 1) ? '' : 'disabled'" style="height: auto; width: auto;" popover-close="#image-popover" @click="resetZoom()">
|
||||
<SvgIcon icon="reset_zoom" />
|
||||
</f7-button>
|
||||
<f7-button @click="toggleSettings()" :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>
|
||||
@@ -93,23 +109,6 @@
|
||||
</f7-page>
|
||||
</f7-panel>
|
||||
|
||||
<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">
|
||||
<RegionIcon :region="0" :iconSet="getIconSet" />
|
||||
</f7-button>
|
||||
<f7-button :class="(getRegions.includes('abdomen')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
|
||||
<RegionIcon :region="1" :iconSet="getIconSet" />
|
||||
</f7-button>
|
||||
<f7-button :class="(getRegions.includes('limbs')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
|
||||
<RegionIcon :region="2" :iconSet="getIconSet" />
|
||||
</f7-button>
|
||||
<f7-button :class="(getRegions.includes('head')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
|
||||
<RegionIcon :region="3" :iconSet="getIconSet" />
|
||||
</f7-button>
|
||||
</f7-segmented>
|
||||
</f7-popover>
|
||||
|
||||
<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" @click="selectImage('camera')">
|
||||
@@ -118,6 +117,9 @@
|
||||
<f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
|
||||
<SvgIcon icon="photo_library" />
|
||||
</f7-button>
|
||||
<f7-button v-if="secureProtocol" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('clipboard')">
|
||||
<SvgIcon icon="clipboard" />
|
||||
</f7-button>
|
||||
<f7-button v-if="demoEnabled" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
|
||||
<SvgIcon icon="photo_sample"/>
|
||||
</f7-button>
|
||||
@@ -139,11 +141,27 @@
|
||||
import submitMixin from './submit-mixin'
|
||||
import detectionMixin from './detection-mixin'
|
||||
import cameraMixin from './camera-mixin'
|
||||
import touchMixin from './touch-mixin'
|
||||
|
||||
import detectionWorker from '../assets/detect-worker.js?worker&inline'
|
||||
import detectionWorker from '@/assets/detect-worker.js?worker&inline'
|
||||
import { Structure, StructureBox } from '../js/structures'
|
||||
|
||||
const regions = ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck']
|
||||
let activeRegion = 4
|
||||
let classesList = []
|
||||
let imageLoadMode = "environment"
|
||||
let serverSettings = {}
|
||||
let otherSettings = {}
|
||||
let modelLocation = ''
|
||||
let miniLocation = ''
|
||||
let reloadModel = false
|
||||
let detectWorker = null
|
||||
let vidWorker = null
|
||||
let canvasMoving = false
|
||||
let imageLocation = new StructureBox(0, 0, 1, 1)
|
||||
|
||||
export default {
|
||||
mixins: [submitMixin, detectionMixin, cameraMixin],
|
||||
mixins: [submitMixin, detectionMixin, cameraMixin, touchMixin],
|
||||
props: {
|
||||
f7route: Object,
|
||||
},
|
||||
@@ -153,35 +171,28 @@
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
regions: ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck'],
|
||||
resultData: {},
|
||||
selectedChip: -1,
|
||||
activeRegion: 4,
|
||||
classesList: [],
|
||||
imageLoaded: false,
|
||||
imageView: new Image(),
|
||||
imageLoadMode: "environment",
|
||||
detecting: false,
|
||||
detectPanel: false,
|
||||
showDetectSettings: false,
|
||||
detectorName: '',
|
||||
detectorLevel: 50,
|
||||
detectorLabels: [],
|
||||
serverSettings: {},
|
||||
otherSettings: {},
|
||||
isCordova: !!window.cordova,
|
||||
secureProtocol: location.protocol == 'https:',
|
||||
uploadUid: null,
|
||||
uploadDirty: false,
|
||||
modelLocation: '',
|
||||
miniLocation: '',
|
||||
modelLoading: true,
|
||||
reloadModel: false,
|
||||
videoDeviceAvailable: false,
|
||||
videoAvailable: false,
|
||||
cameraStream: null,
|
||||
infoLinkPos: {},
|
||||
detectWorker: null,
|
||||
vidWorker: null
|
||||
canvasOffset: {x: 0, y: 0},
|
||||
canvasZoom: 1,
|
||||
structureZoomed: false,
|
||||
debugInfo: null
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
@@ -189,37 +200,53 @@
|
||||
},
|
||||
created () {
|
||||
let loadOtherSettings = localStorage.getItem('otherSettings')
|
||||
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
|
||||
let modelRoot = this.isCordova ? 'https://localhost' : '.'
|
||||
if (loadOtherSettings) otherSettings = JSON.parse(loadOtherSettings)
|
||||
this.detectorName = this.f7route.params.region
|
||||
switch (this.detectorName) {
|
||||
case 'thorax':
|
||||
this.activeRegion = 0
|
||||
activeRegion = 0
|
||||
break;
|
||||
case 'abdomen':
|
||||
this.activeRegion = 1
|
||||
activeRegion = 1
|
||||
break;
|
||||
case 'limbs':
|
||||
this.activeRegion = 2
|
||||
activeRegion = 2
|
||||
break;
|
||||
case 'head':
|
||||
this.activeRegion = 3
|
||||
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(`${modelRoot}/models/${this.detectorName}/classes.json`)
|
||||
let modelJ = `../models/${this.detectorName}${otherSettings.mini ? '-mini' : ''}/model.json`
|
||||
let miniJ = `../models/${this.detectorName}-mini/model.json`
|
||||
modelLocation = new URL(modelJ,import.meta.url).href
|
||||
miniLocation = new URL(miniJ,import.meta.url).href
|
||||
let classesJ = `../models/${this.detectorName}/classes.json`
|
||||
fetch(new URL(classesJ,import.meta.url).href)
|
||||
.then((mod) => { return mod.json() })
|
||||
.then((classes) => {
|
||||
this.classesList = classes
|
||||
this.detectorLabels = this.classesList.map( l => { return {'name': l, 'detect': true} } )
|
||||
classesList = classes
|
||||
this.detectorLabels = classesList.map( l => { return {'name': l, 'detect': true} } )
|
||||
})
|
||||
var loadServerSettings = localStorage.getItem('serverSettings')
|
||||
if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
|
||||
const loadServerSettings = localStorage.getItem('serverSettings')
|
||||
if (loadServerSettings) serverSettings = JSON.parse(loadServerSettings)
|
||||
},
|
||||
mounted () {
|
||||
this.detectWorker = new detectionWorker()
|
||||
this.detectWorker.onmessage = (eMount) => {
|
||||
if (serverSettings && serverSettings.use) {
|
||||
this.getRemoteLabels()
|
||||
this.modelLoading = false
|
||||
} else {
|
||||
this.modelLoading = true
|
||||
if (!this.useWorkers) {
|
||||
this.loadModel(modelLocation, true).then(() => {
|
||||
this.modelLoading = false
|
||||
}).catch((e) => {
|
||||
console.log(e.message)
|
||||
f7.dialog.alert(`ALVINN AI model error: ${e.message}`)
|
||||
this.modelLoading = false
|
||||
})
|
||||
} else {
|
||||
detectWorker = new detectionWorker()
|
||||
detectWorker.onmessage = (eMount) => {
|
||||
self = this
|
||||
if (eMount.data.error) {
|
||||
console.log(eMount.data.message)
|
||||
@@ -227,26 +254,24 @@
|
||||
}
|
||||
self.modelLoading = false
|
||||
}
|
||||
this.vidWorker = new detectionWorker()
|
||||
this.vidWorker.onmessage = (eMount) => {
|
||||
vidWorker = new detectionWorker()
|
||||
vidWorker.onmessage = (eMount) => {
|
||||
self = this
|
||||
if (eMount.data.error) {
|
||||
console.log(eMount.data.message)
|
||||
f7.dialog.alert(`ALVINN AI nano model error: ${eMount.data.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (this.serverSettings && this.serverSettings.use) {
|
||||
this.getRemoteLabels()
|
||||
this.modelLoading = false
|
||||
} else {
|
||||
this.modelLoading = true
|
||||
this.detectWorker.postMessage({call: 'loadModel', weights: this.modelLocation, preload: true})
|
||||
this.vidWorker.postMessage({call: 'loadModel', weights: this.miniLocation, preload: true})
|
||||
detectWorker.postMessage({call: 'loadModel', weights: modelLocation, preload: true})
|
||||
vidWorker.postMessage({call: 'loadModel', weights: miniLocation, preload: true})
|
||||
}
|
||||
}
|
||||
window.onresize = (e) => { if (this.$refs.image_cvs) this.selectChip('redraw') }
|
||||
},
|
||||
computed: {
|
||||
regionTitle () {
|
||||
return regions[activeRegion]
|
||||
},
|
||||
message () {
|
||||
if (this.modelLoading) {
|
||||
return "Preparing ALVINN..."
|
||||
@@ -259,17 +284,17 @@
|
||||
}
|
||||
},
|
||||
showResults () {
|
||||
var filteredResults = this.resultData.detections
|
||||
let filteredResults = this.resultData.detections
|
||||
if (!filteredResults) return []
|
||||
|
||||
var allSelect = this.detectorLabels.every( s => { return s.detect } )
|
||||
var selectedLabels = this.detectorLabels
|
||||
const allSelect = this.detectorLabels.every( s => { return s.detect } )
|
||||
const selectedLabels = this.detectorLabels
|
||||
.filter( l => { return l.detect })
|
||||
.map( l => { return l.name })
|
||||
filteredResults.forEach( (d, i) => {
|
||||
filteredResults[i].resultIndex = i
|
||||
filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
|
||||
filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
|
||||
d.resultIndex = i
|
||||
d.setThreshold(this.detectorLevel)
|
||||
d.isSearched = allSelect || selectedLabels.includes(d.label)
|
||||
})
|
||||
|
||||
if (!filteredResults.some( s => s.resultIndex == this.selectedChip && s.aboveThreshold && s.isSearched && !s.isDeleted)) {
|
||||
@@ -290,13 +315,13 @@
|
||||
}
|
||||
},
|
||||
demoEnabled () {
|
||||
return this.otherSettings.demo || this.demoMode
|
||||
return otherSettings.demo || this.demoMode
|
||||
},
|
||||
infoLinkTarget () {
|
||||
if (!this.getInfoUrl) return ''
|
||||
let structure = this.showResults.find( r => r.resultIndex == this.selectedChip)
|
||||
return structure ? this.getInfoUrl + structure.label.replaceAll(' ','_') : ''
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
chipGradient (confVal) {
|
||||
@@ -304,8 +329,8 @@
|
||||
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)`
|
||||
},
|
||||
async setData () {
|
||||
//const detectWorker = new detectionWorker()
|
||||
this.detectWorker.onmessage = (eDetect) => {
|
||||
if (detectWorker) {
|
||||
detectWorker.onmessage = (eDetect) => {
|
||||
self = this
|
||||
if (eDetect.data.error) {
|
||||
self.detecting = false
|
||||
@@ -314,36 +339,64 @@
|
||||
f7.dialog.alert(`ALVINN structure finding error: ${eDetect.data.message}`)
|
||||
} else if (eDetect.data.success == 'detection') {
|
||||
self.detecting = false
|
||||
self.resultData = eDetect.data.detections
|
||||
if (self.resultData) {
|
||||
self.resultData.detections.map(d => {d.label = self.detectorLabels[d.label].name})
|
||||
}
|
||||
self.resultData = {detections: []}
|
||||
eDetect.data.detections.detections.forEach((d) => {
|
||||
d.label = self.detectorLabels[d.label].name
|
||||
let detectedStructure = new Structure(d)
|
||||
self.resultData.detections.push(detectedStructure)
|
||||
})
|
||||
self.uploadDirty = true
|
||||
} else if (eDetect.data.success == 'model') {
|
||||
self.reloadModel = false
|
||||
reloadModel = false
|
||||
loadSuccess()
|
||||
}
|
||||
f7.utils.nextFrame(() => {
|
||||
this.selectChip("redraw")
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let loadSuccess = null
|
||||
let loadFailure = null
|
||||
let modelReloading = new Promise((res, rej) => {
|
||||
let modelReloading = null
|
||||
if (!this.useWorkers && reloadModel) {
|
||||
await this.loadModel(modelLocation)
|
||||
reloadModel = false
|
||||
} else {
|
||||
modelReloading = new Promise((res, rej) => {
|
||||
loadSuccess = res
|
||||
loadFailure = rej
|
||||
if (this.reloadModel) {
|
||||
this.detectWorker.postMessage({call: 'loadModel', weights: this.modelLocation})
|
||||
if (reloadModel) {
|
||||
detectWorker.postMessage({call: 'loadModel', weights: modelLocation})
|
||||
} else {
|
||||
loadSuccess()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (this.serverSettings && this.serverSettings.use) {
|
||||
if (serverSettings && serverSettings.use) {
|
||||
this.remoteDetect()
|
||||
} else {
|
||||
} else if (this.useWorkers) {
|
||||
Promise.all([modelReloading,createImageBitmap(this.imageView)]).then(res => {
|
||||
this.detectWorker.postMessage({call: 'localDetect', image: res[1]}, [res[1]])
|
||||
detectWorker.postMessage({call: 'localDetect', image: res[1]}, [res[1]])
|
||||
})
|
||||
} else {
|
||||
createImageBitmap(this.imageView).then(res => {
|
||||
return this.localDetect(res)
|
||||
}).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}`)
|
||||
})
|
||||
}
|
||||
f7.utils.nextFrame(() => {
|
||||
this.selectChip("redraw")
|
||||
})
|
||||
},
|
||||
selectAll (ev) {
|
||||
if (ev.target.checked) {
|
||||
@@ -353,12 +406,12 @@
|
||||
}
|
||||
},
|
||||
async selectImage (mode) {
|
||||
this.imageLoadMode = mode
|
||||
imageLoadMode = mode
|
||||
if (this.isCordova && mode == "camera") {
|
||||
navigator.camera.getPicture(this.getImage, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, correctOrientation: true });
|
||||
return
|
||||
}
|
||||
if (mode == "camera") {
|
||||
if (mode == "camera" && !otherSettings.disableVideo) {
|
||||
this.videoAvailable = await this.openCamera(this.$refs.image_container)
|
||||
if (this.videoAvailable) {
|
||||
this.selectedChip = -1
|
||||
@@ -366,12 +419,14 @@
|
||||
this.imageView.src = null
|
||||
this.$refs.image_cvs.style['background-image'] = 'none'
|
||||
this.resultData = {}
|
||||
var trackDetails = this.cameraStream.getVideoTracks()[0].getSettings()
|
||||
var vidElement = this.$refs.vid_viewer
|
||||
const trackDetails = this.cameraStream.getVideoTracks()[0].getSettings()
|
||||
let vidElement = this.$refs.vid_viewer
|
||||
vidElement.width = trackDetails.width
|
||||
vidElement.height = trackDetails.height
|
||||
if (!this.otherSettings.disableVideo) {
|
||||
this.videoFrameDetect(vidElement)
|
||||
if (!this.useWorkers) {
|
||||
this.videoFrameDetect(vidElement, miniLocation)
|
||||
} else {
|
||||
this.videoFrameDetectWorker(vidElement, vidWorker)
|
||||
}
|
||||
return
|
||||
}
|
||||
@@ -389,36 +444,62 @@
|
||||
}).open()
|
||||
return
|
||||
}
|
||||
if (mode == 'clipboard') {
|
||||
navigator.clipboard.read().then(clip => {
|
||||
if (!clip[0].types.includes("image/png")) {
|
||||
throw new Error("Clipboard does not contain valid image data.");
|
||||
}
|
||||
return clip[0].getType("image/png");
|
||||
}).then(blob => {
|
||||
let clipImage = URL.createObjectURL(blob);
|
||||
this.getImage(clipImage)
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
f7.dialog.alert(`Error pasting image: ${e.message}`)
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$refs.image_chooser.click()
|
||||
},
|
||||
onFail (message) {
|
||||
alert(`Camera fail: ${message}`)
|
||||
},
|
||||
selectChip ( iChip ) {
|
||||
const [imCanvas, imageCtx] = this.resetView()
|
||||
|
||||
if (this.selectedChip == iChip) {
|
||||
this.selectedChip = -1
|
||||
this.resetView()
|
||||
return
|
||||
}
|
||||
|
||||
if (iChip == 'redraw') {
|
||||
if (this.selectedChip == -1) return
|
||||
if (this.selectedChip == -1) {
|
||||
this.resetView()
|
||||
return
|
||||
}
|
||||
iChip = this.selectedChip
|
||||
}
|
||||
const [imCanvas, imageCtx] = this.resetView(true)
|
||||
let structBox, cvsBox, screenBox
|
||||
[structBox, cvsBox, screenBox] = this.resultData.detections[iChip].box.getBoxes('side', this.imageView, imCanvas, {zoom: this.canvasZoom, offset: {...this.canvasOffset}})
|
||||
|
||||
const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
|
||||
this.infoLinkPos.x = Math.min(Math.max(screenBox.left, 0),imCanvas.width)
|
||||
this.infoLinkPos.y = Math.min(Math.max(screenBox.top, 0), imCanvas.height)
|
||||
|
||||
let boxLeft = boxCoords.cvsLeft
|
||||
let boxTop = boxCoords.cvsTop
|
||||
let boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
|
||||
let boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
|
||||
this.infoLinkPos.x = boxCoords.cvsLeft
|
||||
this.infoLinkPos.y = boxCoords.cvsTop
|
||||
let boxMin = Math.min(boxHeight, boxWidth)
|
||||
this.infoLinkPos.adj = (boxMin >= 50) ? 0 : Math.min(10, 50 - boxMin)
|
||||
|
||||
imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight)
|
||||
const imageScale = Math.max(this.imageView.width / imCanvas.width, this.imageView.height / imCanvas.height)
|
||||
imageCtx.drawImage(this.imageView, structBox.left, structBox.top, structBox.width, structBox.height, cvsBox.left, cvsBox.top, cvsBox.width, cvsBox.height)
|
||||
imageCtx.save()
|
||||
imageCtx.arc(cvsBox.left, cvsBox.top, 14 / this.canvasZoom, 0, 2 * Math.PI)
|
||||
imageCtx.closePath()
|
||||
imageCtx.clip()
|
||||
imageCtx.drawImage(this.imageView,
|
||||
structBox.left - (14 / this.canvasZoom * imageScale),
|
||||
structBox.top - (14 / this.canvasZoom * imageScale),
|
||||
(28 / this.canvasZoom * imageScale),
|
||||
(28 / this.canvasZoom * imageScale),
|
||||
cvsBox.left - (14 / this.canvasZoom),
|
||||
cvsBox.top - (14 / this.canvasZoom),
|
||||
(28 / this.canvasZoom), (28 / this.canvasZoom))
|
||||
imageCtx.restore()
|
||||
this.selectedChip = iChip
|
||||
this.resultData.detections[iChip].beenViewed = true
|
||||
|
||||
@@ -434,15 +515,24 @@
|
||||
this.uploadDirty = true
|
||||
});
|
||||
},
|
||||
resetView () {
|
||||
resetView (drawChip) {
|
||||
const imCanvas = this.$refs.image_cvs
|
||||
const imageCtx = imCanvas.getContext("2d")
|
||||
imCanvas.width = imCanvas.clientWidth
|
||||
imCanvas.height = imCanvas.clientHeight
|
||||
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
|
||||
imageCtx.translate(this.canvasOffset.x,this.canvasOffset.y)
|
||||
imageCtx.scale(this.canvasZoom,this.canvasZoom)
|
||||
imageCtx.globalAlpha = 1
|
||||
imageCtx.strokeStyle = 'yellow'
|
||||
imageCtx.lineWidth = 3
|
||||
imageCtx.lineWidth = 3 / this.canvasZoom
|
||||
if (this.imageLoaded) {
|
||||
const imageLoc = imageLocation.getBoxes('side', this.imageView, imCanvas)
|
||||
if (drawChip) {imageCtx.globalAlpha = .5}
|
||||
imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, imageLoc[1].left, imageLoc[1].top, imageLoc[1].width, imageLoc[1].height)
|
||||
if (drawChip) {imageCtx.globalAlpha = 1}
|
||||
}
|
||||
this.structureZoomed = false
|
||||
return [imCanvas, imageCtx]
|
||||
},
|
||||
getImage (searchImage) {
|
||||
@@ -450,18 +540,22 @@
|
||||
if (this.videoAvailable) {
|
||||
this.closeCamera()
|
||||
this.detecting = true
|
||||
this.reloadModel = true
|
||||
reloadModel = true
|
||||
resolve(searchImage)
|
||||
} else if (this.isCordova && this.imageLoadMode == "camera") {
|
||||
} else if (this.isCordova && imageLoadMode == "camera") {
|
||||
this.detecting = true
|
||||
resolve('data:image/jpg;base64,' + searchImage)
|
||||
}
|
||||
if (imageLoadMode == 'clipboard') {
|
||||
this.detecting = true
|
||||
resolve(searchImage)
|
||||
}
|
||||
const reader = new FileReader()
|
||||
reader.addEventListener("load", () => {
|
||||
this.detecting = true
|
||||
resolve(reader.result)
|
||||
},{once: true})
|
||||
if (this.imageLoadMode == 'sample') {
|
||||
if (imageLoadMode == 'sample') {
|
||||
fetch(`${this.isCordova ? 'https://localhost' : '.'}/samples/${this.detectorName}-${searchImage}.jpeg`).then( resp => {
|
||||
return resp.blob()
|
||||
}).then(respBlob => {
|
||||
@@ -483,22 +577,24 @@
|
||||
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.canvasOffset = {x: 0, y: 0}
|
||||
this.canvasZoom = 1
|
||||
const imCanvas = this.$refs.image_cvs
|
||||
imCanvas.width = imCanvas.clientWidth
|
||||
imCanvas.height = imCanvas.clientHeight
|
||||
const imageCtx = imCanvas.getContext("2d")
|
||||
const imageLoc = imageLocation.getBoxes('side', this.imageView, imCanvas)
|
||||
imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, imageLoc[1].left, imageLoc[1].top, imageLoc[1].width, imageLoc[1].height)
|
||||
f7.utils.nextFrame(() => {
|
||||
this.setData()
|
||||
// }, 1)
|
||||
})
|
||||
}).catch((e) => {
|
||||
console.log(e.message)
|
||||
f7.dialog.alert(`Error loading image: ${e.message}`)
|
||||
})
|
||||
},
|
||||
async submitData () {
|
||||
var uploadData = this.showResults
|
||||
let uploadData = this.showResults
|
||||
.filter( d => { return d.aboveThreshold && d.isSearched && !d.isDeleted })
|
||||
.map( r => { return {"top": r.top, "left": r.left, "bottom": r.bottom, "right": r.right, "label": r.label}})
|
||||
this.uploadUid = await this.uploadData(this.imageView.src.split(',')[1],uploadData,this.uploadUid)
|
||||
@@ -508,42 +604,85 @@
|
||||
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
|
||||
let self = this
|
||||
function loopIndex(i) {
|
||||
if (self.selectedChip == -1) return i
|
||||
let li = i + self.selectedChip
|
||||
if (li >= numBoxes) li -= numBoxes
|
||||
return li
|
||||
}
|
||||
let boxCoords = []
|
||||
this.resultData.detections.forEach(d => {
|
||||
let cvsBox = d.box.getBoxes('point',this.imageView,this.$refs.image_cvs)[1]
|
||||
cvsBox.clickable = d.aboveThreshold && d.isSearched && !d.isDeleted
|
||||
boxCoords.push(cvsBox)
|
||||
})
|
||||
this.selectChip(findBox >= 0 ? this.resultData.detections[findBox].resultIndex : this.selectedChip)
|
||||
const numBoxes = boxCoords.length
|
||||
let clickX = (e.offsetX - this.canvasOffset.x) / this.canvasZoom
|
||||
let clickY = (e.offsetY - this.canvasOffset.y) / this.canvasZoom
|
||||
let boxEnd = boxCoords.splice(0, this.selectedChip)
|
||||
boxCoords = boxCoords.concat(boxEnd)
|
||||
const findBox = boxCoords.findIndex( (r, i) => {
|
||||
let di = loopIndex(i)
|
||||
if (di == this.selectedChip ) return false
|
||||
return r.clickable &&
|
||||
r.left <= clickX &&
|
||||
r.right >= clickX &&
|
||||
r.top <= clickY &&
|
||||
r.bottom >= clickY
|
||||
})
|
||||
this.selectChip(findBox >= 0 ? this.resultData.detections[loopIndex(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
|
||||
}
|
||||
toggleSettings() {
|
||||
this.showDetectSettings = !this.showDetectSettings
|
||||
f7.utils.nextFrame(() => {
|
||||
this.selectChip("redraw")
|
||||
})
|
||||
return cvsCoords
|
||||
},
|
||||
startMove() {
|
||||
canvasMoving = true
|
||||
},
|
||||
endMove() {
|
||||
canvasMoving = false
|
||||
},
|
||||
makeMove(event) {
|
||||
if (canvasMoving) {
|
||||
this.canvasOffset.x += event.movementX
|
||||
this.canvasOffset.y += event.movementY
|
||||
this.selectChip("redraw")
|
||||
}
|
||||
},
|
||||
spinWheel(event) {
|
||||
let zoomFactor
|
||||
if (event.wheelDelta > 0) {
|
||||
zoomFactor = 1.05
|
||||
} else if (event.wheelDelta < 0) {
|
||||
zoomFactor = 1 / 1.05
|
||||
}
|
||||
this.canvasZoom *= zoomFactor
|
||||
this.canvasOffset.x = event.offsetX * (1 - zoomFactor) + this.canvasOffset.x * zoomFactor
|
||||
this.canvasOffset.y = event.offsetY * (1 - zoomFactor) + this.canvasOffset.y * zoomFactor
|
||||
this.selectChip("redraw")
|
||||
},
|
||||
resetZoom() {
|
||||
this.canvasZoom = 1
|
||||
this.canvasOffset.x = 0
|
||||
this.canvasOffset.y = 0
|
||||
this.selectChip("redraw")
|
||||
},
|
||||
zoomToSelected() {
|
||||
const imCanvas = this.$refs.image_cvs
|
||||
const boxCoords = this.resultData.detections[this.selectedChip].box.getBoxes('point', this.imageView, imCanvas)
|
||||
const boxWidth = boxCoords[1].right - boxCoords[1].left
|
||||
const boxHeight = boxCoords[1].bottom - boxCoords[1].top
|
||||
const boxMidX = (boxCoords[1].right + boxCoords[1].left ) / 2
|
||||
const boxMidY = (boxCoords[1].bottom + boxCoords[1].top ) / 2
|
||||
const zoomFactor = Math.min(imCanvas.width / boxWidth * .9, imCanvas.height / boxHeight * .9, 8)
|
||||
this.canvasZoom = zoomFactor
|
||||
this.canvasOffset.x = -(boxMidX * zoomFactor) + imCanvas.width / 2
|
||||
this.canvasOffset.y = -(boxMidY * zoomFactor) + imCanvas.height / 2
|
||||
this.selectChip("redraw")
|
||||
this.structureZoomed = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,118 @@
|
||||
import * as tf from '@tensorflow/tfjs'
|
||||
import { f7 } from 'framework7-vue'
|
||||
|
||||
let model = null
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async loadModel(weights, preload) {
|
||||
if (model && model.modelURL == weights) {
|
||||
return model
|
||||
} else if (model) {
|
||||
tf.dispose(model)
|
||||
}
|
||||
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('mx: pre-process')
|
||||
const [modelWidth, modelHeight] = model.inputs[0].shape.slice(1, 3)
|
||||
let gTense = null
|
||||
const input = tf.tidy(() => {
|
||||
gTense = tf.image.rgbToGrayscale(tf.image.resizeBilinear(tf.browser.fromPixels(imageData), [modelWidth, modelHeight])).div(255.0).expandDims(0)
|
||||
return tf.concat([gTense,gTense,gTense],3)
|
||||
})
|
||||
tf.dispose(gTense)
|
||||
console.timeEnd('mx: pre-process')
|
||||
|
||||
console.time('mx: run prediction')
|
||||
const res = model.predict(input)
|
||||
const tRes = tf.transpose(res,[0,2,1])
|
||||
const rawRes = tRes.arraySync()[0]
|
||||
console.timeEnd('mx: run prediction')
|
||||
|
||||
console.time('mx: post-process')
|
||||
const outputSize = res.shape[1]
|
||||
let rawBoxes = []
|
||||
let rawScores = []
|
||||
|
||||
for (let i = 0; i < rawRes.length; i++) {
|
||||
const getScores = rawRes[i].slice(4)
|
||||
if (getScores.every( s => s < .05)) { continue }
|
||||
const getBox = rawRes[i].slice(0,4)
|
||||
const 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 resBoxes = null
|
||||
let validBoxes = []
|
||||
let structureScores = null
|
||||
let boxes_data = []
|
||||
let scores_data = []
|
||||
let classes_data = []
|
||||
for (let c = 0; c < outputSize - 4; c++) {
|
||||
structureScores = rawScores.map(x => x[c])
|
||||
tScores = tf.tensor1d(structureScores)
|
||||
resBoxes = await tf.image.nonMaxSuppressionAsync(tBoxes,tScores,10,0.5,.05)
|
||||
validBoxes = resBoxes.dataSync()
|
||||
tf.dispose(resBoxes)
|
||||
if (validBoxes) {
|
||||
boxes_data.push(...rawBoxes.filter( (_, idx) => validBoxes.includes(idx)))
|
||||
let outputScores = structureScores.filter( (_, idx) => validBoxes.includes(idx))
|
||||
scores_data.push(...outputScores)
|
||||
classes_data.push(...outputScores.fill(c))
|
||||
}
|
||||
}
|
||||
|
||||
validBoxes = []
|
||||
tf.dispose(tBoxes)
|
||||
tf.dispose(tScores)
|
||||
tf.dispose(tRes)
|
||||
const valid_detections_data = classes_data.length
|
||||
const output = {
|
||||
detections: []
|
||||
}
|
||||
for (let i =0; i < valid_detections_data; i++) {
|
||||
const [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('mx: post-process')
|
||||
|
||||
return output || { detections: [] }
|
||||
},
|
||||
getRemoteLabels() {
|
||||
var self = this
|
||||
var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detectors`
|
||||
var xhr = new XMLHttpRequest()
|
||||
let self = this
|
||||
const modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detectors`
|
||||
let xhr = new XMLHttpRequest()
|
||||
xhr.open("GET", modelURL)
|
||||
xhr.setRequestHeader('Content-Type', 'application/json')
|
||||
xhr.timeout = 10000
|
||||
@@ -17,8 +124,8 @@ export default {
|
||||
f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
|
||||
return
|
||||
}
|
||||
var detectors = JSON.parse(xhr.response).detectors
|
||||
var findLabel = detectors
|
||||
const detectors = JSON.parse(xhr.response).detectors
|
||||
let findLabel = detectors
|
||||
.find( d => { return d.name == self.detectorName } )?.labels
|
||||
.filter( l => { return l != "" } ).sort()
|
||||
.map( l => { return {'name': l, 'detect': true} } )
|
||||
@@ -32,9 +139,9 @@ export default {
|
||||
xhr.send()
|
||||
},
|
||||
remoteDetect() {
|
||||
var self = this
|
||||
var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
|
||||
var xhr = new XMLHttpRequest()
|
||||
let self = this
|
||||
const modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
|
||||
let xhr = new XMLHttpRequest()
|
||||
xhr.open("POST", modelURL)
|
||||
xhr.timeout = 10000
|
||||
xhr.ontimeout = this.remoteTimeout
|
||||
@@ -51,7 +158,7 @@ export default {
|
||||
self.uploadDirty = true
|
||||
}
|
||||
|
||||
var doodsData = {
|
||||
const doodsData = {
|
||||
"detector_name": this.detectorName,
|
||||
"detect": {
|
||||
"*": 1
|
||||
@@ -65,5 +172,64 @@ export default {
|
||||
this.detecting = false
|
||||
f7.dialog.alert('No connection to remote ALVINN instance. Please check app settings.')
|
||||
},
|
||||
async videoFrameDetect (vidData, miniModel) {
|
||||
await this.loadModel(miniModel)
|
||||
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)
|
||||
let imgWidth, 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('mx: 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 (let i = 0; i < rawRes.length; i++) {
|
||||
let getScores = rawRes[i].slice(4)
|
||||
if (getScores.some( s => s > .5)) {
|
||||
let foundTarget = rawRes[i].slice(0,2)
|
||||
foundTarget.push(Math.max(...getScores))
|
||||
rawCoords.push(foundTarget)
|
||||
}
|
||||
}
|
||||
|
||||
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
|
||||
for (let 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.globalAlpha = coord[2]
|
||||
imageCtx.drawImage(target, pointX, pointY, 20, 20)
|
||||
}
|
||||
}
|
||||
tf.dispose(input)
|
||||
tf.dispose(res)
|
||||
tf.dispose(rawRes)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
console.timeEnd('mx: frame-process')
|
||||
await tf.nextFrame();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,7 @@
|
||||
</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 the clipboard is available on the system, then there will be a paste icon <SvgIcon icon="clipboard" class="list-svg"/> to paste image data directly into the app.</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>
|
||||
@@ -30,8 +31,11 @@
|
||||
<li>Click on each tag to see the structure highlighted in the image or click on the image to see the tag for that structure (additional clicks to the same area will select overlapping structres).</li>
|
||||
<li>Tag color and proportion filled indicate ALVINN's level of confidence in the identification.</li>
|
||||
<li>An incorrect tag can be deleted by clicking on the tag's <f7-icon icon="chip-delete" style="margin-right: 1px;"></f7-icon> button.</li>
|
||||
<li>Click on the zoom to structure button <SvgIcon icon="zoom_to" class="list-svg"/> to magnify the view of the selected structure</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Pan (middle click or touch and drag) and zoom (mouse wheel or pinch) to manually select detailed views in the image.</li>
|
||||
<li>The reset zoom button <SvgIcon icon="reset_zoom" class="list-svg"/> will return the image to its initial position and magnification.</li>
|
||||
</ol>
|
||||
<h2>Advanced Features</h2>
|
||||
<h3>Detection Parameters</h3>
|
||||
|
||||
@@ -97,7 +97,6 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { touchstart } from 'dom7'
|
||||
import RegionIcon from '../components/region-icon.vue'
|
||||
import store from '../js/store'
|
||||
import { f7 } from 'framework7-vue'
|
||||
@@ -113,6 +112,11 @@ import RegionIcon from '../components/region-icon.vue'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
//URL TESTING CODE
|
||||
//let testUrl = URL.parse(`../models/thorax/model.json`,import.meta.url).href
|
||||
//console.log(testUrl)
|
||||
//let testUrl2 = new URL(`../models/thorax/model.json`,import.meta.url)
|
||||
//console.log(testUrl2)
|
||||
return store()
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
computed: {
|
||||
otherIp () {
|
||||
let filteredIps = {}
|
||||
for (var oldIp in this.serverSettings.previous) {
|
||||
for (let oldIp in this.serverSettings.previous) {
|
||||
if (oldIp != this.serverSettings.address) {
|
||||
filteredIps[oldIp] = this.serverSettings.previous[oldIp]
|
||||
}
|
||||
@@ -109,12 +109,12 @@
|
||||
}
|
||||
},
|
||||
created () {
|
||||
var loadServerSettings = localStorage.getItem('serverSettings')
|
||||
const loadServerSettings = localStorage.getItem('serverSettings')
|
||||
if (loadServerSettings) this.serverSettings = JSON.parse(loadServerSettings)
|
||||
if (!this.serverSettings.previous) this.serverSettings.previous = {}
|
||||
var loadThemeSettings = localStorage.getItem('themeSettings')
|
||||
const loadThemeSettings = localStorage.getItem('themeSettings')
|
||||
if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
|
||||
var loadOtherSettings = localStorage.getItem('otherSettings')
|
||||
const loadOtherSettings = localStorage.getItem('otherSettings')
|
||||
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
|
||||
},
|
||||
methods: {
|
||||
@@ -136,7 +136,7 @@
|
||||
)
|
||||
saveSetting.then(
|
||||
() => {
|
||||
var toast = f7.toast.create({
|
||||
const toast = f7.toast.create({
|
||||
text: 'Settings saved',
|
||||
closeTimeout: 2000
|
||||
})
|
||||
@@ -144,7 +144,7 @@
|
||||
this.isDirty = false;
|
||||
},
|
||||
() => {
|
||||
var toast = f7.toast.create({
|
||||
const toast = f7.toast.create({
|
||||
text: 'ERROR: No settings saved',
|
||||
closeTimeout: 2000
|
||||
})
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
<f7-block-title medium>Details</f7-block-title>
|
||||
<f7-list>
|
||||
<f7-list-item title="Version" :after="alvinnVersion"></f7-list-item>
|
||||
<f7-list-item title="Build" :after="alvinnBuild"></f7-list-item>
|
||||
<f7-list-item title="Workers" :after="useWorkers ? 'Enabled' : 'Disabled'"></f7-list-item>
|
||||
</f7-list>
|
||||
<f7-block-title medium>Models</f7-block-title>
|
||||
<f7-list style="width: 100%;">
|
||||
@@ -51,7 +53,9 @@
|
||||
headneckDetails: {},
|
||||
miniHeadneckDetails: {},
|
||||
alvinnVersion: store().getVersion,
|
||||
alvinnBuild: store().getBuild,
|
||||
isCordova: !!window.cordova,
|
||||
useWorkers: store().useWorkers,
|
||||
otherSettings: {}
|
||||
}
|
||||
},
|
||||
@@ -59,7 +63,7 @@
|
||||
return store()
|
||||
},
|
||||
created () {
|
||||
var loadOtherSettings = localStorage.getItem('otherSettings')
|
||||
const 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() })
|
||||
|
||||
@@ -5,8 +5,8 @@ export default {
|
||||
newUid (length) {
|
||||
const uidLength = length || 16
|
||||
const uidChars = 'abcdefghijklmnopqrstuvwxyz0123456789'
|
||||
var uid = []
|
||||
for (var i = 0; i < uidLength; i++) {
|
||||
let uid = []
|
||||
for (let i = 0; i < uidLength; i++) {
|
||||
uid.push(uidChars.charAt(Math.floor(Math.random() * ((i < 4) ? 26 : 36))))
|
||||
}
|
||||
return uid.join('')
|
||||
@@ -14,24 +14,23 @@ export default {
|
||||
uploadData (imagePayload, classPayload, prevUid) {
|
||||
let uploadImage = new Promise (resolve => {
|
||||
const dataUid = prevUid || this.newUid(16)
|
||||
var byteChars = window.atob(imagePayload)
|
||||
var byteArrays = []
|
||||
var len = byteChars.length
|
||||
let byteChars = window.atob(imagePayload)
|
||||
let byteArrays = []
|
||||
|
||||
for (var offset = 0; offset < len; offset += 1024) {
|
||||
var slice = byteChars.slice(offset, offset + 1024)
|
||||
var byteNumbers = new Array(slice.length)
|
||||
for (var i = 0; i < slice.length; i++) {
|
||||
for (let offset = 0; offset < byteChars.length; offset += 1024) {
|
||||
let slice = byteChars.slice(offset, offset + 1024)
|
||||
let byteNumbers = new Array(slice.length)
|
||||
for (let i = 0; i < slice.length; i++) {
|
||||
byteNumbers[i] = slice.charCodeAt(i)
|
||||
}
|
||||
|
||||
var byteArray = new Uint8Array(byteNumbers)
|
||||
let byteArray = new Uint8Array(byteNumbers)
|
||||
byteArrays.push(byteArray)
|
||||
}
|
||||
var imageBlob = new Blob(byteArrays, {type: 'image/jpeg'})
|
||||
const imageBlob = new Blob(byteArrays, {type: 'image/jpeg'})
|
||||
|
||||
var xhrJpg = new XMLHttpRequest()
|
||||
var uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.jpeg`
|
||||
let xhrJpg = new XMLHttpRequest()
|
||||
let uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.jpeg`
|
||||
xhrJpg.open("PUT", uploadUrl)
|
||||
xhrJpg.setRequestHeader('Content-Type', 'image/jpeg')
|
||||
xhrJpg.setRequestHeader('X-Method-Override', 'PUT')
|
||||
@@ -39,8 +38,8 @@ export default {
|
||||
xhrJpg.setRequestHeader("Authorization", "Basic " + btoa("LKBm3H6JdSaywyg:"))
|
||||
xhrJpg.send(imageBlob)
|
||||
|
||||
var xhrTxt = new XMLHttpRequest()
|
||||
var uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.txt`
|
||||
let xhrTxt = new XMLHttpRequest()
|
||||
uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.txt`
|
||||
xhrTxt.open("PUT", uploadUrl)
|
||||
xhrTxt.setRequestHeader('Content-Type', 'text/plain')
|
||||
xhrTxt.setRequestHeader('X-Method-Override', 'PUT')
|
||||
@@ -51,7 +50,7 @@ export default {
|
||||
resolve(dataUid)
|
||||
})
|
||||
return uploadImage.then((newUid) => {
|
||||
var toast = f7.toast.create({
|
||||
const toast = f7.toast.create({
|
||||
text: 'Detections Uploaded: thank you.',
|
||||
closeTimeout: 2000
|
||||
})
|
||||
|
||||
51
src/pages/touch-mixin.js
Normal file
51
src/pages/touch-mixin.js
Normal file
@@ -0,0 +1,51 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
touchPrevious: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startTouch(event) {
|
||||
if (event.touches.length == 1) {
|
||||
this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
|
||||
}
|
||||
if (event.touches.length == 2) {
|
||||
let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2
|
||||
let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
|
||||
this.touchPrevious = {distance: this.touchDistance(event.touches), x: midX, y: midY}
|
||||
}
|
||||
},
|
||||
endTouch(event) {
|
||||
if (event.touches.length == 1) {
|
||||
this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
|
||||
} else {
|
||||
//this.debugInfo = null
|
||||
}
|
||||
},
|
||||
moveTouch(event) {
|
||||
switch (event.touches.length) {
|
||||
case 1:
|
||||
this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x
|
||||
this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y
|
||||
this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
|
||||
break;
|
||||
case 2:
|
||||
let newDistance = this.touchDistance(event.touches)
|
||||
let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2
|
||||
let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
|
||||
let zoomFactor = newDistance / this.touchPrevious.distance
|
||||
this.canvasZoom *= zoomFactor
|
||||
this.canvasOffset.x = (midX - 16) * (1 - zoomFactor) + this.canvasOffset.x * zoomFactor + (midX - this.touchPrevious.x)
|
||||
this.canvasOffset.y = (midY - 96) * (1 - zoomFactor) + this.canvasOffset.y * zoomFactor + (midY - this.touchPrevious.y)
|
||||
this.touchPrevious = {distance: newDistance, x: midX, y: midY}
|
||||
break;
|
||||
}
|
||||
this.selectChip("redraw")
|
||||
},
|
||||
touchDistance(touches) {
|
||||
let touch1 = touches.item(0)
|
||||
let touch2 = touches.item(1)
|
||||
return Math.sqrt((touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user