Replace stems URL input with radio buttons + add download button

- Radio buttons to select Version A or B MP3 as stems source
- New /api/audio-source endpoint serves single MP3 for Extraction API
- Backend reads radio selection, constructs public URL automatically
- Download Stems button appears when stems are ready
- Generate button disabled when no MP3s are available
This commit is contained in:
Troll (Hermes Agent) 2026-08-11 19:14:25 +00:00
parent 25edd635c3
commit ae9c061225
2 changed files with 114 additions and 14 deletions

View file

@ -573,8 +573,35 @@
<!-- Stems -->
<form method="POST">
<input type="hidden" name="action" value="generate_stems">
<label for="stems_source_url">Stems Source Audio URL</label>
<input type="url" id="stems_source_url" name="stems_source_url" placeholder="https://.../song.mp3" value="{{ req.song_a_path or '' }}">
<p style="margin:0 0 .5rem 0;font-weight:600">Select source MP3 for stems extraction:</p>
{% set a_ready = req.song_a_path and file_exists(req.song_a_path) %}
{% set b_ready = req.song_b_path and file_exists(req.song_b_path) %}
<div class="song-row">
<input type="radio" id="stems_a" name="stems_source" value="a"
{% if not a_ready %}disabled{% endif %}
{% if a_ready and not b_ready %}checked{% endif %}>
<label for="stems_a" {% if not a_ready %}style="opacity:.6"{% endif %}>
Version A MP3:
{% if a_ready %}
<span class="status-badge ok">✅ Ready</span> {{ basename(req.song_a_path) }}
{% else %}
<span class="status-badge missing">❌ Not ready</span>
{% endif %}
</label>
</div>
<div class="song-row">
<input type="radio" id="stems_b" name="stems_source" value="b"
{% if not b_ready %}disabled{% endif %}
{% if b_ready %}checked{% endif %}>
<label for="stems_b" {% if not b_ready %}style="opacity:.6"{% endif %}>
Version B MP3:
{% if b_ready %}
<span class="status-badge ok">✅ Ready</span> {{ basename(req.song_b_path) }}
{% else %}
<span class="status-badge missing">❌ Not ready</span>
{% endif %}
</label>
</div>
<p class="copy-hint">Vocal + instrumental extraction: ~$0.018$0.084 USD per song on Pro plan.</p>
<label for="stems_status">Stems Status:</label>
@ -590,12 +617,14 @@
<div class="flash error">{{ req.stems_error }}</div>
{% endif %}
{% if req.stems_url %}
<p><a href="{{ req.stems_url }}" target="_blank">Download stems →</a></p>
<div class="actions">
<a href="{{ req.stems_url }}" target="_blank" rel="noopener noreferrer" class="button-link" style="display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:#4b5563;border-radius:.375rem;color:#fff;text-decoration:none;font-size:.875rem">⬇ Download Stems</a>
</div>
{% endif %}
{% set stems_in_progress = req.stems_status in ('IN_QUEUE', 'IN_PROGRESS') %}
<div class="actions">
<button type="submit" {% if stems_in_progress %}disabled{% endif %}>Generate Stems</button>
<button type="submit" {% if stems_in_progress or not (a_ready or b_ready) %}disabled{% endif %}>Generate Stems</button>
</div>
</form>
</div>