Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Studystone OCR Tool</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <style> | |
| body { | |
| font-family: "Segoe UI", Arial, sans-serif; | |
| background:#f4f6f9; | |
| margin:0; padding:20px; | |
| color:#222; | |
| } | |
| .container { | |
| max-width:800px; | |
| margin:20px auto; | |
| background:#fff; | |
| padding:20px; | |
| border-radius:10px; | |
| box-shadow:0 4px 10px rgba(0,0,0,0.08); | |
| } | |
| h1 { color:#1a73e8; margin:0 0 10px } | |
| input[type="file"] { margin-top:10px } | |
| button { | |
| background:#1a73e8; | |
| color:#fff; border:none; | |
| padding:10px 14px; border-radius:6px; | |
| margin-top:10px; cursor:pointer; | |
| } | |
| button:hover { opacity:.9 } | |
| textarea { | |
| width:100%; min-height:250px; | |
| margin-top:20px; padding:12px; | |
| border:1px solid #ccc; | |
| border-radius:8px; | |
| font-family:inherit; font-size:14px; | |
| line-height:1.5; | |
| resize:vertical; | |
| } | |
| #buttons { display:flex; gap:10px; margin-top:10px } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Azure OCR Extractor</h1> | |
| <input id="fileInput" type="file" accept=".png,.jpg,.jpeg,.pdf" /> | |
| <div id="buttons"> | |
| <button id="uploadBtn">Upload & Extract</button> | |
| <button id="copyBtn" style="background:#28a745">Copy Text</button> | |
| <button id="downloadBtn" style="background:#6c63ff">Download TXT</button> | |
| </div> | |
| <div id="status"></div> | |
| <textarea id="ocrTextarea" placeholder="Extracted OCR text will appear here..."></textarea> | |
| </div> | |
| <script> | |
| const fileInput = document.getElementById("fileInput"); | |
| const uploadBtn = document.getElementById("uploadBtn"); | |
| const statusEl = document.getElementById("status"); | |
| const ocrTextarea = document.getElementById("ocrTextarea"); | |
| const copyBtn = document.getElementById("copyBtn"); | |
| const downloadBtn = document.getElementById("downloadBtn"); | |
| uploadBtn.addEventListener("click", async () => { | |
| if (!fileInput.files.length) { | |
| alert("Please choose a file."); | |
| return; | |
| } | |
| statusEl.textContent = "Processing OCR..."; | |
| const fd = new FormData(); | |
| fd.append("file", fileInput.files[0]); | |
| try { | |
| const r = await fetch("/upload", { method:"POST", body: fd }); | |
| const j = await r.json(); | |
| if (!r.ok) { | |
| statusEl.textContent = "OCR failed: " + (j.error || j.details); | |
| return; | |
| } | |
| ocrTextarea.value = j.text || ""; | |
| statusEl.textContent = "Done."; | |
| } catch (err) { | |
| statusEl.textContent = "Error: " + err.message; | |
| } | |
| }); | |
| copyBtn.addEventListener("click", () => { | |
| ocrTextarea.select(); | |
| document.execCommand("copy"); | |
| statusEl.textContent = "Text copied!"; | |
| }); | |
| downloadBtn.addEventListener("click", () => { | |
| const text = ocrTextarea.value; | |
| const blob = new Blob([text], { type: "text/plain" }); | |
| const link = document.createElement("a"); | |
| link.href = URL.createObjectURL(blob); | |
| link.download = "ocr_text.txt"; | |
| link.click(); | |
| statusEl.textContent = "Text file downloaded."; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |