ANGELINA HAN
WORK ABOUT

Is This Recyclable?

A web app that leverages AI and image recognition to determine whether a user-uploaded image is recyclable, aimed at educating people on best recycling practices.

Check out the code here: Github repo.

a screenshot of the Is This Recyclable site, with the words 'Yes, it's recyclable!' and images and info on how to recycle paper.

Areas

Web Development

UX Design

Machine Learning

Role

Developer & Designer

Dates

May 2020

ABOUT

A project created in collaboration with Kyle Floersch and Theo Jolly for Hack The Earth 2020. Over the course of 36 hours, we created a web app that allows users to upload a picture of an item they want to recycle and get more information on its recyclability. Our website leverages image recognition AI to identify the user-uploaded image in order to provide item-specific recycling information.

When brainstorming our project, we agreed that one obstacle preventing us from recycling more was being unsure if something was actually recyclable. With that in mind, we created a website that makes it easier to tell recyclables from non-recyclables.

DEVELOPMENT

We used an open-source graphic recognition library, ImageAI, to train our model on recyclable types. Given the time constraints, we trained it to recognize 7 commonly recyclable / improperly recycled items: bottles, cans, paper, pizza boxes, batteries, plastic bags, and styrofoam. For each item, we collected over 200 photos from the internet to use in our training dataset.

We used Python on the back end to process and identify images. We served our web app using Flask, a Python framework, which allowed us to run the site on the default local domain, http://127.0.0.1:5000/. On the front end, we used HTML and CSS to style the UI and image intake form, as well as Jinja (built into Flask) to create templated pages to avoid repeated code.

several white plastic bags styrofoam packing peanuts

Example training images for our AI model

DESIGN

I created wireframes in Figma, which we referenced when coding the site. I used gentle pastel colors and sans serif type to convey a feeling of friendliness, in order to make the process of recycling feel less intimidating.

TAKEAWAYS

Through this project, I gained a crash-course understanding of Python and Flask. My teammates and I all had different strengths and specialties, which enabled us to learn from one another and build a finished product leveraging our combined knowledge.

Watch the demo video:

screenshot of Is This Recyclable? with info on recycling pizza boxes screenshot of Is This Recyclable? explaining why styrofoam is not recyclable
screenshot of Resources page of the site, with additional links to recycling information screenshot of About page of the site, explaining our project

Selected pages of Is This Recyclable?