{% extends "base.html" %}
{% block content %}
<form method="POST" action="/synthesis" enctype="multipart/form-data" id="synthesis">
    {% if graph %}
        <img src={{graph}}>
        <audio controls>
            <source src="{{audio}}" type="audio/wav">
        </audio>
        <p style="text-align: center; font-size: 20px;">
            {% if text is string %}
                {{ text }}
            {% else %}
                {% for item in text %}
                    {{ item }}<br>
                {% endfor %}
            {% endif %}
        </p>
    {% endif %}
    <div class="form-group">
        <label for="text_method">Method</label>
        <select class="form-control" id="text_method" name="text_method" onchange="changeTextMethod()">
            <option value="single" {% if method == "single" %}selected{% endif %}>Single line</option>
            <option value="paragraph" {% if method == "paragraph" %}selected{% endif %}>Paragraph</option>
            <option value="multi" {% if method == "multi" %}selected{% endif %}>Multi line</option>
        </select>
    </div>
    <div class="form-group">
        <label for="text">Text</label><br>
        <span id="text_input"></span>
        <span id="text_label"></span>
    </div>
    <button type="button" class="collapsible" id="advanced">Advanced Options ∨</button>
    <div class="content">
        <br>
        <div class="form-group">
            <input type="range" id="max_decoder_steps" name="max_decoder_steps" step="100" min="100" max="3000" value="{{ max_decoder_steps }}" onchange="showMaxDecoderStepsLabel()">
            <label for="max_decoder_steps">
                <a href="#" data-toggle="tooltip" data-placement="top" title="Max decoder steps controls sequence length and memory usage during inference. Increasing this will use more memory but may allow for longer sentences.">Max decoder steps: </a> 
                <span id="max_decoder_steps_label"></span>
            </label>
            <br>
            <input type="range" id="silence" name="silence" step="0.01" min="0.01" max="0.3" value="{{ silence }}" onchange="showSilenceLabel()">
            <label for="silence">
                <a href="#" data-toggle="tooltip" data-placement="top" title="Silence seperation between each sentence (for multi-line)">Silence: </a> 
                <span id="silence_label"></span>
            </label>
        </div>
    </div>
    <br>
    <input type="submit" class="btn btn-primary">
</form>
<script>
let text = {% if text %}{% if text is string %}"{{ text|safe }}"{% else %}{{ text|safe }}{% endif %}{% else %}""{% endif %};
</script>
<script src="{{ url_for('static', filename='advanced.js') }}"></script>
<script src="{{ url_for('static', filename='synthesis.js') }}"></script>
{% endblock %}
