71 lines
2.0 KiB
Django/Jinja
71 lines
2.0 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.`
|
|
}
|
|
});
|
|
|
|
document.addEventListener("dragover", event => {
|
|
fileInput.style['pointer-events'] = "auto";
|
|
});
|
|
|
|
document.addEventListener("drop", event => {
|
|
fileInput.style['pointer-events'] = "none";
|
|
});
|
|
|
|
document.addEventListener("dragleave", event => {
|
|
fileInput.style['pointer-events'] = "none";
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
input[type=file] {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
border: none;
|
|
display: block;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
{% endblock %}
|