On-Device-OCR via ML Kit in Image-Preview-Flow integrieren (v0.6.0) #425

New issue

Closed

opened 2026-05-28 17:49:46 +02:00 by pm-bot · 0 comments

pm-bot commented

2026-05-28 17:49:46 +02:00

Collaborator

Kontext

#423/PR #424 hat ML Kit Text Recognition v2 als On-Device-OCR-Stack validiert (Spike-Screen mrrmlab:///ocr-spike, handschriftliches „Oregano“ → CER ≈ 0.28). Jetzt produktiv in den User-Flow integrieren — Ziel: v0.6.0-Release.

Why

Privatsphäre: Bilder verlassen das Gerät nicht
Latenz: ~500 ms on-device vs Netzwerk + Server-OCR
Offline-Fähigkeit: Einkaufszettel scannen ohne Verbindung
Server-Last: weniger Bild-Uploads zu EasyOCR

Status quo

apps/mobile/app/lists/[listId]/image-preview.tsx → parseImage.mutate({ file, model }) → Server-OCR (EasyOCR/de)
OCR_MODELS in packages/feature-shopping-list/src/components/shopping-list-screen.tsx enthält bisher nur easyocr/de
ML Kit ist nur als hidden Spike-Screen erreichbar

Scope v0.6.0 (minimal pragmatisch)

Mobile:

OCR_MODELS um mlkit/de erweitern (Label „Deutsch (on-device)“, als Default setzen)
image-preview.tsx: bei model === mlkit/de on-device-Pfad nehmen:
- ocrService.recognize(uri) → Plaintext
- Plaintext an neuen /lists/parse-text-Endpoint → Items zurück → Review-Screen
Loading-/Error-States parallel zum Server-Pfad

Backend:
4. Neuer Endpoint POST /lists/parse-text (NestJS): Body { text: string }, Response { items: ShoppingItem[] }. Reuse der existierenden Item-Extraktions-Logik (parseItems), nur ohne den OCR-Schritt davor.
5. API-Client: parseShoppingListText(text) neben dem bestehenden parseShoppingListImage
6. Hook in feature-shopping-list: useParseShoppingListText analog zu useParseShoppingListImage

Acceptance Criteria

User wählt im ShoppingListScreen „Deutsch (on-device)“ als OCR-Modell
Image-Preview → „Analysieren“ macht alles on-device (OCR) + Server-NLP (Item-Parsing)
Funktioniert offline für den OCR-Teil
Spike-Screen ocr-spike.tsx entfernt (Route + File)
Acceptance-Test: 5-Wort Sample-Liste (Milch, Brot, Käse, Tomaten, Müsli) → ≥ 4 von 5 Items korrekt im Review-Screen

Out-of-Scope (Folge-Stories)

Vollständig on-device (Item-Parsing via llama.rn): heavier scope, eigener Spike
iOS-Variante
Fallback-UX wenn ML Kit leeren Text liefert

Release

Nach Merge: v0.6.0 cutten. Changelog: „On-Device-OCR — schneller und privater scannen, funktioniert offline.“

Verwandt

Vorgänger: #423 (Spike), PR #424 (gemerged)
Verworfen-Pfad: #421 (TrOCR), PR #422

## Kontext #423/PR #424 hat ML Kit Text Recognition v2 als On-Device-OCR-Stack validiert (Spike-Screen `mrrmlab:///ocr-spike`, handschriftliches „Oregano“ → CER ≈ 0.28). Jetzt produktiv in den User-Flow integrieren — Ziel: v0.6.0-Release. ## Why - **Privatsphäre:** Bilder verlassen das Gerät nicht - **Latenz:** ~500 ms on-device vs Netzwerk + Server-OCR - **Offline-Fähigkeit:** Einkaufszettel scannen ohne Verbindung - **Server-Last:** weniger Bild-Uploads zu EasyOCR ## Status quo - `apps/mobile/app/lists/[listId]/image-preview.tsx` → `parseImage.mutate({ file, model })` → Server-OCR (EasyOCR/de) - `OCR_MODELS` in `packages/feature-shopping-list/src/components/shopping-list-screen.tsx` enthält bisher nur `easyocr/de` - ML Kit ist nur als hidden Spike-Screen erreichbar ## Scope v0.6.0 (minimal pragmatisch) **Mobile:** 1. `OCR_MODELS` um `mlkit/de` erweitern (Label „Deutsch (on-device)“, als Default setzen) 2. `image-preview.tsx`: bei `model === mlkit/de` on-device-Pfad nehmen: - `ocrService.recognize(uri)` → Plaintext - Plaintext an neuen `/lists/parse-text`-Endpoint → Items zurück → Review-Screen 3. Loading-/Error-States parallel zum Server-Pfad **Backend:** 4. Neuer Endpoint `POST /lists/parse-text` (NestJS): Body `{ text: string }`, Response `{ items: ShoppingItem[] }`. Reuse der existierenden Item-Extraktions-Logik (`parseItems`), nur ohne den OCR-Schritt davor. 5. API-Client: `parseShoppingListText(text)` neben dem bestehenden `parseShoppingListImage` 6. Hook in `feature-shopping-list`: `useParseShoppingListText` analog zu `useParseShoppingListImage` ## Acceptance Criteria - [ ] User wählt im ShoppingListScreen „Deutsch (on-device)“ als OCR-Modell - [ ] Image-Preview → „Analysieren“ macht alles on-device (OCR) + Server-NLP (Item-Parsing) - [ ] Funktioniert offline für den OCR-Teil - [ ] Spike-Screen `ocr-spike.tsx` entfernt (Route + File) - [ ] Acceptance-Test: 5-Wort Sample-Liste (Milch, Brot, Käse, Tomaten, Müsli) → ≥ 4 von 5 Items korrekt im Review-Screen ## Out-of-Scope (Folge-Stories) - Vollständig on-device (Item-Parsing via `llama.rn`): heavier scope, eigener Spike - iOS-Variante - Fallback-UX wenn ML Kit leeren Text liefert ## Release Nach Merge: v0.6.0 cutten. Changelog: „On-Device-OCR — schneller und privater scannen, funktioniert offline.“ ## Verwandt - Vorgänger: #423 (Spike), PR #424 (gemerged) - Verworfen-Pfad: #421 (TrOCR), PR #422