Pre-Crop UX: User markiert handschriftlichen Bereich vor OCR #427

New issue

Closed

opened 2026-05-28 21:53:25 +02:00 by pm-bot · 1 comment

pm-bot commented

2026-05-28 21:53:25 +02:00

Collaborator

Kontext

ML Kit Text Recognition liefert auf Foto-Aufnahmen handschriftlicher Listen oft zu viel Rauschen: gedruckte Branding-Elemente (z.B. Header-Logo, Footer-Spalten) werden als zusätzliche Zeilen erkannt und verwässern das Ergebnis.

In v0.6.0 wurde dies via automatischem Cluster-Filter (X-Position-Buckets) abgemildert (filterToMainCluster in apps/mobile/app/lists/[listId]/image-preview.tsx). Das funktioniert für klare 2-Spalten-Layouts, ist aber heuristisch.

Ziel

Vor der Analyse einen optionalen Pre-Crop-Schritt anbieten: Der User zieht im Image-Preview einen Rahmen um den eigentlichen Listenbereich. Nur dieser Ausschnitt wird an die OCR weitergegeben.

Akzeptanzkriterien

Im Image-Preview-Screen (apps/mobile/app/lists/[listId]/image-preview.tsx) lässt sich ein rechteckiger Crop-Rahmen über das Bild ziehen (Drag-Gesten an Ecken/Kanten).
Initialer Rahmen deckt das gesamte Bild ab (= aktuelles Verhalten, Crop optional).
Bei Analysieren wird das Bild via expo-image-manipulator auf den Rahmen zugeschnitten, bevor es an ocrService.recognize / Server-OCR geht.
Rotation (90°-Buttons) bleibt funktional und setzt den Rahmen ggf. zurück.
Mobile + Web (falls Web-OCR-Flow existiert, sonst nur mobile).

Out of Scope

Polygonale/non-rectangular Crops
Auto-Detect des Listenbereichs (das ist ein separates Thema, ggf. via TrOCR-Pipeline-Pre-Step)

Bezug

Folgt aus v0.6.0 #425/#426 (ML Kit On-Device OCR)
Komplementär zum heuristischen filterToMainCluster-Cluster-Filter — das bleibt als Fallback, wenn der User keinen Crop zieht.

Technische Hinweise

Gesture-Lib: react-native-gesture-handler ist bereits im Projekt.
Anzeige + Drag: PoC könnte react-native-reanimated Shared Values nutzen (vermutlich schon vorhanden über Tamagui/Expo).
Crop-Berechnung: Verhältnis Bildschirm-Koordinaten → Original-Bild-Pixel via Image.getSize.

## Kontext ML Kit Text Recognition liefert auf Foto-Aufnahmen handschriftlicher Listen oft zu viel Rauschen: gedruckte Branding-Elemente (z.B. Header-Logo, Footer-Spalten) werden als zusätzliche Zeilen erkannt und verwässern das Ergebnis. In v0.6.0 wurde dies via automatischem Cluster-Filter (X-Position-Buckets) abgemildert (`filterToMainCluster` in `apps/mobile/app/lists/[listId]/image-preview.tsx`). Das funktioniert für klare 2-Spalten-Layouts, ist aber heuristisch. ## Ziel Vor der Analyse einen optionalen Pre-Crop-Schritt anbieten: Der User zieht im Image-Preview einen Rahmen um den eigentlichen Listenbereich. Nur dieser Ausschnitt wird an die OCR weitergegeben. ## Akzeptanzkriterien - [ ] Im Image-Preview-Screen (`apps/mobile/app/lists/[listId]/image-preview.tsx`) lässt sich ein rechteckiger Crop-Rahmen über das Bild ziehen (Drag-Gesten an Ecken/Kanten). - [ ] Initialer Rahmen deckt das gesamte Bild ab (= aktuelles Verhalten, Crop optional). - [ ] Bei `Analysieren` wird das Bild via `expo-image-manipulator` auf den Rahmen zugeschnitten, bevor es an `ocrService.recognize` / Server-OCR geht. - [ ] Rotation (90°-Buttons) bleibt funktional und setzt den Rahmen ggf. zurück. - [ ] Mobile + Web (falls Web-OCR-Flow existiert, sonst nur mobile). ## Out of Scope - Polygonale/non-rectangular Crops - Auto-Detect des Listenbereichs (das ist ein separates Thema, ggf. via TrOCR-Pipeline-Pre-Step) ## Bezug - Folgt aus v0.6.0 #425/#426 (ML Kit On-Device OCR) - Komplementär zum heuristischen `filterToMainCluster`-Cluster-Filter — das bleibt als Fallback, wenn der User keinen Crop zieht. ## Technische Hinweise - Gesture-Lib: `react-native-gesture-handler` ist bereits im Projekt. - Anzeige + Drag: PoC könnte `react-native-reanimated` Shared Values nutzen (vermutlich schon vorhanden über Tamagui/Expo). - Crop-Berechnung: Verhältnis Bildschirm-Koordinaten → Original-Bild-Pixel via `Image.getSize`.