SustainabilityScanner

A Sustainable way to shop!

Comment

Inspiration

According to 2022 statistics, food production makes up of over a quarter of the world's total greenhouse gases emissions. In additional research, over half of the products that are on display at the average grocery store are made with unsustainabel means, wether it would be the methods used to process raw ingredients or various methods used in its packaging. We aimed to combat this serious but often overlooked issue with a project that is informative and intuitive.

The goal

The goal of this project is to inform the average grocer (You!) about products that are sustainable and unsustainable, so that they would make the best choice that would reduce their carbon footprint. The product is indended the promote and address environmental sustainability.

What it does

The app has two functionalities: Picture mode and leaderboard.
Picture mode allows you to take a picture of a food product you would find during your time at the grocery store. It would then process the image through artificial intelligence to inform the user of the sustainability rating of the product, on a scale of 1 to 10, and the reasoning behind the given rating.
Leaderboard would inform users of the most sustainable products that were captured by the userbase for the current week. It ranks the top 9 most sustainable products that users found and captured in grocery stores based on their sustainability rankings, as well as an image of each product acquired from web scraping, so that other users know what the product looks like (Original images captured by the userbase may not serve as the best example of the product).

How we built it

Brainstorming

Idea 1: AQ monitoring system connecting a c/c++ arduino with a react frontend app that monitors local air quality
Idea 2: The use of image recognition to easily inform a user on which trash items can be recycled/compostable to reduce environmental effects on landfills and prevent recyclable trash from being disposed with unsustainable methods.
Idea 3: Current idea. We chose this idea because we believed the concept is unique, and that the project could be more impactful & relevant overall.

Development

This time, we want to try something that we have never done before: a Javascript framework in combination with a CSS framework as well as an SQL database. We used Python with Flask for the backend server, a Debian RaspberryPi for a MySQL database, and a React Tailwind app for our frontend client. We started with setting up all 3 parts, then made the user interface and the API endpoints, finally connecting them all together with HTTP requests. We also utilized OpenAI's image analysis features provided by their APIs to analyze incoming images to serve the functionality of our project. More information on how components of our project interact with each other are contained within our submission video.

Roadblocks

We ran into multiple roadblocks during the development of our project, but the most major ones are:

  1. Not knowing how to use web frameworks. Frameworks provided far greater versatility compared to vanilla javascript. To enhance the functionalities of our product, we had to learn React, along with TailwindCSS from scratch.
  2. Not knowing industry standard methods to store persistent data. Historically, we stored all of our data in a Javascript Object Notation file. However, we want this product to be scalable, which calls for the use of a structured database. To combat this problem, we had to learn Structured Query Language from the ground up, as well as on how to integrate it with our flask backend using the MySQL Connector module.
  3. Image file handling. This was the first time any of us had to interact with images in our project. We had a lot of difficulties figuring out how to handle image files to transfer from frontend to backend. To combat this issue, we learned to encode images in PNG or JPEG format into an image string in Base64 format, a format that is supported by requests and would allow them to communicate with each other with images.

Future steps

Deployment: currently, the project is deployed over the HTTP network, which restricts connectivity to local networks only. To depoly this project to the public, we would have to acquire an HTTPS license and a domain, which would allow our product to be used by the general public.

Custom generative models: we could train a custom LLM to product outputs that are more suited towards the needs of the project.

What we learned

React + Tailwind CSS \ SQL with MySQL \ Base64 image processing operations \ Web Scraping for sample images \

What's next for SustainabilityScanner

Along with the improvements for the future like deploying to HTTPS or training our own LLM, we could consider making additional refinements to the front-end of the app to make it deployment ready or alternatively switch the framework of the app entirely to offer more customization and more efficient programming.

Built With

Share this project:

Updates