Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Loading - Anime Recommendation System</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| } | |
| .loading-container { | |
| text-align: center; | |
| padding: 40px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } | |
| .spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid rgba(255, 255, 255, 0.3); | |
| border-top: 5px solid white; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 20px auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .progress-bar { | |
| width: 300px; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 3px; | |
| margin: 20px auto; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); | |
| border-radius: 3px; | |
| animation: progress 3s ease-in-out infinite; | |
| } | |
| @keyframes progress { | |
| 0% { width: 0%; } | |
| 50% { width: 70%; } | |
| 100% { width: 100%; } | |
| } | |
| .status { | |
| margin-top: 20px; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| } | |
| .retry-btn { | |
| background: linear-gradient(45deg, #ff6b6b, #ee5a24); | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| margin-top: 20px; | |
| transition: transform 0.3s ease; | |
| } | |
| .retry-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="loading-container"> | |
| <h1>🎌 Anime Recommendation System</h1> | |
| <div class="spinner"></div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| <p id="status" class="status">Loading AI model and anime database...</p> | |
| <p id="substatus" class="status">This may take a few minutes on first load</p> | |
| <button id="retryBtn" class="retry-btn hidden" onclick="location.reload()">Retry</button> | |
| </div> | |
| <script> | |
| let checkCount = 0; | |
| let maxChecks = 120; // 2 dakika (120 * 1000ms) | |
| function checkSystemStatus() { | |
| fetch('/api/system_status') | |
| .then(response => response.json()) | |
| .then(data => { | |
| const statusEl = document.getElementById('status'); | |
| const substatusEl = document.getElementById('substatus'); | |
| const retryBtn = document.getElementById('retryBtn'); | |
| if (data.ready) { | |
| statusEl.textContent = 'System ready! Redirecting...'; | |
| substatusEl.textContent = ''; | |
| setTimeout(() => { | |
| window.location.href = '/'; | |
| }, 1000); | |
| } else if (data.error) { | |
| statusEl.textContent = 'System initialization failed'; | |
| substatusEl.textContent = data.error || 'Unknown error occurred'; | |
| retryBtn.classList.remove('hidden'); | |
| } else if (data.loading) { | |
| const dots = '.'.repeat((checkCount % 3) + 1); | |
| statusEl.textContent = `Loading AI model and anime database${dots}`; | |
| if (checkCount < 30) { | |
| substatusEl.textContent = 'Downloading model files...'; | |
| } else if (checkCount < 60) { | |
| substatusEl.textContent = 'Initializing neural network...'; | |
| } else { | |
| substatusEl.textContent = 'Almost ready...'; | |
| } | |
| checkCount++; | |
| if (checkCount < maxChecks) { | |
| setTimeout(checkSystemStatus, 1000); | |
| } else { | |
| statusEl.textContent = 'Loading is taking longer than expected'; | |
| substatusEl.textContent = 'Please try refreshing the page'; | |
| retryBtn.classList.remove('hidden'); | |
| } | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error checking system status:', error); | |
| checkCount++; | |
| if (checkCount < maxChecks) { | |
| setTimeout(checkSystemStatus, 2000); | |
| } else { | |
| document.getElementById('status').textContent = 'Connection error'; | |
| document.getElementById('substatus').textContent = 'Please check your internet connection and try again'; | |
| document.getElementById('retryBtn').classList.remove('hidden'); | |
| } | |
| }); | |
| } | |
| // Sayfa yüklendiğinde kontrol başlat | |
| checkSystemStatus(); | |
| </script> | |
| </body> | |
| </html> | |