TristanTJT/logbook-digitizer-proto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add status display and progress logging for OCR functionality

Browse Source
This commit is contained in:
TristanEDU 2025-09-09 23:20:38 +00:00
parent b85cfe3e34
commit 1a3bebb2a4
4 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,5 @@
{
"cSpell.words": [
"Tesseract"
]
}

4
public/index.html
View File

@ -5,12 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Proto logbook analyzer UI</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/tesseract.js@5/dist/tesseract.min.js"></script>
</head>
<body>
<div class="top">
<h1>Proto logbook analyzer UI</h1>
<label for="myfile">Select a file:</label>
<input type="file" id="fileInput" name="myfile" multiple />
<input type="file" id="fileInput" name="myfile" />
</div>
<div class="center">
@ -28,6 +29,7 @@
<div class="bottom">
<button id="btnRunOCR">Run OCR</button>
<button id="btnExport">Export JSON</button>
<div id="status"></div>
</div>
<script src="/src/app.js"></script>
</body>

7
public/styles.css
View File

@ -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;
}

28
src/app.js
View File

@ -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);
});
};
});