(wip)update html

templates/arena.html

@@ -992,6 +992,23 @@
 <script src="{{ url_for('static', filename='js/waveplayer.js') }}"></script>
 <script>
     document.addEventListener('DOMContentLoaded', function() {
+        // 参考音色试听功能
+        const voiceFileInput = document.getElementById('voice-file');
+        const voicePreview = document.getElementById('voice-preview');
+        if (voiceFileInput && voicePreview) {
+            voiceFileInput.addEventListener('change', function() {
+                const file = this.files[0];
+                if (file) {
+                    const url = URL.createObjectURL(file);
+                    voicePreview.src = url;
+                    voicePreview.style.display = 'inline-block';
+                    voicePreview.load();
+                } else {
+                    voicePreview.src = '';
+                    voicePreview.style.display = 'none';
+                }
+            });
+        }
         const synthForm = document.querySelector('.input-container');
         const synthBtn = document.querySelector('.synth-btn');
         const mobileSynthBtn = document.querySelector('.mobile-synth-btn');
@@ -1489,12 +1506,12 @@
         const podcastNextRoundBtn = podcastPlayerContainer.querySelector('.next-round-btn');
         const chosenModelNameElement = podcastVoteResults.querySelector('.chosen-model-name');
         const rejectedModelNameElement = podcastVoteResults.querySelector('.rejected-model-name');
-        
+
         let podcastWavePlayers = { a: null, b: null };
         let bothPodcastSamplesPlayed = false;
         let currentPodcastSessionId = null;
         let podcastModelNames = { a: 'Model A', b: 'Model B' };
-        
+
         // Sample random scripts for the podcast
         const randomScripts = [
             [
@@ -1582,40 +1599,40 @@
                 { speaker: 2, text: "I think we'll see more integrated systems where bikes, scooters, and public transit work seamlessly together." }
             ]
         ];
-        
+
         // Initialize with 2 empty lines
         function initializePodcastLines() {
             podcastLinesContainer.innerHTML = '';
             addPodcastLine(1);
             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;
             }
-            
+
             const lineElement = document.createElement('div');
             lineElement.className = 'podcast-line';
-            
+
             lineElement.innerHTML = `
                 <div class="speaker-label speaker-${speakerNum}">Speaker ${speakerNum}</div>
                 <input type="text" class="line-input" placeholder="Enter dialog...">
                 <button type="button" class="remove-line-btn" tabindex="-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" 
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <line x1="18" y1="6" x2="6" y2="18"></line>
                         <line x1="6" y1="6" x2="18" y2="18"></line>
                     </svg>
                 </button>
             `;
-            
+
             podcastLinesContainer.appendChild(lineElement);
-            
+
             // Add event listener to remove button
             const removeBtn = lineElement.querySelector('.remove-line-btn');
             removeBtn.addEventListener('click', function() {
@@ -1626,7 +1643,7 @@
                     openToast("At least 2 lines are required", "warning");
                 }
             });
-            
+
             // Add event listener for keyboard navigation in the input field
             const inputField = lineElement.querySelector('.line-input');
             inputField.addEventListener('keydown', function(e) {
@@ -1634,7 +1651,7 @@
                 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');
@@ -1642,25 +1659,25 @@
                     }, 10);
                 }
             });
-            
+
             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
@@ -1668,25 +1685,25 @@
             podcastLinesContainer.querySelectorAll('.podcast-line').forEach(line => {
                 const speaker_id = line.querySelector('.speaker-label').textContent.includes('1') ? 0 : 1;
                 const text = line.querySelector('.line-input').value.trim();
-                
+
                 if (text) {
                     lines.push({ speaker_id, text });
                 }
             });
-            
+
             // 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 => {
@@ -1695,14 +1712,14 @@
 
             podcastVoteResults.style.display = 'none';
             podcastNextRoundContainer.style.display = 'none';
-            
+
             // Reset the flag for both samples played
             bothPodcastSamplesPlayed = false;
-            
+
             // Show loading animation
             podcastLoadingContainer.style.display = 'flex';
             podcastPlayerContainer.style.display = 'none';
-            
+
             // Call API to generate podcast
             fetch('/api/conversational/generate', {
                 method: 'POST',
@@ -1721,13 +1738,13 @@
             })
             .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, {
@@ -1740,11 +1757,11 @@
                         backend: 'MediaElement',
                         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) {
@@ -1760,14 +1777,14 @@
                     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) {
@@ -1780,7 +1797,7 @@
                         }, 5000);
                     } catch (err) {
                         console.error('Error resetting podcast waveplayers:', err);
-                        
+
                         // Recreate the players if there was an error
                         podcastWavePlayers.a = new WavePlayer(podcastWavePlayerA, {
                             backend: 'MediaElement',
@@ -1790,7 +1807,7 @@
                             backend: 'MediaElement',
                             mediaControls: false
                         });
-                        
+
                         podcastWavePlayers.a.loadAudio(data.audio_a);
                         podcastWavePlayers.b.loadAudio(data.audio_b);
 
@@ -1806,17 +1823,17 @@
                         }, 5000);
                     }
                 }
-                
+
                 // 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;
@@ -1834,7 +1851,7 @@
                 console.error('Error:', error);
             });
         }
-        
+
         // Handle vote for a podcast model
         function handlePodcastVote(model) {
             // Disable both vote buttons
@@ -1844,7 +1861,7 @@
                     btn.querySelector('.vote-loader').style.display = 'flex';
                 }
             });
-            
+
             // Send vote to server
             fetch('/api/conversational/vote', {
                 method: 'POST',
@@ -1868,30 +1885,30 @@
                 // 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;
-                
+
                 // 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");
             })
@@ -1901,55 +1918,55 @@
                     btn.disabled = false;
                     btn.querySelector('.vote-loader').style.display = 'none';
                 });
-                
+
                 openToast(error.message, "error");
                 console.error('Error:', error);
             });
         }
-        
+
         // 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';
             });
-            
+
             // 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;
-            
+
             // Only process if input fields are not focused
-            if (document.activeElement.tagName === 'INPUT' || 
+            if (document.activeElement.tagName === 'INPUT' ||
                 document.activeElement.tagName === 'TEXTAREA') {
                 return;
             }
-            
+
             if (e.key.toLowerCase() === 'a') {
                 if (bothPodcastSamplesPlayed && !podcastVoteButtons[0].disabled) {
                     handlePodcastVote('a');
@@ -1984,20 +2001,20 @@
                 }
             }
         });
-        
+
         // Event listeners
         addLineBtn.addEventListener('click', function() {
             addPodcastLine();
         });
-        
+
         randomScriptBtn.addEventListener('click', function() {
             loadRandomScript();
         });
-        
+
         podcastSynthBtn.addEventListener('click', function() {
             generatePodcast();
         });
-        
+
         // Add event listeners to vote buttons
         podcastVoteButtons.forEach(btn => {
             btn.addEventListener('click', function() {
@@ -2009,10 +2026,10 @@
                 }
             });
         });
-        
+
         // Add event listener for next round button
         podcastNextRoundBtn.addEventListener('click', resetPodcastState);
-        
+
         // Initialize with 2 empty lines
         initializePodcastLines();
     });