Voice-Cloning-App/application/static/manage-datasets.html

{% extends "simplebase.html" %}
{% block content %}
<h2>Manage datasets</h2>
<br>
<form method="POST" action="/label-clip">
    <div class="form-group">
        <select class="form-control" id="dataset" name="dataset" onchange="selectDataset()">
            {% for dataset in datasets %}
                <option value="{{dataset}}" {% if selected == dataset %}selected{% endif %}>{{dataset}}</option>
            {% endfor %}
        </select>
    </div>

    <hr>
    <span id="error"></span>
    <div class="container" id="dataset-info" style="display: none;">
        <div class="row">
        <div class="col-md">
            <h2>Info</h2>
            <p>
                Size: <span id="size"></span><br>
                Total clips: <span id="clips"></span><br>
            </p>

            <h5>Clip durations</h5>
            <p>
                Shortest clip: <span id="shortest-clip"></span>s<br>
                Mean clip duration: <span id="mean-duration"></span>s<br>
                Longest clip: <span id="longest-clip"></span>s<br>
            </p>

            <h5>Words</h5>
            <p>
                Words: <span id="words"></span><br>
                Mean words per clip: <span id="mean-words"></span><br>
                Distinct words: <span id="distinct-words"></span><br>
            </p>
        </div>
        <div class="col-md">
            <h2>Label clips</h2>
            <p id="label-clip-message"></p>
            <div id="label-clip" style="display: none;">
                <div class="form-group">
                    <select class="form-control" id="unlabelled_clip" name="unlabelled_clip" onchange="selectUnlabelledClip()"></select>
                </div>
                <div class="form-group">
                    <audio controls id="audio">
                        <source id="audioSource" type="audio/wav">
                    </audio>
                </div>
                <div class="form-group">
                    <label for="sentence"><a href="#" data-toggle="tooltip" data-placement="top" title="What is said in the audio (make sure to use punctuation)">Text</a></label>
                    <input type="text" id="sentence" name="sentence" class="form-control" required> 
                </div>
                <input type="submit" class="btn btn-primary">
            </div>
        </div>
        </div>
    </div>
</form>

<script src="{{ url_for('static', filename='manage-datasets.js') }}"></script>
{% endblock %}