Add Fact-Image UI section with form and status polling

static/index.html

@@ -270,6 +270,9 @@
             <button class="tab-btn" data-tab="video">
                 📹 Video Creator
             </button>
+            <button class="tab-btn" data-tab="fact">
+                🧠 Fact Image
+            </button>
         </div>
 
         <!-- Story Reels Tab -->
@@ -367,6 +370,60 @@
                 <div id="videoStatus" class="status hidden"></div>
             </div>
         </div>
+
+        <!-- Fact Image Tab -->
+        <div id="fact-tab" class="tab-content">
+            <div class="card">
+                <h2>🧠 Fact Image Video</h2>
+                <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
+                    Generate a clean image → Add fact text overlay → Create short video (4-7s)
+                </p>
+
+                <form id="factForm">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Image Model</label>
+                            <select id="factModel">
+                                <option value="nvidia">NVIDIA (AI Generated)</option>
+                                <option value="cloudflare">Cloudflare (AI Generated)</option>
+                                <option value="pexels">Pexels (Stock Photo)</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>Duration (seconds)</label>
+                            <select id="factDuration">
+                                <option value="4">4 seconds</option>
+                                <option value="5" selected>5 seconds</option>
+                                <option value="6">6 seconds</option>
+                                <option value="7">7 seconds</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label>Image Prompt *</label>
+                        <textarea id="factImagePrompt" rows="2"
+                            placeholder="e.g., calm forest with soft sunlight filtering through trees, peaceful nature scene"
+                            required></textarea>
+                        <small style="color: var(--text-secondary);">Describe the background image. It will be generated
+                            without text.</small>
+                    </div>
+
+                    <div class="form-group">
+                        <label>Fact Text *</label>
+                        <textarea id="factText" rows="3"
+                            placeholder="e.g., People who daydream more tend to have higher creative intelligence."
+                            required></textarea>
+                        <small style="color: var(--text-secondary);">The psychology/motivational fact to overlay on the
+                            image.</small>
+                    </div>
+
+                    <button type="submit" class="btn btn-primary">🎬 Generate Fact Video</button>
+                </form>
+
+                <div id="factStatus" class="status hidden"></div>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -461,6 +518,70 @@
             `;
         });
 
+        // Fact Image Form
+        document.getElementById('factForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const status = document.getElementById('factStatus');
+            status.className = 'status processing';
+            status.innerHTML = '⏳ Generating fact video...';
+            status.classList.remove('hidden');
+
+            const data = {
+                model: document.getElementById('factModel').value,
+                image_prompt: document.getElementById('factImagePrompt').value,
+                fact_text: document.getElementById('factText').value,
+                duration: parseInt(document.getElementById('factDuration').value)
+            };
+
+            try {
+                const res = await fetch('/api/fact-image/', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(data)
+                });
+                const result = await res.json();
+
+                if (result.job_id) {
+                    status.innerHTML = `✅ Job started! ID: ${result.job_id}<br>Checking status...`;
+                    pollFactStatus(result.job_id);
+                }
+            } catch (err) {
+                status.className = 'status error';
+                status.innerHTML = '❌ Error: ' + err.message;
+            }
+        });
+
+        // Poll Fact Image status
+        async function pollFactStatus(jobId) {
+            const status = document.getElementById('factStatus');
+
+            const check = async () => {
+                try {
+                    const res = await fetch(`/api/fact-image/${jobId}/status`);
+                    const data = await res.json();
+
+                    const progress = data.progress || 0;
+                    status.innerHTML = `
+                        <div>Status: <strong>${data.status}</strong></div>
+                        <div class="progress-bar"><div class="progress-fill" style="width: ${progress}%"></div></div>
+                    `;
+
+                    if (data.status === 'ready') {
+                        status.className = 'status success';
+                        status.innerHTML += `<br><a href="/api/fact-image/${jobId}" class="btn btn-primary" style="margin-top: 1rem; display: inline-block;">📥 Download Video</a>`;
+                    } else if (data.status === 'failed') {
+                        status.className = 'status error';
+                        status.innerHTML = '❌ Failed: ' + (data.error || 'Unknown error');
+                    } else {
+                        setTimeout(check, 2000);
+                    }
+                } catch (err) {
+                    setTimeout(check, 3000);
+                }
+            };
+            check();
+        }
+
         // Video Form
         document.getElementById('videoForm').addEventListener('submit', async (e) => {
             e.preventDefault();