This repository contains an app developed with React and TypeScript, featuring an original idea implemented using various technologies including accessible Radix UI components, Tailwind CSS, and Radix Colors for accessible color schemes.
The app allows users to interact with a list of images, enabling them to draw boxes on selected images. These boxes function similarly to those in design tools like Figma, allowing users to move, delete, and resize them. Notably, the app calculates precise location coordinates (top, left, width, height) on the image, accounting for factors like image zoom or browser window resizing.
The primary objective is for users to classify elements within the images by creating and labeling boxes. Once completed, the app stores information about each box, including its exact coordinates and classification.
With a backend implementation, the collected data opens up various potential applications. For instance, it could be used to train AI models to recognize and classify objects within images. Although initially considered for integration with the AWS Rekognition API, concerns about processing delays led to a decision to maintain a static approach.
- Selecting and changing the listing image.
- Drawing boxes
- Resizing boxes
- Deleting boxes
- Right-click functionality on boxes to duplicate or delete them.
- Display of exact scaled coordinates of boxes relative to the image's actual size.
- Image zoom controls
- Reset image to initial state (useful for images with pre-existing coordinates)
- Deleting all boxes
- Downloading images in .jpg, .png, and .svg formats along with drawn boxes.
- Add, edit and delete images: Having a backend implemented, we could add this functionality to store bounding box and image information.
- Clone the repository to your local machine.
- Run
pnpm ito install the necessary dependencies. - Run
pnpm devto start the development server. - Open http://localhost:3000 with your browser to see the result.
Feel free to explore the app and its functionalities!