From 1a3bebb2a49715a0c419edd2c1452eff04c88f3c Mon Sep 17 00:00:00 2001 From: TristanEDU Date: Tue, 9 Sep 2025 23:20:38 +0000 Subject: [PATCH] Add status display and progress logging for OCR functionality --- .vscode/settings.json | 5 +++++ public/index.html | 4 +++- public/styles.css | 7 ++++++- src/app.js | 28 ++++++++++++++++++++++++++++ 4 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c203b36 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "Tesseract" + ] +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 2cf541c..6e6e846 100644 --- a/public/index.html +++ b/public/index.html @@ -5,12 +5,13 @@ Proto logbook analyzer UI +

Proto logbook analyzer UI

- +
@@ -28,6 +29,7 @@
+
diff --git a/public/styles.css b/public/styles.css index 8febcd7..8724680 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,5 +1,5 @@ body { - width: 100vw; + width: 98vw; display: flex; flex-direction: column; } @@ -29,3 +29,8 @@ body { resize: vertical; box-sizing: border-box; } + +.bottom { + display: flex; + gap: 1rem; +} diff --git a/src/app.js b/src/app.js index c555e28..7269db0 100644 --- a/src/app.js +++ b/src/app.js @@ -12,6 +12,8 @@ const imageTypes = [ "image/svg+xml", "image/tiff", ]; +const statusEl = document.getElementById("status"); +// const stateOfStatus = document.getElementById("status"); console.log( "DOM wired:", @@ -32,3 +34,29 @@ fileInput.onchange = () => { } } }; + +if (ocrButton === true) { + stateOfStatus.textContent = "Waiting for files to analyze..."; +} + +function logProgress(event) { + console.log(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); + }); + }; +});