Spaces:

arcanus
/

koala2

Paused

App Files Files

arcanus commited on Dec 11, 2024

Commit

be2c5c7

verified ·

1 Parent(s): 29996d4

Update templates/index_new.html

Browse files

Files changed (1) hide show

templates/index_new.html +111 -2

templates/index_new.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,7 +9,16 @@
 </head>
 <body class="antialiased">
     <div class="min-h-screen bg-background flex items-center justify-center p-4 sm:p-8">
         <div class="toast-container">
             <div id="toast" class="toast"></div>
@@ -1499,5 +1508,105 @@ document.getElementById('getSubtitlesBtn').addEventListener('click', async funct
             }
         });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="cs" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body class="antialiased">
+    <!-- Status Container -->
+<div id="statusContainer" class="fixed top-4 right-4 bg-card p-4" style="z-index: 1000;">
+    <div id="xttsStatus" class="mb-2"></div>
+    <div id="piperStatus" class="mb-2"></div>
+    <div id="ngrokStatus" class="mb-2"></div>
+</div>
+<!-- Log messages container -->
+<div id="logContainer" class="fixed bottom-4 right-4 max-w-md bg-card p-4 rounded-lg shadow-lg overflow-y-auto max-h-60" style="z-index: 1000; display:none !important;">
+    <div class="text-sm font-mono" id="logMessages"></div>
+</div>
     <div class="min-h-screen bg-background flex items-center justify-center p-4 sm:p-8">
         <div class="toast-container">
             <div id="toast" class="toast"></div>
             }
         });
     </script>
+    <script>
+        // Connect to SSE endpoint for logs
+        const eventSource = new EventSource('/logs');
+        const logMessages = document.getElementById('logMessages');
+        eventSource.onmessage = function(event) {
+            const data = JSON.parse(event.data);
+            // Skip keepalive messages
+            if (data.message === 'keepalive') return;
+            // Create log message element
+            const logElement = document.createElement('div');
+            logElement.className = `log-message ${data.level.toLowerCase()}`;
+            logElement.textContent = data.message;
+            // Add to container and scroll to bottom
+            logMessages.appendChild(logElement);
+            logMessages.scrollTop = logMessages.scrollHeight;
+            // Keep only last 50 messages
+            while (logMessages.children.length > 50) {
+                logMessages.removeChild(logMessages.firstChild);
+            }
+        };
+       // Add some basic styles for status indicators
+const statusStyle = document.createElement('style');
+statusStyle.textContent = `
+    #statusContainer {
+    background: none;
+    color: white;
+    font-size: 0.875rem;
+    }
+    .status-indicator {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+    .status-enabled {
+        background-color: #10b981;
+    }
+    .status-disabled {
+        background-color: #ef4444;
+    }
+`;
+document.head.appendChild(statusStyle);
+// Get all statuses when page loads
+fetch('/get_status')
+    .then(response => response.json())
+    .then(data => {
+        // Update status elements
+        const xttsStatus = document.getElementById('xttsStatus');
+        const piperStatus = document.getElementById('piperStatus');
+        const ngrokStatus = document.getElementById('ngrokStatus');
+        xttsStatus.innerHTML = `
+            <span class="status-indicator ${data.xtts_enabled ? 'status-enabled' : 'status-disabled'}"></span>
+            XTTS: ${data.xtts_enabled ? 'online' : 'offline'}
+        `;
+        piperStatus.innerHTML = `
+            <span class="status-indicator ${data.piper_enabled ? 'status-enabled' : 'status-disabled'}"></span>
+            Piper: ${data.piper_enabled ? 'online' : 'offline'}
+        `;
+        ngrokStatus.innerHTML = `
+            <span class="status-indicator ${data.ngrok_server_online ? 'status-enabled' : 'status-disabled'}"></span>
+            YT server: ${data.ngrok_server_online ? 'online' : 'offline'}
+        `;
+        // Also log to console and log container as before
+        console.log('XTTS:', data.xtts_enabled ? 'enabled' : 'disabled');
+        console.log('Piper:', data.piper_enabled ? 'enabled' : 'disabled');
+        console.log('Ngrok server:', data.ngrok_server_online ? 'online' : 'offline');
+        const messages = [
+            `XTTS is ${data.xtts_enabled ? 'enabled' : 'disabled'}`,
+            `Piper is ${data.piper_enabled ? 'enabled' : 'disabled'}`,
+            `Ngrok server is ${data.ngrok_server_online ? 'online' : 'offline'}`
+        ];
+        messages.forEach(message => {
+            const logElement = document.createElement('div');
+            logElement.className = 'log-message info';
+            logElement.textContent = message;
+            logMessages.appendChild(logElement);
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching status:', error);
+        const logElement = document.createElement('div');
+        logElement.className = 'log-message error';
+        logElement.textContent = 'Error fetching server status';
+        logMessages.appendChild(logElement);
+    });
+    </script>
 </body>
 </html>