demucs-server/src/demucs_server/templates/task.html.j2

62 lines
1.7 KiB
Django/Jinja

{% extends "_base.html.j2" %}
{% block content %}
<h2>task</h2>
{% if status in ["queued"] %}
<p>your upload is currently in the queue, and hasn't started processing yet.</p>
{% elif status in ["in progress", "saving"] %}
<p>your upload is currently processing.</p>
{% endif %}
<p>status: <strong class="status">{{ status }}</strong></p>
<p>originally: <strong>{{ orig_name }}</strong></p>
<section class="progress-section" {% if progress.get('stage') is None %}style="display: none" {% endif %}>
<h3>progress</h3>
<p>
stage:
<data id="stage">{{ progress.get('stage') or '' }}</data> /
<data id="stages">{{ progress.get('stages') or '' }}</data>
</p>
<p>
step:
<data id="step">{{ progress.get('step') or '' }}</data> /
<data id="stage-steps">{{ progress.get('stage-steps') or '' }}</data>
</p>
</section>
<script>
const source = new EventSource("/sse?task_id={{ task_id }}")
source.onmessage = (event) => {
console.log(event);
const message = JSON.parse(event.data);
if (message.status != null) {
document.querySelector("#status").textContent = message.status;
}
if (message.progress != null) {
document.querySelector("progress-section").style.display = "unset";
for (const item in message.progress) {
document.getElementById(item).textContent = message.progress[item];
}
}
};
</script>
{% if outputs %}
<ul class="track-list">
{% for output in outputs %}
<li>
<a href="/{{ output['path'] }}">{{ output['track'] }}</a>
<audio controls>
<source src="/{{ output['path'] }}" />
</audio>
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}