Spaces:
Running
Running
| <!-- <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Model Retraining</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #f4f4f9; | |
| } | |
| .container { | |
| text-align: center; | |
| } | |
| .status { | |
| padding: 10px; | |
| margin-top: 20px; | |
| border-radius: 5px; | |
| display: none; | |
| position: absolute; | |
| bottom: 20px; | |
| width: 80%; | |
| left: 10%; | |
| } | |
| .status.success { | |
| background-color: #4CAF50; | |
| color: white; | |
| } | |
| .status.error { | |
| background-color: #f44336; | |
| color: white; | |
| } | |
| .status.info { | |
| background-color: #2196F3; | |
| color: white; | |
| } | |
| .progress { | |
| width: 100%; | |
| background-color: #ddd; | |
| height: 25px; | |
| margin-top: 20px; | |
| border-radius: 5px; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| width: 0; | |
| background-color: #4CAF50; | |
| text-align: center; | |
| color: white; | |
| line-height: 25px; | |
| border-radius: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Model Retraining Progress</h1> | |
| <div class="status" id="statusMessage"></div> | |
| <div class="progress"> | |
| <div class="progress-bar" id="progressBar">0%</div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script> | |
| <script> | |
| // Connect to the WebSocket server | |
| var socket = io.connect('http://' + document.domain + ':' + location.port + '/start_retraining'); | |
| // Get elements for updates | |
| var statusMessage = document.getElementById('statusMessage'); | |
| var progressBar = document.getElementById('progressBar'); | |
| // Handle 'training_update' event | |
| socket.on('training_update', function(data) { | |
| var epoch = data.epoch; | |
| var status = data.status; | |
| statusMessage.className = "status info"; // Add info class to style | |
| statusMessage.textContent = status; | |
| statusMessage.style.display = "block"; | |
| // Update progress bar | |
| var progress = (epoch / 5) * 100; // Assuming 5 epochs for this test | |
| progressBar.style.width = progress + '%'; | |
| progressBar.textContent = Math.round(progress) + '%'; | |
| }); | |
| // Handle 'training_complete' event | |
| socket.on('training_complete', function(data) { | |
| statusMessage.className = "status success"; // Add success class | |
| statusMessage.textContent = data.status; | |
| setTimeout(function() { | |
| statusMessage.style.display = "none"; // Hide status after a few seconds | |
| }, 3000); | |
| }); | |
| </script> | |
| </body> | |
| </html> --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Model Retraining</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> | |
| <style> | |
| .container { | |
| max-width: 800px; | |
| margin: 40px auto; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .status-box { | |
| padding: 20px; | |
| margin: 20px 0; | |
| border-radius: 8px; | |
| background-color: #f5f5f5; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 20px; | |
| background-color: #f0f0f0; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin: 20px 0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: #4CAF50; | |
| width: 0%; | |
| transition: width 0.3s ease-in-out; | |
| } | |
| .loader { | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #3498db; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 20px auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .back-button { | |
| padding: 10px 20px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| display: inline-block; | |
| margin-top: 20px; | |
| } | |
| .back-button:hover { | |
| background-color: #45a049; | |
| } | |
| #status-text { | |
| font-size: 1.1em; | |
| margin: 10px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Model Retraining Status</h1> | |
| <div class="status-box"> | |
| <div class="loader" id="loader"></div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progress"></div> | |
| </div> | |
| <p id="status-text">Initializing retraining process...</p> | |
| <p>You can safely navigate away from this page. The retraining will continue in the background.</p> | |
| </div> | |
| <a href="/" class="back-button">Back to Image Segmentation Tool</a> | |
| </div> | |
| <script> | |
| // Connect to Socket.IO server | |
| const socket = io(); | |
| const progressBar = document.getElementById('progress'); | |
| const statusText = document.getElementById('status-text'); | |
| const loader = document.getElementById('loader'); | |
| // Handle training updates | |
| socket.on('training_update', function(data) { | |
| // Calculate progress percentage (5 epochs total) | |
| const progress = (data.epoch / 5) * 100; | |
| progressBar.style.width = `${progress}%`; | |
| statusText.textContent = data.status; | |
| }); | |
| // Handle training completion | |
| socket.on('training_complete', function(data) { | |
| progressBar.style.width = '100%'; | |
| statusText.textContent = data.status; | |
| loader.style.display = 'none'; | |
| // Optional: Show completion message | |
| setTimeout(() => { | |
| alert('Retraining completed successfully!'); | |
| }, 500); | |
| }); | |
| // Handle connection errors | |
| socket.on('connect_error', function(error) { | |
| statusText.textContent = 'Connection error: ' + error; | |
| loader.style.display = 'none'; | |
| }); | |
| // Start the retraining process when the page loads | |
| window.addEventListener('load', function() { | |
| fetch('/start_retraining', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| } | |
| }).catch(error => { | |
| statusText.textContent = 'Failed to start retraining: ' + error; | |
| loader.style.display = 'none'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |