ruby-bot
Harry PotterI want you to act as a senior full-stack software engineer and UX designer. I work in an office where I receive customer application forms. My job is to read each form manually and copy specific information into another software. This is repetitive and takes a lot of time. I want you to build a Windows desktop application that automates this process. ## Workflow 1. The application should allow me to upload up to 4 images of the same form. 2. The images may be front, back, or close-up photos. 3. The application should combine the information from all uploaded images. 4. It should extract the required fields accurately using OCR. 5. It should display the extracted data in editable text boxes. 6. I should be able to review the information and simply copy and paste it into my office software. ## Important I will provide screenshots of the software where I manually enter data. Study those screenshots carefully and match the field order exactly. I will also provide sample form images. Do not guess field names. Extract only the information that actually exists on the form. ## OCR Requirements The OCR should be highly accurate. It should handle: * Handwritten text if possible. * Printed text. * Urdu and English text. * Slightly blurry images. * Rotated images. * Different lighting conditions. Automatically rotate and enhance images before OCR. ## User Interface Create a clean modern UI. Features: * Upload up to 4 images. * Drag and drop support. * Image preview. * Remove or replace an image. * Extract Data button. * Copy All button. * Copy button beside every field. * Clear button. * Dark mode. * Progress indicator while processing. ## Output Display every extracted field in the same order as the office software. Example: Customer Name: Address: Phone Number: CNIC: Guarantor Name: Guarantor Address: Guarantor Phone Number: (The actual field list will come from my screenshots.) ## Technology Recommend the best technology stack. Prefer: * Python * PySide6 or PyQt6 * PaddleOCR, EasyOCR, Tesseract, or another OCR engine if better. * Local processing without requiring internet if possible. If AI vision models can significantly improve accuracy, explain how to integrate them as an optional feature. ## Code Quality Write clean, modular, production-quality code. Use proper project structure. Include: * Error handling * Logging * Image preprocessing * OCR module * Data extraction module * GUI module * Settings module Generate complete code for every file. Do not skip any implementation. If the project is too large for one response, continue file by file until the entire application is complete.
Comments (0)
Sign in to leave a comment
Project Tasks25
Define Database Schema
As a Backend Developer, I want to define the database schema for storing images and extracted data, ensuring efficient data retrieval and storage.
Create UI Shell
As a Frontend Developer, I want to create the UI shell with navigation and layout for the Home and Settings pages.
Implement CTASection for Home
As a frontend developer, implement the CTASection for the Home page. This section includes animated background orbs using Framer Motion and a call-to-action with buttons linking to the registration page and features section. Ensure the animations trigger on scroll and the section is styled according to the provided CSS. Page access: shared by all personas (User).
Implement FeaturesSection for Home
As a frontend developer, implement the FeaturesSection for the Home page. This section displays a list of features with SVG icons and descriptions, using Framer Motion for animations. Ensure each feature is styled correctly and animations are smooth. Page access: shared by all personas (User).
Implement Footer for Home
As a frontend developer, implement the Footer for the Home page. This section includes links to Home and Settings pages, and displays the current year dynamically. Ensure the footer is styled according to the provided CSS and links are functional. Page access: shared by all personas (User).
Implement HeroSection for Home
As a frontend developer, implement the HeroSection for the Home page. This section features interactive drag-and-drop functionality, animated background elements using GSAP and ScrollTrigger, and state management for scanning actions. Ensure the animations and interactions are smooth and responsive. Page access: shared by all personas (User).
Implement HowItWorksSection for Home
As a frontend developer, implement the HowItWorksSection for the Home page. This section outlines the steps of the process with icons and descriptions, using Framer Motion for animations. Ensure the steps are clearly presented and animations are smooth. Page access: shared by all personas (User).
Implement Navbar for Home
As a frontend developer, implement the Navbar for the Home page. This section includes a responsive navigation bar with a logo, links to Home and Settings pages, and a mobile menu toggle. Ensure the navbar is styled according to the provided CSS and links are functional. Page access: shared by all personas (User).
Integrate OCR Engine
As a Backend Developer, I want to integrate PaddleOCR or Tesseract to process images and extract text data accurately.
Implement Navbar for Settings
As a frontend developer, implement the Navbar section for the Settings page. This component includes a responsive navigation bar with a logo, links to Home, Settings, and a 'Get Started' call-to-action. It uses state hooks to manage scroll and mobile menu states, and includes an event listener for scroll detection. Ensure that links to restricted pages are conditionally shown based on user access. Page access: shared by all personas (User).
Create Database Models
As a Backend Developer, create database models for storing images and extracted data. Implement migrations and ensure data integrity.
Implement Image Preprocessing
As a Backend Developer, I want to implement image preprocessing to enhance and rotate images before OCR processing.
Develop API Client
As a Frontend Developer, I want to develop an API client to communicate with the backend for image processing and data retrieval.
Implement SettingsHeader for Settings
As a frontend developer, implement the SettingsHeader section for the Settings page. This component includes a breadcrumb navigation and a header with a title and subtitle. It provides context for the user by showing their current location within the application. Page access: shared by all personas (User).
Implement AppearanceSettings for Settings
As a frontend developer, implement the AppearanceSettings section for the Settings page. This component allows users to toggle between light and dark themes using a checkbox. It manages theme state and updates the document's data-theme attribute accordingly. Page access: shared by all personas (User).
Implement OCRSettings for Settings
As a frontend developer, implement the OCRSettings section for the Settings page. This component allows users to select an OCR engine, toggle language options, and adjust accuracy sensitivity using a range slider. It manages multiple states for engine selection, language toggles, and accuracy. Page access: shared by all personas (User).
Implement OutputSettings for Settings
As a frontend developer, implement the OutputSettings section for the Settings page. This component allows users to toggle auto-copy to clipboard, select field order templates, and set a custom field separator. It manages states for auto-copy, field order, and separator input. Page access: shared by all personas (User).
Implement AdvancedSettings for Settings
As a frontend developer, implement the AdvancedSettings section for the Settings page. This component allows users to toggle auto-rotate for images, enable debug mode, and manage cache size with options to clear cache and reset settings to defaults. It involves multiple state management and user confirmations. Page access: shared by all personas (User).
Implement Footer for Settings
As a frontend developer, implement the Footer section for the Settings page. This component includes branding, product links, and account links. It dynamically displays the current year and may already exist from the Home page implementation. Page access: shared by all personas (User).
Develop API Endpoints
As a Backend Developer, create API endpoints to handle image uploads, OCR processing requests, and data retrieval. Ensure endpoints are secure and efficient.
Develop Data Extraction Module
As a Backend Developer, I want to develop a module to extract and organize data from OCR results into structured fields.
Integrate Home Backend and Frontend
As a Tech Lead, verify the end-to-end integration between the Home page frontend implementation and the backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
QA for Image Processing Workflow
As a QA Engineer, I want to test the image processing workflow to ensure accurate data extraction and UI display.
Implement Business Rules
As a Backend Developer, implement business rules for combining data from multiple images and ensuring field order matches the office software.
QA for End-to-End Workflow
As a QA Engineer, perform end-to-end testing of the entire workflow from image upload to data extraction and copying. Ensure all functionalities work seamlessly and meet the requirements.
No comments yet. Be the first!