Spaces:
Sleeping
Sleeping
File size: 3,257 Bytes
6fe93b3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!doctype html>
<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>
|