78 lines
2.7 KiB
HTML
78 lines
2.7 KiB
HTML
{% extends "base.html" %} {% block title %}Generated Video{% endblock %} {%
|
|
block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<a
|
|
href="{{ url_for('gallery') }}"
|
|
class="text-blue-400 hover:underline mb-4 inline-block"
|
|
>← Back to Gallery</a
|
|
>
|
|
|
|
{% if video %}
|
|
<h1 class="text-2xl font-bold mb-4">Video Generation Job</h1>
|
|
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
|
|
{% if video.status == 'completed' and video.video_url %}
|
|
<video src="{{ video.video_url }}" controls class="w-full"></video>
|
|
{% elif video.status in ('queued', 'processing') %}
|
|
<div
|
|
class="w-full bg-black aspect-video flex flex-col items-center justify-center p-6 text-center"
|
|
id="video-poll-status"
|
|
data-video-id="{{ video.id }}"
|
|
>
|
|
<p class="text-xl font-semibold">
|
|
Status: <strong id="poll-status-text">{{ video.status }}</strong>
|
|
</p>
|
|
<p class="text-gray-400 mt-2">
|
|
Your video is being processed. This page will update automatically when
|
|
it's ready.
|
|
</p>
|
|
<div class="spinner mt-4"></div>
|
|
<button
|
|
id="cancel-video-btn"
|
|
class="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md text-sm"
|
|
>
|
|
Cancel Job
|
|
</button>
|
|
<p id="cancel-msg" class="text-sm mt-2 hidden"></p>
|
|
</div>
|
|
{% elif video.status == 'failed' %}
|
|
<div
|
|
class="w-full bg-black aspect-video flex flex-col items-center justify-center p-6 text-center"
|
|
>
|
|
<p class="text-xl font-semibold text-red-500">Generation Failed</p>
|
|
<p class="text-gray-400 mt-2">
|
|
{{ video.error or 'An unknown error occurred.' }}
|
|
</p>
|
|
</div>
|
|
{% else %}
|
|
<div
|
|
class="w-full bg-black aspect-video flex flex-col items-center justify-center p-6 text-center"
|
|
>
|
|
<p class="text-xl font-semibold">Video Not Available</p>
|
|
<p class="text-gray-400 mt-2">Status: {{ video.status }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="p-6">
|
|
<h2 class="text-xl font-semibold mb-2">Prompt</h2>
|
|
<p class="text-gray-300 bg-gray-900 p-3 rounded-md">{{ video.prompt }}</p>
|
|
<div class="mt-4 text-sm text-gray-400">
|
|
<p><strong>Model:</strong> {{ video.model_id }}</p>
|
|
<p><strong>Job ID:</strong> <code>{{ video.job_id }}</code></p>
|
|
<p>
|
|
<strong>Created:</strong> {{ video.created_at | fromisoformat |
|
|
humantime }}
|
|
</p>
|
|
<p>
|
|
<strong>Last Update:</strong> {{ video.updated_at | fromisoformat |
|
|
humantime }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<h1 class="text-2xl font-bold">Video job not found</h1>
|
|
<p class="text-gray-400 mt-2">Could not find details for this video job.</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|