Inspiration
According to studies done in the United States, 78% of consumers feel that sustainability is important, however a majority are unaware of the impact their shopping habits have on our environment. At EvoEval, we are dedicated towards working together to provide a more environmentally friendly and sustainable future for all. As the growing concern for our deteriorating climate and environment increase, we want to do our part in spreading awareness on the impact certain products have on the environment to misinformed consumers. With the holiday season close approaching, online shopping will increase, and with it the impact of excessive packaging, material waste, and transportation pollution will rise. In order to combat this, EcoEval is providing cutting edge technology using AI/ML to transform e-commerce and to inform all consumers regarding their impact on the environment by buying and using a product prior to purchase.
What it does
The primary goal of the EcoEval chrome extension is to aid online shoppers in shopping more sustainably through an efficient and straightforward method. The specific use case of this tool is to make users more aware of their contributions to their carbon footprint and make them more conscious of the products they buy based on the sustainability rating of the product. This tool enables users to:
- Add this tool to Chrome and activate it once they are shopping on any online platform
- Provide a description of the product to this extension
- Obtain a sustainability rating of such a product
How we built it
For the front end of the extension, we used HTML and CSS to design the UI and physical appearance of the extension. Specifically, the popup.html is responsible for representing the UI of our extension and the popup.css integrates with the popup.html file by styling the appearance and UI of our extension.
For the backend of our extension, we used JavaScript and the ChatGPT API to receive input from the user, send user input to the API, and receive and display responses from the API. More specifically, our chrome extension backend is divided into several files. The background.js is a file that is responsible for processes that run in the background of the browser. This is where we send and receive responses from the ChatGPT API. The popup.js is responsible for responding to user input, behavior and functionality of our chrome extension UI.
Challenges we ran into and what we learned
An early challenge we faced was calculating the carbon footprint of a product based on its shipping process, specifically on Amazon. We originally planned to provide the user with a carbon footprint based on the Amazon product along with a sustainability rate. However, through research we learned that in order to access the Amazon API we needed, we needed an Amazon Associates account, which is only available to individuals marketing for Amazon. Furthermore, we attempted to use other online databases and APIs. However, due to restrictions in accessing these resources imposed by paywalls and memberships, we opted to use ChatGPT. Through this, we learnt how to access varying API’s and the steps in order to set up an API correctly, however unfortunately we also learnt that many API’s are hidden from the general public.
Another early challenge we faced was using web scraping to gather product data automatically when visiting an e-commerce website. We had initially planned to design the Chrome extension to be optimized for Amazon pages. Although we were able to successfully scrape a single web page for a certain product, due to the privacy regulations that Amazon had placed and the randomized structure of the HTML pages for each product, it proved difficult to design an extension that would work for all Amazon product web pages. Thus, we decided to include the ability for users to manually input product descriptions within the extension. As no one in our team had experience with web scraping prior to this event, through this process we all learnt the basics of this process. Although we were unable to automate it during the event, using tutorials and websites, we were able to learn the process of web scraping through HTML and python.
Another challenge we faced was developing a Chrome extension. As Chrome extension documentation is frequently updated, we found it challenging to create a Chrome extension due to the lack of resources that included the new manifest.json version. As a result, we encountered problems with integrating the Chrome extension with Google Chrome as there were errors with the Chrome.runtime API. Through this process, we learnt how to correctly integrate our code to create a Chrome extension.
However, the main challenge we encountered was using the ChatGPT API. As our team wasn’t familiar with this API, we encountered several problems setting up the API and sending and receiving messages from the API. We encountered problems with setting up the API with the API keys, ensuring we were sending requests to the API in JSON format, and ensuring we were accessing the correct endpoints for chat completion. Through this process, we learnt how to correctly implement an API in order to use it throughout our project.
Accomplishments that we're proud of
We are proud of the technologies we used within this project such as Chrome extensions, OpenAI API, and webscraping. Furthermore, as many of us didn't have a lot of experience with frontend development, we were proud of using frontend languages such as HTML, CSS, and JavaScript to create a functional chrome extension.
What's next for EcoEval
To enhance the features of EcoEval, Here's the current roadmap for the next steps:
- Automizing the sustainability rate: To improve the efficiency of this Chrome extension, we will implement it in a way where the user does not have to input the description manually but rather, will receive the rate along with the reasoning once the product is clicked on and the extension is activated.
- Creating a website: We would create a website to provide further information about this extension, including the importance of shopping sustainably and the general metrics used to reach the sustainability rating of a product.
- Additional Functionalities: Depending on user feedback and business requirements, we will continue to explore additional functionalities that enhance the app's utility and user experience.
Built With
- api
- chrome.runtime
- css
- html
- javascript
- openai
Log in or sign up for Devpost to join the conversation.