From 1b7f9348ce85b9611fc38f083a7b37753196b2a2 Mon Sep 17 00:00:00 2001
From: shahbazraza <shahbaz.raza@ibisdev.tech>
Date: Sat, 11 Nov 2023 10:47:58 +0500
Subject: [PATCH] feature/add file upload option in UI

---
 TTS/server/templates/index.html | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/TTS/server/templates/index.html b/TTS/server/templates/index.html
index 6354d391..952bc50a 100644
--- a/TTS/server/templates/index.html
+++ b/TTS/server/templates/index.html
@@ -58,8 +58,7 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-12 text-center">
-                <img class="mt-5" src="{{url_for('static', filename='coqui-log-green-TTS.png')}}" align="middle"
-                    width="512" />
+                <img class="mt-5" src="{{url_for('static', filename='coqui-log-green-TTS.png')}}" align="middle" width="512" />
 
                 <ul class="list-unstyled">
                 </ul>
@@ -71,6 +70,9 @@
 
                 <input id="text" placeholder="Type here..." size=45 type="text" name="text">
                 <button id="speak-button" name="speak">Speak</button><br /><br />
+                
+                <input type="file" id="fileInput" name="fileInput" accept=".txt" size=45, position="relative">
+                <button id="upload-button">Upload File</button><br /><br />
 
                 {%if use_multi_speaker%}
                 Choose a speaker:
@@ -103,6 +105,7 @@
 
     <!-- Bootstrap core JavaScript -->
     <script>
+         
         function getTextValue(textId) {
             const container = q(textId)
             if (container) {
@@ -125,6 +128,7 @@
             }
             e.preventDefault()
             return false
+        
         }
         q('#speak-button').addEventListener('click', do_tts)
         q('#text').addEventListener('keyup', function (e) {
@@ -132,6 +136,21 @@
                 do_tts(e)
             }
         })
+        q('#upload-button').addEventListener('click', function () {
+        const fileInput = q('#fileInput');
+        const file = fileInput.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                const textContent = e.target.result;
+                q('#text').value = textContent
+                do_tts(e)
+                
+                };
+                reader.readAsText(file);
+            }
+            
+        });
         function synthesize(text, speaker_id = "", style_wav = "", language_id = "") {
             fetch(`/api/tts?text=${encodeURIComponent(text)}&speaker_id=${encodeURIComponent(speaker_id)}&style_wav=${encodeURIComponent(style_wav)}&language_id=${encodeURIComponent(language_id)}`, { cache: 'no-cache' })
                 .then(function (res) {