Spaces:

sikeaditya
/

OCRTranslation

Sleeping

App Files Files Community

sikeaditya commited on May 17, 2025

Commit

41f3e48

verified ·

1 Parent(s): 33b9630

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +304 -212

templates/index.html CHANGED Viewed

@@ -1,213 +1,305 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OCR Translation - English to Hindi</title>
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        body {
-            font-family: 'Poppins', sans-serif;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        }
-        .loader {
-            border: 3px solid #f3f3f3;
-            border-radius: 50%;
-            border-top: 3px solid #3498db;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            display: none;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .drop-zone {
-            border: 2px dashed #cbd5e0;
-            transition: all 0.3s ease;
-        }
-        .drop-zone:hover {
-            border-color: #3498db;
-            background-color: #f8fafc;
-        }
-        .result-box {
-            background: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(10px);
-            transition: all 0.3s ease;
-        }
-        .result-box:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-        }
-        .custom-file-input::-webkit-file-upload-button {
-            visibility: hidden;
-            width: 0;
-        }
-        .custom-file-input::before {
-            content: 'Choose File';
-            display: inline-block;
-            background: #3498db;
-            color: white;
-            padding: 8px 16px;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .translate-btn {
-            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
-            transition: all 0.3s ease;
-        }
-        .translate-btn:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
-        }
-    </style>
-</head>
-<body class="min-h-screen py-12 px-4">
-    <div class="container mx-auto max-w-4xl">
-        <!-- Header -->
-        <div class="text-center mb-12">
-            <h1 class="text-4xl font-bold text-gray-800 mb-3">
-                <i class="fas fa-language mr-2"></i>OCR Translation
-            </h1>
-            <p class="text-gray-600">English to Hindi Translation with Image Recognition</p>
-        </div>
-        <!-- Main Content -->
-        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
-            <!-- Upload Section -->
-            <div class="drop-zone rounded-lg p-8 text-center mb-6">
-                <div class="mb-4">
-                    <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
-                    <h3 class="text-lg font-semibold text-gray-700 mb-2">Upload Image</h3>
-                    <p class="text-sm text-gray-500 mb-4">Support for PNG, JPG, JPEG, GIF, BMP</p>
-                </div>
-                <input type="file"
-                       id="imageInput"
-                       accept="image/*"
-                       class="custom-file-input w-full mb-4 cursor-pointer">
-                <button onclick="processImage()"
-                        class="translate-btn w-full py-3 px-6 text-white rounded-lg font-medium flex items-center justify-center">
-                    <i class="fas fa-sync-alt mr-2"></i>
-                    <span>Translate Now</span>
-                </button>
-                <div id="loader" class="loader mx-auto mt-4"></div>
-            </div>
-            <!-- Preview Section -->
-            <div id="previewSection" class="hidden mb-6">
-                <h3 class="text-lg font-semibold text-gray-700 mb-3">Image Preview</h3>
-                <img id="imagePreview" class="max-w-full h-auto rounded-lg shadow" src="" alt="Preview">
-            </div>
-            <!-- Results Section -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <!-- Original Text -->
-                <div class="result-box rounded-xl p-6">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-lg font-semibold text-gray-700">
-                            <i class="fas fa-file-alt mr-2"></i>Extracted Text
-                        </h3>
-                        <button onclick="copyText('extractedText')" class="text-blue-500 hover:text-blue-600">
-                            <i class="far fa-copy"></i>
-                        </button>
-                    </div>
-                    <div id="extractedText" class="p-4 bg-gray-50 rounded-lg min-h-[150px] text-gray-700">
-                        <!-- Extracted text will appear here -->
-                    </div>
-                </div>
-                <!-- Translated Text -->
-                <div class="result-box rounded-xl p-6">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-lg font-semibold text-gray-700">
-                            <i class="fas fa-language mr-2"></i>Hindi Translation
-                        </h3>
-                        <button onclick="copyText('translatedText')" class="text-blue-500 hover:text-blue-600">
-                            <i class="far fa-copy"></i>
-                        </button>
-                    </div>
-                    <div id="translatedText" class="p-4 bg-gray-50 rounded-lg min-h-[150px] text-gray-700"
-                         style="font-family: 'Noto Sans Devanagari', sans-serif;">
-                        <!-- Translated text will appear here -->
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Image preview functionality
-        document.getElementById('imageInput').addEventListener('change', function(e) {
-            const file = e.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    document.getElementById('imagePreview').src = e.target.result;
-                    document.getElementById('previewSection').classList.remove('hidden');
-                }
-                reader.readAsDataURL(file);
-            }
-        });
-        // Copy text functionality
-        function copyText(elementId) {
-            const text = document.getElementById(elementId).textContent;
-            navigator.clipboard.writeText(text).then(() => {
-                // Show a brief notification
-                const element = document.getElementById(elementId);
-                const originalBackground = element.style.backgroundColor;
-                element.style.backgroundColor = '#e8f5e9';
-                setTimeout(() => {
-                    element.style.backgroundColor = originalBackground;
-                }, 500);
-            });
-        }
-        function processImage() {
-            const fileInput = document.getElementById('imageInput');
-            const loader = document.getElementById('loader');
-            const extractedTextDiv = document.getElementById('extractedText');
-            const translatedTextDiv = document.getElementById('translatedText');
-            if (!fileInput.files[0]) {
-                alert('Please select an image first');
-                return;
-            }
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            // Show loader and clear previous results
-            loader.style.display = 'block';
-            extractedTextDiv.textContent = '';
-            translatedTextDiv.textContent = '';
-            fetch('/upload', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.error) {
-                    throw new Error(data.error);
-                }
-                extractedTextDiv.textContent = data.original_text;
-                translatedTextDiv.textContent = data.translated_text;
-            })
-            .catch(error => {
-                console.error('Error:', error);
-                alert(error.message || 'An error occurred during processing');
-            })
-            .finally(() => {
-                loader.style.display = 'none';
-            });
-        }
-    </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OCR Translation - English to Hindi</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
+        .loader {
+            border: 3px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 3px solid #3498db;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .drop-zone {
+            border: 2px dashed #cbd5e0;
+            transition: all 0.3s ease;
+        }
+        .drop-zone:hover {
+            border-color: #3498db;
+            background-color: #f8fafc;
+        }
+        .result-box {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+        .result-box:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+        }
+        .custom-file-input::-webkit-file-upload-button {
+            visibility: hidden;
+            width: 0;
+        }
+        .custom-file-input::before {
+            content: 'Choose File';
+            display: inline-block;
+            background: #3498db;
+            color: white;
+            padding: 8px 16px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .translate-btn {
+            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+            transition: all 0.3s ease;
+        }
+        .translate-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+        }
+        .error-message {
+            background-color: #fee2e2;
+            border: 1px solid #ef4444;
+            color: #b91c1c;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 15px;
+            display: none;
+        }
+        .api-status {
+            display: inline-flex;
+            align-items: center;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            margin-left: 8px;
+        }
+        .api-status.online {
+            background-color: #d1fae5;
+            color: #065f46;
+        }
+        .api-status.offline {
+            background-color: #fee2e2;
+            color: #b91c1c;
+        }
+    </style>
+</head>
+<body class="min-h-screen py-12 px-4">
+    <div class="container mx-auto max-w-4xl">
+        <!-- Header -->
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-3">
+                <i class="fas fa-language mr-2"></i>OCR Translation
+            </h1>
+            <p class="text-gray-600">English to Hindi Translation with Image Recognition</p>
+            <div id="apiStatus" class="mt-2">
+                <span class="text-sm text-gray-500">API Status: </span>
+                <span id="apiStatusBadge" class="api-status offline">
+                    <i class="fas fa-circle-notch fa-spin mr-1"></i>Checking...
+                </span>
+            </div>
+        </div>
+        <!-- Error Message Box -->
+        <div id="errorMessage" class="error-message mb-4">
+            <i class="fas fa-exclamation-circle mr-2"></i>
+            <span id="errorText">Error message will appear here</span>
+        </div>
+        <!-- Main Content -->
+        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
+            <!-- Upload Section -->
+            <div class="drop-zone rounded-lg p-8 text-center mb-6">
+                <div class="mb-4">
+                    <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
+                    <h3 class="text-lg font-semibold text-gray-700 mb-2">Upload Image</h3>
+                    <p class="text-sm text-gray-500 mb-4">Support for PNG, JPG, JPEG, GIF, BMP</p>
+                </div>
+                <input type="file"
+                       id="imageInput"
+                       accept="image/*"
+                       class="custom-file-input w-full mb-4 cursor-pointer">
+                <button id="translateBtn" onclick="processImage()"
+                        class="translate-btn w-full py-3 px-6 text-white rounded-lg font-medium flex items-center justify-center">
+                    <i class="fas fa-sync-alt mr-2"></i>
+                    <span>Translate Now</span>
+                </button>
+                <div id="loader" class="loader mx-auto mt-4"></div>
+            </div>
+            <!-- Preview Section -->
+            <div id="previewSection" class="hidden mb-6">
+                <h3 class="text-lg font-semibold text-gray-700 mb-3">Image Preview</h3>
+                <img id="imagePreview" class="max-w-full h-auto rounded-lg shadow" src="" alt="Preview">
+            </div>
+            <!-- Results Section -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Original Text -->
+                <div class="result-box rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-lg font-semibold text-gray-700">
+                            <i class="fas fa-file-alt mr-2"></i>Extracted Text
+                        </h3>
+                        <button onclick="copyText('extractedText')" class="text-blue-500 hover:text-blue-600">
+                            <i class="far fa-copy"></i>
+                        </button>
+                    </div>
+                    <div id="extractedText" class="p-4 bg-gray-50 rounded-lg min-h-[150px] text-gray-700">
+                        <!-- Extracted text will appear here -->
+                    </div>
+                </div>
+                <!-- Translated Text -->
+                <div class="result-box rounded-xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-lg font-semibold text-gray-700">
+                            <i class="fas fa-language mr-2"></i>Hindi Translation
+                        </h3>
+                        <button onclick="copyText('translatedText')" class="text-blue-500 hover:text-blue-600">
+                            <i class="far fa-copy"></i>
+                        </button>
+                    </div>
+                    <div id="translatedText" class="p-4 bg-gray-50 rounded-lg min-h-[150px] text-gray-700"
+                         style="font-family: 'Noto Sans Devanagari', sans-serif;">
+                        <!-- Translated text will appear here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Check API status on page load
+        window.addEventListener('DOMContentLoaded', function() {
+            checkApiStatus();
+        });
+        function checkApiStatus() {
+            fetch('/api-status')
+                .then(response => response.json())
+                .then(data => {
+                    const statusBadge = document.getElementById('apiStatusBadge');
+                    if (data.api_working) {
+                        statusBadge.className = 'api-status online';
+                        statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i>Online';
+                        document.getElementById('translateBtn').disabled = false;
+                    } else {
+                        statusBadge.className = 'api-status offline';
+                        statusBadge.innerHTML = '<i class="fas fa-times-circle mr-1"></i>Offline';
+                        document.getElementById('translateBtn').disabled = true;
+                        showError('API is not working. Please check your API key or try again later.');
+                    }
+                })
+                .catch(error => {
+                    const statusBadge = document.getElementById('apiStatusBadge');
+                    statusBadge.className = 'api-status offline';
+                    statusBadge.innerHTML = '<i class="fas fa-times-circle mr-1"></i>Error';
+                    showError('Failed to check API status: ' + error.message);
+                });
+        }
+        function showError(message) {
+            const errorDiv = document.getElementById('errorMessage');
+            const errorText = document.getElementById('errorText');
+            errorText.textContent = message;
+            errorDiv.style.display = 'block';
+        }
+        function hideError() {
+            document.getElementById('errorMessage').style.display = 'none';
+        }
+        // Image preview functionality
+        document.getElementById('imageInput').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    document.getElementById('imagePreview').src = e.target.result;
+                    document.getElementById('previewSection').classList.remove('hidden');
+                }
+                reader.readAsDataURL(file);
+                hideError(); // Hide any previous errors
+            }
+        });
+        // Copy text functionality
+        function copyText(elementId) {
+            const text = document.getElementById(elementId).textContent;
+            navigator.clipboard.writeText(text).then(() => {
+                // Show a brief notification
+                const element = document.getElementById(elementId);
+                const originalBackground = element.style.backgroundColor;
+                element.style.backgroundColor = '#e8f5e9';
+                setTimeout(() => {
+                    element.style.backgroundColor = originalBackground;
+                }, 500);
+            });
+        }
+        function processImage() {
+            const fileInput = document.getElementById('imageInput');
+            const loader = document.getElementById('loader');
+            const extractedTextDiv = document.getElementById('extractedText');
+            const translatedTextDiv = document.getElementById('translatedText');
+            if (!fileInput.files[0]) {
+                showError('Please select an image first');
+                return;
+            }
+            const formData = new FormData();
+            formData.append('file', fileInput.files[0]);
+            // Hide previous errors
+            hideError();
+            // Show loader and clear previous results
+            loader.style.display = 'block';
+            extractedTextDiv.textContent = '';
+            translatedTextDiv.textContent = '';
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(data => {
+                        throw new Error(data.error || `Server error: ${response.status}`);
+                    });
+                }
+                return response.json();
+            })
+            .then(data => {
+                extractedTextDiv.textContent = data.original_text;
+                translatedTextDiv.textContent = data.translated_text;
+                // Check if the response contains error messages
+                if (data.original_text && data.original_text.startsWith('Could not extract text')) {
+                    showError(data.original_text);
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                showError(error.message || 'An unknown error occurred');
+                extractedTextDiv.textContent = 'Error: Could not process image.';
+                translatedTextDiv.textContent = 'Translation unavailable due to processing error.';
+            })
+            .finally(() => {
+                loader.style.display = 'none';
+            });
+        }
+    </script>
+</body>
 </html>