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:
parent
25edd635c3
commit
ae9c061225
2 changed files with 114 additions and 14 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue