|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
|
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
<meta name="description" content="🐸Coqui AI TTS demo server."> |
|
<meta name="author" content="🐸Coqui AI TTS"> |
|
|
|
<title>TTS engine</title> |
|
|
|
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" |
|
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" |
|
rel="stylesheet"> |
|
|
|
|
|
<style> |
|
body { |
|
padding-top: 54px; |
|
} |
|
|
|
@media (min-width: 992px) { |
|
body { |
|
padding-top: 56px; |
|
} |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<a href="https://github.com/coqui-ai/TTS"><img style="position: absolute; z-index:1000; top: 0; left: 0; border: 0;" |
|
src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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" /> |
|
|
|
<ul class="list-unstyled"> |
|
</ul> |
|
|
|
{%if use_gst%} |
|
<input value='{"0": 0.1}' id="style_wav" placeholder="style wav (dict or path to wav).." size=45 |
|
type="text" name="style_wav"> |
|
{%endif%} |
|
|
|
<input id="text" placeholder="Type here..." size=45 type="text" name="text"> |
|
<button id="speak-button" name="speak">Speak</button><br /><br /> |
|
|
|
{%if use_multi_speaker%} |
|
Choose a speaker: |
|
<select id="speaker_id" name=speaker_id method="GET" action="/"> |
|
{% for speaker_id in speaker_ids %} |
|
<option value="{{speaker_id}}" SELECTED>{{speaker_id}}</option>" |
|
{% endfor %} |
|
</select><br /><br /> |
|
{%endif%} |
|
|
|
{%if use_multi_language%} |
|
Choose a language: |
|
<select id="language_id" name=language_id method="GET" action="/"> |
|
{% for language_id in language_ids %} |
|
<option value="{{language_id}}" SELECTED>{{language_id}}</option>" |
|
{% endfor %} |
|
</select><br /><br /> |
|
{%endif%} |
|
|
|
|
|
{%if show_details%} |
|
<button id="details-button" onclick="location.href = 'details'" name="model-details">Model |
|
Details</button><br /><br /> |
|
{%endif%} |
|
<audio id="audio" controls autoplay hidden></audio> |
|
<p id="message"></p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<script> |
|
function getTextValue(textId) { |
|
const container = q(textId) |
|
if (container) { |
|
return container.value |
|
} |
|
return "" |
|
} |
|
function q(selector) { return document.querySelector(selector) } |
|
q('#text').focus() |
|
function do_tts(e) { |
|
const text = q('#text').value |
|
const speaker_id = getTextValue('#speaker_id') |
|
const style_wav = getTextValue('#style_wav') |
|
const language_id = getTextValue('#language_id') |
|
if (text) { |
|
q('#message').textContent = 'Synthesizing...' |
|
q('#speak-button').disabled = true |
|
q('#audio').hidden = true |
|
synthesize(text, speaker_id, style_wav, language_id) |
|
} |
|
e.preventDefault() |
|
return false |
|
} |
|
q('#speak-button').addEventListener('click', do_tts) |
|
q('#text').addEventListener('keyup', function (e) { |
|
if (e.keyCode == 13) { |
|
do_tts(e) |
|
} |
|
}) |
|
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) { |
|
if (!res.ok) throw Error(res.statusText) |
|
return res.blob() |
|
}).then(function (blob) { |
|
q('#message').textContent = '' |
|
q('#speak-button').disabled = false |
|
q('#audio').src = URL.createObjectURL(blob) |
|
q('#audio').hidden = false |
|
}).catch(function (err) { |
|
q('#message').textContent = 'Error: ' + err.message |
|
q('#speak-button').disabled = false |
|
}) |
|
} |
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
