Boost Your Captcha Labeling Speed with a Vue‑Spring Annotation Tool

Introduction

In this article the author shares a practical project for efficiently labeling and recognizing image captchas. After covering data collection, preprocessing and character segmentation in previous posts, this piece focuses on building a high‑efficiency annotation system.

Efficient Data Annotation

Manual renaming of captcha files is slow for hundreds of images, so the author explored GUI frameworks (Tkinter, PyQt) but found them cumbersome. Instead a web‑frontend plus backend solution was adopted, using a Vue admin template ( Vue-Admin-Template ).

Key functional modules include:

1. User module: login/registration, roles, permission control
2. File module: CRUD for user attachments, per‑user directory storage
3. Captcha image module: fetch, annotate, submit/modify, pagination, batch download
4. Captcha model prediction: support multiple models (single model implemented)

Technology Stack

Frontend : vue, vuex, vue-router, axios, element-ui

Backend : Spring Boot, Spring Security, Spring MVC, Spring Data JPA, Redis, MySQL

The backend uses a traditional single‑machine web/session architecture; it can be refactored to micro‑services for enterprise use.

Running the Application

Frontend: run with npm run dev in Visual Studio Code.

Backend: start from IntelliJ IDEA.

Images show the UI for pulling captchas, annotating, pagination, and a simple CNN prediction (40 characters, 2 errors).

Conclusion

The system demonstrates that captcha annotation can be streamlined with a web interface, preparing clean data for the next step: character feature extraction and CNN model training.