42 lines
1.3 KiB
Django/Jinja
42 lines
1.3 KiB
Django/Jinja
{% extends "_base.html.j2" %}
|
|
|
|
{% block content %}
|
|
<h2>demix song</h2>
|
|
<p>
|
|
use <a href="https://github.com/facebookresearch/demucs">demucs</a>
|
|
to generate 'vocal', 'bass', 'drums', and 'other' tracks:
|
|
</p>
|
|
|
|
{% block form %}
|
|
<form action="/demix" method="POST" enctype="multipart/form-data">
|
|
<br>
|
|
|
|
<label class="file-upload">
|
|
<span class="file-upload-button">browse...</span>
|
|
<span class="file-upload-status">upload audio file (.aic, .aif, .flac, .m4a, .mp3, .ogg, .opus, .wav)</span>
|
|
<input type="file" name="song" accept="audio/*" required />
|
|
</label>
|
|
|
|
<!-- NYI TODO: <p>or <a href="/from-url">download from online</a> (e.g. youtube).</p> -->
|
|
|
|
<button>enqueue</button>
|
|
|
|
<ul class="status">
|
|
<li>songs in queue: <strong>{{ status['queue_size'] }}</strong></li>
|
|
<li>this node is using: <strong>{{ status['device'] }}</strong></li>
|
|
</ul>
|
|
</form>
|
|
|
|
<script>
|
|
const fileInput = document.querySelector(".file-upload input[type=file]")
|
|
fileInput.addEventListener("change", e => {
|
|
if (fileInput.files.length > 0) {
|
|
document.querySelector(".file-upload-status").textContent = `selected: ${fileInput.files[0].name}`
|
|
} else {
|
|
document.querySelector(".file-upload-status").textContent = `no file selected.`
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %}
|