Spaces:

Abhisksks
/

neuraltexttovoice

Sleeping

App Files Files Community

Abhisksks commited on Feb 17

Commit

a9674c6

verified ·

1 Parent(s): ff16eb0

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +196 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,196 @@

+                        <!DOCTYPE html>
+                        <html lang="en">
+                        <head>
+                            <meta charset="UTF-8">
+                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+							<style>
+								body {
+									background-color: white; /* Ensure the iframe has a white background */
+								}
+							</style>
+                        </head>
+                        <body>
+                            <!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Edge TTS Generator</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+      padding: 20px;
+      background-color: #f4f4f9;
+    }
+    h1 {
+      text-align: center;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    label {
+      display: block;
+      margin-bottom: 5px;
+      font-weight: bold;
+    }
+    select, textarea, input[type="text"] {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 15px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    button {
+      display: block;
+      width: 100%;
+      padding: 10px;
+      background-color: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    button:hover {
+      background-color: #0056b3;
+    }
+    .audio-output {
+      margin-top: 20px;
+      text-align: center;
+    }
+    .audio-output audio {
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <h1>Edge TTS Generator</h1>
+  <div class="container">
+    <form id="ttsForm">
+      <label for="language">Select Language:</label>
+      <select id="language" name="language" required>
+        <option value="" disabled selected>Select a language</option>
+        {% for lang, voice_list in voices.items() %}
+          <option value="{{ lang }}">{{ lang }}</option>
+        {% endfor %}
+      </select>
+      <label for="voice">Select Voice:</label>
+      <select id="voice" name="voice" required>
+        <option value="" disabled selected>Select a voice</option>
+      </select>
+      <label for="style">Select Style:</label>
+      <select id="style" name="style">
+        <option value="default">Default</option>
+      </select>
+      <label for="rate">Rate (%):</label>
+      <input type="text" id="rate" name="rate" value="0">
+      <label for="volume">Volume (%):</label>
+      <input type="text" id="volume" name="volume" value="0">
+      <label for="pitch">Pitch (Hz):</label>
+      <input type="text" id="pitch" name="pitch" value="0">
+      <label for="text">Enter Text:</label>
+      <textarea id="text" name="text" rows="5" required></textarea>
+      <button type="submit">Generate Audio</button>
+    </form>
+    <div class="audio-output" id="audioOutput">
+      <audio controls id="audioPlayer"></audio>
+      <a id="downloadLink" style="display: none;">Download Audio</a>
+    </div>
+  </div>
+  <script>
+    document.getElementById('language').addEventListener('change', function () {
+      const language = this.value;
+      const voiceDropdown = document.getElementById('voice');
+      voiceDropdown.innerHTML = '<option value="" disabled selected>Select a voice</option>';
+      if (!language) return;
+      fetch(`/get_voice_info?language=${language}`)
+        .then(response => response.json())
+        .then(data => {
+          for (const [voiceName, voiceData] of Object.entries(data)) {
+            const option = document.createElement('option');
+            option.value = voiceName;
+            option.textContent = voiceName;
+            voiceDropdown.appendChild(option);
+          }
+        });
+    });
+    document.getElementById('voice').addEventListener('change', function () {
+      const language = document.getElementById('language').value;
+      const voice = this.value;
+      const styleDropdown = document.getElementById('style');
+      styleDropdown.innerHTML = '<option value="default">Default</option>';
+      if (!language || !voice) return;
+      fetch(`/get_voice_info?language=${language}&voice_id=${voice}`)
+        .then(response => response.json())
+        .then(data => {
+          if (data.styles && data.styles.length > 1) {
+            data.styles.forEach(style => {
+              if (style !== 'default') {
+                const option = document.createElement('option');
+                option.value = style;
+                option.textContent = style.charAt(0).toUpperCase() + style.slice(1);
+                styleDropdown.appendChild(option);
+              }
+            });
+          }
+        });
+    });
+    document.getElementById('ttsForm').addEventListener('submit', async function (event) {
+      event.preventDefault();
+      const formData = new FormData(this);
+      const response = await fetch('/generate_audio', {
+        method: 'POST',
+        body: formData,
+      });
+      const result = await response.json();
+      if (result.success) {
+        const audioPlayer = document.getElementById('audioPlayer');
+        const downloadLink = document.getElementById('downloadLink');
+        audioPlayer.src = result.audio_path;
+        audioPlayer.load();
+        audioPlayer.play();
+        downloadLink.href = `/download_audio/${result.filename}`;
+        downloadLink.textContent = `Download ${result.filename}`;
+        downloadLink.style.display = 'block';
+      } else {
+        alert(`Error: ${result.error}`);
+      }
+    });
+  </script>
+</body>
+</html>
+							<script>
+							</script>
+                        </body>
+                        </html>