AOSSIE-Org / AOSSIE-Org/PictoPy

Feature Request: OCR Text Selection

未關閉
#675 4 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
needs-triage
主要語言
Python
星號
283
分支
679
平均合併
7 天 2 小時
30 天內合併 PR
3

描述

### 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

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。