allucanget/ai.allucanget.biz
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add video resolution and duration options to video generation forms; implement video status polling in frontend

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
zwitschi
2026-04-27 19:11:21 +02:00
parent 98d59de2d1
commit 17ae8d9477
4 changed files with 183 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/templates/generate_video.html
+65 -5
View File
@@ -46,6 +46,30 @@ endblock %} {% block content %}
<option value="1:1">1:1 (square)</option>
</select>
<label for="res-t">Resolution</label>
<select id="res-t" name="resolution">
<option value="">Auto (default)</option>
<option value="480p">480p</option>
<option value="720p">720p</option>
<option value="1080p">1080p</option>
</select>
<label for="duration-t"
>Duration: <span id="duration-t-val">5</span>s</label
>
<input
type="range"
id="duration-t"
name="duration_seconds"
min="5"
max="60"
step="1"
value="5"
oninput="
document.getElementById('duration-t-val').textContent = this.value
"
/>
<button type="submit">Generate video</button>
</form>
</div>
@@ -93,6 +117,30 @@ endblock %} {% block content %}
<option value="1:1">1:1 (square)</option>
</select>
<label for="res-i">Resolution</label>
<select id="res-i" name="resolution">
<option value="">Auto (default)</option>
<option value="480p">480p</option>
<option value="720p">720p</option>
<option value="1080p">1080p</option>
</select>
<label for="duration-i"
>Duration: <span id="duration-i-val">5</span>s</label
>
<input
type="range"
id="duration-i"
name="duration_seconds"
min="5"
max="60"
step="1"
value="5"
oninput="
document.getElementById('duration-i-val').textContent = this.value
"
/>
<button type="submit">Generate video from image</button>
</form>
</div>
@@ -103,17 +151,29 @@ endblock %} {% block content %}
{% endif %} {% if result %}
<div class="result">
<h2>Video job</h2>
<p>Status: <strong>{{ result.status }}</strong></p>
{% if result.get('video_url') %}
<p>Job ID: <code>{{ result.id }}</code></p>
{% if result.status in ('queued', 'processing') and result.polling_url %}
<div id="video-poll-status" data-polling-url="{{ result.polling_url }}">
<p>
<span id="poll-status-text"
>Status: <strong>{{ result.status }}</strong></span
>
&mdash; checking for updates every 5 s&hellip;
</p>
<div id="poll-video-container"></div>
</div>
{% elif result.video_url %}
<video
src="{{ result.video_url }}"
controls
class="generated-video"
></video>
{% elif result.status == 'failed' %}
<div class="alert alert-error">
Generation failed: {{ result.error or 'Unknown error' }}
</div>
{% else %}
<p class="text-muted mt-1" style="font-size: 0.875rem">
Video is being processed. Check back later.
</p>
<p>Status: <strong>{{ result.status }}</strong></p>
{% endif %}
</div>
{% endif %}