Spaces:
Build error
Build error
| import gradio as gr | |
| from gtts import gTTS | |
| from io import BytesIO | |
| def text_to_speech(text, language="en"): | |
| """ | |
| Convert text to speech using gTTS and return the audio file. | |
| """ | |
| try: | |
| if not text.strip(): | |
| return "Error: Please enter valid text.", None | |
| # Generate the speech using gTTS | |
| tts = gTTS(text=text, lang=language) | |
| audio_file = BytesIO() | |
| tts.write_to_fp(audio_file) | |
| audio_file.seek(0) | |
| return "Text-to-Speech conversion successful!", audio_file | |
| except Exception as e: | |
| return f"Error: {str(e)}", None | |
| # HTML content with animations, styling, and JavaScript | |
| html_content = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Text-to-Speech Web App</title> | |
| <!-- AOS (Animate On Scroll) for animations --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css"> | |
| <!-- Lottie for professional animations --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script> | |
| <!-- SweetAlert2 for custom pop-ups --> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
| <!-- Custom CSS for styling --> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background-color: #f4f7fc; | |
| color: #333; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| flex-direction: column; | |
| } | |
| h1 { | |
| color: #4CAF50; | |
| font-size: 36px; | |
| margin-bottom: 20px; | |
| } | |
| .app-container { | |
| width: 90%; | |
| max-width: 600px; | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .app-container:hover { | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); | |
| transform: scale(1.02); | |
| } | |
| .input-field, | |
| .select-lang, | |
| .btn { | |
| width: 100%; | |
| padding: 15px; | |
| margin: 10px 0; | |
| font-size: 16px; | |
| border-radius: 5px; | |
| border: 1px solid #ddd; | |
| } | |
| .btn { | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| font-weight: bold; | |
| } | |
| .btn:hover { | |
| background-color: #45a049; | |
| } | |
| .status-message { | |
| margin-top: 20px; | |
| font-size: 18px; | |
| color: #555; | |
| } | |
| #audio-player { | |
| margin-top: 20px; | |
| display: none; | |
| } | |
| .animation-container { | |
| width: 300px; | |
| height: 300px; | |
| margin: 0 auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Lottie Animation --> | |
| <div class="animation-container" data-aos="fade-up"> | |
| <div id="lottie-animation"></div> | |
| </div> | |
| <h1>AI Text-to-Speech Web App</h1> | |
| <div class="app-container" data-aos="zoom-in"> | |
| <input type="text" id="input-text" class="input-field" placeholder="Type your text here..." /> | |
| <select id="language-selector" class="select-lang"> | |
| <option value="en">English</option> | |
| <option value="es">Spanish</option> | |
| <option value="fr">French</option> | |
| <option value="de">German</option> | |
| </select> | |
| <button class="btn" onclick="convertTextToSpeech()">Convert to Speech</button> | |
| <div class="status-message" id="status"></div> | |
| <audio id="audio-player" controls></audio> | |
| </div> | |
| <!-- AOS Library --> | |
| <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script> | |
| <script> | |
| // Initialize AOS library | |
| AOS.init(); | |
| // Lottie animation for a professional look | |
| var animation = lottie.loadAnimation({ | |
| container: document.getElementById('lottie-animation'), | |
| renderer: 'svg', | |
| loop: true, | |
| autoplay: true, | |
| path: 'https://assets1.lottiefiles.com/packages/lf20_LZkcjJ.json' // You can change this to your preferred animation URL | |
| }); | |
| function convertTextToSpeech() { | |
| let text = document.getElementById("input-text").value; | |
| let language = document.getElementById("language-selector").value; | |
| let statusDiv = document.getElementById("status"); | |
| let audioPlayer = document.getElementById("audio-player"); | |
| if (!text.trim()) { | |
| statusDiv.innerHTML = "Please enter some text!"; | |
| return; | |
| } | |
| // Show loading status | |
| statusDiv.innerHTML = "Converting... Please wait."; | |
| // Call the backend to get the audio file (we simulate it here) | |
| fetch('/convert', { | |
| method: 'POST', | |
| body: JSON.stringify({ text: text, language: language }), | |
| headers: { 'Content-Type': 'application/json' } | |
| }) | |
| .then(response => response.blob()) | |
| .then(blob => { | |
| audioPlayer.src = URL.createObjectURL(blob); | |
| audioPlayer.style.display = "block"; | |
| // Show success popup using SweetAlert2 | |
| Swal.fire({ | |
| icon: 'success', | |
| title: 'Conversion Successful!', | |
| text: 'Your text has been converted to speech.', | |
| }); | |
| }) | |
| .catch(error => { | |
| statusDiv.innerHTML = "Error: Could not convert text to speech."; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # Gradio interface setup for integrating frontend | |
| def gradio_interface(): | |
| return gr.HTML(html_content) | |
| interface = gr.Interface(fn=text_to_speech, inputs=[gr.Textbox(), gr.Dropdown()], outputs=[gr.Textbox(), gr.Audio()]) | |
| interface.launch() |