Summary

At Alegion we were building a next generation data-labeling platform from image and video annotation. During my time there we had gotten the platform to a great spot but we began realizing that there was a huge piece of the platform missing: The ability for customers to visualize the labeled data and provide feedback. Customers had to either visualize the data themselves or we would write scripts for them to visualize their data in python. My role at Alegion was an engineer on the product team and I was often tasked with building the initial versions of products that we wanted to experiment with but couldn't allocate full engineering resources for yet.

So, I was tasked with building the first version of our customer review portal which was aimed at simplifying the review process for not only our customers but also our customer success team. The end result of the product was customers and customer success were able to login to the platform, see the data labeling projects we created for them, visualize the labeled data and provide real time feedback through comments and approvals/rejections of batches of images. I worked in conjunction with our Head of Product Design to bring this project to life and it is still apart of the Alegion platform today.

Technologies Used

1. TypeScript

2. React

3. Redux/Redux Sagas

4. Styled Components

5. Material UI

Design Considerations

As stated previously, our customers and our customer success team needed a unified way to provide feedback to each other in regards to how accurate our labeled data was. All of this data was stored in our data store so we needed to pull the data into a new system and visualize it. Our clients and customer success needed to be able to login to the system using their current accounts for our data labeling platform. It was also important that all metadata for labeled objects were visible as well such as hair color, car color, car damage type, etc.. We also wanted to provide an exceptional user experience with this new product.

Architecture

The architecture for the app was relatively simple, I used the same authentication protocol we were using in our other apps to authenticate users into the platform. Each user had permissions that limited what they could see so I used the permission data from the authentication store to show/hide ui elements in React using a Permission component. I used React Router for navigation in the app and redux sagas to extract out my asynchronous logic from React. I used Konva (a React library) to visualize the labeled data onto an HTML5 Canvas. Clients were able to add comments, approve/disapprove a batch of labeled data and even adjust the labeled data as an example of where they would ideally have liked a point or a polygon to be.

Alegion Data Science Portal Architecture

Request a quote

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.