Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>OCR Application</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Bootstrap 5 --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Google Font --> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> | |
| <!-- Custom Styles --> | |
| <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <h1 class="mt-4">OCR with PaddleOCR</h1> | |
| <form id="upload-form" method="post" enctype="multipart/form-data" class="upload-form mx-auto"> | |
| <input type="file" name="image" accept="image/*" class="form-control mb-3" required> | |
| <button type="submit" class="btn btn-primary">Upload & Extract Text</button> | |
| </form> | |
| <div id="spinner" class="d-none"> | |
| <div class="spinner-border text-primary" role="status"> | |
| <span class="visually-hidden">Processing...</span> | |
| </div> | |
| </div> | |
| {% if filename %} | |
| <div class="preview mt-4"> | |
| <h4>Uploaded Image</h4> | |
| <img id="result-img" src="{{ url_for('uploaded_file', filename=filename) }}" alt="Uploaded Image"> | |
| </div> | |
| {% endif %} | |
| {% if extracted_text %} | |
| <div class="output mt-4"> | |
| <h4>Extracted Text</h4> | |
| <pre id="extracted-text">{{ extracted_text }}</pre> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <script> | |
| document.getElementById('upload-form').onsubmit = () => { | |
| document.getElementById('spinner').classList.remove('d-none'); | |
| }; | |
| </script> | |
| </body> | |
| </html> | |