Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +0 -51
templates/index.html
CHANGED
|
@@ -72,22 +72,6 @@
|
|
| 72 |
margin-bottom: 15px;
|
| 73 |
display: none;
|
| 74 |
}
|
| 75 |
-
.api-status {
|
| 76 |
-
display: inline-flex;
|
| 77 |
-
align-items: center;
|
| 78 |
-
padding: 4px 8px;
|
| 79 |
-
border-radius: 4px;
|
| 80 |
-
font-size: 12px;
|
| 81 |
-
margin-left: 8px;
|
| 82 |
-
}
|
| 83 |
-
.api-status.online {
|
| 84 |
-
background-color: #d1fae5;
|
| 85 |
-
color: #065f46;
|
| 86 |
-
}
|
| 87 |
-
.api-status.offline {
|
| 88 |
-
background-color: #fee2e2;
|
| 89 |
-
color: #b91c1c;
|
| 90 |
-
}
|
| 91 |
</style>
|
| 92 |
</head>
|
| 93 |
<body class="min-h-screen py-12 px-4">
|
|
@@ -98,12 +82,6 @@
|
|
| 98 |
<i class="fas fa-language mr-2"></i>OCR Translation
|
| 99 |
</h1>
|
| 100 |
<p class="text-gray-600">English to Hindi Translation with Image Recognition</p>
|
| 101 |
-
<div id="apiStatus" class="mt-2">
|
| 102 |
-
<span class="text-sm text-gray-500">API Status: </span>
|
| 103 |
-
<span id="apiStatusBadge" class="api-status offline">
|
| 104 |
-
<i class="fas fa-circle-notch fa-spin mr-1"></i>Checking...
|
| 105 |
-
</span>
|
| 106 |
-
</div>
|
| 107 |
</div>
|
| 108 |
|
| 109 |
<!-- Error Message Box -->
|
|
@@ -179,35 +157,6 @@
|
|
| 179 |
</div>
|
| 180 |
|
| 181 |
<script>
|
| 182 |
-
// Check API status on page load
|
| 183 |
-
window.addEventListener('DOMContentLoaded', function() {
|
| 184 |
-
checkApiStatus();
|
| 185 |
-
});
|
| 186 |
-
|
| 187 |
-
function checkApiStatus() {
|
| 188 |
-
fetch('/api-status')
|
| 189 |
-
.then(response => response.json())
|
| 190 |
-
.then(data => {
|
| 191 |
-
const statusBadge = document.getElementById('apiStatusBadge');
|
| 192 |
-
if (data.api_working) {
|
| 193 |
-
statusBadge.className = 'api-status online';
|
| 194 |
-
statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i>Online';
|
| 195 |
-
document.getElementById('translateBtn').disabled = false;
|
| 196 |
-
} else {
|
| 197 |
-
statusBadge.className = 'api-status offline';
|
| 198 |
-
statusBadge.innerHTML = '<i class="fas fa-times-circle mr-1"></i>Offline';
|
| 199 |
-
document.getElementById('translateBtn').disabled = true;
|
| 200 |
-
showError('API is not working. Please check your API key or try again later.');
|
| 201 |
-
}
|
| 202 |
-
})
|
| 203 |
-
.catch(error => {
|
| 204 |
-
const statusBadge = document.getElementById('apiStatusBadge');
|
| 205 |
-
statusBadge.className = 'api-status offline';
|
| 206 |
-
statusBadge.innerHTML = '<i class="fas fa-times-circle mr-1"></i>Error';
|
| 207 |
-
showError('Failed to check API status: ' + error.message);
|
| 208 |
-
});
|
| 209 |
-
}
|
| 210 |
-
|
| 211 |
function showError(message) {
|
| 212 |
const errorDiv = document.getElementById('errorMessage');
|
| 213 |
const errorText = document.getElementById('errorText');
|
|
|
|
| 72 |
margin-bottom: 15px;
|
| 73 |
display: none;
|
| 74 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 75 |
</style>
|
| 76 |
</head>
|
| 77 |
<body class="min-h-screen py-12 px-4">
|
|
|
|
| 82 |
<i class="fas fa-language mr-2"></i>OCR Translation
|
| 83 |
</h1>
|
| 84 |
<p class="text-gray-600">English to Hindi Translation with Image Recognition</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 85 |
</div>
|
| 86 |
|
| 87 |
<!-- Error Message Box -->
|
|
|
|
| 157 |
</div>
|
| 158 |
|
| 159 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 160 |
function showError(message) {
|
| 161 |
const errorDiv = document.getElementById('errorMessage');
|
| 162 |
const errorText = document.getElementById('errorText');
|