{% extends "base.html" %}
{% block additional_scripts %}
<script src="{{ url_for('static', filename='pane.js') }}"></script>
{% endblock %}
{% block content %}
<div class="tab">
    <button class="tablinks active" onclick="openPane(event, 'local')">Local GPU</button>
    <button class="tablinks" onclick="openPane(event, 'colab')">Colab notebook</button>
</div>
<br>
<div id="local" class="tabcontent" style="display: block;">
    {% if cuda_enabled %}
    <form method="POST" action="/train" enctype="multipart/form-data">
        <div class="form-group">
            <label for="dataset">Dataset path</label>
            <select class="form-control" id="dataset" name="dataset" onchange="showDatasetInfo()" required>
                {% for dataset in datasets %}
                    <option value="{{dataset}}">{{dataset}}</option>
                {% endfor %}
            </select>
            <div>
                <input id="total_clips" type="hidden"></input>
                <input id="duration" type="hidden"></input>
                <a href="#" data-toggle="tooltip" data-placement="top" title="Having a larger dataset will likely improve voice quality">Dataset size</a>:
                <span id="dataset_label"></span>
            </div>
        </div>
        <div class="form-group" id="checkpoint_field" style="display: none;">
            <label for="checkpoint">Checkpoint</label>
            <select class="form-control" id="checkpoint" name="checkpoint"></select>
        </div>
        <div class="form-group" id="pretrained_model_field">
            <label for="pretrained_model"><a href="#" data-toggle="tooltip" data-placement="top" title="Using a pretrained model may reduce the number of required epochs and improve quality">Pretrained model</a> (recommended) <a href="https://drive.google.com/file/d/1c5ZTuT7J08wLUoVZ2KkUs_VdZuJ86ZqA/view">default</a></label>
            <input type="file" id="pretrained_model" name="pretrained_model"> 
        </div>
        <div class="form-group">
            <label for="language">Language <a href="/settings">Add more</a></label>
            <select class="form-control" id="language" name="language" required>
                {% for language in languages %}
                    <option value="{{language}}">{{language}}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <input type="range" id="epochs" name="epochs" step="500" min="500" max="10000" value="3000" onchange="showEpochsLabel()">
            <label for="epochs">
                <a href="#" data-toggle="tooltip" data-placement="top" title="An epoch is a full cycle of the dataset. Increasing this amount will likely improve quality, but will also lead to longer runtime">Epochs</a>: 
                <span id="epochs_label"></span>
            </label>
        </div>
        <div>
            Time Estimate: <span id="time_estimate"></span><br>
            Disk Usage: <span id="disk_usage"></span>
        </div>
        <br>
        <button type="button" class="collapsible" id="advanced">Advanced Options ∨</button>
        <div class="content">
            <br>
            <div class="form-group">
                <label for="alignment_sentence"><a href="#" data-toggle="tooltip" data-placement="top" title="Text for the alignment graph which helps indicate how your model is progressing. Use a sentence that would take a few seconds to say (more than a couple of words)">Alignment text</a></label>
                <input type="text" id="alignment_sentence" name="alignment_sentence" class="form-control"> 
            </div>
            <div class="form-group">
                <input type="range" id="batch_size" name="batch_size" step="2" min="2" max="256" value="{{ batch_size }}" oninput="showBatchSize()">
                <label for="batch_size">
                    <a href="#" data-toggle="tooltip" data-placement="top" title="Larger batch sizes use more GPU memory leading to faster training, but setting this too high may lead to a 'CUDA out of memory' error">Batch size</a>: 
                    <input type="text" id="batch_size_label" onchange="editBatchSize()">
                </label> 
            </div>
            <div class="form-group">
                <input type="checkbox" id="early_stopping" name="early_stopping" checked>
                <label for="early_stopping"><a href="#" data-toggle="tooltip" data-placement="top" title="Early stopping will stop training when the loss stops significantly decreasing. This will reduce unnecessary training time">Early Stopping</a></label>
            </div>
            <div class="form-group">
                <input type="range" id="checkpoint_frequency" name="checkpoint_frequency" step="250" min="250" max="2500" value="1000" onchange="showCheckpointFrequencyLabel()">
                <label for="checkpoint_frequency">
                    <a href="#" data-toggle="tooltip" data-placement="top" title="Changes how frequently checkpoints are made. Increasing this value will marginally increase performance but may also increase how much progress is lost if training fails.">Checkpoint Frequency</a>: 
                    <span id="checkpoint_frequency_label"></span>
                </label>
            </div>
            <div class="form-group">
                <input type="range" id="backup_checkpoint_frequency" name="backup_checkpoint_frequency" step="500" min="2500" max="25000" value="10000" onchange="showCheckpointBackupFrequencyLabel()">
                <label for="backup_checkpoint_frequency">
                    <a href="#" data-toggle="tooltip" data-placement="top" title="Changes how frequently backup checkpoints are made. Increasing this will use more disk space but means more backup versions will be kept.">Backup Checkpoint Frequency</a>: 
                    <span id="backup_checkpoint_frequency_label"></span>
                </label>
            </div>
            <div class="form-group">
                <input type="range" id="validation_size" name="validation_size" step="0.05" min="0.05" max="0.2" value="0.2" oninput="showValidationSize()">
                <label for="validation_size">
                    <a href="#" data-toggle="tooltip" data-placement="top" title="What percentage of data to use for validation">Validation size</a>: 
                    <span id="validation_size_label"></span>
                </label> 
            </div>
            <div class="form-group">
                <input type="checkbox" id="multi_gpu" name="multi_gpu" checked>
                <label for="multi_gpu"><a href="#" data-toggle="tooltip" data-placement="top" title="Use multiple GPU's (If available)">Multi GPU</a></label>
            </div>
        </div>
        <br>
        <input type="submit" class="btn btn-primary">
    </form>
    <script>
    let checkpoints = {{ checkpoints|safe }};
    </script>
    <script src="{{ url_for('static', filename='advanced.js') }}"></script>
    <script src="{{ url_for('static', filename='train.js') }}"></script>
    {% else %}
    <h3>Training is not available</h3>
    <p>CUDA is not working on your system. Possible reasons:</p>
    <ul>
        <li>You are running the CPU only version of the app</li>
        <li>You don't have an NVIDIA GPU</li>
        <li>Your drivers are not up-to-date, must be version 456.38+ (check by running 'nvidia-smi')</li>
        <li>You have done a custom install and accidently installed pytorch CPU only (shows as '1.9.0+cpu' instead of '1.9.0+cu111' in 'pip list')</li>
    </ul>
    {% endif %}
</div>
<div id="colab" class="tabcontent">
    <form method="POST" action="/download-dataset" enctype="multipart/form-data">
        <div class="form-group">
            <label for="dataset"><b>1. Select dataset to export</b></label>
            <select class="form-control" id="dataset" name="dataset">
                {% for dataset in datasets %}
                    <option value="{{dataset}}">{{dataset}}</option>
                {% endfor %}
            </select>
        </div>
        <input type="submit" class="btn btn-primary" value="Export">
    </form>
    <b>2. Follow the steps in the training notebook</b>
    <a class="btn btn-success" href="https://colab.research.google.com/drive/1YbB_gA2_Rspmm1TDyEDueNXittmtWu1c?usp=sharing" target="_blank">Open notebook</a>
</div>
{% endblock %}
