feature/add file upload option in UI

This commit is contained in:
shahbazraza 2023-11-11 10:47:58 +05:00
parent 9498b0a51e
commit 1b7f9348ce
1 changed files with 21 additions and 2 deletions

View File

@ -58,8 +58,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center">
<img class="mt-5" src="{{url_for('static', filename='coqui-log-green-TTS.png')}}" align="middle" <img class="mt-5" src="{{url_for('static', filename='coqui-log-green-TTS.png')}}" align="middle" width="512" />
width="512" />
<ul class="list-unstyled"> <ul class="list-unstyled">
</ul> </ul>
@ -71,6 +70,9 @@
<input id="text" placeholder="Type here..." size=45 type="text" name="text"> <input id="text" placeholder="Type here..." size=45 type="text" name="text">
<button id="speak-button" name="speak">Speak</button><br /><br /> <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%} {%if use_multi_speaker%}
Choose a speaker: Choose a speaker:
@ -103,6 +105,7 @@
<!-- Bootstrap core JavaScript --> <!-- Bootstrap core JavaScript -->
<script> <script>
function getTextValue(textId) { function getTextValue(textId) {
const container = q(textId) const container = q(textId)
if (container) { if (container) {
@ -125,6 +128,7 @@
} }
e.preventDefault() e.preventDefault()
return false return false
} }
q('#speak-button').addEventListener('click', do_tts) q('#speak-button').addEventListener('click', do_tts)
q('#text').addEventListener('keyup', function (e) { q('#text').addEventListener('keyup', function (e) {
@ -132,6 +136,21 @@
do_tts(e) 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 = "") { 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' }) 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) { .then(function (res) {