Spaces:

SatyamSinghal
/

TextToAudio_Lecture

Build error

App Files Files Community

SatyamSinghal commited on Nov 26, 2024

Commit

70e0c17

verified ·

1 Parent(s): 8e8d254

Update app.py

Browse files

Files changed (1) hide show

app.py +176 -3

app.py CHANGED Viewed

@@ -20,14 +20,181 @@ def text_to_speech(text, language="en"):
     except Exception as e:
         return f"Error: {str(e)}", None
-# Define the Gradio Interface
-language_options = [("English", "en"), ("Spanish", "es"), ("French", "fr"), ("German", "de")]
 interface = gr.Interface(
     fn=text_to_speech,
     inputs=[
         gr.Textbox(label="Enter Text", placeholder="Type your text here..."),
-        gr.Dropdown(choices=[lang[1] for lang in language_options], label="Select Language", value="en"),
     ],
     outputs=[
         gr.Textbox(label="Status"),
@@ -35,6 +202,12 @@ interface = gr.Interface(
     ],
     title="AI Text-to-Speech Web App",
     description="Convert text into natural-sounding speech using AI. Select a language, type text, and download the audio!",
 )
 # Launch the interface

     except Exception as e:
         return f"Error: {str(e)}", None
+# Define the HTML interface with embedded JavaScript and CSS
+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.";
+            // Simulate API call with setTimeout (replace this with your real API call)
+            setTimeout(() => {
+                // Here, you should call your backend and get the audio file
+                let audioBlob = new Blob([new ArrayBuffer(1024)], { type: 'audio/mp3' });  // Mock blob for demo
+                audioPlayer.src = URL.createObjectURL(audioBlob);
+                audioPlayer.style.display = "block";
+                // Show success popup using SweetAlert2
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Conversion Successful!',
+                    text: 'Your text has been converted to speech.',
+                });
+            }, 2000);  // Simulating delay of 2 seconds
+        }
+    </script>
+</body>
+</html>
+"""
+# Gradio interface setup
 interface = gr.Interface(
     fn=text_to_speech,
     inputs=[
         gr.Textbox(label="Enter Text", placeholder="Type your text here..."),
+        gr.Dropdown(choices=["en", "es", "fr", "de"], label="Select Language", value="en"),
     ],
     outputs=[
         gr.Textbox(label="Status"),
     ],
     title="AI Text-to-Speech Web App",
     description="Convert text into natural-sounding speech using AI. Select a language, type text, and download the audio!",
+    allow_flagging="never",
+    theme="compact",
+    layout="vertical",
+    live=True,
+    # Display the HTML content
+    css=html_content,
 )
 # Launch the interface