72 lines
3.2 KiB
HTML
72 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Audio Transcriber — {{ settings.APP_NAME }}{% endblock %}
|
|
{% block content %}
|
|
<div class="page">
|
|
{% if status == "started" %}<div class="form-error" style="background:#e8f7ec;color:#1aae39;border-color:#b8e6c7">MIDI transcription started — results appear below when done.</div>
|
|
{% elif status == "started-mus" %}<div class="form-error" style="background:#fff4e5;color:#dd5b00;border-color:#f4d8b0">Sheet-music (MuScriptor) transcription started. This is slow on CPU and needs the HF token set.</div>{% endif %}
|
|
|
|
<h1 class="greeting">Audio Transcriber</h1>
|
|
<p class="muted" style="max-width:640px">
|
|
Turn an audio file into MIDI (via Spotify Basic Pitch). Upload or pick a file from
|
|
your bucket, then the transcription worker produces a MIDI you can download.
|
|
</p>
|
|
|
|
<div class="admin-panel">
|
|
<section class="stack">
|
|
<h2 class="section-title">Your audio</h2>
|
|
{% if audio_files %}
|
|
<ul class="file-list">
|
|
{% for k in audio_files %}
|
|
<li>
|
|
<span class="file-name" title="{{ k }}">{{ k }}</span>
|
|
<span style="display:flex;gap:8px;align-items:center">
|
|
<form method="post" action="/transcriber/transcribe" style="display:flex">
|
|
<input type="hidden" name="key" value="{{ k }}">
|
|
<button class="button button-utility" type="submit">MIDI</button>
|
|
</form>
|
|
<form method="post" action="/transcriber/sheetmusic" style="display:flex">
|
|
<input type="hidden" name="key" value="{{ k }}">
|
|
<button class="button button-utility" type="submit" title="MIDI + MusicXML + PDF" style="border-color:#dd5b00;color:#dd5b00">Sheet music</button>
|
|
</form>
|
|
</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="faint">No audio files yet. Upload one below.</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<section class="linkout-card stack">
|
|
<h2 class="section-title">Upload audio</h2>
|
|
<form method="post" action="/transcriber/upload" enctype="multipart/form-data">
|
|
<div class="form-field">
|
|
<input class="text-input" type="file" name="file" accept="audio/*,.wav,.mp3,.flac,.m4a,.mp4,.mov,.webm,.mkv" required>
|
|
</div>
|
|
<button class="button button-primary width-full" type="submit">Upload & transcribe</button>
|
|
</form>
|
|
<p class="faint margin-top" style="font: var(--type-caption)">
|
|
Saved to <strong>{{ bucket }}</strong> under <code>audio/…</code>. <strong>MIDI</strong> = Basic Pitch (fast); <strong>Sheet music</strong> = MuScriptor (MIDI+MusicXML+PDF, slow, needs HF token).
|
|
</p>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="stack" style="margin-top: var(--space-xxl)">
|
|
<h2 class="section-title">Transcriptions</h2>
|
|
{% if transcriptions %}
|
|
<div class="workspace">
|
|
<ul class="file-list">
|
|
{% for t in transcriptions %}
|
|
<li>
|
|
<span class="file-name" title="{{ t }}">{{ t }}</span>
|
|
<a class="button button-utility" href="/transcriber/download?key={{ t }}" >Download</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% else %}
|
|
<p class="faint">Nothing transcribed yet.</p>
|
|
{% endif %}
|
|
</section>
|
|
</div>
|
|
{% endblock %} |