ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add photo detection framework (#8)

Browse Source 
Closes #5.

Reviewed-on: Georgi_Lab/ALVINN_f7#8
This commit is contained in:
Justin Georgi
2023-11-14 10:16:33 -07:00
parent 9eed19776f
commit fc6f26d469
16 changed files with 278 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/icons/image.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 323 B

1
src/assets/icons/videocam.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 300 B

1
src/assets/icons/visibility.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 550 B

60
src/assets/regions/abdpel.svg
View File

@@ -1,56 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100"
height="100"
viewBox="0 0 26.458333 26.458333"
version="1.1"
id="svg34327"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="abdpel.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview34329"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
width="100mm"
units="px"
inkscape:zoom="6.1148148"
inkscape:cx="36.387038"
inkscape:cy="44.400363"
inkscape:window-width="1920"
inkscape:window-height="1005"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
inkscape:object-nodes="false"
inkscape:snap-nodes="false" />
<defs
id="defs34324" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 25.402178,7.8631343 C 24.914271,7.4960742 24.590606,7.1370129 23.828754,6.7566113 23.822632,6.5967376 23.882607,6.515447 23.75638,6.2127814 23.517159,5.8555658 22.403926,5.2256554 21.55915,5.353759 19.992026,6.2790173 19.679975,7.2917935 18.247904,8.2686439 17.259938,8.3725999 16.232369,8.5892894 15.156751,8.9427562 4.6003362,7.07065 6.9085956,14.862456 0.69616655,10.661743 c 0,0 -0.24989902,0.06545 -0.28777276,0.170279 -0.0360567,0.0998 0.10708587,0.299783 0.10708587,0.299783 2.09489394,1.933517 4.74214504,1.471155 6.66245364,-0.07316 0.096935,0.768305 0.3887649,1.92789 0.8180324,3.363404 -0.035692,1.245357 -1.2923422,2.350278 -1.3169003,2.801484 -0.013354,0.24535 0.5120291,3.6149 0.7015429,3.650219 l 0.7793046,0.145235 C 9.0588283,21.186513 8.8794897,20.598404 8.4823918,20.238626 8.2738127,20.04965 8.141936,19.98623 8.1186072,19.796919 7.7375577,16.70475 10.247043,15.373658 10.520971,13.05399 c 2.453391,0.120243 3.974486,1.282365 6.721539,1.403033 0.136906,1.035362 -0.177341,4.099457 -0.120257,4.484465 0.04824,0.325337 0.511082,0.918401 0.497537,1.876854 -0.003,0.211416 0.410117,0.159484 0.619918,0.185743 0.799059,0.09999 1.033405,-0.329373 0.42557,-0.75884 -0.132327,-0.0935 -0.456134,-0.264276 -0.476806,-0.424973 -0.251045,-1.951541 1.103782,-4.917365 1.103782,-4.917365 0.355435,-0.554509 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 1.541867,-1.5721797 1.123352,-2.3466703 2.548492,-2.7336036 0.65786,0.059985 1.147615,0.1738285 1.444935,0.3493259 0.420933,-0.188852 0.760222,-0.5096057 0.993749,-1.001227 z"
id="path48337"
sodipodi:nodetypes="ccccccsssccsssssccssssscccccc" />
<path
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 15.156751,8.9427562 C 4.6003362,7.07065 6.9085956,14.862456 0.69616655,10.661743 c 0,0 -0.24989902,0.06545 -0.28777276,0.170279 -0.0360567,0.0998 0.10708587,0.299783 0.10708587,0.299783 2.09489394,1.933517 4.74214504,1.471155 6.66245364,-0.07316 0.048468,0.384152 0.1456587,0.866125 0.2843915,1.431499 0.7210773,0.130029 2.5390772,0.501293 3.0586462,0.563846 0.613348,0.03006 1.528237,0.20676 2.05877,0.334503 0.563462,-1.044613 0.536275,-0.982536 2.57701,-4.4457368 z"
id="path48337-6"
sodipodi:nodetypes="csssccccc" />
</g>
<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
<g stroke="#002f65" stroke-width=".264583px">
<path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none"/>
<path d="m15.156751 8.9427562c-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.048468 0.384152 0.1456587 0.866125 0.2843915 1.431499 0.7210773 0.130029 2.5390772 0.501293 3.0586462 0.563846 0.613348 0.03006 1.528237 0.20676 2.05877 0.334503 0.563462-1.044613 0.536275-0.982536 2.57701-4.4457368z" fill="#002f65" fill-rule="evenodd"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

60
src/assets/regions/headneck.svg
View File

@@ -1,56 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100"
height="100"
viewBox="0 0 26.458333 26.458333"
version="1.1"
id="svg34327"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="headneck.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview34329"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
width="100mm"
units="px"
inkscape:zoom="6.1148148"
inkscape:cx="36.387038"
inkscape:cy="50.941854"
inkscape:window-width="1920"
inkscape:window-height="1005"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
inkscape:object-nodes="false"
inkscape:snap-nodes="false" />
<defs
id="defs34324" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
d="M 25.402178,7.8631343 C 24.914271,7.4960742 24.590606,7.1370129 23.828754,6.7566113 23.822632,6.5967376 23.882607,6.515447 23.75638,6.2127814 23.517159,5.8555658 22.403926,5.2256554 21.55915,5.353759 19.992026,6.2790173 19.679975,7.2917935 18.247904,8.2686439 17.259938,8.3725999 16.232369,8.5892894 15.156751,8.9427562 4.6003362,7.07065 6.9085956,14.862456 0.69616655,10.661743 c 0,0 -0.24989902,0.06545 -0.28777276,0.170279 -0.0360567,0.0998 0.10708587,0.299783 0.10708587,0.299783 2.09489394,1.933517 4.74214504,1.471155 6.66245364,-0.07316 0.096935,0.768305 0.3887649,1.92789 0.8180324,3.363404 -0.035692,1.245357 -1.2923422,2.350278 -1.3169003,2.801484 -0.013354,0.24535 0.5120291,3.6149 0.7015429,3.650219 l 0.7793046,0.145235 C 9.0588283,21.186513 8.8794897,20.598404 8.4823918,20.238626 8.2738127,20.04965 8.141936,19.98623 8.1186072,19.796919 7.7375577,16.70475 10.247043,15.373658 10.520971,13.05399 c 2.453391,0.120243 3.974486,1.282365 6.721539,1.403033 0.136906,1.035362 -0.177341,4.099457 -0.120257,4.484465 0.04824,0.325337 0.511082,0.918401 0.497537,1.876854 -0.003,0.211416 0.410117,0.159484 0.619918,0.185743 0.799059,0.09999 1.033405,-0.329373 0.42557,-0.75884 -0.132327,-0.0935 -0.456134,-0.264276 -0.476806,-0.424973 -0.251045,-1.951541 1.103782,-4.917365 1.103782,-4.917365 0.355435,-0.554509 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 1.541867,-1.5721797 1.123352,-2.3466703 2.548492,-2.7336036 0.65786,0.059985 1.147615,0.1738285 1.444935,0.3493259 0.420933,-0.188852 0.760222,-0.5096057 0.993749,-1.001227 z"
id="path48337"
sodipodi:nodetypes="ccccccsssccsssssccssssscccccc" />
<path
style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="M 25.402178,7.8631343 C 24.914271,7.4960742 24.590606,7.1370129 23.828754,6.7566113 23.822632,6.5967376 23.882607,6.515447 23.75638,6.2127814 23.517159,5.8555658 22.403926,5.2256554 21.55915,5.353759 c -1.567124,0.9252583 -1.879175,1.9380345 -3.311246,2.9148849 0.566485,0.8398567 1.254642,1.7575311 2.167098,2.9799951 1.541867,-1.5721797 1.123352,-2.3466703 2.548492,-2.7336036 0.65786,0.059985 1.147615,0.1738285 1.444935,0.3493259 0.420933,-0.188852 0.760222,-0.5096057 0.993749,-1.001227 z"
id="path48337-9"
sodipodi:nodetypes="ccccccccc" />
</g>
<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
<g stroke="#002f65" stroke-width=".264583px">
<path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
<path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849 0.566485 0.8398567 1.254642 1.7575311 2.167098 2.9799951 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="#002f65" fill-rule="evenodd"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

66
src/assets/regions/limb.svg
View File

@@ -1,61 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100"
height="100"
viewBox="0 0 26.458333 26.458333"
version="1.1"
id="svg34327"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="limb.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview34329"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
width="100mm"
units="px"
inkscape:zoom="6.1148148"
inkscape:cx="56.338583"
inkscape:cy="43.582677"
inkscape:window-width="1920"
inkscape:window-height="1005"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
inkscape:object-nodes="false"
inkscape:snap-nodes="false" />
<defs
id="defs34324" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
d="M 25.402178,7.8631343 C 24.914271,7.4960742 24.590606,7.1370129 23.828754,6.7566113 23.822632,6.5967376 23.882607,6.515447 23.75638,6.2127814 23.517159,5.8555658 22.403926,5.2256554 21.55915,5.353759 19.992026,6.2790173 19.679975,7.2917935 18.247904,8.2686439 17.259938,8.3725999 16.232369,8.5892894 15.156751,8.9427562 4.6003362,7.07065 6.9085956,14.862456 0.69616655,10.661743 c 0,0 -0.24989902,0.06545 -0.28777276,0.170279 -0.0360567,0.0998 0.10708587,0.299783 0.10708587,0.299783 2.09489394,1.933517 4.74214504,1.471155 6.66245364,-0.07316 0.096935,0.768305 0.3887649,1.92789 0.8180324,3.363404 -0.035692,1.245357 -1.2923422,2.350278 -1.3169003,2.801484 -0.013354,0.24535 0.5120291,3.6149 0.7015429,3.650219 l 0.7793046,0.145235 C 9.0588283,21.186513 8.8794897,20.598404 8.4823918,20.238626 8.2738127,20.04965 8.141936,19.98623 8.1186072,19.796919 7.7375577,16.70475 10.247043,15.373658 10.520971,13.05399 c 2.453391,0.120243 3.974486,1.282365 6.721539,1.403033 0.136906,1.035362 -0.177341,4.099457 -0.120257,4.484465 0.04824,0.325337 0.511082,0.918401 0.497537,1.876854 -0.003,0.211416 0.410117,0.159484 0.619918,0.185743 0.799059,0.09999 1.033405,-0.329373 0.42557,-0.75884 -0.132327,-0.0935 -0.456134,-0.264276 -0.476806,-0.424973 -0.251045,-1.951541 1.103782,-4.917365 1.103782,-4.917365 0.355435,-0.554509 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 1.541867,-1.5721797 1.123352,-2.3466703 2.548492,-2.7336036 0.65786,0.059985 1.147615,0.1738285 1.444935,0.3493259 0.420933,-0.188852 0.760222,-0.5096057 0.993749,-1.001227 z"
id="path48337"
sodipodi:nodetypes="ccccccsssccsssssccssssscccccc" />
<path
style="font-variation-settings:normal;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000"
d="m 17.24251,14.457023 c 0.136906,1.035362 -0.177341,4.099457 -0.120257,4.484465 0.04824,0.325337 0.511082,0.918401 0.497537,1.876854 -0.003,0.211416 0.410117,0.159484 0.619918,0.185743 0.799059,0.09999 1.033405,-0.329373 0.42557,-0.75884 -0.132327,-0.0935 -0.456134,-0.264276 -0.476806,-0.424973 -0.251045,-1.951541 1.103782,-4.917365 1.103782,-4.917365 0.355435,-0.554509 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 -3.100189,-4.8581326 -4.866767,-0.394712 -3.172492,3.208384 z"
id="path48337-2"
sodipodi:nodetypes="cssssscccc" />
<path
style="font-variation-settings:normal;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000"
d="m 7.1779333,11.058645 c 0.096935,0.768305 0.3887649,1.92789 0.8180324,3.363404 -0.035692,1.245357 -1.2923422,2.350278 -1.3169003,2.801484 -0.013354,0.24535 0.5120291,3.6149 0.7015429,3.650219 l 0.7793046,0.145235 C 9.0588283,21.186513 8.8794897,20.598404 8.4823918,20.238626 8.2738127,20.04965 8.141936,19.98623 8.1186072,19.796919 7.7375577,16.70475 10.247043,15.373658 10.520971,13.05399 12.677171,7.6022219 7.6858827,9.5661413 7.1779333,11.058645 Z"
id="path48337-1"
sodipodi:nodetypes="ccssssscc" />
</g>
<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
<g stroke="#002f65" stroke-width=".264583px">
<path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
<path d="m17.24251 14.457023c0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-3.100189-4.8581326-4.866767-0.394712-3.172492 3.208384z" fill="#002f65" fill-rule="evenodd" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
<path d="m7.1779333 11.058645c0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.1562-5.4517681-2.8350883-3.4878487-3.3430377-1.995345z" fill="#002f65" fill-rule="evenodd" stop-color="#000000" style="-inkscape-stroke:none;font-variation-settings:normal"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

104
src/assets/regions/thorax.svg
View File

@@ -1,100 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100"
height="100"
viewBox="0 0 26.458333 26.458333"
version="1.1"
id="svg34327"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="thorax.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview34329"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="px"
showgrid="false"
width="100mm"
units="px"
inkscape:zoom="6.1148148"
inkscape:cx="59.609328"
inkscape:cy="48.652332"
inkscape:window-width="1920"
inkscape:window-height="1005"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
inkscape:object-nodes="false"
inkscape:snap-nodes="false" />
<defs
id="defs34324" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g48290"
style="display:none">
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="M 14.170464,6.5581855 C 13.30234,6.5447672 6.2281356,10.376361 6.2977019,14.931892 c 0.041559,2.721477 1.8395414,5.633338 4.1885371,7.010915 1.615948,0.947678 3.745981,3.22725 4.908168,3.050172 1.870207,-0.284955 2.341636,-2.998551 3.205086,-4.680712 3.538342,-6.893346 0.04981,-8.573522 -1.710605,-10.4173051 C 15.59498,8.5397775 15.14866,6.5733047 14.170464,6.5581855 Z"
id="path37860"
sodipodi:nodetypes="sssssss" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="M 9.4959609,9.1502278 C 8.9959076,8.8122319 9.6155039,6.6441939 9.1475168,5.9690263 8.6174403,5.2042821 6.5589455,4.7663359 5.8042275,4.5419677 5.5801368,4.1354763 5.6216508,3.3953044 6.026243,3.1674711 c 1.3930368,0.089249 3.2884654,1.5248055 4.257329,1.7214021 0.288127,0.027807 0.836207,0.1232875 0.852456,-0.1655304 C 11.165292,4.2032055 8.2051664,3.4543732 6.5495572,2.3715417 6.4819175,1.9493499 7.0278341,1.5183912 7.4515298,1.4589286 c 3.5008482,1.4453145 4.6447642,2.8958437 5.7552022,3.0582691 1.939714,0.2837248 4.122575,-0.2272368 5.57621,-0.1276358 0.640771,0.4568945 1.197893,1.6107844 0.730892,2.2440248 -1.685143,-0.072305 -3.54792,-0.156728 -5.34337,-0.075401 -1.780138,0.080633 -4.3890932,2.7849571 -4.6745031,2.5920421 z"
id="path39419"
sodipodi:nodetypes="sscccsccsccss" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="m 14.937672,11.826254 c -3.269002,2.70939 -3.121667,6.831261 -3.472115,10.747324"
id="path41643"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="m 18.070513,11.2604 c 0.101361,0.68521 -2.552538,1.016229 -3.132841,0.565854 -0.874291,-0.678541 -2.358083,-3.4702482 0.638257,-3.5052815"
id="path41773"
sodipodi:nodetypes="csc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="m 9.4959609,9.1502278 c 0,0 -0.84973,-0.1998587 -1.2068974,-0.014774 -0.4935411,0.255747 -1.1553923,2.8225552 -1.1553923,2.8225552"
id="path42401"
sodipodi:nodetypes="csc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="M 9.1524894,7.0852869 C 8.0169517,6.5389401 6.6549114,6.4782636 5.29809,6.4063968 4.708646,7.3654319 5.0885301,8.1339432 5.8802482,8.8215073 6.6613825,8.6383513 7.4398413,8.4970188 8.1763695,9.0111532"
id="path42573"
sodipodi:nodetypes="cccc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="m 18.070513,11.2604 c 0.807244,0.007 1.614489,0.13621 2.421734,-0.06081 0.871072,0.544779 0.767493,1.147885 0.932522,1.734917 -0.578117,0.377471 -1.03359,0.451212 -1.43485,0.390684"
id="path43053"
sodipodi:nodetypes="cccc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1"
d="M 18.649571,6.8186512 C 18.505686,8.3812201 17.816421,9.2122043 16.862626,9.688344"
id="path43301"
sodipodi:nodetypes="cc" />
</g>
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 25.402178,7.8631343 C 24.914271,7.4960742 24.590606,7.1370129 23.828754,6.7566113 23.822632,6.5967376 23.882607,6.515447 23.75638,6.2127814 23.517159,5.8555658 22.403926,5.2256554 21.55915,5.353759 19.992026,6.2790173 19.679975,7.2917935 18.247904,8.2686439 17.259938,8.3725999 16.232369,8.5892894 15.156751,8.9427562 4.6003362,7.07065 6.9085956,14.862456 0.69616655,10.661743 c 0,0 -0.24989902,0.06545 -0.28777276,0.170279 -0.0360567,0.0998 0.10708587,0.299783 0.10708587,0.299783 2.09489394,1.933517 4.74214504,1.471155 6.66245364,-0.07316 0.096935,0.768305 0.3887649,1.92789 0.8180324,3.363404 -0.035692,1.245357 -1.2923422,2.350278 -1.3169003,2.801484 -0.013354,0.24535 0.5120291,3.6149 0.7015429,3.650219 l 0.7793046,0.145235 C 9.0588283,21.186513 8.8794897,20.598404 8.4823918,20.238626 8.2738127,20.04965 8.141936,19.98623 8.1186072,19.796919 7.7375577,16.70475 10.247043,15.373658 10.520971,13.05399 c 2.453391,0.120243 3.974486,1.282365 6.721539,1.403033 0.136906,1.035362 -0.177341,4.099457 -0.120257,4.484465 0.04824,0.325337 0.511082,0.918401 0.497537,1.876854 -0.003,0.211416 0.410117,0.159484 0.619918,0.185743 0.799059,0.09999 1.033405,-0.329373 0.42557,-0.75884 -0.132327,-0.0935 -0.456134,-0.264276 -0.476806,-0.424973 -0.251045,-1.951541 1.103782,-4.917365 1.103782,-4.917365 0.355435,-0.554509 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 1.541867,-1.5721797 1.123352,-2.3466703 2.548492,-2.7336036 0.65786,0.059985 1.147615,0.1738285 1.444935,0.3493259 0.420933,-0.188852 0.760222,-0.5096057 0.993749,-1.001227 z"
id="path48337"
sodipodi:nodetypes="ccccccsssccsssssccssssscccccc" />
<path
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 18.247904,8.2686439 c -0.987966,0.103956 -3.091153,0.6741123 -3.091153,0.6741123 -1.652395,2.7995828 -2.197177,3.7434008 -2.550516,4.3811848 0,0 3.039112,0.665488 4.636275,1.133082 -0.003,0.01385 2.049744,0.445884 2.049744,0.445884 0,0 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 -0.291029,-0.377705 -1.38593,-1.9038754 -2.167098,-2.9799951 z"
id="path48337-5"
sodipodi:nodetypes="cccccccc" />
</g>
<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
<g stroke="#002F65" stroke-width=".264583px">
<path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none" />
<path d="m18.247904 8.2686439c-0.987966 0.103956-3.091153 0.6741123-3.091153 0.6741123-1.652395 2.7995828-2.197177 3.7434008-2.550516 4.3811848 0 0 3.039112 0.665488 4.636275 1.133082-3e-3 0.01385 2.049744 0.445884 2.049744 0.445884s0.707693-1.135262 1.002776-2.188396c0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-0.291029-0.377705-1.38593-1.9038754-2.167098-2.9799951z" fill-rule="evenodd" fill="#002F65" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

39
src/components/app.vue
View File

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

15
src/css/app.css
View File

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

2
src/index.html
View File

@@ -10,7 +10,7 @@
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:">
<meta http-equiv="Content-Security-Policy" content="worker-src blob:; child-src blob: gap:; img-src 'self' blob: data:; default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#fff">

53
src/js/routes.js
View File

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

19
src/pages/about.vue
View File

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

138
src/pages/detect.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<f7-page name="detect">
<!-- Top Navbar -->
<f7-navbar :sliding="false" back-link="Back">
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
</f7-navbar>
<f7-block style="display: flex; justify-content: flex-start; flex-direction: column; align-items: center; height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top));">
<div class="image-box" style="display: flex; flex-direction: column; align-items: center; flex: 1 1 0%;" >
<img :src="imageView" ref="image_src" style="min-width: 0; min-height: 0; flex: 1 1 0"/>
<div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
</div>
<f7-segmented class="image-menu" raised style="margin: 5px; width: 50%; max-width: 400px; min-width: 192px; flex: 0 0 auto;">
<f7-button popover-open="#region-popover">
<img :src="imageRegion" style="height: 100%;" />
</f7-button>
<f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
<img src="../assets/icons/visibility.svg" style="height: 100%;" />
</f7-button>
<f7-button @click="selectImage">
<img src="../assets/icons/image.svg" style="height: 100%;" />
</f7-button>
<f7-button @click="setData">
<img src="../assets/icons/videocam.svg" style="height: 100%;" />
</f7-button>
</f7-segmented>
<input type="file" ref="image_chooser" @change="getImage()" accept="image/png, image/jpg, image/jpeg" style="display: none;"/>
<div v-if="resultData && resultData.detections" class="chip-results" style="flex: 0 0 auto;">
<f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
</div>
</f7-block>
</f7-page>
</template>
<style>
.chip-results {
display: flex;
flex-wrap: wrap;
gap: 5px;
--f7-chip-border-radius: 16px;
--f7-chip-media-size: 32px;
--f7-chip-font-weight: normal;
}
.chip-results .chip {
padding-left: 8px;
}
.selected-chip {
font-weight: 500;
box-shadow: 4px 4px 1px var(--f7-theme-color);
transform: translate(-2px, -2px);
}
.image-menu .button {
aspect-ratio: 1;
height: auto;
padding: 5px;
}
</style>
<script>
import { f7 } from 'framework7-vue'
import fakeData from './testData.js'
export default {
props: {
f7route: Object,
},
data () {
return {
regions: ['Thorax','Abdomen/Pelvis','Limbs','Head and Neck'],
resultData: {},
selectedChip: -1,
activeRegion: 4,
imageRegion: '',
imageLoaded: false,
imageView: '../assets/icons/image.svg',
}
},
created () {
switch (this.f7route.params.region) {
case 'thorax':
this.activeRegion = 0
this.imageRegion = '../assets/regions/thorax.svg'
break;
case 'abdomen':
this.activeRegion = 1
this.imageRegion = '../assets/regions/abdpel.svg'
break;
case 'limbs':
this.activeRegion = 2
this.imageRegion = '../assets/regions/limb.svg'
break;
case 'head':
this.activeRegion = 3
this.imageRegion = '../assets/regions/headneck.svg'
break;
}
},
methods: {
chipColor (confVal) {
if (confVal >= 90) return 'green'
if (confVal >= 70) return 'lime'
return 'yellow';
},
setData () {
this.resultData = fakeData.testData
},
selectImage () {
this.$refs.image_chooser.click()
//TODO This really needs to be a promise and resolve system
this.imageLoaded = true;
var box = this.$refs.structure_box
},
selectChip ( iChip ) {
this.selectedChip = iChip
var box = this.$refs.structure_box
var img = this.$refs.image_src
var imgWidth = img.offsetWidth
var imgHeight = img.offsetHeight
box.style.display = "block"
box.style.left = `calc( 50% - ${imgWidth/2}px + ${this.resultData.detections[iChip].left * imgWidth}px)`
box.style.top = `${this.resultData.detections[iChip].top * imgHeight}px`
box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * imgWidth}px`
box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * imgHeight}px`
},
deleteChip ( iChip ) {
f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {
this.resultData.detections.splice(iChip, 1)
});
},
getImage () {
var example = this.$refs.image_chooser.files[0];
this.imageView = URL.createObjectURL(example);
}
}
}
</script>

37
src/pages/home.vue
View File

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

25
src/pages/request-and-load.vue
View File

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

55
src/pages/testData.js Normal file
View File

@@ -0,0 +1,55 @@
export default {
testData: {
"id": "manual",
"detections": [
{
"top": 0.5543267130851746,
"left": 0.514180064201355,
"bottom": 0.7492024302482605,
"right": 0.5877177715301514,
"label": "Lung, Right",
"confidence": 91.04458093643188
},
{
"top": 0.24095627665519714,
"left": 0.5838792324066162,
"bottom": 0.9880742430686951,
"right": 0.8479938507080078,
"label": "Diaphragm",
"confidence": 88.7181043624878
},
{
"top": 0.3355500102043152,
"left": 0.3559962809085846,
"bottom": 0.4628722071647644,
"right": 0.6606560349464417,
"label": "Aorta",
"confidence": 85.63258051872253
},
{
"top": 0.46723803877830505,
"left": 0.28829023241996765,
"bottom": 0.8604505658149719,
"right": 0.5213174819946289,
"label": "Heart",
"confidence": 85.21404266357422
},
{
"top": 0.428698867559433,
"left": 0.1482502520084381,
"bottom": 0.5519284009933472,
"right": 0.5934896469116211,
"label": "Phrenic nerve",
"confidence": 81.82616829872131
},
{
"top": 0.4919853210449219,
"left": 0.4810255169868469,
"bottom": 0.5394672155380249,
"right": 0.5925238728523254,
"label": "Vena Cava, Caudal",
"confidence": 75.55835843086243
}
]
}
}