Spaces:
Running
Running
File size: 6,123 Bytes
426ffb5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
<!DOCTYPE html>
<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>
|