Vibe Coding and deploying an OCR app using ChatGPT and GitHub Pages (for free)

Let's Vibe code a single page OCR application using ChatGPT and deploy the app using GitHub Pages, all for free.

Optical Character Recognition will help us either copy and image or drag and drop it and have the Tesseract OCR JavaScript library detect any text found on the image.

Demo: https://in-tech-gration.github.io/onl...

Source code: https://github.com/in-tech-gration/on...

==========================
ChatGPT Prompts (step-by-step)
==========================

v1.0 (Paste Image & Display Image)

Create an HTML/JS page that allows the user to paste image data into a box (copied by right click on an image in another Tab) and display that image data in an image or canvas element.

v2.0 (Run OCR on the loaded image + copy text)

Now have a button load and run Tesseract js via a CDN and do an OCR on that image and display it in another HTML textarea element that the user can click a copy icon and grab it

v3.0 (OCR via Selection)

OK. Now one more thing. Allow the user to draw a rectangle around the image displayed (after it was copied) so that the OCR can be selectively done on a specific area of the image. There should be an Run OCR button to run OCR on the whole image or the user can draw and then select Run OCR on selection.

v4.0 (Fix Canvas Overflow)

Make sure that the canvas has a width of 100% so that it does not overflow the screen. Make sure that the drawing rectangle selector works accordingly.

v5.0 (Load via URL)

Add an input element that accepts the URL of an image and tries to dynamically load the image to the canvas to be OCR-ed. Display a red alert if there's a CORS issue while trying to fetch the image and display it on the canvas.

v6.0 (Drag and Drop)

One last thing. Add the capability for the user to be able to drag and drop an image file directly into the Paste box.

v7.0 Neuromorphic UI

Can you give the UI an awesome Neuromorphic look and style?

=======================
REFERENCES & RESOURCES
=======================

Canvas API: https://developer.mozilla.org/en-US/d...
Tesseract.js Library for OCR: https://tesseract.projectnaptha.com
Cross-Origin Resource Sharing (CORS): https://developer.mozilla.org/en-US/d...
Create a new Codepen: Type 'pen.new' in Browser's address bar
The page used for testing the Twitter images: https://think-like-a-git.net/