Update index.html

vxncius-dev · Nov 1, 2024 · 45c565f · 45c565f
1 parent 258644d
commit 45c565f
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/templates/index.html b/templates/index.html
@@ -10,6 +10,7 @@
 </head>
 
 <body>
+    <span class="loader"></span>
     <section class="home">
         <nav>
             <img src="{{ url_for('static', filename='assets/icon.png')}}" alt="logo" width="30">
@@ -41,15 +42,23 @@ <h1>Your transcriptions</h1>
             <ul id="history-list"></ul>
         </div>
     </section>
+    <span id="info"></span>
 
     <script>
         const fileInputStart = document.getElementById('start');
         const fileInput = document.getElementById('file-input');
         const historyList = document.getElementById('history-list');
+        const loader = document.querySelector('.loader');
         const memory = document.querySelector('.size');
+        const info = document.getElementById('info');
         const uploadButtons = document.querySelectorAll('.button_upload');
         let isProcessing = false;
 
+        function checkInfoSpan() {
+            info.style.display = !info.textContent.length ? "none" : "flex";
+            setTimeout(()=> info.style.display = "none", 2000)
+        }
+
         document.addEventListener("contextmenu", e => e.preventDefault());
 
         fileInputStart.addEventListener('change', (e) => {
@@ -76,7 +85,6 @@ <h1>Your transcriptions</h1>
 
         async function handleFiles(e) {
             if (isProcessing) return;
-
             isProcessing = true;
             const input = e.target;
             const file = input.files[0];
@@ -87,7 +95,7 @@ <h1>Your transcriptions</h1>
                 isProcessing = false;
                 return;
             }
-
+            loader.style.display = "inline-block";
             document.body.style.pointerEvents = "none";
             const { base64, size, name } = await convertToBase64(file);
             const uniqueId = generateRandomId();
@@ -121,11 +129,15 @@ <h1>Your transcriptions</h1>
                     }
                 })
                 .catch(error => {
-                    console.error('Erro ao enviar o arquivo:', error);
+                    const message_ = `Erro ao enviar o arquivo: ${error}`;
+                    console.error(message_);
+                    info.textContent = message_;
+                    checkInfoSpan()
                 })
                 .finally(() => {
                     isProcessing = false;
                     document.body.style.pointerEvents = "auto";
+                    loader.style.display = "none";
                 });
         }
 
@@ -143,7 +155,10 @@ <h1>Your transcriptions</h1>
                     animate(id)
                 }
             } catch (error) {
-                console.error('Erro ao enviar a transcrição para análise da IA:', error);
+                const message_ = `Erro ao enviar a transcrição para análise da IA: ${error}`;
+                console.error(message_);
+                info.textContent = message_;
+                checkInfoSpan()
             }
         }
 
@@ -454,8 +469,9 @@ <h1>Your transcriptions</h1>
             renderHistory();
             calcularEspacoRestante();
             homeLoad()
+            checkInfoSpan()
         };
     </script>
 </body>
 
-</html>
+</html>