Sync from GitHub repo

templates/arena.html

@@ -28,10 +28,6 @@
         <button type="submit" class="mobile-synth-btn">Synthesize</button>
     </form>
 
-    <div class="keyboard-hint" id="tts-input-hint">
-        Press <kbd>R</kbd> for random text, <kbd>Enter</kbd> to synthesize, <kbd>N</kbd> for random + synthesize
-    </div>
-
     <div class="loading-container" style="display: none;">
         <div class="loader-wrapper">
             <div class="loader-animation">
@@ -77,7 +73,7 @@
         </div>
 
         <div class="keyboard-hint">
-            Press <kbd>Space</kbd> to play/pause audio, <kbd>A</kbd> or <kbd>B</kbd> to vote after listening, <kbd>R</kbd> for random text, <kbd>Enter</kbd> to synthesize, <kbd>N</kbd> for new random + synthesize
+            Press <kbd>Space</kbd> to play/pause audio, <kbd>A</kbd> or <kbd>B</kbd> to vote after listening, <kbd>R</kbd> for random audio, <kbd>Enter</kbd> to generate
         </div>
     </div>
 
@@ -119,11 +115,11 @@
                 <!-- Script lines will be added here -->
             </div>
             
-            <div class="keyboard-hint podcast-keyboard-hint" id="podcast-input-hint">
-                Press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Enter</kbd> to add a new line, <kbd>R</kbd> for random script, <kbd>Enter</kbd> to generate, <kbd>N</kbd> for random + generate
-            </div>
-
             <button type="button" class="add-line-btn">+ Add Line</button>
+            
+            <div class="keyboard-hint podcast-keyboard-hint">
+                Press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> or <kbd>Alt</kbd>+<kbd>Enter</kbd> to add a new line
+            </div>
         </div>
         
         <div class="podcast-loading-container" style="display: none;">
@@ -171,7 +167,7 @@
             </div>
 
             <div class="keyboard-hint">
-                Press <kbd>Space</kbd> to play/pause audio, <kbd>A</kbd> or <kbd>B</kbd> to vote after listening, <kbd>R</kbd> for random script, <kbd>Enter</kbd> to generate, <kbd>N</kbd> for new random + generate
+                Press <kbd>Space</kbd> to play/pause audio, <kbd>A</kbd> or <kbd>B</kbd> to vote after listening, <kbd>R</kbd> for random audio, <kbd>Enter</kbd> to generate
             </div>
             
             <div class="podcast-vote-results vote-results" style="display: none;">
@@ -1011,24 +1007,28 @@
         const rejectedModelNameElement = document.querySelector('.rejected-model-name');
         const modelNameDisplays = document.querySelectorAll('.model-name-display');
         const wavePlayerContainers = document.querySelectorAll('.wave-player-container');
-        const ttsInputHint = document.getElementById('tts-input-hint');
         
         let bothSamplesPlayed = false;
         let currentSessionId = null;
         let modelNames = { a: '', b: '' };
         let wavePlayers = { a: null, b: null };
-        let cachedSentences = [];
+        let cachedSentences = []; // To store sentences available in cache
         
+        // Initialize WavePlayers with mobile settings
         wavePlayerContainers.forEach(container => {
             const model = container.dataset.model;
             wavePlayers[model] = new WavePlayer(container, {
+                // Add mobile-friendly options but hide native controls
                 backend: 'MediaElement',
-                mediaControls: false
+                mediaControls: false // Hide native audio controls
             });
         });
         
+        // Load fallback sentences directly from Flask variable (JSON string)
+        // Note: This might cause linter errors, but JSON is JS-compatible.
         const fallbackRandomTexts = JSON.parse({{ harvard_sentences | tojson | safe }});
         
+        // Fetch cached sentences on load
         function fetchCachedSentences() {
             fetch('/api/tts/cached-sentences')
                 .then(response => response.ok ? response.json() : Promise.reject('Failed to fetch cached sentences'))
@@ -1038,18 +1038,22 @@
                 })
                 .catch(error => {
                     console.error('Error fetching cached sentences:', error);
+                    // Keep cachedSentences as empty array, fallback will be used
                 });
         }
         
+        // Check URL hash for direct tab access
         function checkHashAndSetTab() {
             const hash = window.location.hash.toLowerCase();
             if (hash === '#conversational') {
+                // Switch to conversational tab
                 tabs.forEach(t => t.classList.remove('active'));
                 tabContents.forEach(c => c.classList.remove('active'));
                 
                 document.querySelector('.tab[data-tab="conversational"]').classList.add('active');
                 document.getElementById('conversational-tab').classList.add('active');
             } else if (hash === '#tts') {
+                // Switch to TTS tab (explicit)
                 tabs.forEach(t => t.classList.remove('active'));
                 tabContents.forEach(c => c.classList.remove('active'));
                 
@@ -1058,22 +1062,29 @@
             }
         }
         
+        // Check hash on page load
         checkHashAndSetTab();
         
+        // Listen for hash changes
         window.addEventListener('hashchange', checkHashAndSetTab);
         
+        // Tab switching functionality
         tabs.forEach(tab => {
             tab.addEventListener('click', function() {
                 const tabId = this.dataset.tab;
                 
+                // Update URL hash without page reload
                 history.replaceState(null, null, `#${tabId}`);
                 
+                // Remove active class from all tabs and contents
                 tabs.forEach(t => t.classList.remove('active'));
                 tabContents.forEach(c => c.classList.remove('active'));
                 
+                // Add active class to clicked tab and corresponding content
                 this.classList.add('active');
                 document.getElementById(`${tabId}-tab`).classList.add('active');
                 
+                // Reset TTS tab state if switching away from it
                 if (tabId !== 'tts') {
                     resetToInitialState();
                 }
@@ -1098,25 +1109,28 @@
 
             textInput.blur();
             
-            if (ttsInputHint) ttsInputHint.style.display = 'none';
-
+            // Show loading animation
             loadingContainer.style.display = 'flex';
             playersContainer.style.display = 'none';
             voteResultsContainer.style.display = 'none';
             nextRoundContainer.style.display = 'none';
             
+            // Reset vote buttons
             voteButtons.forEach(btn => {
                 btn.disabled = true;
                 btn.classList.remove('selected');
                 btn.querySelector('.vote-loader').style.display = 'none';
             });
             
+            // Clear model name displays
             modelNameDisplays.forEach(display => {
                 display.textContent = '';
             });
             
+            // Reset the flag for both samples played
             bothSamplesPlayed = false;
             
+            // Call the API to generate TTS
             fetch('/api/tts/generate', {
                 method: 'POST',
                 headers: {
@@ -1135,19 +1149,25 @@
             .then(data => {
                 currentSessionId = data.session_id;
                 
+                // Load audio in waveplayers
                 wavePlayers.a.loadAudio(data.audio_a);
                 wavePlayers.b.loadAudio(data.audio_b);
                 
+                // Show players
                 loadingContainer.style.display = 'none';
                 playersContainer.style.display = 'flex';
                 
+                // Setup automatic sequential playback
                 wavePlayers.a.wavesurfer.once('ready', function() {
                     wavePlayers.a.play();
                     
+                    // When audio A ends, play audio B
                     wavePlayers.a.wavesurfer.once('finish', function() {
+                        // Wait a short moment before playing B
                         setTimeout(() => {
                             wavePlayers.b.play();
                             
+                            // When audio B ends, enable voting
                             wavePlayers.b.wavesurfer.once('finish', function() {
                                 bothSamplesPlayed = true;
                                 voteButtons.forEach(btn => {
@@ -1158,6 +1178,7 @@
                     });
                 });
 
+                // Fetch cached sentences again to update the list
                 fetchCachedSentences();
             })
             .catch(error => {
@@ -1165,11 +1186,10 @@
                 openToast(error.message, "error");
                 console.error('Error:', error);
             });
-
-            if (ttsInputHint) ttsInputHint.style.display = 'block';
         }
         
         function handleVote(model) {
+            // Disable both vote buttons
             voteButtons.forEach(btn => {
                 btn.disabled = true;
                 if (btn.dataset.model === model) {
@@ -1177,6 +1197,7 @@
                 }
             });
             
+            // Send vote to server
             fetch('/api/tts/vote', {
                 method: 'POST',
                 headers: {
@@ -1196,31 +1217,40 @@
                 return response.json();
             })
             .then(data => {
+                // Hide loaders
                 voteButtons.forEach(btn => {
                     btn.querySelector('.vote-loader').style.display = 'none';
                     
+                    // Highlight the selected button
                     if (btn.dataset.model === model) {
                         btn.classList.add('selected');
                     }
                 });
 
+
+                // Store model names from vote response
                 if (data.chosen_model && data.chosen_model.name) {
                     modelNames.a = data.names.a;
                     modelNames.b = data.names.b;
                 }
                 
+                // Now display model names after voting
                 modelNameDisplays[0].textContent = modelNames.a ? `(${modelNames.a})` : '';
                 modelNameDisplays[1].textContent = modelNames.b ? `(${modelNames.b})` : '';
                 
+                // Show vote results
                 chosenModelNameElement.textContent = data.chosen_model.name;
                 rejectedModelNameElement.textContent = data.rejected_model.name;
                 voteResultsContainer.style.display = 'block';
                 
+                // Show next round button
                 nextRoundContainer.style.display = 'block';
                 
+                // Show success toast
                 openToast("Vote recorded successfully!", "success");
             })
             .catch(error => {
+                // Re-enable vote buttons
                 voteButtons.forEach(btn => {
                     btn.disabled = false;
                     btn.querySelector('.vote-loader').style.display = 'none';
@@ -1232,45 +1262,56 @@
         }
         
         function resetToInitialState() {
+            // Hide players, results, and next round button
             playersContainer.style.display = 'none';
             voteResultsContainer.style.display = 'none';
             nextRoundContainer.style.display = 'none';
             
+            // Reset vote buttons
             voteButtons.forEach(btn => {
                 btn.disabled = true;
                 btn.classList.remove('selected');
                 btn.querySelector('.vote-loader').style.display = 'none';
             });
             
+            // Clear model name displays
             modelNameDisplays.forEach(display => {
                 display.textContent = '';
             });
             
+            // Reset model names
             modelNames = { a: '', b: '' };
             
+            // Clear text input
             textInput.value = '';
             
+            // Stop any playing audio and destroy wavesurfers
             for (const model in wavePlayers) {
                 if (wavePlayers[model]) {
                     wavePlayers[model].stop();
                 }
             }
             
+            // Reset session
             currentSessionId = null;
             
+            // Reset the flag for both samples played
             bothSamplesPlayed = false;
         }
         
         function handleRandom() {
             let selectedText = '';
             if (cachedSentences && cachedSentences.length > 0) {
+                // Select a random text from the cache
                 selectedText = cachedSentences[Math.floor(Math.random() * cachedSentences.length)];
                 console.log("Using random sentence from cache.");
             } else {
+                // Fallback to the initial list if cache is empty or failed to load
                 console.log("Cache empty or unavailable, using random sentence from fallback list.");
                 if (fallbackRandomTexts && fallbackRandomTexts.length > 0) {
                     selectedText = fallbackRandomTexts[Math.floor(Math.random() * fallbackRandomTexts.length)];
                 } else {
+                    // If fallback list is also empty, do nothing. Log an error.
                     console.error("Both cached sentences and fallback sentences are unavailable.");
                     return;
                 }
@@ -1283,8 +1324,10 @@
             openToast("Please listen to both audio samples before voting", "info");
         }
         
+        // Add submit event listener to form
         synthForm.addEventListener('submit', handleSynthesize);
         
+        // Add click event listeners to vote buttons
         voteButtons.forEach(btn => {
             btn.addEventListener('click', function() {
                 if (bothSamplesPlayed) {
@@ -1296,89 +1339,72 @@
             });
         });
         
+        // Add keyboard shortcut listeners
         document.addEventListener('keydown', function(e) {
+            // Check if TTS tab is active
             const ttsTab = document.getElementById('tts-tab');
             if (!ttsTab.classList.contains('active')) return;
             
-            const isInputVisible = playersContainer.style.display === 'none' && loadingContainer.style.display === 'none';
-            const isPlaybackVisible = playersContainer.style.display !== 'none';
-            const isNextRoundVisible = nextRoundContainer.style.display === 'block';
-
+            // Only process keyboard shortcuts if text input is not focused
             if (document.activeElement === textInput) {
-                if (e.key === 'Enter' && isInputVisible) {
-                    e.preventDefault();
-                    handleSynthesize();
-                }
                 return;
             }
-
-            if (isInputVisible) {
-                if (e.key.toLowerCase() === 'r') {
+            
+            if (e.key.toLowerCase() === 'a') {
+                if (bothSamplesPlayed && !voteButtons[0].disabled) {
+                    handleVote('a');
+                } else if (playersContainer.style.display !== 'none' && !bothSamplesPlayed) {
+                    showListenToastMessage();
+                }
+            } else if (e.key.toLowerCase() === 'b') {
+                if (bothSamplesPlayed && !voteButtons[1].disabled) {
+                    handleVote('b');
+                } else if (playersContainer.style.display !== 'none' && !bothSamplesPlayed) {
+                    showListenToastMessage();
+                }
+            } else if (e.key.toLowerCase() === 'n') {
+                if (nextRoundContainer.style.display === 'block') {
                     if (!e.ctrlKey && !e.metaKey) {
                         e.preventDefault();
-                        handleRandom();
                     }
-                } else if (e.key === 'Enter') {
+                    resetToInitialState();
+                }
+            } else if (e.key.toLowerCase() === 'r') {
+                // Only trigger random if not trying to reload (Ctrl+R or Cmd+R)
+                if (!e.ctrlKey && !e.metaKey) {
                     e.preventDefault();
-                    handleSynthesize();
-                } else if (e.key.toLowerCase() === 'n') {
-                    if (!e.ctrlKey && !e.metaKey) {
-                        e.preventDefault();
-                        handleRandom();
-                        setTimeout(() => {
-                            handleSynthesize();
-                        }, 50);
-                    }
+                    handleRandom();
                 }
-            }
-
-            else if (isPlaybackVisible) {
-                if (e.key === ' ') {
+            } else if (e.key === ' ') {
+                // Space to play/pause current audio
+                if (playersContainer.style.display !== 'none') {
                     e.preventDefault();
+                    // If A is playing, toggle A, else if B is playing, toggle B, else play A
                     if (wavePlayers.a.isPlaying) {
                         wavePlayers.a.togglePlayPause();
                     } else if (wavePlayers.b.isPlaying) {
                         wavePlayers.b.togglePlayPause();
-                    } else if (wavePlayers.a) {
-                        if (wavePlayers.a.wavesurfer.getCurrentTime() < wavePlayers.a.wavesurfer.getDuration()) {
-                             wavePlayers.a.play();
-                        } else if (wavePlayers.b) {
-                             wavePlayers.b.play();
-                        }
-                    }
-                } else if (e.key.toLowerCase() === 'a') {
-                    if (bothSamplesPlayed && !voteButtons[0].disabled) {
-                        handleVote('a');
-                    } else if (!bothSamplesPlayed) {
-                        showListenToastMessage();
+                    } else {
+                        wavePlayers.a.play();
                     }
-                } else if (e.key.toLowerCase() === 'b') {
-                    if (bothSamplesPlayed && !voteButtons[1].disabled) {
-                        handleVote('b');
-                    } else if (!bothSamplesPlayed) {
-                        showListenToastMessage();
-                    }
-                }
-            }
-
-            else if (isNextRoundVisible && e.key.toLowerCase() === 'n') {
-                if (!e.ctrlKey && !e.metaKey) {
-                    e.preventDefault();
                 }
-                resetToInitialState();
             }
         });
         
+        // Add event listener for random button
         randomBtn.addEventListener('click', handleRandom);
         
+        // Add event listener for next round button
         nextRoundBtn.addEventListener('click', resetToInitialState);
         
+        // Fetch cached sentences when the DOM is ready
         fetchCachedSentences();
     });
 </script>
 
 <script>
     document.addEventListener('DOMContentLoaded', function() {
+        // Variables for podcast UI
         const podcastContainer = document.querySelector('.podcast-container');
         const podcastLinesContainer = document.querySelector('.podcast-lines');
         const addLineBtn = document.querySelector('.add-line-btn');
@@ -1394,7 +1420,6 @@
         const podcastNextRoundBtn = podcastPlayerContainer.querySelector('.next-round-btn');
         const chosenModelNameElement = podcastVoteResults.querySelector('.chosen-model-name');
         const rejectedModelNameElement = podcastVoteResults.querySelector('.rejected-model-name');
-        const podcastInputHint = document.getElementById('podcast-input-hint');
         
         let podcastWavePlayers = { a: null, b: null };
         let bothPodcastSamplesPlayed = false;
@@ -1496,9 +1521,11 @@
             addPodcastLine(2);
         }
         
+        // Add a new podcast line
         function addPodcastLine(speakerNum = null) {
             const lineCount = podcastLinesContainer.querySelectorAll('.podcast-line').length;
             
+            // If speaker number isn't specified, alternate between 1 and 2
             if (speakerNum === null) {
                 speakerNum = (lineCount % 2) + 1;
             }
@@ -1520,8 +1547,10 @@
             
             podcastLinesContainer.appendChild(lineElement);
             
+            // Add event listener to remove button
             const removeBtn = lineElement.querySelector('.remove-line-btn');
             removeBtn.addEventListener('click', function() {
+                // Don't allow removing if there are only 2 lines
                 if (podcastLinesContainer.querySelectorAll('.podcast-line').length > 2) {
                     lineElement.remove();
                 } else {
@@ -1529,12 +1558,15 @@
                 }
             });
             
+            // Add event listener for keyboard navigation in the input field
             const inputField = lineElement.querySelector('.line-input');
             inputField.addEventListener('keydown', function(e) {
+                // Alt+Enter or Ctrl+Enter to add new line
                 if (e.key === 'Enter' && (e.altKey || e.ctrlKey)) {
                     e.preventDefault();
                     addPodcastLine();
                     
+                    // Focus the new line's input field
                     setTimeout(() => {
                         const inputs = podcastLinesContainer.querySelectorAll('.line-input');
                         inputs[inputs.length - 1].focus();
@@ -1545,18 +1577,24 @@
             return lineElement;
         }
         
+        // Load a random script
         function loadRandomScript() {
+            // Clear existing lines
             podcastLinesContainer.innerHTML = '';
             
+            // Select a random script
             const randomScript = randomScripts[Math.floor(Math.random() * randomScripts.length)];
             
+            // Add each line from the script
             randomScript.forEach(line => {
                 const lineElement = addPodcastLine(line.speaker);
                 lineElement.querySelector('.line-input').value = line.text;
             });
         }
         
+        // Generate podcast (mock functionality)
         function generatePodcast() {
+            // Get all lines
             const lines = [];
             podcastLinesContainer.querySelectorAll('.podcast-line').forEach(line => {
                 const speaker_id = line.querySelector('.speaker-label').textContent.includes('1') ? 0 : 1;
@@ -1567,17 +1605,20 @@
                 }
             });
             
+            // Validate that we have at least 2 lines with content
             if (lines.length < 2) {
                 openToast("Please enter at least 2 lines of dialog", "warning");
                 return;
             }
             
+            // Reset vote buttons and hide results
             podcastVoteButtons.forEach(btn => {
                 btn.disabled = true;
                 btn.classList.remove('selected');
                 btn.querySelector('.vote-loader').style.display = 'none';
             });
             
+            // Clear model name displays
             const modelNameDisplays = podcastPlayerContainer.querySelectorAll('.model-name-display');
             modelNameDisplays.forEach(display => {
                 display.textContent = '';
@@ -1586,13 +1627,14 @@
             podcastVoteResults.style.display = 'none';
             podcastNextRoundContainer.style.display = 'none';
             
+            // Reset the flag for both samples played
             bothPodcastSamplesPlayed = false;
-
-            if (podcastInputHint) podcastInputHint.style.display = 'none';
-
+            
+            // Show loading animation
             podcastLoadingContainer.style.display = 'flex';
             podcastPlayerContainer.style.display = 'none';
             
+            // Call API to generate podcast
             fetch('/api/conversational/generate', {
                 method: 'POST',
                 headers: {
@@ -1611,23 +1653,30 @@
             .then(data => {
                 currentPodcastSessionId = data.session_id;
                 
+                // Hide loading
                 podcastLoadingContainer.style.display = 'none';
                 
+                // Show player
                 podcastPlayerContainer.style.display = 'block';
                 
+                // Initialize WavePlayers if not already done
                 if (!podcastWavePlayers.a) {
                     podcastWavePlayers.a = new WavePlayer(podcastWavePlayerA, {
+                        // Add mobile-friendly options but hide native controls
                         backend: 'MediaElement',
-                        mediaControls: false
+                        mediaControls: false // Hide native audio controls
                     });
                     podcastWavePlayers.b = new WavePlayer(podcastWavePlayerB, {
+                        // Add mobile-friendly options but hide native controls
                         backend: 'MediaElement',
-                        mediaControls: false
+                        mediaControls: false // Hide native audio controls
                     });
                     
+                    // Load audio in waveplayers
                     podcastWavePlayers.a.loadAudio(data.audio_a);
                     podcastWavePlayers.b.loadAudio(data.audio_b);
                     
+                    // Force hide loading indicators after 5 seconds as a fallback
                     setTimeout(() => {
                         if (podcastWavePlayers.a && podcastWavePlayers.a.hideLoading) {
                             podcastWavePlayers.a.hideLoading();
@@ -1638,16 +1687,19 @@
                         console.log('Forced hiding of podcast loading indicators (safety timeout - existing players)');
                     }, 5000);
                 } else {
+                    // Reset and reload for existing players
                     try {
                         podcastWavePlayers.a.wavesurfer.empty();
                         podcastWavePlayers.b.wavesurfer.empty();
                         
+                        // Make sure loading indicators are reset
                         podcastWavePlayers.a.hideLoading();
                         podcastWavePlayers.b.hideLoading();
                         
                         podcastWavePlayers.a.loadAudio(data.audio_a);
                         podcastWavePlayers.b.loadAudio(data.audio_b);
                         
+                        // Force hide loading indicators after 5 seconds as a fallback
                         setTimeout(() => {
                             if (podcastWavePlayers.a && podcastWavePlayers.a.hideLoading) {
                                 podcastWavePlayers.a.hideLoading();
@@ -1660,6 +1712,7 @@
                     } catch (err) {
                         console.error('Error resetting podcast waveplayers:', err);
                         
+                        // Recreate the players if there was an error
                         podcastWavePlayers.a = new WavePlayer(podcastWavePlayerA, {
                             backend: 'MediaElement',
                             mediaControls: false
@@ -1672,6 +1725,7 @@
                         podcastWavePlayers.a.loadAudio(data.audio_a);
                         podcastWavePlayers.b.loadAudio(data.audio_b);
 
+                        // Force hide loading indicators after 5 seconds as a fallback
                         setTimeout(() => {
                             if (podcastWavePlayers.a && podcastWavePlayers.a.hideLoading) {
                                 podcastWavePlayers.a.hideLoading();
@@ -1684,13 +1738,17 @@
                     }
                 }
                 
+                // Setup automatic sequential playback
                 podcastWavePlayers.a.wavesurfer.once('ready', function() {
                     podcastWavePlayers.a.play();
                     
+                    // When audio A ends, play audio B
                     podcastWavePlayers.a.wavesurfer.once('finish', function() {
+                        // Wait a short moment before playing B
                         setTimeout(() => {
                             podcastWavePlayers.b.play();
                             
+                            // When audio B ends, enable voting
                             podcastWavePlayers.b.wavesurfer.once('finish', function() {
                                 bothPodcastSamplesPlayed = true;
                                 podcastVoteButtons.forEach(btn => {
@@ -1706,11 +1764,11 @@
                 openToast(error.message, "error");
                 console.error('Error:', error);
             });
-
-            if (podcastInputHint) podcastInputHint.style.display = 'block';
         }
         
+        // Handle vote for a podcast model
         function handlePodcastVote(model) {
+            // Disable both vote buttons
             podcastVoteButtons.forEach(btn => {
                 btn.disabled = true;
                 if (btn.dataset.model === model) {
@@ -1718,6 +1776,7 @@
                 }
             });
             
+            // Send vote to server
             fetch('/api/conversational/vote', {
                 method: 'POST',
                 headers: {
@@ -1737,30 +1796,38 @@
                 return response.json();
             })
             .then(data => {
+                // Hide loaders
                 podcastVoteButtons.forEach(btn => {
                     btn.querySelector('.vote-loader').style.display = 'none';
                     
+                    // Highlight the selected button
                     if (btn.dataset.model === model) {
                         btn.classList.add('selected');
                     }
                 });
                 
+                // Store model names from vote response
                 podcastModelNames.a = data.names.a;
                 podcastModelNames.b = data.names.b;
                 
-                modelNameDisplays = podcastPlayerContainer.querySelectorAll('.model-name-display');
+                // Show model names after voting
+                const modelNameDisplays = podcastPlayerContainer.querySelectorAll('.model-name-display');
                 modelNameDisplays[0].textContent = data.names.a ? `(${data.names.a})` : '';
                 modelNameDisplays[1].textContent = data.names.b ? `(${data.names.b})` : '';
                 
+                // Show vote results
                 chosenModelNameElement.textContent = data.chosen_model.name;
                 rejectedModelNameElement.textContent = data.rejected_model.name;
                 podcastVoteResults.style.display = 'block';
                 
+                // Show next round button
                 podcastNextRoundContainer.style.display = 'block';
                 
+                // Show success toast
                 openToast("Vote recorded successfully!", "success");
             })
             .catch(error => {
+                // Re-enable vote buttons
                 podcastVoteButtons.forEach(btn => {
                     btn.disabled = false;
                     btn.querySelector('.vote-loader').style.display = 'none';
@@ -1771,104 +1838,85 @@
             });
         }
         
+        // Reset podcast UI to initial state
         function resetPodcastState() {
+            // Hide players, results, and next round button
             podcastPlayerContainer.style.display = 'none';
             podcastVoteResults.style.display = 'none';
             podcastNextRoundContainer.style.display = 'none';
             
+            // Reset vote buttons
             podcastVoteButtons.forEach(btn => {
                 btn.disabled = true;
                 btn.classList.remove('selected');
                 btn.querySelector('.vote-loader').style.display = 'none';
             });
             
-            modelNameDisplays = podcastPlayerContainer.querySelectorAll('.model-name-display');
+            // Clear model name displays
+            const modelNameDisplays = podcastPlayerContainer.querySelectorAll('.model-name-display');
             modelNameDisplays.forEach(display => {
                 display.textContent = '';
             });
             
+            // Stop any playing audio
             if (podcastWavePlayers.a) podcastWavePlayers.a.stop();
             if (podcastWavePlayers.b) podcastWavePlayers.b.stop();
             
+            // Reset session
             currentPodcastSessionId = null;
             
+            // Reset the flag for both samples played
             bothPodcastSamplesPlayed = false;
         }
         
+        // Add keyboard shortcut listeners for podcast voting
         document.addEventListener('keydown', function(e) {
+            // Check if we're in the podcast tab and it's active
             const podcastTab = document.getElementById('conversational-tab');
             if (!podcastTab.classList.contains('active')) return;
             
-            const isScriptEditorVisible = podcastPlayerContainer.style.display === 'none' && podcastLoadingContainer.style.display === 'none';
-            const isPodcastPlaybackVisible = podcastPlayerContainer.style.display !== 'none';
-            const isPodcastNextRoundVisible = podcastNextRoundContainer.style.display === 'block';
-
-            const activeElementTag = document.activeElement.tagName;
-            const isInputFocused = activeElementTag === 'INPUT' || activeElementTag === 'TEXTAREA';
-
-            if (isInputFocused && e.key === 'Enter' && (e.altKey || e.ctrlKey)) {
-                 return;
-            }
-
-            if (isInputFocused) {
-                 return;
+            // Only process if input fields are not focused
+            if (document.activeElement.tagName === 'INPUT' || 
+                document.activeElement.tagName === 'TEXTAREA') {
+                return;
             }
-
-            if (e.key.toLowerCase() === 'r' && isScriptEditorVisible) {
-                if (!e.ctrlKey && !e.metaKey) {
-                    e.preventDefault();
-                    loadRandomScript();
+            
+            if (e.key.toLowerCase() === 'a') {
+                if (bothPodcastSamplesPlayed && !podcastVoteButtons[0].disabled) {
+                    handlePodcastVote('a');
+                } else if (podcastPlayerContainer.style.display !== 'none' && !bothPodcastSamplesPlayed) {
+                    openToast("Please listen to both audio samples before voting", "info");
                 }
-            } else if (e.key === 'Enter' && isScriptEditorVisible) {
-                 e.preventDefault();
-                 generatePodcast();
-            } else if (e.key.toLowerCase() === 'n' && isScriptEditorVisible) {
-                if (!e.ctrlKey && !e.metaKey) {
-                    e.preventDefault();
-                    loadRandomScript();
-                    setTimeout(() => {
-                        generatePodcast();
-                    }, 50);
+            } else if (e.key.toLowerCase() === 'b') {
+                if (bothPodcastSamplesPlayed && !podcastVoteButtons[1].disabled) {
+                    handlePodcastVote('b');
+                } else if (podcastPlayerContainer.style.display !== 'none' && !bothPodcastSamplesPlayed) {
+                    openToast("Please listen to both audio samples before voting", "info");
                 }
-            }
-
-            else if (isPodcastPlaybackVisible) {
-                if (e.key === ' ') {
+            } else if (e.key.toLowerCase() === 'n') {
+                if (podcastNextRoundContainer.style.display === 'block') {
+                    if (!e.ctrlKey && !e.metaKey) {
+                        e.preventDefault();
+                    }
+                    resetPodcastState();
+                }
+            } else if (e.key === ' ') {
+                // Space to play/pause current audio
+                if (podcastPlayerContainer.style.display !== 'none') {
                     e.preventDefault();
+                    // If A is playing, toggle A, else if B is playing, toggle B, else play A
                     if (podcastWavePlayers.a && podcastWavePlayers.a.isPlaying) {
                         podcastWavePlayers.a.togglePlayPause();
                     } else if (podcastWavePlayers.b && podcastWavePlayers.b.isPlaying) {
                         podcastWavePlayers.b.togglePlayPause();
                     } else if (podcastWavePlayers.a) {
-                        if (podcastWavePlayers.a.wavesurfer.getCurrentTime() < podcastWavePlayers.a.wavesurfer.getDuration()) {
-                             podcastWavePlayers.a.play();
-                        } else if (podcastWavePlayers.b) {
-                             podcastWavePlayers.b.play();
-                        }
-                    }
-                } else if (e.key.toLowerCase() === 'a') {
-                    if (bothPodcastSamplesPlayed && !podcastVoteButtons[0].disabled) {
-                        handlePodcastVote('a');
-                    } else if (!bothPodcastSamplesPlayed) {
-                        openToast("Please listen to both audio samples before voting", "info");
-                    }
-                } else if (e.key.toLowerCase() === 'b') {
-                    if (bothPodcastSamplesPlayed && !podcastVoteButtons[1].disabled) {
-                        handlePodcastVote('b');
-                    } else if (!bothPodcastSamplesPlayed) {
-                        openToast("Please listen to both audio samples before voting", "info");
+                        podcastWavePlayers.a.play();
                     }
                 }
             }
-
-            else if (isPodcastNextRoundVisible && e.key.toLowerCase() === 'n') {
-                 if (!e.ctrlKey && !e.metaKey) {
-                     e.preventDefault();
-                 }
-                 resetPodcastState();
-            }
         });
         
+        // Event listeners
         addLineBtn.addEventListener('click', function() {
             addPodcastLine();
         });
@@ -1881,6 +1929,7 @@
             generatePodcast();
         });
         
+        // Add event listeners to vote buttons
         podcastVoteButtons.forEach(btn => {
             btn.addEventListener('click', function() {
                 if (bothPodcastSamplesPlayed) {
@@ -1892,8 +1941,10 @@
             });
         });
         
+        // Add event listener for next round button
         podcastNextRoundBtn.addEventListener('click', resetPodcastState);
         
+        // Initialize with 2 empty lines
         initializePodcastLines();
     });
 </script>