Updated to only use enhanced commentary

reachy_f1_commentator/main.py

@@ -161,18 +161,14 @@ class ReachyF1Commentator(ReachyMiniApp):
             logger.info(f"Starting playback - Reachy instance available: {self.reachy_mini_instance is not None}")
             self.playback_status.state = 'playing'
             
-            # Initialize commentary generator based on mode
+            # Initialize commentary generator (always use Enhanced mode)
             from .src.config import Config
             gen_config = Config()
             gen_config.elevenlabs_api_key = config.elevenlabs_api_key
             gen_config.elevenlabs_voice_id = config.elevenlabs_voice_id
+            gen_config.enhanced_mode = True
             
-            if config.commentary_mode == 'enhanced':
-                gen_config.enhanced_mode = True
-                self.commentary_generator = EnhancedCommentaryGenerator(gen_config, self.state_tracker)
-            else:
-                gen_config.enhanced_mode = False
-                self.commentary_generator = CommentaryGenerator(gen_config, self.state_tracker)
+            self.commentary_generator = EnhancedCommentaryGenerator(gen_config, self.state_tracker)
             
             # Initialize speech synthesizer if API key provided
             speech_synthesizer = None

reachy_f1_commentator/src/config.py

@@ -93,7 +93,11 @@ class Config:
     perspective_weight_historical: float = 0.10
     
     # Template Selection Configuration (Requirement 17.2, 17.5)
-    template_file: str = "config/enhanced_templates.json"
+    template_file: str = field(default_factory=lambda: os.path.join(
+        os.path.dirname(os.path.dirname(__file__)), 
+        "config", 
+        "enhanced_templates.json"
+    ))
     template_repetition_window: int = 10
     max_sentence_length: int = 40
     

reachy_f1_commentator/static/index.html

@@ -45,20 +45,12 @@
                 </div>
             </div>
 
-            <div class="form-group">
-                <label for="commentaryMode">Commentary Mode:</label>
-                <select id="commentaryMode" class="form-control">
-                    <option value="enhanced" selected>Enhanced (Recommended)</option>
-                    <option value="basic">Basic</option>
-                </select>
-            </div>
-
             <div class="form-group">
                 <label for="playbackSpeed">Playback Speed:</label>
                 <select id="playbackSpeed" class="form-control">
-                    <option value="1">1x (Real-time)</option>
+                    <option value="1" selected>1x (Real-time - Recommended)</option>
                     <option value="5">5x</option>
-                    <option value="10" selected>10x (Recommended)</option>
+                    <option value="10">10x</option>
                     <option value="20">20x</option>
                 </select>
             </div>

reachy_f1_commentator/static/main.js

@@ -1,4 +1,5 @@
 // Reachy F1 Commentator - Web UI JavaScript
+// Version: 2.0 - Fixed DOM initialization
 
 // LocalStorage keys
 const STORAGE_KEYS = {
@@ -11,36 +12,46 @@ const state = {
     mode: 'quick_demo',
     selectedYear: null,
     selectedRace: null,
-    commentaryMode: 'enhanced',
-    playbackSpeed: 10,
+    playbackSpeed: 1,
     elevenLabsApiKey: '',
     elevenLabsVoiceId: 'HSSEHuB5EziJgTfCVmC6',
     status: 'idle',
     statusPollInterval: null
 };
 
-// DOM elements
-const elements = {
-    mode: document.getElementById('mode'),
-    year: document.getElementById('year'),
-    race: document.getElementById('race'),
-    commentaryMode: document.getElementById('commentaryMode'),
-    playbackSpeed: document.getElementById('playbackSpeed'),
-    apiKey: document.getElementById('apiKey'),
-    voiceId: document.getElementById('voiceId'),
-    startBtn: document.getElementById('startBtn'),
-    stopBtn: document.getElementById('stopBtn'),
-    raceSelection: document.getElementById('raceSelection'),
-    statusIndicator: document.getElementById('statusIndicator'),
-    statusText: document.getElementById('statusText'),
-    progressPanel: document.getElementById('progressPanel'),
-    currentLap: document.getElementById('currentLap'),
-    totalLaps: document.getElementById('totalLaps'),
-    elapsedTime: document.getElementById('elapsedTime')
-};
+// DOM elements (will be initialized after DOM loads)
+let elements = {};
 
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
+    console.log('DOM Content Loaded');
+    
+    // Initialize DOM elements
+    elements = {
+        mode: document.getElementById('mode'),
+        year: document.getElementById('year'),
+        race: document.getElementById('race'),
+        playbackSpeed: document.getElementById('playbackSpeed'),
+        apiKey: document.getElementById('apiKey'),
+        voiceId: document.getElementById('voiceId'),
+        startBtn: document.getElementById('startBtn'),
+        stopBtn: document.getElementById('stopBtn'),
+        raceSelection: document.getElementById('raceSelection'),
+        statusIndicator: document.getElementById('statusIndicator'),
+        statusText: document.getElementById('statusText'),
+        progressPanel: document.getElementById('progressPanel'),
+        currentLap: document.getElementById('currentLap'),
+        totalLaps: document.getElementById('totalLaps'),
+        elapsedTime: document.getElementById('elapsedTime')
+    };
+    
+    // Check for missing elements
+    for (const [key, element] of Object.entries(elements)) {
+        if (!element) {
+            console.error(`Element not found: ${key}`);
+        }
+    }
+    
     loadSavedCredentials();
     setupEventListeners();
     loadYears();
@@ -125,29 +136,36 @@ async function saveServerConfig(apiKey, voiceId) {
 }
 
 function setupEventListeners() {
+    if (!elements.mode || !elements.year || !elements.startBtn || !elements.stopBtn) {
+        console.error('Required elements not found for event listeners');
+        return;
+    }
+    
     elements.mode.addEventListener('change', handleModeChange);
     elements.year.addEventListener('change', handleYearChange);
     elements.startBtn.addEventListener('click', handleStart);
     elements.stopBtn.addEventListener('click', handleStop);
     
     // Save form values to state
-    elements.commentaryMode.addEventListener('change', (e) => {
-        state.commentaryMode = e.target.value;
-    });
-    
-    elements.playbackSpeed.addEventListener('change', (e) => {
-        state.playbackSpeed = parseInt(e.target.value);
-    });
+    if (elements.playbackSpeed) {
+        elements.playbackSpeed.addEventListener('change', (e) => {
+            state.playbackSpeed = parseInt(e.target.value);
+        });
+    }
     
-    elements.apiKey.addEventListener('change', (e) => {
-        state.elevenLabsApiKey = e.target.value;
-        saveCredentials(); // Save when API key changes
-    });
+    if (elements.apiKey) {
+        elements.apiKey.addEventListener('change', (e) => {
+            state.elevenLabsApiKey = e.target.value;
+            saveCredentials(); // Save when API key changes
+        });
+    }
     
-    elements.voiceId.addEventListener('change', (e) => {
-        state.elevenLabsVoiceId = e.target.value;
-        saveCredentials(); // Save when voice ID changes
-    });
+    if (elements.voiceId) {
+        elements.voiceId.addEventListener('change', (e) => {
+            state.elevenLabsVoiceId = e.target.value;
+            saveCredentials(); // Save when voice ID changes
+        });
+    }
 }
 
 function handleModeChange(e) {
@@ -161,9 +179,15 @@ function handleModeChange(e) {
 }
 
 async function loadYears() {
+    console.log('loadYears() called');
+    console.log('elements.year:', elements.year);
+    
     try {
         const response = await fetch('/api/races/years');
+        console.log('Years API response:', response.status);
+        
         const data = await response.json();
+        console.log('Years data:', data);
         
         if (data.years && data.years.length > 0) {
             elements.year.innerHTML = '<option value="">Select year...</option>';
@@ -173,6 +197,7 @@ async function loadYears() {
                 option.textContent = year;
                 elements.year.appendChild(option);
             });
+            console.log('Years loaded successfully:', data.years);
         }
     } catch (error) {
         console.error('Failed to load years:', error);
@@ -184,6 +209,8 @@ async function handleYearChange(e) {
     const year = e.target.value;
     state.selectedYear = year;
     
+    console.log('Year changed to:', year);
+    
     if (!year) {
         elements.race.innerHTML = '<option value="">Select year first</option>';
         return;
@@ -193,7 +220,10 @@ async function handleYearChange(e) {
     
     try {
         const response = await fetch(`/api/races/${year}`);
+        console.log('Races API response:', response.status);
+        
         const data = await response.json();
+        console.log('Races data:', data);
         
         if (data.races && data.races.length > 0) {
             elements.race.innerHTML = '<option value="">Select race...</option>';
@@ -209,6 +239,7 @@ async function handleYearChange(e) {
                 
                 elements.race.appendChild(option);
             });
+            console.log('Races loaded successfully:', data.races.length);
         } else {
             elements.race.innerHTML = '<option value="">No races found</option>';
         }
@@ -234,7 +265,7 @@ async function handleStart() {
     const config = {
         mode: state.mode,
         session_key: state.mode === 'full_race' ? parseInt(elements.race.value) : null,
-        commentary_mode: state.commentaryMode,
+        commentary_mode: 'enhanced',  // Always use enhanced mode
         playback_speed: state.playbackSpeed,
         elevenlabs_api_key: state.elevenLabsApiKey,
         elevenlabs_voice_id: state.elevenLabsVoiceId

test_ui.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Test UI Fix</title>
+</head>
+<body>
+    <h1>Testing DOM Element Loading</h1>
+    <select id="year"><option>Loading...</option></select>
+    <select id="race"><option>Select year first</option></select>
+    <div id="output"></div>
+    
+    <script>
+        // Test the fix
+        let elements = {};
+        
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM loaded');
+            
+            elements = {
+                year: document.getElementById('year'),
+                race: document.getElementById('race'),
+                output: document.getElementById('output')
+            };
+            
+            console.log('Elements:', elements);
+            
+            // Test if elements are found
+            let output = '<h2>Element Check:</h2>';
+            for (const [key, element] of Object.entries(elements)) {
+                output += `<p>${key}: ${element ? 'FOUND ✓' : 'NOT FOUND ✗'}</p>`;
+            }
+            
+            elements.output.innerHTML = output;
+            
+            // Test loading years
+            loadYears();
+        });
+        
+        async function loadYears() {
+            try {
+                const response = await fetch('http://localhost:8080/api/races/years');
+                const data = await response.json();
+                
+                console.log('Years data:', data);
+                
+                if (data.years && data.years.length > 0) {
+                    elements.year.innerHTML = '<option value="">Select year...</option>';
+                    data.years.forEach(year => {
+                        const option = document.createElement('option');
+                        option.value = year;
+                        option.textContent = year;
+                        elements.year.appendChild(option);
+                    });
+                    
+                    elements.output.innerHTML += '<p>Years loaded: ' + data.years.join(', ') + '</p>';
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                elements.output.innerHTML += '<p>Error loading years: ' + error.message + '</p>';
+            }
+        }
+    </script>
+</body>
+</html>