122 lines
3.6 KiB
HTML
122 lines
3.6 KiB
HTML
{% extends "base.html" %} {% block title %}Video Generation — AI Allucanget{%
|
|
endblock %} {% block content %}
|
|
<div class="card">
|
|
<h1>Video Generation</h1>
|
|
|
|
<div class="tabs-container">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="text-to-video" type="button">
|
|
Text to video
|
|
</button>
|
|
<button class="tab-btn" data-tab="image-to-video" type="button">
|
|
Image to video
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Text-to-video -->
|
|
<div class="tab-panel active" id="tab-text-to-video">
|
|
<form method="post">
|
|
<input type="hidden" name="mode" value="text" />
|
|
|
|
<label for="model-t">Model</label>
|
|
<input
|
|
id="model-t"
|
|
name="model"
|
|
type="text"
|
|
required
|
|
placeholder="e.g. openai/sora-2-pro"
|
|
value="{{ request.form.get('model', '') if request.form.get('mode','text')=='text' else '' }}"
|
|
/>
|
|
|
|
<label for="prompt-t">Prompt</label>
|
|
<textarea
|
|
id="prompt-t"
|
|
name="prompt"
|
|
rows="4"
|
|
required
|
|
placeholder="Describe the video you want…"
|
|
>
|
|
{{ request.form.get('prompt', '') if request.form.get('mode','text')=='text' else '' }}</textarea
|
|
>
|
|
|
|
<label for="aspect-t">Aspect ratio</label>
|
|
<select id="aspect-t" name="aspect_ratio">
|
|
<option value="16:9">16:9 (landscape)</option>
|
|
<option value="9:16">9:16 (portrait)</option>
|
|
<option value="1:1">1:1 (square)</option>
|
|
</select>
|
|
|
|
<button type="submit">Generate video</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Image-to-video -->
|
|
<div class="tab-panel" id="tab-image-to-video">
|
|
<form method="post">
|
|
<input type="hidden" name="mode" value="image" />
|
|
|
|
<label for="model-i">Model</label>
|
|
<input
|
|
id="model-i"
|
|
name="model"
|
|
type="text"
|
|
required
|
|
placeholder="e.g. openai/sora-2-pro"
|
|
value="{{ request.form.get('model', '') if request.form.get('mode')=='image' else '' }}"
|
|
/>
|
|
|
|
<label for="image_url">Source image URL</label>
|
|
<input
|
|
id="image_url"
|
|
name="image_url"
|
|
type="url"
|
|
required
|
|
placeholder="https://example.com/photo.jpg"
|
|
value="{{ request.form.get('image_url', '') }}"
|
|
/>
|
|
|
|
<label for="prompt-i">Motion prompt</label>
|
|
<textarea
|
|
id="prompt-i"
|
|
name="prompt"
|
|
rows="3"
|
|
required
|
|
placeholder="Describe the motion or transformation…"
|
|
>
|
|
{{ request.form.get('prompt', '') if request.form.get('mode')=='image' else '' }}</textarea
|
|
>
|
|
|
|
<label for="aspect-i">Aspect ratio</label>
|
|
<select id="aspect-i" name="aspect_ratio">
|
|
<option value="16:9">16:9 (landscape)</option>
|
|
<option value="9:16">9:16 (portrait)</option>
|
|
<option value="1:1">1:1 (square)</option>
|
|
</select>
|
|
|
|
<button type="submit">Generate video from image</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="alert alert-error mt-2">{{ error }}</div>
|
|
{% endif %} {% if result %}
|
|
<div class="result">
|
|
<h2>Video job</h2>
|
|
<p>Status: <strong>{{ result.status }}</strong></p>
|
|
{% if result.get('video_url') %}
|
|
<video
|
|
src="{{ result.video_url }}"
|
|
controls
|
|
class="generated-video"
|
|
></video>
|
|
{% else %}
|
|
<p class="text-muted mt-1" style="font-size: 0.875rem">
|
|
Video is being processed. Check back later.
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|