soapboxguy/MusicGen

1{% extends "base.html" %}2{% block content %}3<h1>Survey #{{signature}}</h1>4{% if success %}5<p class="success"> Your ratings have been saved!6You have been moved to the next random seed, if you want7to keep rating more samples. </p>8{% endif %}9{% if already_filled %}10<p class="warning"> You already rated those samples in the past,11    filling this form will override your previous ratings.12</p>13{% endif %}14<p>Welcome <span class='special'>{{session['user']}}</span> to the survey <span class='special'>#{{signature}}</span>.15Go to <a href="{{url_for('results', signature=signature)}}">the result page</a> to check the results. Go to <a href="{{url_for('index')}}">the home page</a> to start a new survey.16</p>17 18{% for error in errors %}19<p class="error">{{error}}</p>20{% endfor %}21 22{% if not blind %}23<p>Base config is: <span class="xp_name">{{ref_name}}</span></p>24<p>The following experiments are compared:</p>25<ul>26    {% for experiment in experiments %}27    <li><span class='special'>{{experiment.xp.sig}}</span> ({{experiment.epoch}} epochs): <span class="xp_name">{{experiment.name}}</span></li>28    {% endfor %}29</ul>30{% else %}31<p>This is a blind experiment, the order of all XPs is shuffled with every sample.</p>32{% endif %}33<p>The current random seed is {{seed}}. You can change it with the following form, and also update blind/non blind.34</p>35<form method="get" action="" class="simple_form">36    <input type="number" name="seed" value="{{seed}}">37    <label>Blind?38    <input type="checkbox" name="blind" {% if blind %} checked {% endif %}> </label>39    <label>Exclude unprompted?40    <input type="checkbox" name="exclude_unprompted" {% if exclude_unprompted %} checked {% endif %}> </label>41    <label>Exclude prompted?42    <input type="checkbox" name="exclude_prompted" {% if exclude_prompted %} checked {% endif %}> </label>43    <label>Max epoch?44    <input type="text" name="max_epoch" value="{{max_epoch}}"> </label>45    <input type="submit" value="Update">46</form>47 48<h2>Samples</h2>49<div class="survey">50<form method="post" action="{{url_for('survey', signature=signature, blind='true' if blind else 'false', exclude_prompted='true' if exclude_prompted else 'false', exclude_unprompted='true' if exclude_unprompted else 'false', seed=seed, max_epoch=max_epoch)}}" class="simple_form">51{% for id in model_ids %}52    <div class="track">53    <h4>{{id}}</h4>54    {% for model in models_by_id[id] %}55        {% if loop.index == 1 and model.is_prompted %}56            <section class="prompt">57            <p>Prompt is </p>58                <audio controls>59                    <source src="{{url_for('audio', path=model.sample.prompt.path)}}" type="audio/mp3">60                </audio>61            <p>Ground truth is </p>62                <audio controls>63                    <source src="{{url_for('audio', path=model.sample.prompt.ground_truth_path)}}" type="audio/mp3">64                </audio>65            </section>66        {% endif %}67        {% for err in model['errors'] %}68            <p class="error">{{err}}</p>69        {% endfor %}70        <section class="model">71        {% if not blind %}72            <p class="special">{{model.xp.sig}}:</p>73        {% endif %}74        <audio controls>75                <source src="{{url_for('audio', path=model.sample.path)}}" type="audio/mp3">76            Your browser does not support the audio element.77        </audio>78        <p>Rating:</p>79        <section class="ratings" id="ratings-{{model.model_id}}">80            {% for rating in ratings %}81            <span class="rating rating_{{rating}} {% if rating == model.rating %}rating_selected{% endif %}"82                    data-target="{{model.model_id}}" data-rating="{{rating}}" onclick="updateNote(this)">{{rating}}</span>83            {% endfor %}84            <input type="hidden" name="{{model.model_id}}" id="{{model.model_id}}" value="{{model.rating}}">85        </section>86        </p>87        </section>88    {% endfor %}89        </div>90        <hr>91{% endfor %}92    <button type="submit" class="submit-big">93        Submit evaluations94    </button>95<form>96</div>97<script>98function updateNote(node) {99    var target = node.getAttribute('data-target');100    var rating = node.getAttribute('data-rating');101    var field = document.getElementById(target);102    field.value = rating;103    node.classList.add('rating_selected');104 105    var parent = document.getElementById('ratings-' + target);106    for (const other of parent.childNodes) {107        if (other.tagName === 'SPAN' && other.classList.contains('rating_selected') && other !== node) {108            other.classList.remove('rating_selected');109        }110    }111}112 113function setupCallback(elem, elems) {114  elem.addEventListener("play", function () {115    for (var other of elems) {116      if (other !== elem) {117        other.pause();118        // other.currentTime = 0.;119      }120    }121  });122}123 124document.addEventListener('DOMContentLoaded', function () {125  var elems = document.body.getElementsByTagName("audio");126  for (var elem of elems) {127    setupCallback(elem, elems);128  }129});130</script>131{% endblock %}132