Spaces:
Running
Running
| <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 { | |
| margin: 5px; | |
| font-size: 16px; | |
| color: #eee; | |
| } | |
| textarea { | |
| background-color: #333; | |
| color: #eee; | |
| border: 1px solid #666; | |
| border-radius: 5px; | |
| padding: 10px; | |
| width: 90%; | |
| 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; | |
| } | |
| #audio-container { | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Convertidor de Texto a Audio</h1> | |
| <form action="/convert" method="post"> | |
| <label for="model">Selecciona el modelo ONNX:</label><br> | |
| <div> <p>Prueba nuevos modelos avanzados en HirLab:</p> <a href="https://tts.hircoir.eu.org" style="color: #ADD8E6;" target="_blank"> Modelos disponibles: Sora Español México, Voz HirCoir, Kamora Español México </a> <p>Try new advanced models at HirLab:</p> <a href="https://tts.hircoir.eu.org" style="color: #ADD8E6;" target="_blank"> Available models: Sora Spanish Mexico, Voz HirCoir, Kamora Spanish Mexico </a> </div> <select id="model" name="model"> | |
| {% for model in model_options %} | |
| <option value="{{ model }}">{{ model }}</option> | |
| {% endfor %} | |
| </select><br> | |
| <label for="text">Texto:</label><br> | |
| <textarea placeholder="Escribe tu texto aquí, solo se tomará los primeros 500 carácteres." id="text" name="text" rows="4"></textarea> | |
| <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; // Autoreproducción del audio | |
| document.getElementById('audio-container').innerHTML = ''; | |
| document.getElementById('audio-container').appendChild(audioElement); | |
| }); | |
| </script> | |
| </body> |