|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Convertidor de Texto a Audio</title> |
|
<style> |
|
body { |
|
background-color: #222; |
|
color: #eee; |
|
font-family: Arial, sans-serif; |
|
text-align: center; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
h1 { |
|
margin-top: 50px; |
|
} |
|
form { |
|
margin-top: 20px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
label, select, textarea, button { |
|
margin: 5px; |
|
font-size: 16px; |
|
color: #eee; |
|
} |
|
textarea { |
|
background-color: #333; |
|
color: #eee; |
|
border: 1px solid #666; |
|
border-radius: 5px; |
|
padding: 10px; |
|
width: 80%; |
|
height: 100px; |
|
} |
|
select { |
|
background-color: #333; |
|
color: #eee; |
|
border: 1px solid #666; |
|
border-radius: 5px; |
|
padding: 5px; |
|
width: 80%; |
|
height: 30px; |
|
} |
|
button { |
|
background-color: #007bff; |
|
color: #eee; |
|
border: none; |
|
border-radius: 5px; |
|
padding: 10px 20px; |
|
cursor: pointer; |
|
transition: background-color 0.3s ease; |
|
} |
|
button:hover { |
|
background-color: #0056b3; |
|
} |
|
#audio-container { |
|
margin-top: 20px; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
.animated-button { |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
gap: 4px; |
|
padding: 16px 36px; |
|
border: 4px solid; |
|
border-color: transparent; |
|
font-size: 16px; |
|
background-color: inherit; |
|
border-radius: 100px; |
|
font-weight: 600; |
|
color: greenyellow; |
|
box-shadow: 0 0 0 2px greenyellow; |
|
cursor: pointer; |
|
overflow: hidden; |
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); |
|
} |
|
|
|
.animated-button svg { |
|
position: absolute; |
|
width: 24px; |
|
fill: greenyellow; |
|
z-index: 9; |
|
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); |
|
} |
|
|
|
.animated-button .arr-1 { |
|
right: 16px; |
|
} |
|
|
|
.animated-button .arr-2 { |
|
left: -25%; |
|
} |
|
|
|
.animated-button .circle { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
width: 20px; |
|
height: 20px; |
|
background-color: rgb(208, 162, 246); |
|
border-radius: 50%; |
|
opacity: 0; |
|
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); |
|
} |
|
|
|
.animated-button .text { |
|
position: relative; |
|
z-index: 1; |
|
transform: translateX(-12px); |
|
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); |
|
} |
|
|
|
.animated-button:hover { |
|
box-shadow: 0 0 0 12px transparent; |
|
color: #212121; |
|
border-radius: 12px; |
|
} |
|
|
|
.animated-button:hover .arr-1 { |
|
right: -25%; |
|
} |
|
|
|
.animated-button:hover .arr-2 { |
|
left: 16px; |
|
} |
|
|
|
.animated-button:hover .text { |
|
transform: translateX(12px); |
|
} |
|
|
|
.animated-button:hover svg { |
|
fill: #212121; |
|
} |
|
|
|
.animated-button:active { |
|
scale: 0.95; |
|
box-shadow: 0 0 0 4px rgb(47, 196, 255); |
|
} |
|
|
|
.animated-button:hover .circle { |
|
width: 220px; |
|
height: 220px; |
|
opacity: 1; |
|
} |
|
* { |
|
outline:none; |
|
border:none; |
|
margin:0px; |
|
padding:0px; |
|
font-family:Courier, monospace; |
|
} |
|
body { |
|
background:#333 url(https://static.tumblr.com/maopbtg/a5emgtoju/inflicted.png) repeat; |
|
} |
|
#paper { |
|
color:#FFF; |
|
font-size:20px; |
|
} |
|
#text { |
|
width:500px; |
|
overflow:hidden; |
|
background-color:#FFF; |
|
color:#222; |
|
font-family:Courier, monospace; |
|
font-weight:normal; |
|
font-size:24px; |
|
resize:none; |
|
line-height:40px; |
|
padding-left:100px; |
|
padding-right:100px; |
|
padding-top:45px; |
|
padding-bottom:34px; |
|
background-image:url(https://static.tumblr.com/maopbtg/E9Bmgtoht/lines.png), url(https://static.tumblr.com/maopbtg/nBUmgtogx/paper.png); |
|
background-repeat:repeat-y, repeat; |
|
-webkit-border-radius:12px; |
|
border-radius:12px; |
|
-webkit-box-shadow: 0px 2px 14px #000; |
|
box-shadow: 0px 2px 14px #000; |
|
border-top:1px solid #FFF; |
|
border-bottom:1px solid #FFF; |
|
} |
|
#button { |
|
cursor:pointer; |
|
margin-top:20px; |
|
float:right; |
|
height:40px; |
|
padding-left:24px; |
|
padding-right:24px; |
|
font-family:Arial, Helvetica, sans-serif; |
|
font-weight:bold; |
|
font-size:20px; |
|
color:#FFF; |
|
text-shadow: 0px -1px 0px #000000; |
|
-webkit-border-radius:8px; |
|
border-radius:8px; |
|
border-top:1px solid #FFF; |
|
-webkit-box-shadow: 0px 2px 14px #000; |
|
box-shadow: 0px 2px 14px #000; |
|
background-color: #62add6; |
|
background-image:url(https://static.tumblr.com/maopbtg/ZHLmgtok7/button.png); |
|
background-repeat:repeat-x; |
|
} |
|
#button:active { |
|
zoom: 1; |
|
filter: alpha(opacity=80); |
|
opacity: 0.8; |
|
} |
|
#button:focus { |
|
zoom: 1; |
|
filter: alpha(opacity=80); |
|
opacity: 0.8; |
|
} |
|
#wrapper { |
|
width:700px; |
|
height:auto; |
|
margin-left:auto; |
|
margin-right:auto; |
|
margin-top:24px; |
|
margin-bottom:100px; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<h1>Convertidor de Texto a Audio</h1> |
|
<form action="/convert" method="post"> |
|
<label for="model">Selecciona el modelo ONNX:</label><br> |
|
<select id="model" name="model"> |
|
{% for model in model_options %} |
|
<option value="{{ model }}">{{ model }}</option> |
|
{% endfor %} |
|
</select><br> |
|
<label for="text">Texto:</label><br> |
|
<div id="wrapper"> |
|
<textarea placeholder="Enter something funny." id="text" name="text" rows="4"></textarea> |
|
</div> |
|
<button class="animated-button"> |
|
<svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg"> |
|
<path |
|
d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" |
|
></path> |
|
</svg> |
|
<span class="text">Generar audio</span> |
|
<span class="circle"></span> |
|
<svg viewBox="0 0 24 24" class="arr-1" xmlns="http://www.w3.org/2000/svg"> |
|
<path |
|
d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" |
|
></path> |
|
</svg> |
|
</button> |
|
|
|
</form> |
|
<div id="audio-container"></div> |
|
|
|
<script> |
|
document.querySelector('form').addEventListener('submit', async function (e) { |
|
e.preventDefault(); |
|
const formData = new FormData(e.target); |
|
const response = await fetch('/convert', { |
|
method: 'POST', |
|
body: formData |
|
}); |
|
const data = await response.json(); |
|
const audioContent = data.audio_base64; |
|
const audioElement = document.createElement('audio'); |
|
audioElement.src = 'data:audio/wav;base64,' + audioContent; |
|
audioElement.controls = true; |
|
audioElement.autoplay = true; |
|
document.getElementById('audio-container').innerHTML = ''; |
|
document.getElementById('audio-container').appendChild(audioElement); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|