HonestEmissions

Inspiration

We can already see the effects of global warming every day. There are many companies working to reduce their carbon emissions, yet the user is kept mostly ignorant of the environmental impact of the product they are buying and the company they are buying from. Whilst the data can often be found online, it is an inconvenience that most users would not utilize. Our aim was to make unbiased data easily available, allowing the user to compare products they are considering buying to environmentally kinder products.

What it does

We created a chrome extension that, when the user views a product, can display the carbon emissions for the product, manufacturer and a list of similar projects from various sources.

Popup window automatically opens when it detects an accepted page, such as an amazon product page.
A flash-shot of the carbon emissions of the project is shown on the popup window, including the equivalent number of trees chopped down.
If the user opens the main extension, the main product and a list of similar products is displayed, each with their own total carbon emissions, price, rating and number of reviews (if available).
The list of similar products is ranked by requirements such as least total CO2 emissions.

How we built it

To develop the frontend for this application, we wanted to use the ReactJS framework because of it's high performance, reactive nature and a large marketplace of supported packages. However, this proved difficult because we wanted to make a chrome extension so we had to learn how to use webpack and babel - a first for all of us. We also had to learn how to use google chrome background service workers to allow a modal popup on the screen without the user interacting with our extension at all - this had to be done in plain js. We took advantage of React in the popup which is displayed when the user activates our extension - we have a reactive loading state which is explained later and similar products to help our user make a more informed decision.

On the backend we are using Python and Flask to host our API that is accessed by the extension. API contains 2 routes - main product route and recommendations. In both cases, the url from the product page is passed to the backend from the extension, and is scraped using beautiful soup. We use chat gpt to process and decompose the product title and retrieve valuable information like product name and manufacturer. We then use this information to retrieve carbon footprint data in the ditch carbon api. We use firebases firestore for real time updates. The backend updates the state of a given client, and the client reacts. We use serpapi api to access googles powerful reccomendatione engine and compile alternative offers to the product displayed on the page

Challenges we ran into

ChatGPT responses can vary widely between queries, so it was difficult to retrieve consistent results in the correct format
Review API search results can be very inconsistent, depending on the data available, so we had to change APIs from Rainforest to SerPapi half way through
Amazon blocking server with only 4 hours to go (rate limited)
DitchCarbon does not have all the products we want to use.

Accomplishments that we're proud of

Live state updates through Firesbase's Firestore realtime database - without having separate requests for each loading state. We instead took one POST request in the flask app and updated the current status of the request in a firestore document which is unique to the user's session. This can be easily listened for in the frontend by listening to snapshot changes and updating state accordingly. This state is then conditionally rendered by React. Are also proud of utilising chatGPT in our project to abstract complicated string manipulation which would have been very difficult in python. We also utilised it as a fallback for estimating carbon footprint incase the ditch carbon api failed.

What we learned

As a team, we learned how to utilise API calls in Flask, how to specify queries to chatGPT to receive precise information, how to create a chrome extension that automatically pops up on specific webpages, and manage a project in git.

What's next for HonestEmissions

Not getting rate limited by amazon by using proxy servers
Generalise it so it can support more websites.
Batch access to carbon api and chat gpt slows downs the system so we could create a local model