📸 OCR Annotation Platform
User Guide for Annotating Screenshots
What is this?
This platform helps collect training data for an OCR model (text recognition). You upload screenshots, the automatic text recognition tries to find the texts, and you correct any errors.
1 Register & Login
Before you can start, you need an account.
- Open the website
- Click on Get Started or Login
- If you don't have an account yet: Register with username, email and password
- Log in
🏠 Landing Page with Login/Register Buttons
Platform start page
2 Upload Screenshots
After logging in, you can upload screenshots.
- Click Upload in the menu
- Select the Language of the screenshot (e.g. German)
- Select a Category from the list (e.g. "Weekly Ranking")
- Drag your screenshots into the upload area or click to select files
- Click Upload & Start OCR
You can upload multiple screenshots at once!
📤 Upload page with Drag & Drop area
Upload area
After uploading, text recognition runs automatically. This takes a few seconds per image.
3 Annotate Screenshots
Now comes the most important part: Review and correct the automatically detected texts.
- Click Annotate in the menu
- Select a screenshot from the list
- On the left you see the image with colored boxes around detected texts
- On the right you see the list of all detected texts
✏️ Annotation view: Image left, text list right
Annotation Editor
Controls
| Action |
What happens |
| Single click on text (right side) |
Highlights the box in the image (to find it) |
| Double click on text (right side) |
Opens editor to edit |
| Single click on box in image |
Opens editor for this text |
| Double click on empty spot in image |
Creates new annotation there |
Correct Text
- Double-click on a text in the list
- In the editor: Correct the text
- Click Save
✍️ Editor dialog with text field
Edit text
Delete Wrong Text
If the OCR detected something that is not relevant text (e.g. from an avatar):
- Double-click on the text
- Click Delete
Add Missing Text
If a text was not detected:
- Double-click on the spot in the image where the text is
- Enter the text
- Click Save
You can also use the + Add button at the top right.
4 What Should Be Annotated?
Not everything on the screenshot is relevant. Annotate only:
✅ Annotate:
- Player names (e.g. "EaZY", "LordXY", "DontHitMeImPregnant")
- Scores/Points (e.g. "243,740,808")
- Alliance tags (e.g. "[R3]", "[DSi]")
- Rank numbers (1, 2, 3...)
❌ Do NOT annotate (delete!):
- UI elements ("Battle Power", "Daily", "Weekly")
- Menu texts
- Buttons
- Garbage from avatars
Delete all texts that don't belong to player/rank/points!
5 Save
When you're done with a screenshot:
- Click 💾 Save to save your changes
- Or click ✓ Mark as verified if everything is perfect
Save regularly! If you leave the page without saving, your changes will be lost.
6 Zoom & Navigation
For large screenshots you can zoom:
| Button |
Function |
| 🔍+ |
Zoom in |
| 🔍- |
Zoom out |
| ⊡ |
Reset to normal size |
7 Delete Screenshot
If a screenshot is unusable (e.g. wrong image uploaded):
- Open the screenshot for annotation
- Click 🗑️ at the top right
- Confirm deletion
Deletion cannot be undone!
❓ Frequently Asked Questions
The text recognition is bad. What do I do?
That's normal! That's why we need your help. Correct the errors and add missing texts. The more corrected data we have, the better the trained model will be.
Do I need to correct every text?
Yes, all relevant texts (names, points, ranks) should be correct. Please delete unimportant texts (UI elements).
What about scores - with or without dots/commas?
Write them exactly as they appear on the screenshot. If it shows "243.740.808", enter exactly that.
The box doesn't fit the text exactly. Is that bad?
Not too bad. More important is that the text is correct. But the box should roughly frame the text.