Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document Authoring SDK</title> | |
| <style> | |
| .spinner { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid #f3f3f3; | |
| border-top: 2px solid #3498db; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-right: 8px; | |
| vertical-align: middle; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| #translateButton:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.7; | |
| } | |
| /* Add styles for disabled state */ | |
| .button-disabled { | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| pointer-events: none; | |
| } | |
| /* Add a status indicator */ | |
| #statusIndicator { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| padding: 8px; | |
| border-radius: 4px; | |
| background: #f0f0f0; | |
| font-size: 14px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <div id="statusIndicator">Services starting...</div> | |
| <script> | |
| // Add this before loading the main script | |
| window.servicesReady = false; | |
| // Create a function to check service status | |
| function checkServicesStatus() { | |
| fetch('/client/api/v1/healthcheck') | |
| .then(response => { | |
| if (response.ok) { | |
| window.servicesReady = true; | |
| const translateButton = document.getElementById('translateButton'); | |
| const statusIndicator = document.getElementById('statusIndicator'); | |
| if (translateButton) { | |
| translateButton.classList.remove('button-disabled'); | |
| translateButton.disabled = false; | |
| } | |
| if (statusIndicator) { | |
| statusIndicator.style.background = '#e6ffe6'; | |
| statusIndicator.textContent = 'Services ready'; | |
| // Optionally hide after a delay: | |
| setTimeout(() => { | |
| statusIndicator.style.display = 'none'; | |
| }, 3000); | |
| } | |
| return true; | |
| } | |
| throw new Error('Services not ready'); | |
| }) | |
| .catch(error => { | |
| console.log('Waiting for services...', error); | |
| return false; | |
| }); | |
| } | |
| // Check status every 2 seconds until ready | |
| const statusInterval = setInterval(() => { | |
| if (window.servicesReady) { | |
| clearInterval(statusInterval); | |
| } else { | |
| checkServicesStatus(); | |
| } | |
| }, 2000); | |
| </script> | |
| <script src="/document-authoring.js"></script> | |
| </body> | |
| </html> | |