Update templates/models.html

templates/models.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Stable Diffusion Models Demo</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.js" integrity="sha512-8RlQJXSp6HysjW9X8D43gKjBq8cIChDhtfj4Qv5L4TJo0QCB0Mn6BD2X/QsMNdWggjmFv0HNtA13uFYQFwby8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet" <meta
@@ -273,6 +274,25 @@ color: red;
 
 
 <script>
+  window.addEventListener('load', function() {
+    const socket = io('https://xyplon.onrender.com', {
+        reconnectionAttempts: 3,
+        timeout: 10000
+    });
+
+    socket.on('connect', function() {
+        console.log('Connected to Socket.IO server');
+    });
+
+    socket.on('connect_error', function(error) {
+        console.error('Connection error:', error);
+    });
+
+    socket.on('update', function(data) {
+        document.getElementById('stats').textContent = `Pending (Generating): ${data["Pending Requests"]} Total Requests: ${data["Total Requests"]}`;
+    });
+});
+
 document.getElementById('prompt').addEventListener('mouseover', () => {
     document.getElementById('prompt').placeholder = 'Enter Your Prompt';
 });
@@ -288,7 +308,6 @@ document.getElementById('negative-prompt').addEventListener('input', function()
 
 </script>
   
-<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.js" integrity="sha512-8RlQJXSp6HysjW9X8D43gKjBq8cIChDhtfj4Qv5L4TJo0QCB0Mn6BD2X/QsMNdWggjmFv0HNtA13uFYQFwby8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 <script src="{{ url_for('static', filename='models.js') }}"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>