Skip to content

Add single-page Image & PDF OCR extractor (Tesseract.js + PDF.js)#1

Open
maddix123 wants to merge 1 commit into
mainfrom
codex/create-single-file-text-extraction-app
Open

Add single-page Image & PDF OCR extractor (Tesseract.js + PDF.js)#1
maddix123 wants to merge 1 commit into
mainfrom
codex/create-single-file-text-extraction-app

Conversation

@maddix123

Copy link
Copy Markdown
Owner

Motivation

  • Replace the placeholder JSON file with a usable single-file web app that extracts text from images and PDFs entirely in the browser.
  • Provide a simple UX with drag-and-drop / file browse, preview, status updates, and copy-to-clipboard for quick manual OCR tasks.
  • Use client-side libraries to avoid server-side processing by leveraging Tesseract.js for OCR and pdfjs-dist for PDF rendering.

Description

  • Replaced index.html contents with a complete HTML/CSS/JS single-page app that implements the OCR UI and flows.
  • Added CDN imports for pdfjs-dist and tesseract.js and implemented extractFromImage, extractFromPdf, and extractText functions to perform OCR on images and each PDF page.
  • Implemented drag-and-drop and file input handling, image and first-page PDF preview rendering via canvas or img, and UI controls for Extract, Clear, and Copy to Clipboard.
  • Added status messaging and progress updates, and stitched per-page PDF results with separators for multi-page PDFs.

Testing

  • Launched a local static server with python -m http.server 8000, which started serving the app successfully.
  • Attempted an automated screenshot run with Playwright (mcp__browser_tools__run_playwright_script), but the Chromium process crashed so the capture failed.
  • No unit tests were added or run for this change; manual/interactive testing is expected in a browser environment.

Codex Task

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8207f7c5a3

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread index.html
Comment on lines +281 to +283
const renderPdfPreview = async (file) => {
const arrayBuffer = await file.arrayBuffer();
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Configure pdf.js worker before calling getDocument

Because the page loads pdfjs-dist from a CDN but never sets pdfjsLib.GlobalWorkerOptions.workerSrc, pdfjsLib.getDocument(...) can fail in common browser setups with the “No GlobalWorkerOptions.workerSrc specified” / worker load error, which means PDF previews and OCR never run. This regression only shows up for PDF uploads (images still work), but in that scenario the promise in renderPdfPreview and extractFromPdf rejects before any pages render, leaving users stuck without an actionable status update.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant