Update index.html

index.html

@@ -58,7 +58,8 @@
                 <div class="card">
                     <h2 class="text-xl font-semibold mb-4 text-gray-700">Seu Texto de Estudo</h2>
                     <div id="textEditor" contenteditable="true" spellcheck="true" lang="en" class="w-full p-4 focus:ring-2 focus:ring-indigo-500 text-gray-800"></div>
-                    <p class="text-sm text-right text-gray-500 mt-2">Caracteres: <span id="charCount">0</span>/5000</p>
+                    <!-- CONTADOR DE CARACTERES ATUALIZADO -->
+                    <p class="text-sm text-right text-gray-500 mt-2">Caracteres: <span id="charCount">0</span>/10000</p>
                     <div class="mt-4 border-t pt-4">
                         <button id="createCardButton" onclick="createFlashcardFromSelection()" class="btn btn-success disabled:opacity-50" disabled>+ Criar Flashcard da Seleção</button>
                     </div>
@@ -84,6 +85,13 @@
                             </select>
                         </div>
                     </div>
+                    <!-- BOTÃO PRINCIPAL DE ÁUDIO RE-ADICIONADO -->
+                    <div class="mt-4">
+                         <button id="playButton" onclick="handlePlay()" class="btn btn-primary w-full py-2.5 flex items-center justify-center disabled:opacity-50" disabled>
+                            <span id="playText">Gerar e Tocar Áudio do Texto</span>
+                            <div id="loadingSpinner" class="spinner ml-3 hidden"></div>
+                        </button>
+                    </div>
                     <div class="mt-4">
                         <audio id="audioPlayer" controls class="w-full"></audio>
                     </div>
@@ -141,12 +149,76 @@
     const activityOutput = document.getElementById('activityOutput');
     const activitySpinner = document.getElementById('activitySpinner');
     const activityText = document.getElementById('activityText');
+    
+    // --- ELEMENTOS DE ÁUDIO RE-ADICIONADOS ---
+    const playButton = document.getElementById('playButton');
+    const audioPlayer = document.getElementById('audioPlayer');
+    const charCount = document.getElementById('charCount');
+    const loadingSpinner = document.getElementById('loadingSpinner');
+    const playText = document.getElementById('playText');
+    const MAX_CHARS = 10000; // Limite de caracteres restaurado
+    let lastAudioUrl = '';
+
+    // --- LÓGICA DO EDITOR, SELEÇÃO E CONTAGEM DE CARACTERES ---
+    textEditor.addEventListener('input', () => {
+        const currentLength = textEditor.innerText.length;
+        charCount.textContent = `${currentLength}/${MAX_CHARS}`;
+        playButton.disabled = currentLength === 0 || currentLength > MAX_CHARS;
+
+        if (currentLength > MAX_CHARS) {
+            charCount.classList.add('text-red-600');
+        } else {
+            charCount.classList.remove('text-red-600');
+        }
+    });
 
-    // --- LÓGICA DO EDITOR E SELEÇÃO ---
     textEditor.addEventListener('mouseup', () => {
         const selection = window.getSelection().toString().trim();
         createCardButton.disabled = !selection;
     });
+    
+    // --- FUNÇÕES DE ÁUDIO DO TEXTO PRINCIPAL (RE-ADICIONADAS) ---
+    async function fetchAudio(text) {
+        playButton.disabled = true;
+        playText.textContent = "Gerando Áudio...";
+        loadingSpinner.classList.remove('hidden');
+
+        try {
+            const response = await fetch('/tts-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text: text })
+            });
+
+            if (!response.ok) {
+                throw new Error(`Erro HTTP: ${response.status}`);
+            }
+
+            const audioBlob = await response.blob();
+            
+            if (lastAudioUrl) URL.revokeObjectURL(lastAudioUrl);
+            
+            lastAudioUrl = URL.createObjectURL(audioBlob);
+            audioPlayer.src = lastAudioUrl;
+            audioPlayer.play();
+
+        } catch (error) {
+            console.error('Erro ao gerar áudio:', error);
+            alert('Falha ao gerar o áudio. Verifique o console para mais detalhes.');
+        } finally {
+            playButton.disabled = false;
+            playText.textContent = "Gerar e Tocar Áudio do Texto";
+            loadingSpinner.classList.add('hidden');
+        }
+    }
+    
+    function handlePlay() {
+        const textToPlay = textEditor.innerText.trim();
+        if (textToPlay) {
+            fetchAudio(textToPlay);
+        }
+    }
+
 
     // --- GERAÇÃO DE FLASHCARD INTELIGENTE ---
     async function createFlashcardFromSelection() {
@@ -334,3 +406,4 @@
 
 </body>
 </html>
+