Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Smart OCR API Test</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f5f5f5; | |
| } | |
| .container { | |
| background: white; | |
| padding: 30px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| color: #333; | |
| text-align: center; | |
| } | |
| .upload-section { | |
| margin: 20px 0; | |
| padding: 20px; | |
| border: 2px dashed #ddd; | |
| border-radius: 8px; | |
| text-align: center; | |
| } | |
| input[type="file"] { | |
| margin: 10px 0; | |
| } | |
| button { | |
| background: #007bff; | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background: #0056b3; | |
| } | |
| button:disabled { | |
| background: #ccc; | |
| cursor: not-allowed; | |
| } | |
| .result { | |
| margin: 20px 0; | |
| padding: 15px; | |
| background: #f8f9fa; | |
| border-radius: 4px; | |
| white-space: pre-wrap; | |
| font-family: monospace; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .error { | |
| background: #f8d7da; | |
| color: #721c24; | |
| border: 1px solid #f5c6cb; | |
| } | |
| .success { | |
| background: #d4edda; | |
| color: #155724; | |
| border: 1px solid #c3e6cb; | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| .spinner { | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #007bff; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 2s linear infinite; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🧠 Smart OCR API Test</h1> | |
| <div class="upload-section"> | |
| <h3>Upload Invoice Image</h3> | |
| <p>Supported formats: JPG, PNG, BMP, TIFF</p> | |
| <input type="file" id="fileInput" accept=".jpg,.jpeg,.png,.bmp,.tiff,.tif"> | |
| <br> | |
| <button onclick="processFile()">Process OCR</button> | |
| </div> | |
| <div class="loading" id="loading"> | |
| <div class="spinner"></div> | |
| <p>Processing your invoice... This may take a few moments.</p> | |
| </div> | |
| <div id="result"></div> | |
| </div> | |
| <script> | |
| async function processFile() { | |
| const fileInput = document.getElementById('fileInput'); | |
| const file = fileInput.files[0]; | |
| if (!file) { | |
| alert('Please select a file first'); | |
| return; | |
| } | |
| const loading = document.getElementById('loading'); | |
| const result = document.getElementById('result'); | |
| const button = document.querySelector('button'); | |
| // Show loading state | |
| loading.style.display = 'block'; | |
| result.innerHTML = ''; | |
| button.disabled = true; | |
| try { | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| formData.append('output_format', 'json'); | |
| const response = await fetch('/ocr/process', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| result.innerHTML = `<div class="result success"> | |
| <strong>✅ OCR Processing Successful!</strong> | |
| <strong>Summary:</strong> | |
| • Status: ${data.status} | |
| • Pipeline Version: ${data.pipeline_version} | |
| • Input File: ${data.input_file} | |
| • OCR Confidence: ${data.ocr_confidence?.toFixed(2) || 'N/A'} | |
| • Lines Detected: ${data.lines_detected || 'N/A'} | |
| • Processing Time: ${data.elapsed_sec}s | |
| <strong>Extracted Data:</strong> | |
| ${JSON.stringify(data.data, null, 2)} | |
| </div>`; | |
| } else { | |
| result.innerHTML = `<div class="result error"> | |
| <strong>❌ Error:</strong> | |
| ${data.detail || 'Unknown error occurred'} | |
| </div>`; | |
| } | |
| } catch (error) { | |
| result.innerHTML = `<div class="result error"> | |
| <strong>❌ Network Error:</strong> | |
| ${error.message} | |
| </div>`; | |
| } finally { | |
| loading.style.display = 'none'; | |
| button.disabled = false; | |
| } | |
| } | |
| // Allow drag & drop | |
| const uploadSection = document.querySelector('.upload-section'); | |
| uploadSection.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| uploadSection.style.backgroundColor = '#e3f2fd'; | |
| }); | |
| uploadSection.addEventListener('dragleave', () => { | |
| uploadSection.style.backgroundColor = ''; | |
| }); | |
| uploadSection.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadSection.style.backgroundColor = ''; | |
| const files = e.dataTransfer.files; | |
| if (files.length > 0) { | |
| document.getElementById('fileInput').files = files; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |