{% extends "base.html" %} {% block title %}Video Generation — All You Can GET
AI{% 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>

        <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>

    <!-- 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>

        <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>
  </div>

  {% if error %}
  <div class="alert alert-error mt-2">{{ error }}</div>
  {% endif %} {% if result %}
  <div class="result">
    <h2>Video job</h2>
    <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>Status: <strong>{{ result.status }}</strong></p>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}