Kaggle-Piper-onnx-export-and-inference

Running

App Files Files Community

HirCoir commited on May 16

Commit

90a1590

•

1 Parent(s): e064e8d

Update index.html

Browse files

Files changed (1) hide show

index.html +91 -159

index.html CHANGED Viewed

@@ -1,53 +1,51 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Model</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;
@@ -59,132 +57,66 @@
         }
         #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> Files > Dockerfile > Read Dockerfile</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>

 <!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; /* Para evitar el scrolling horizontal */
+        }
+        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); /* Altura máxima del textarea */
+            overflow-y: auto; /* Hacer el textarea desplazable cuando sea necesario */
+        }
+        select {
+            height: 30px;
+        }
+        button {
+            margin-top: 10px;
+            background-color: #007bff;
+            color: #fff;
             border: none;
             border-radius: 5px;
             padding: 10px 20px;
         }
         #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>