Logo
Landing Screen
Home Screen
Data Upload Screen
Profile Screen
Example of labeled data

Inspiration

When working on image-based machine learning in the past, I've noticed a pain point when using pictures taken from a mobile device. Specifically, I have to take the picture, then upload it to a computer where I can label it, then if I am using a cloud machine learning platform it then hast to be uploaded there. This project looks to alleviate that.

What it does

LabelIt allows the user to take pictures, or use previously taken pictures, label them in real time, then upload the image to Firebase Storage and the label data to Firestore. Additionally, if a user is part of a team gathering data they can form, or join, a group and see what the rest of the team has labeled. This is possible through a combination of Firebase Authentication and Firestore.

It supports:

Creating groups, joining groups
Seeing what your group members have labeled
Seeing what you have labeled
Take photos and upload the labeled images directly
Use images from the phone to label and upload
Editing of uploaded labeled images
Commenting on uploaded images

How we built it

I used React Native in Javascript to make the frontend and Firebase Storage for image hosting, Firestore for user data management, and Firebase Authentication for account creation and authentication.

Challenges we ran into

This was my first solo hackathon (second in general), so I had to be extremely disciplined in what features I wanted to implement. Also, most of what I have worked on in the past is backend facing so I spent a lot of time experimenting with UI and UX design.

I had MAJOR issues with the vided export! It took way longer than expected and I kept having technical issues.

Accomplishments that we're proud of

I finished everything I set out to! I did it alone and really pushed my understanding of the frameworks involved, which is a good feeling.

What we learned

React Native animations are hard! Also React Native Navigation doesn't always support features equally. Specifically, early iteration used the bottom tab navigator package, which is awesome, with three nested stack navigators. The only issues is I wanted to animate between each of the three "home" screens for the stack navigators and it wasn't supported! So I embraced the hackiness of a hackathon and created my own by sprucing up a stack navigator to look like a bottom tab navigator and nesting the other three inside it. Complicated and hacky, but it does what I wanted which is nice (this was also the point I decided to get a little sleep)!

What's next for LabelIt

I'm going to use it in my personal projects and see how it feels after a lot of use (not just taking pictures of my cat in my office). I want to also build tools to deeply integrate it with Google Cloud. Since Firebase is in the Google Cloud family the data can be easily transferred to other services for machine learning, and I want to add a mechanism for users to do this easily.

I also want to test it out as an educational tool similar to Google's Teachable Machine! I think it would be really easy for kids to get the hang of and have a fun time teaching basic models with the help of this and Google Cloud!