static/help.html

<div class="banner">
  <div style="display: flex; padding: 0px; align-items: center; flex: 1;">
    <div style="font-size: 20px; margin-right: 12px;"></div>
    <div style="flex: 1;">
      <div class="banner-header">Help us improve the model!</div>
      <div class="banner-text">
        Found an issue or have suggestions?
        Join us on Discourse to share feedback and questions.
      </div>
    </div>
  </div>
  <a href="https://earthspeciesproject.discourse.group/t/feedback-for-naturelm-audio-ui-hugging-face-spaces-demo/17"
     target="_blank" class="link-btn">Share Feedback</a>
</div>
<div class="guide-section">
  <h3>Getting Started</h3>
  <ol style="margin-top: 12px; padding-left: 20px;
             color: #6b7280; font-size: 14px; line-height: 1.6;">
    <li style="margin-bottom: 8px;">
      <strong>Upload your audio</strong> or click on a pre-loaded example.
      Drag and drop your audio file containing animal vocalizations,
      or click on an example.
    </li>
    <li style="margin-bottom: 8px;">
      <strong>Trim your audio (if needed)</strong> by clicking the scissors
      icon on the bottom right of the audio panel. Only the first 10 seconds of audio will be analyzed, so trim to the most relevant section of your recording.
    </li>
    <li style="margin-bottom: 8px;">
      <strong>View the Spectrogram (optional)</strong>. You can easily
      view/hide the spectrogram of your audio for closer analysis.
    </li>
    <li style="margin-bottom: 8px;">
      <strong>Select a task or write your own</strong>. Select an option
      from pre-loaded tasks. This will auto-fill the text box with a prompt,
      so all you have to do is hit Send. Or, type a custom prompt directly
      into the chat.
    </li>
    <li style="margin-bottom: 0;">
      <strong>Send and Analyze Audio</strong>. Press "Send" or type Enter
      to begin processing your audio. Ask follow-up questions or press
      "Clear" to start a new conversation.
    </li>
  </ol>
</div>
<div class="guide-section">
  <h3>Tips</h3>
  <b>Prompting Tips</b> (see full <a href="https://projects.earthspecies.org/naturelm-audio/prompting_guide.html" target="_blank">Prompting Guide</a> for more)
  <ul style="margin-top: 12px; padding-left: 20px;
             color: #6b7280; font-size: 14px; line-height: 1.6;">

    <li><strong>For Yes/No questions, always include "Answer: Yes or No."</strong> Without this, the model may respond with species names rather than a yes or no answer.</li>
    <ul>
      <li>
        <i>Is an alarm call present in this recording? Answer: Yes or No.</i>
      </li>
      <li>
        <i>Is there a frog or amphibian vocalizing in this recording? Answer: Yes or No.</i>
      </li>
    </ul>

    <li><strong>Providing geographic or temporal context</strong> can help narrow identification.</li>
    <ul>
      <li>
        <i>Given the context: '[context]', what is the common name for the focal species in the audio?"</i>
      </li>
      <li>
        Replace [context] with whatever metadata you have, e.g. country: BR, coordinates: -23.5, -46.6 or recorded in temperate forest, June.
      </li>
    </ul>
    <ul>

    </ul>
    <li><strong>Giving the model a candidate list</strong> to choose from can improve accuracy. </li>
    <ul>
<li>
      <i>Which of these is the focal species in the audio? Options: [species_choices]</i>
    </li><li>
      <i>Replace [species_choices] with a comma-separated list, e.g. Turdus merula, Erithacus rubecula, Fringilla coelebs, Parus major, Phylloscopus collybita.</i>
    </li>
    </ul>

  </ul>
  <br>
  <b>Audio Files</b>
  <ul style="margin-top: 12px; padding-left: 20px;
             color: #6b7280; font-size: 14px; line-height: 1.6;">
    <li>Supported formats: .wav, .mp3, .aac, .flac, .ogg, .webm,
        .midi, .aiff, .wma, .opus, .amr</li>
    <li>If you are uploading an .mp4, please check that it is not
        an MPEG-4 Movie file.</li>
    <li>For best results, use high-quality recordings with minimal
        background noise.</li>
  </ul>
</div>
<div class="guide-section">
  <h3>Learn More</h3>
  <ul style="margin-top: 12px; padding-left: 20px;
             color: #6b7280; font-size: 14px; line-height: 1.6;">
    <li>Visit the <a href="https://projects.earthspecies.org/naturelm-audio/prompting_guide.html"
target="_blank">NatureLM-audio Project Page</a>
for more details, examples, and the full Prompting Guide</li>
    <li>Read our <a href="https://huggingface.co/blog/EarthSpeciesProject/nature-lm-audio-ui-demo/"
         target="_blank">blog post</a> with a step-by-step tutorial</li>
    <li>Check out the
      <a href="https://arxiv.org/abs/2411.07186"
         target="_blank">published paper</a> for a deeper technical dive on NatureLM-audio</li>

    <li>Sign up for our <a href="https://forms.gle/WjrbmFhKkzmEgwvY7"
         target="_blank">closed beta waitlist</a>, if you're interested in testing upcoming features like longer audio files and batch processing.</li>
  </ul>
</div>