Complete Bar Race module with HTML UI and JS handlers

modules/bar_race/__init__.py

@@ -8,9 +8,14 @@ from fastapi import FastAPI
 
 logger = logging.getLogger(__name__)
 
+# Module metadata for auto-discovery
+MODULE_NAME = "bar_race"
+MODULE_PREFIX = "/api/bar-race"
+MODULE_DESCRIPTION = "Bar Chart Race Video Generator"
+
 _app = None
 
-def register(app: FastAPI):
+def register(app: FastAPI, config=None):
     """Register Bar Race module routes"""
     global _app
     _app = app

static/index.html

@@ -279,6 +279,9 @@
             <button class="tab-btn" data-tab="quiz">
                 🎯 Quiz Reel
             </button>
+            <button class="tab-btn" data-tab="barrace">
+                📊 Bar Race
+            </button>
         </div>
 
         <!-- Story Reels Tab -->
@@ -643,6 +646,69 @@
         </div>
     </div>
 
+    <!-- Bar Race Tab -->
+    <div id="barrace-tab" class="tab-content">
+        <div class="card">
+            <h2>📊 Bar Chart Race Generator</h2>
+            <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
+                Create animated bar chart race videos showing data over time
+            </p>
+
+            <form id="barRaceForm">
+                <div class="form-group">
+                    <label>Topic *</label>
+                    <select id="barRaceTopic" required>
+                        <option value="gdp_nominal">GDP (Nominal) - Richest Countries</option>
+                        <option value="population">Population - Most Populated Countries</option>
+                        <option value="gdp_per_capita">GDP Per Capita</option>
+                        <option value="social_media_users">Social Media Users</option>
+                        <option value="youtube_subscribers">YouTube Subscribers</option>
+                        <option value="military_spending">Military Expenditure</option>
+                        <option value="olympic_medals">Olympic Gold Medals</option>
+                        <option value="life_expectancy">Life Expectancy</option>
+                        <option value="browser_market_share">Browser Market Share</option>
+                    </select>
+                </div>
+
+                <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+                    <div class="form-group">
+                        <label>Start Year</label>
+                        <input type="number" id="barRaceYearStart" value="2000" min="1960" max="2024">
+                    </div>
+                    <div class="form-group">
+                        <label>End Year</label>
+                        <input type="number" id="barRaceYearEnd" value="2024" min="1960" max="2024">
+                    </div>
+                </div>
+
+                <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+                    <div class="form-group">
+                        <label>Top N (Bars)</label>
+                        <select id="barRaceTopN">
+                            <option value="5">5</option>
+                            <option value="8">8</option>
+                            <option value="10" selected>10</option>
+                            <option value="15">15</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Duration (seconds)</label>
+                        <select id="barRaceDuration">
+                            <option value="30">30s</option>
+                            <option value="60" selected>60s</option>
+                            <option value="90">90s</option>
+                            <option value="120">120s</option>
+                        </select>
+                    </div>
+                </div>
+
+                <button type="submit" class="btn btn-primary" style="width: 100%;">📊 Generate Bar Race Video</button>
+            </form>
+
+            <div id="barRaceStatus" class="status hidden"></div>
+        </div>
+    </div>
+
     <script>
         // Tab switching
         document.querySelectorAll('.tab-btn').forEach(btn => {
@@ -1166,6 +1232,70 @@
                 return id;
             }
         }, 100);  // End of setTimeout
+
+        // Bar Race Form
+        document.getElementById('barRaceForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const status = document.getElementById('barRaceStatus');
+            status.className = 'status processing';
+            status.innerHTML = '⏳ Starting bar race generation...';
+
+            const topic = document.getElementById('barRaceTopic').value;
+            const yearStart = parseInt(document.getElementById('barRaceYearStart').value);
+            const yearEnd = parseInt(document.getElementById('barRaceYearEnd').value);
+            const topN = parseInt(document.getElementById('barRaceTopN').value);
+            const duration = parseInt(document.getElementById('barRaceDuration').value);
+
+            try {
+                const response = await fetch('/api/bar-race/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        topic: topic,
+                        year_start: yearStart,
+                        year_end: yearEnd,
+                        top_n: topN,
+                        duration_seconds: duration,
+                        fps: 30
+                    })
+                });
+
+                const data = await response.json();
+                if (!response.ok) throw new Error(data.detail || 'Failed to start');
+
+                status.innerHTML = `⏳ Job started: ${data.job_id}. Generating frames...`;
+                pollBarRaceStatus(data.job_id);
+
+            } catch (err) {
+                status.className = 'status error';
+                status.innerHTML = '❌ ' + err.message;
+            }
+        });
+
+        async function pollBarRaceStatus(jobId) {
+            const status = document.getElementById('barRaceStatus');
+            const poll = async () => {
+                try {
+                    const res = await fetch(`/api/bar-race/${jobId}/status`);
+                    const data = await res.json();
+
+                    if (data.status === 'ready') {
+                        status.className = 'status success';
+                        status.innerHTML = `✅ Video ready! <a href="${data.video_url}" target="_blank" style="color:#4ade80;">Download Video</a>`;
+                    } else if (data.status === 'failed') {
+                        status.className = 'status error';
+                        status.innerHTML = '❌ Failed: ' + (data.error || 'Unknown error');
+                    } else {
+                        status.innerHTML = `⏳ ${data.status}... ${data.progress}%`;
+                        setTimeout(poll, 2000);
+                    }
+                } catch (err) {
+                    status.className = 'status error';
+                    status.innerHTML = '❌ Status check failed: ' + err.message;
+                }
+            };
+            poll();
+        }
     </script>
 
     <!-- Chat Widget Button -->