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

Co-authored-by: Copilot <copilot@github.com>

frontend/app/main.py

@@ -174,7 +174,8 @@ def generate_video():
         mode = request.form.get("mode", "text")
         token = session["access_token"]
         duration_raw = request.form.get("duration_seconds", "")
-        duration = int(duration_raw) if duration_raw.strip().isdigit() else None
+        duration = int(
+            duration_raw) if duration_raw.strip().isdigit() else None
         resolution = request.form.get("resolution", "").strip() or None
         if mode == "image":
             resp = _api("POST", "/generate/video/from-image", token=token, json={

frontend/app/static/app.js

@@ -37,4 +37,48 @@ document.addEventListener("DOMContentLoaded", () => {
       if (panel) panel.classList.add("active");
     });
   });
+
+  // ── Video status polling ───────────────────────────────
+  const pollDiv = document.getElementById("video-poll-status");
+  if (pollDiv) {
+    const pollingUrl = pollDiv.dataset.pollingUrl;
+    const statusText = document.getElementById("poll-status-text");
+    const videoContainer = document.getElementById("poll-video-container");
+
+    const interval = setInterval(async () => {
+      try {
+        const resp = await fetch(
+          "/generate/video/status?polling_url=" +
+            encodeURIComponent(pollingUrl),
+        );
+        if (!resp.ok) return;
+        const data = await resp.json();
+
+        if (statusText) {
+          statusText.innerHTML = "Status: <strong>" + data.status + "</strong>";
+        }
+
+        if (data.status === "completed") {
+          clearInterval(interval);
+          if (data.video_url && videoContainer) {
+            const vid = document.createElement("video");
+            vid.src = data.video_url;
+            vid.controls = true;
+            vid.className = "generated-video";
+            videoContainer.appendChild(vid);
+            const msg = pollDiv.querySelector("p");
+            if (msg) msg.textContent = "Video ready!";
+          }
+        } else if (data.status === "failed") {
+          clearInterval(interval);
+          pollDiv.innerHTML =
+            '<div class="alert alert-error">Generation failed: ' +
+            (data.error || "Unknown error") +
+            "</div>";
+        }
+      } catch (e) {
+        console.error("Video polling error:", e);
+      }
+    }, 5000);
+  }
 });

frontend/app/templates/generate_video.html

@@ -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 %}