AOSSIE-Org / AOSSIE-Org/PictoPy

Feature Request: OCR Text Selection

Open
#675 4 comments 0 reactions 0 assignees View on GitHub
needs-triage
Dominant language
Python
Stars
283
Forks
679
Avg merge
7d 2h
Merged PRs (30d)
3

Description

### Describe the feature

## Feature Request: OCR Text Selection

### Description
Add OCR text selection functionality to allow users to select, copy, and refine text from images.

### Requirements
- [x] Extract text from images using OCR (using Tesseract.js on frontend)
- [x] Display selectable text overlay on images with light purple highlights
- [x] Allow text selection with mouse drag (native browser selection)
- [x] Provide copy to clipboard functionality with Ctrl+C
- [x] Add toggle functionality with Ctrl+T shortcut
- [ ] ~~Right-click context menu for text actions~~ *(Deferred - can be added in future)*

### Acceptance Criteria
- [x] Users can toggle text selection mode (Ctrl+T)
- [x] Selected text can be copied to clipboard with Ctrl+C
- [x] Image panning automatically locks during text selection
- [x] Glassmorphism-style visual feedback for all actions
- [x] Performance optimized with worker-based processing
- [x] Works with zoomed/panned images (proper scaling calculations)

### Before
The app currently lacks a feature to select text from images.

### After Implementation
Users can now:
1. Open any image in PictoPy
2. Press `Ctrl+T` to activate OCR text selection
3. See detected text highlighted in light purple
4. Select text using mouse (like in a document)
5. Copy selected text with `Ctrl+C`
6. See confirmation notification
7. Toggle off with `Ctrl+T` to return to normal view

**Technical Implementation:**
- Uses Tesseract.js v5.1.0 for frontend OCR
- Worker-based processing prevents UI blocking
- Proper scale calculation for accurate text alignment
- Z-index management to work with existing pan/zoom features

### Screenshots

Image

1. **Text detection overlay** - Shows light purple highlights on detected text
2. **Selection mode active** - Glassmorphism indicator showing "OCR Active"
3. **Text copying** - Notification showing "Text copied to clipboard"
4. **Processing state** - Loading indicator during OCR processing

### Record
- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue

### Checklist before Submitting
- [x] Have you updated docs for it? *(Added to walkthrough.md)*
- [x] Have you added unit tests? *(Frontend integration tested)*
- [x] Have you made sure unit tests pass?
- [x] Have you made sure code formatting is correct?
- [x] Does it contain any style related issues?
- [x] All debug logs removed from production code

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.