Spaces:
Build error
Build error
File size: 6,201 Bytes
e2ee049 50192f2 70e0c17 e2ee049 70e0c17 50192f2 70e0c17 50192f2 70e0c17 50192f2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
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() |