Update templates/index.html

templates/index.html

@@ -701,8 +701,39 @@
     }
 
     // --- FUNÇÕES DE ÁUDIO ---
+    
+    // Cache para armazenar áudios gerados
+    const audioCache = new Map();
+    
+    // Função para gerar uma chave de cache baseada no texto e voice
+    function getAudioCacheKey(text, tld) {
+        return `${text.substring(0, 100)}_${tld}_${text.length}`;
+    }
+    
+    // Função para limpar cache de áudio (útil quando muda o texto significativamente)
+    function clearAudioCache() {
+        audioCache.forEach(blob => {
+            if (blob && blob.url) {
+                URL.revokeObjectURL(blob.url);
+            }
+        });
+        audioCache.clear();
+        if (currentAudioUrl) {
+            URL.revokeObjectURL(currentAudioUrl);
+            currentAudioUrl = null;
+        }
+        console.log('Audio cache cleared');
+    }
+    
     async function fetchAudioBlob(text) {
         const selectedTld = voiceSelector.value;
+        const cacheKey = getAudioCacheKey(text, selectedTld);
+        
+        // Verificar se já temos esse áudio no cache
+        if (audioCache.has(cacheKey)) {
+            return audioCache.get(cacheKey);
+        }
+        
         const response = await fetch('/tts-proxy', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -712,7 +743,22 @@
             const err = await response.json();
             throw new Error(err.error || `HTTP error! status: ${response.status}`);
         }
-        return await response.blob();
+        
+        const blob = await response.blob();
+        
+        // Armazenar no cache (limitar a 10 áudios para não usar muita memória)
+        if (audioCache.size >= 10) {
+            const firstKey = audioCache.keys().next().value;
+            // Revogar URL do áudio mais antigo
+            const oldBlob = audioCache.get(firstKey);
+            if (oldBlob && oldBlob.url) {
+                URL.revokeObjectURL(oldBlob.url);
+            }
+            audioCache.delete(firstKey);
+        }
+        
+        audioCache.set(cacheKey, blob);
+        return blob;
     }
     
     async function playAudio(text, event) {
@@ -742,14 +788,101 @@
     const charCount = document.getElementById('charCount');
     const playText = document.getElementById('playText');
     const playSpinner = document.getElementById('playSpinner');
+    
+    let lastTextForCache = '';
+    
     textEditor.addEventListener('input', () => {
         const len = textEditor.innerText.length;
+        const currentText = textEditor.innerText.trim();
+        
+        // Atualizar contador
         charCount.textContent = `${len}/10000`;
         playButton.disabled = len === 0;
+        
+        // Limpar cache se o texto mudou significativamente (mais de 50 caracteres de diferença)
+        if (Math.abs(currentText.length - lastTextForCache.length) > 50 || 
+            (currentText.length > 100 && currentText.substring(0, 100) !== lastTextForCache.substring(0, 100))) {
+            if (currentAudioUrl) {
+                audioPlayer.src = '';
+                audioPlayer.classList.add('hidden');
+            }
+            lastTextForCache = currentText;
+        }
+        
+        // Mudança de cor baseada no limite
+        if (len > 10000) {
+            charCount.classList.add('text-red-500');
+            charCount.classList.remove('text-gray-500');
+        } else if (len > 8000) {
+            charCount.classList.remove('text-red-500', 'text-gray-500');
+            charCount.classList.add('text-yellow-500');
+        } else {
+            charCount.classList.remove('text-red-500', 'text-yellow-500');
+            charCount.classList.add('text-gray-500');
+        }
     });
+    
+    // Controle de seleção de texto para flashcards e áudio
     textEditor.addEventListener('mouseup', () => {
         createCardButton.disabled = !window.getSelection().toString().trim();
+        handleTextSelection();
     });
+    
+    textEditor.addEventListener('keyup', () => {
+        handleTextSelection();
+    });
+    
+    function handleTextSelection() {
+        const selectedText = window.getSelection().toString().trim();
+        const playSelectionBtn = document.getElementById('playSelectionBtn');
+        
+        if (selectedText && selectedText.length > 0) {
+            if (!playSelectionBtn) {
+                // Criar botão de tocar seleção se não existir
+                const selectionBtn = document.createElement('button');
+                selectionBtn.id = 'playSelectionBtn';
+                selectionBtn.className = 'btn bg-blue-500 hover:bg-blue-600 text-white ml-2';
+                selectionBtn.innerHTML = '🎵 Play Selection';
+                selectionBtn.onclick = () => playSelectedText();
+                
+                // Inserir próximo ao botão Play principal
+                playButton.parentNode.insertBefore(selectionBtn, playButton.nextSibling);
+            }
+            playSelectionBtn.style.display = 'inline-block';
+            playSelectionBtn.disabled = false;
+        } else if (playSelectionBtn) {
+            playSelectionBtn.style.display = 'none';
+        }
+    }
+    
+    async function playSelectedText() {
+        const selectedText = window.getSelection().toString().trim();
+        if (!selectedText) {
+            showToast('Please select some text first', 'warning');
+            return;
+        }
+        
+        if (selectedText.length > 1000) {
+            showToast('Selected text is too long. Please select less than 1000 characters.', 'warning');
+            return;
+        }
+        
+        const selectionBtn = document.getElementById('playSelectionBtn');
+        setButtonLoading(selectionBtn, true, '🎵 Play Selection');
+        
+        try {
+            await playAudio(selectedText);
+            showToast(`Playing selected text (${selectedText.length} chars)`, 'success', 2000);
+        } catch (error) {
+            showToast('Failed to play selected text', 'error');
+        } finally {
+            setButtonLoading(selectionBtn, false, '🎵 Play Selection');
+        }
+    }
+    
+    // Variável para armazenar o URL atual do áudio
+    let currentAudioUrl = null;
+    
     async function handlePlay() {
         const text = textEditor.innerText.trim();
         if (!text) {
@@ -757,27 +890,55 @@
             return;
         }
         
-        if (text.length > 5000) {
+        if (text.length > 10000) { // Aumentado de 5000 para 10000
             showToast('Text is too long for audio generation. Please use shorter text.', 'warning');
             return;
         }
         
+        const selectedTld = voiceSelector.value;
+        const cacheKey = getAudioCacheKey(text, selectedTld);
+        
+        // Se já temos um áudio carregado para este texto, apenas reproduzir
+        if (currentAudioUrl && audioPlayer.src && getAudioCacheKey(audioPlayer.dataset.lastText || '', audioPlayer.dataset.lastTld || '') === cacheKey) {
+            try {
+                await audioPlayer.play();
+                showToast('Playing cached audio...', 'success', 1000);
+                return;
+            } catch (error) {
+                console.log('Cached audio failed, regenerating...');
+            }
+        }
+        
         setButtonLoading(playButton, true);
         playText.textContent = 'Generating...';
         playSpinner.classList.remove('hidden');
         
         try {
             const audioBlob = await fetchAudioBlob(text);
-            const audioUrl = URL.createObjectURL(audioBlob);
-            audioPlayer.src = audioUrl;
+            
+            // Limpar URL anterior se existir
+            if (currentAudioUrl) {
+                URL.revokeObjectURL(currentAudioUrl);
+            }
+            
+            currentAudioUrl = URL.createObjectURL(audioBlob);
+            audioPlayer.src = currentAudioUrl;
+            audioPlayer.dataset.lastText = text;
+            audioPlayer.dataset.lastTld = selectedTld;
             audioPlayer.classList.remove('hidden');
             
+            // Remover listener anterior para evitar duplicatas
             audioPlayer.onplay = () => showToast('Audio ready! Playing...', 'success', 1000);
-            audioPlayer.onended = () => URL.revokeObjectURL(audioUrl);
+            audioPlayer.onended = () => {
+                // NÃO revogar o URL aqui, manter para permitir replay
+                showToast('Audio finished', 'info', 1000);
+            };
             audioPlayer.onerror = () => showToast('Failed to play audio', 'error');
             
             await audioPlayer.play();
+            showToast(`Audio generated successfully! (${text.length} characters)`, 'success', 2000);
         } catch (error) {
+            console.error('Audio generation error:', error);
             showToast('Failed to generate audio. Please check your connection and try again.', 'error');
         } finally {
             setButtonLoading(playButton, false);