Screen Clipping Tool - OCR Text Extraction

A powerful screen clipping tool that allows you to take screenshots, paste them into a web browser, and automatically extract text using OCR. The extracted text is then displayed as Markdown and can be saved to a Supabase database for easy access and organization.

Live Demo: https://lnh8imcwpqy3.manus.space

Key Features

• Drag & Drop and Paste Functionality: Easily upload images by dragging and dropping them into the browser or pasting them from your clipboard (Ctrl+V).
• Automatic OCR Processing: Uses a powerful backend with Tesseract OCR to automatically extract text from your images.
• Markdown Conversion: Converts the extracted text into clean, readable Markdown format.
• Database Storage: Saves all extractions to a Supabase PostgreSQL database with comprehensive metadata.
• Dark Theme with CMYK Colors: A beautiful and professional user interface with a dark theme and CMYK-inspired colors.
• History & Gallery View: Browse and search your previous extractions in a gallery view.
• Rich Metadata Collection: Captures and stores detailed metadata for each extraction, including image dimensions, file size, OCR confidence, and processing time.
• Auto-Categorization & Tagging: Automatically categorizes and tags your extractions based on their content (e.g., code, receipt, document).

Technologies Used

• Frontend: React, Vite, Tailwind CSS
• Backend: Flask, Python
• OCR: Tesseract OCR
• Database: Supabase (PostgreSQL)
• Deployment: Manus Platform

Getting Started

Prerequisites

• Node.js and pnpm
• Python 3.11+
• Tesseract OCR
• A Supabase account

Installation

1. Clone the repository:

   git clone <repository-url>
   cd screen-clipping-tool

2. Install frontend dependencies:

   pnpm install

3. Install backend dependencies:

   cd ocr-backend
   python3 -m venv venv
   source venv/bin/activate
   pip install -r requirements.txt

4. Set up Supabase:

   • Create a new project on Supabase.
   • Run the SQL schema from database_schema.sql in the SQL Editor.
   • Get your project URL and anon key and add them to ocr-backend/src/routes/ocr.py.

Running the Application

1. Start the backend server:

   cd ocr-backend
   source venv/bin/activate
   python src/main.py

2. Start the frontend development server:

   cd ..
   pnpm run dev

The application will be available at http://localhost:5173.

Deployment

The application is deployed on the Manus Platform. The frontend is built for production and served by the Flask backend. The deployment process is automated through the Manus CLI.

Project Structure

screen-clipping-tool/
├── ocr-backend/         # Flask backend
│   ├── src/
│   │   ├── routes/      # API routes
│   │   ├── static/      # Built frontend files
│   │   └── main.py      # Flask app entry point
│   └── requirements.txt
├── src/                 # React frontend
│   ├── components/      # React components
│   ├── lib/             # Helper libraries
│   └── App.jsx          # Main App component
├── public/
└── README.md

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License.

---

This project was built with the help of Manus, an autonomous AI agent. Learn more about Manus