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, 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; // Autoreproducción del audio | |
| document.getElementById('audio-container').innerHTML = ''; | |
| document.getElementById('audio-container').appendChild(audioElement); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |