Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OCR to Markdown</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| margin-top: 50px; | |
| } | |
| .logo img { | |
| max-width: 200px; | |
| margin-bottom: 20px; | |
| } | |
| .upload-form { | |
| margin-top: 20px; | |
| } | |
| .button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| background-color: #45a049; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="logo"> | |
| <img src="logo.png" alt="Company Logo"> | |
| </div> | |
| <h1>OCR to Markdown</h1> | |
| <form id="upload-form" class="upload-form"> | |
| <input type="file" id="file-input" name="file" accept="image/*" required> | |
| <button type="submit" class="button">Convert</button> | |
| </form> | |
| <div id="download-link" style="margin-top: 20px;"></div> | |
| </div> | |
| <script> | |
| const form = document.getElementById("upload-form"); | |
| form.addEventListener("submit", async (e) => { | |
| e.preventDefault(); | |
| const fileInput = document.getElementById("file-input"); | |
| const formData = new FormData(); | |
| formData.append("file", fileInput.files[0]); | |
| const response = await fetch("/upload/", { | |
| method: "POST", | |
| body: formData | |
| }); | |
| const result = await response.json(); | |
| if (result.download_url) { | |
| document.getElementById("download-link").innerHTML = ` | |
| <a href="${result.download_url}" class="button" download>Download Markdown File</a> | |
| `; | |
| } else { | |
| document.getElementById("download-link").innerHTML = ` | |
| <p style="color: red;">Error: ${result.error}</p> | |
| `; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |