feat: integrate Tesseract.js via script tag, wire Run OCR with status + avg confidence

public/styles.css

@@ -6,7 +6,7 @@ body {
 
 .center {
 	display: flex;
-	width: 100vw;
+	width: 90vw;
 	padding: 1rem 0;
 }
 
@@ -31,6 +31,14 @@ body {
 }
 
 .bottom {
+	position: fixed;
+	top: 90vh;
 	display: flex;
 	gap: 1rem;
 }
+
+button {
+	height: 5rem;
+	width: 10rem;
+	background-color: red;
+}

src/app.js

@@ -44,19 +44,52 @@ function logProgress(event) {
 }
 
 ocrButton.addEventListener("click", async () => {
-	onclick = (event) => {
-		console.log("OCR button clicked!");
-		statusEl.textContent = "OCR initializing...";
-		Tesseract.recognize(fileInput.files, {
-			logger: logProgress,
-		})
-			.then((result) => {
-				// Handle the successful OCR result
-				console.log("OCR Result:", result.data.text);
-			})
-			.catch((error) => {
-				// Handle any errors during the OCR process
-				console.error("OCR Error:", error);
-			});
-	};
+	// A) Guard: ensure a file is selected
+	const file = fileInput.files && fileInput.files[0];
+	if (!file) {
+		statusEl.textContent = "Please choose an image file first.";
+		return;
+	}
+
+	// B) Busy state on
+	ocrButton.disabled = true;
+	statusEl.textContent = "Initializing OCR…";
+
+	try {
+		// C) Run Tesseract.recognize (the key call)
+		const result = await Tesseract.recognize(file, "eng", {
+			logger: (m) => {
+				if (m && m.status) {
+					const pct =
+						typeof m.progress === "number"
+							? ` (${Math.round(m.progress * 100)}%)`
+							: "";
+					statusEl.textContent = `${m.status}${pct}`;
+				}
+			},
+		});
+
+		// D) Handle the OCR result (put text in editor, compute simple confidence)
+		const fullText = result?.data?.text || "";
+		textEditor.value = fullText;
+		const words = result?.data?.words || [];
+		const sum = words.reduce(
+			(acc, w) => acc + (typeof w.confidence === "number" ? w.confidence : 0),
+			0
+		);
+		const avg = words.length ? sum / words.length : 0;
+		statusEl.textContent = `Done (avg conf ~ ${Math.round(avg)}%)`;
+		if (avg < 70) {
+			textEditor.style.outline = "2px solid orange";
+		} else {
+			textEditor.style.outline = "";
+		}
+	} catch (e) {
+		// E) Handle errors (inside catch)
+		console.error(e);
+		statusEl.textContent = "OCR failed — see console for details.";
+	} finally {
+		// F) Reset busy state (inside finally)
+		ocrButton.disabled = false;
+	}
 });