ALVINN_f7/src/pages/help.vue

<template>
  <f7-page name="help">
    <f7-navbar title="Help" back-link="Back"></f7-navbar>
    <f7-block>
      <h2>Quick Start</h2>
      <ol>
        <li>Select the region of the body you want to identify structures from. The regions are:
          <ul>
            <li><RegionIcon :region="0" class="list-region"/>Thorax and back</li>
            <li><RegionIcon :region="1" class="list-region"/>Abdomen and pelvis</li>
            <li><RegionIcon :region="2" class="list-region"/>Limbs</li>
            <li><RegionIcon :region="3" class="list-region"/>Head and neck</li>
          </ul>
        </li>
        <li>Load an image:
          <ul>
            <li>Click on the camera icon <SvgIcon icon="photo_camera" class="list-svg"/> to take a new picture.
              <ul>
                <li>ALVINN will highlight areas with potential structures as you aim the camera.</li>
                <li>Press <span class="cap-button">Capture</span> to use the current camera view.</li>
              </ul>
            </li>
            <li>Click on the image file icon <SvgIcon icon="photo_library" class="list-svg"/> to load a picture from the device storage.</li>
            <li>If demo mode is turned on, you can click on the marked image icon <SvgIcon icon="photo_sample" class="list-svg"/> to load an ALVINN sample image.</li>
          </ul>
        </li>
        <li>When the picture is captured or loaded, any identifiable structures will be listed as tags below the image:
          <f7-chip text="Structure name" media=" " class="demo-chip" deleteable/>
          <ul>
            <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>
          </ul>
        </li>
      </ol>
    <h2>Advanced Features</h2>
    <h3>Detection Parameters</h3>
      <p>
        If there are potential structures that do not satisfy the current detection settings, a badge on the detection menu icon <SvgIcon icon="visibility" class="list-svg"/> will indicate the number of un-displayed structures.
        Clicking on the detection menu icon will open a menu of tools to adjust the detection settings.
        This button will make three tools available:
      </p>
      <ol>
        <li>Confidence filter <SvgIcon icon="visibility" class="list-svg"/> or <SvgIcon icon="reset_slide" class="list-svg"/>: You can press this button to show all structures or return the confidence slider to the default value (50%).</li>
        <li>Confidence slider: You can use the slider to change the confidence threshold for identifying structures.</li>
        <li>Refresh detections <SvgIcon icon="refresh_search" class="list-svg"/>: If there has been a permanent change to the structure detection list, 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 clicked on and 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 become available for further training of the neural net.
        If after the image has been uploaded, the available detection tags are changed via deletion or the detection settings options, 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;
  }

  .list-region {
    width: 3em;
    position:relative;
    top: 1em;
    margin-right: .5em;
  }

  .cap-button {
    background-color: var(--f7-theme-color);
    color: white;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .demo-chip {
    height: 24px;
    padding-left: 8px;
    --f7-chip-border-radius: 12px;
    --f7-chip-media-size: 24px;
    --f7-chip-font-weight: normal;
  }

  .demo-chip .chip-media {
    background: conic-gradient(from 135deg, #00cc00 .75turn, #00cc0088 .75turn) !important;
  }
</style>

<script>
  import SvgIcon from '../components/svg-icon.vue'
  import RegionIcon from '../components/region-icon.vue'

  export default {
    components: {
      SvgIcon,
      RegionIcon
    }
  }
</script>