Create templates /index.html

templates /index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Flask API Test on Hugging Face</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+    }
+    textarea, input[type="text"] {
+      width: 100%;
+      max-width: 600px;
+    }
+    .result {
+      margin-top: 20px;
+      padding: 10px;
+      border: 1px solid #ddd;
+      background: #f9f9f9;
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+<body>
+  <h1>Flask API Test</h1>
+
+  <h2>Text to Text</h2>
+  <form id="textToTextForm">
+    <label for="message">Enter message:</label><br>
+    <textarea id="message" name="message" rows="4" placeholder="Type your message here..."></textarea><br><br>
+    <button type="submit">Submit</button>
+  </form>
+  <div class="result" id="textToTextResult"></div>
+
+  <h2>Text to Speech</h2>
+  <form id="textToSpeechForm">
+    <label for="tts_message">Enter message for TTS:</label><br>
+    <textarea id="tts_message" name="tts_message" rows="4" placeholder="Type your message here..."></textarea><br><br>
+    <label for="output_filename">Output Filename:</label><br>
+    <input type="text" id="output_filename" name="output_filename" value="output.wav"><br><br>
+    <button type="submit">Submit</button>
+  </form>
+  <div class="result" id="textToSpeechResult"></div>
+
+  <script>
+    // Text to Text Endpoint
+    document.getElementById('textToTextForm').addEventListener('submit', async function(e) {
+      e.preventDefault();
+      const message = document.getElementById('message').value;
+      const payload = { message: message, Saved_response: "" };
+      try {
+        const response = await fetch('/text_to_text', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+        const result = await response.json();
+        document.getElementById('textToTextResult').innerText = JSON.stringify(result, null, 2);
+      } catch (error) {
+        document.getElementById('textToTextResult').innerText = 'Error: ' + error;
+      }
+    });
+
+    // Text to Speech Endpoint
+    document.getElementById('textToSpeechForm').addEventListener('submit', async function(e) {
+      e.preventDefault();
+      const message = document.getElementById('tts_message').value;
+      const outputFilename = document.getElementById('output_filename').value;
+      const payload = { message: message, output_filename: outputFilename, Saved_response: "" };
+      try {
+        const response = await fetch('/text_to_speech', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+        const result = await response.json();
+        // Display the JSON response and also offer a download link if needed.
+        document.getElementById('textToSpeechResult').innerHTML =
+          `<pre>${JSON.stringify(result, null, 2)}</pre>
+           <p><a href="${result.output_filename}" download>Download ${result.output_filename}</a></p>`;
+      } catch (error) {
+        document.getElementById('textToSpeechResult').innerText = 'Error: ' + error;
+      }
+    });
+  </script>
+</body>
+</html>