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

Improve the help page info and formatting (#155)

Browse Source 
Closes: #146

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

Reviewed-on: #155
This commit is contained in:
Justin Georgi
2024-03-27 16:33:37 -07:00
parent b7119a240e
commit e8778f3e24
3 changed files with 63 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/svg-icon.vue
View File

@@ -15,7 +15,7 @@
<path v-else-if="icon == 'abdomen'" d="M120-80v-240q0-50 35-85t85-35h80q50 0 85-35t35-85q0-17-11.5-28.5T400-600q-33 0-56.5-23.5T320-680v-200h80v200q50 0 85 35t35 85q0 83-58.5 141.5T320-360h-80q-17 0-28.5 11.5T200-320v240h-80Zm240 0h-80v-80q0-50 35-85t85-35h160q83 0 141.5-58.5T760-480v-40q0-83-58.5-141.5T560-720q-33 0-56.5-23.5T480-800v-80h80v80q117 0 198.5 81.5T840-520v40q0 117-81.5 198.5T560-200H400q-17 0-28.5 11.5T360-160v80Zm-160 0v-240q0-17 11.5-28.5T240-360h80q83 0 141.5-58.5T520-560q0-50-35-85t-85-35v-200 200q50 0 85 35t35 85q0 83-58.5 141.5T320-360h-80q-17 0-28.5 11.5T200-320v240Z"/>
<path v-else-if="icon == 'limbs'" d="M540-440q17 0 28.5-11.5T580-480q0-7-1.5-12.5T574-503q11-4 18.5-14t7.5-23q0-17-11.5-28.5T560-580q-13 0-23 7t-14 19l-146-70q2-4 2.5-8t.5-8q0-17-11.5-28.5T340-680q-17 0-28.5 11.5T300-640q0 6 2 11.5t5 10.5q-11 4-19 14t-8 24q0 17 11.5 28.5T320-540q14 0 24-7.5t14-19.5l146 70-4 17q0 17 11.5 28.5T540-440ZM394-80q-16-47-24-92.5t-10-86q-2-40.5-.5-74.5t4.5-58q-1 0 0 0-22-5-50.5-12.5t-61-20.5Q220-437 186-455.5T119-500l50-70q39 35 81.5 55.5t78.5 32q36 11.5 60 15l24 3.5q18 1 28.5 15t7.5 32l-4.5 33.5q-4.5 33.5-5 83.5t7.5 109q8 59 33 111h-86Zm366 0h-80v-423q0-48-25.5-87T586-649L313-772l49-67 257 117q64 29 102.5 88T760-503v423Zm-280 0q-25-52-33-111t-7.5-109q.5-50 5-83.5L449-417q3-18-7.5-32T413-464l-24-3.5q-24-3.5-60-15t-78.5-32Q208-535 169-570q39 35 81.5 55.5t78.5 32q36 11.5 60 15l24 3.5q18 1 28.5 15t7.5 32l-4.5 33.5q-4.5 33.5-5 83.5t7.5 109q8 59 33 111Z"/>
<path v-else-if="icon == 'head'" d="M194-80v-395h80v315h280v-193l105-105q29-29 45-65t16-77q0-40-16.5-76T659-741l-25-26-127 127H347l-43 43-57-56 67-67h160l160-160 82 82q40 40 62 90.5T800-600q0 57-22 107.5T716-402l-82 82v240H194Zm197-187L183-475q-11-11-17-26t-6-31q0-16 6-30.5t17-25.5l84-85 124 123q28 28 43.5 64.5T450-409q0 40-15 76.5T391-267Z"/>
<path v-else-if="icon == 'photo-sample'" d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm40-80h400L545-420 440-280l-65-87-95 127Zm-40 80v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
<path v-else-if="icon == 'photo_sample'" d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm40-80h400L545-420 440-280l-65-87-95 127Zm-40 80v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
</svg>
</template>
@@ -42,7 +42,7 @@
'abdomen',
'limbs',
'head',
'photo-sample'
'photo_sample'
]
return iconList.includes(value)
}

2
src/pages/detect.vue
View File

@@ -100,7 +100,7 @@
<SvgIcon icon="photo_library" />
</f7-button>
<f7-button v-if="otherSettings.demo" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
<SvgIcon icon="photo-sample"/>
<SvgIcon icon="photo_sample"/>
</f7-button>
</f7-segmented>
</f7-popover>

74
src/pages/help.vue
View File

@@ -4,40 +4,86 @@
<f7-block>
<h2>Quick Start</h2>
<ol>
<li>From the main screen of the app, select the menu icon in the upper left corner and go to <span style="font-weight: bold;">Settings</span>.</li>
<li>Make sure that <span style="font-weight: bold;">Use external server</span> option is unselected.</li>
<li>Save the settings and return to the main screen.</li>
<li>Select the region of the body you want to identify structures from.</li>
<li>Load an image:
<ul>
<li>Click on the camera icon to take a new picture. ALVINN will highlight areas with potential structures as you aim the camera.</li>
<li>Click on the image file icon to load a picture from the device storage.</li>
<li>If demo mode is turned on, you can click on the marked image icon to load an ALVINN sample image.</li>
</ul>
</li>
<li>When the picture is captured or loaded, any identifiable structures will be listed as tags below the image.
<li>Click on the camera icon <SvgIcon icon="photo_camera" class="list-svg"/> to take a new picture.
<ul>
<li>If there are potential structures that do not satisfy the current detection threshold, a badge on the detection settings icon will indicate the number of un-displayed structures.</li>
<li>ALVINN will highlight areas with potential structures as you aim the camera.</li>
<li>Press <span class="cap-button">Capture</span> to use the current camera view.</li>
</ul>
</li>
<li>Click on the image file icon <SvgIcon icon="photo_library" class="list-svg"/> to load a picture from the device storage.</li>
<li>If demo mode is turned on, you can click on the marked image icon <SvgIcon icon="photo_sample" class="list-svg"/> to load an ALVINN sample image.</li>
</ul>
</li>
<li>When the picture is captured or loaded, any identifiable structures will be listed as tags below the image:
<f7-chip text="Structure name" media=" " class="demo-chip"/>
<ul>
<li>Click on each tag to see the structure highlighted in the image.</li>
<li>Tag color and proportion filled indicate ALVINN's level of confidence in the identification.</li>
<li>If there are potential structures that do not satisfy the current detection threshold, a badge on the detection menu icon <SvgIcon icon="visibility" class="list-svg"/> will indicate the number of un-displayed structures.</li>
</ul>
</li>
</ol>
<h2>Advanced Features</h2>
<h3>Detection Parameters</h3>
<p>
After an image has been loaded and structure detection has been performed, the detection parameters can be adjusted using the third detection menu button (eye).
After an image has been loaded and structure detection has been performed, the detection parameters can be adjusted using the detection menu icon <SvgIcon icon="visibility" class="list-svg"/>.
This button will make three tools available:
</p>
<ol>
<li>Confidence slider: You can use the slider to change the confidence threshold for identifying structures. The default threshold is 50% confidence.</li>
<li>Refresh detections: If there has been a permanent change to the structures detections, such as deleting a tag, the detection list can be reset to its original state.</li>
<li>Structure list: you can view a list of all the structures available for detection in that region and select/deselect individual structures for detection.</li>
<li>Refresh detections <SvgIcon icon="refresh_search" class="list-svg"/>: If there has been a permanent change to the structures detections, such as deleting a tag, the detection list can be reset to its original state.</li>
<li>Structure list <SvgIcon icon="check_list" class="list-svg"/>: you can view a list of all the structures available for detection in that region and select/deselect individual structures for detection.</li>
</ol>
<h3>Submitting Images</h3>
<p>
If all of the detection tags that are currently visible have been viewed, then the final button (cloud upload) on the detection menu will be enabled.
If all of the detection tags that are currently visible have been viewed, then the cloud upload button <SvgIcon icon="cloud_upload" class="list-svg"/> on the detection menu will be enabled.
This button will cause the image and the verified structures to be uploaded to the ALVINN project servers where that data will be available for further training of the neural net. If after the image has been uploaded, the available detection tags change, then the option to re-upload the image will be available if all the new tags have been viewed and verified.
</p>
</f7-block>
</f7-page>
</template>
<style>
li, p {
font-size: 16px;
}
.list-svg {
width: 2em;
position:relative;
top: .5em;
}
.cap-button {
background-color: var(--f7-theme-color);
color: white;
border-radius: 4px;
padding-left: 8px;
padding-right: 8px;
}
.demo-chip {
height: 24px;
padding-left: 8px;
--f7-chip-border-radius: 12px;
--f7-chip-media-size: 24px;
--f7-chip-font-weight: normal;
}
.demo-chip .chip-media {
background: conic-gradient(from 180deg, #00cc00 .75turn, #00000000 .75turn);
}
</style>
<script>
import SvgIcon from '../components/svg-icon.vue'
export default {
components: {
SvgIcon
}
}
</script>