Chuckled.

Adobe XD
Style Guide
Uploading to Google Cloud

Inspiration

Bored on your phone because of quarantine? Want something funny to text your friends? Upload any photo on Chuckled and receive a generated joke based on your photo. Jokes on you if you haven't (used) Chuckled.

What it does

Once you open the website, you will have two options: Upload a photo from your computer or take a photo on your webcam. After submitting the photo, Chuckled will look at the image and use Google Cloud's Machine Learning technology to generate a joke.

How we built it

Frontend Used React to implement the client. There are two main functionalities: uploading an image or taking a snapshot from the computer’s camera. The uploading component was done with a simple input tag with a type of “file.” The video aspect took some more work. The method we used to implement was to stream the content from the computer's camera and then have a button that draws on a canvas tag. We took this drawing, then converted it into a blob type and finally to a FormData object. Next, through an Axios post request, we sent the image to the server.

Backend Used Google App Engine for a server and Cloud Storage for hosting images. The frontend calls the server and uploads an image to the cloud storage. Then, we used a Google cloud vision service to annotate the images using machine learning. The annotations were ordered in terms of likelihood and the most likely label was passed as in input to a random joke generation API. The result of this API was then fed back to the frontend as captions for the original image.

Challenges we ran into

A challenge we had was setting up a connection between our backend server and the server that generated the joke. Another huge challenge was the upload feature. We learned how to convert a file into FormData to make it much easier to send to our server.

Accomplishments that we're proud of

For the frontend, we are proud of setting up a live stream and being able to take a snapshot of that stream at any moment. For the backend, we were proud that we got the machine learning aspect of the program to work.