|
<!DOCTYPE html> |
|
<html lang="es"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Inference</title> |
|
|
|
<style> |
|
body { |
|
background-color: #222; |
|
color: #fff; |
|
font-family: Arial, sans-serif; |
|
text-align: center; |
|
margin: 0; |
|
padding: 0; |
|
overflow-x: hidden; |
|
} |
|
h1 { |
|
margin-top: 50px; |
|
font-size: 24px; |
|
} |
|
form { |
|
margin-top: 20px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
max-width: 90%; |
|
margin: 0 auto; |
|
} |
|
label, select, textarea { |
|
margin: 5px; |
|
font-size: 16px; |
|
color: #eee; |
|
border: 1px solid #666; |
|
border-radius: 5px; |
|
background-color: #333; |
|
padding: 1px; |
|
width: 100%; |
|
max-height: calc(100vh - 400px); |
|
overflow-y: auto; |
|
} |
|
select { |
|
height: 30px; |
|
} |
|
button { |
|
margin-top: 10px; |
|
background-color: #007bff; |
|
color: #fff; |
|
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; |
|
max-width: 90%; |
|
margin: 0 auto; |
|
} |
|
footer { |
|
position: fixed; |
|
bottom: 0; |
|
width: 100%; |
|
background-color: #333; |
|
color: #eee; |
|
padding: 10px 0; |
|
text-align: center; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Convertidor de Texto a Audio</h1> |
|
<form id="conversion-form"> |
|
<label for="model">Modelo:</label> |
|
<select id="model" name="model"> |
|
{% for model in model_options %} |
|
<option value="{{ model }}">{{ model }}</option> |
|
{% endfor %} |
|
</select> |
|
<label for="text">Texto:</label> |
|
<textarea id="text" name="text" rows="4" maxlength="3000" placeholder="Escribe tu texto aquí." class="autosize"></textarea> |
|
<button type="submit">Generar audio</button> |
|
</form> |
|
<br> |
|
<div id="audio-container"></div> |
|
<footer> |
|
<p>Powered by <a target="_blank" href="https://hircoir.eu.org" class="style color" style="color: green;">HirCoir</a></p> |
|
</footer> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script> |
|
<script> |
|
document.getElementById('conversion-form').addEventListener('submit', async function (e) { |
|
e.preventDefault(); |
|
const formData = new FormData(e.target); |
|
try { |
|
const response = await fetch('/convert', { |
|
method: 'POST', |
|
body: formData |
|
}); |
|
if (response.ok) { |
|
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); |
|
} else { |
|
console.error('Error al convertir texto a voz:', response.statusText); |
|
} |
|
} catch (error) { |
|
console.error('Error de red:', error); |
|
} |
|
}); |
|
|
|
autosize(document.querySelectorAll('.autosize')); |
|
</script> |
|
</body> |
|
</html> |
|
|
