This is a submission for the GitHub Copilot Challenge : Fresh Starts & New Beginnings
What I Built
SHIFT is an AI-powered browser extension that helps you make sustainable choices when shopping online.
Just when you’re about to hit purchase on your next impulse buy, you can take about thirty seconds to open the extension, click the analyse button and get an in-depth analysis and sustainability rating (out of 10) of your product. A short summary of the analysis makes it convenient to get the gist in a glance.
This will help you reflect on your purchasing habits and cut out overconsumption.
Not just that, if you still want to buy the product for any of your needs, you can get more sustainable and eco-friendly alternative product suggestions in just a few seconds, on the click of a button.
Now you can fulfil your shopping needs while being sustainable and mindful!
Begin your SHIFT to a more sustainable and greener lifestyle today, one purchase swap at a time.
Demo
Demo Video
Here's a short n' sweet demo video that shows how SHIFT works - it's incredibly simple, even a baby can use it (no, really, even toddlers shop online now)!
Link
https://chrome.google.com/webstore/detail/shift/bpplgnhmfcoohmeppibphjoahlfaebhj
Note: At the time of publication of this blog post, my Chrome extension is still pending review as I submitted it for review on 18th Jan and it can take 2-7 for review and extension release. I hope by the time people (and specifically the judges) check out this link, it will be working. Otherwise, I hope my demo video and Github repo will be sufficient to satisfy and convince. 🤲🏻
Screenshots
Repo
Ayesha-Imr
/
SHIFT-Extension
shift towards sustainability, one purchase swap at a time
SHIFT - AI-Powered Browser Extension 🌱
Make your shift towards a more sustainable lifestyle today SHIFT is a Chrome extension that helps you analyze the sustainability and eco-friendliness of products and discover eco-friendly alternatives. With SHIFT, you can make informed, greener choices effortlessly.
Features
- Instant Text Extraction: Extract product descriptions from any webpage with a single click.
- Comprehensive Analysis: Get a detailed sustainability score and eco-friendliness rating for products.
- Eco-Friendly Alternatives: Discover environmentally friendly alternatives to your current products, complete with purchase options and links.
- User-Friendly Interface: Enjoy a clean, intuitive interface that makes it easy to access all features and information.
Demo
Installation
From the Chrome Web Store
-
Visit the Chrome Web Store:
- Go to the SHIFT Extension page on the Chrome Web Store.
-
Add to Chrome:
- Click on the "Add to Chrome" button.
- Confirm the installation by clicking "Add extension" in…
Tech Details
The sustainability analysis is powered by a large language model (GPT-4o-mini in this case) which takes the product info scraped from the webpage and generates a rating, in-depth analysis and a summary of the analysis. The response is then parsed and displayed in the extension.
Similarly, the alternative sustainable products are also fetched by the LLM given the original product description, and then displayed to the user along with descriptions, in-store purchase options and clickable links to buy online immediately.
GPT-4o-mini is accessed using Github Models which enables lightning-fast generation, ensuring smooth user experience.
Development Timeline
I developed this app in the span of about 8 hours (with breaks lol).
I started with first testing out LLM responses in a Python notebook by using the API provided by Github Models. This was super easy and fast to do.
I passed in some sample data by copy and pasting product details from webpages and tested out different prompts to elicit responses until I perfected it. I did this for both the analysis and alternatives functions. Once I was satisfied with the responses, I converted these API calls into functions with parameters that could be called by the frontend. This entire process took barely 30 minutes.
Next, I created the browser extension (or it would be better to say that Github Copilot created it for me with just a few prompts and tweaks). The UI of the extension took some tweaking to perfect and there was some overflowing and stuff but with constant prompting and nagging the Copilot, I managed to perfect the UI to my liking (as much as I could given the limited timeframe). I also added the webpage text extraction code to the frontend.
Now I needed to connect the frontend to the backend. Since my functions were written in Python, I used Flask to host them and make them
accessible via an endpoint. I did just that and then called the functions from the frontend of the extension. Again the UI needed tweaks and I had to add loading screens during the analysis so I spent some time perfecting the UI again and ensuring the content was being displayed perfectly. This entire process took around 5 hours.
Once the browser extension worked seamlessly locally, it was time to deploy it.
I deployed the Python functions on Render using the free tier.
Next I created a Google Developers account, paying $5 (🥲) for registration and submitted my extension for review. This took around good couple of hours as I had to record the demo video, gather screenshots and configure a privacy policy etc.
Copilot Experience
Copilot was my dream coding companion in making this application - it made everything a breeze. I only had to come up with the general idea of things and it was Copilot’s duty to concretely implement my ideas into code. I used Copilot for different stages and aspects of SHIFT’s development, from basic building blocks to full deployment.
Frontend & UI
I solely used Copilot to create the necessary backbone files and the UI of the browser extension. The structure of the extension came together in a matter of like 5 minutes even though it was my first time making a browser extension.
The UI did take more time to perfect but it was all Copilot (UI isn’t my strong point tbh). I tried out Claude 3.5 Sonnet for designing the UI of the extension and I must say, it did come through!
Asking Copilot to sprinkle some aesthetics to the UI. ✨
Adding Functionality
Github Copilot was a great asset in helping me make backend functions and coming up with scripting code in case of triggers (buttons).
I simply told the Copilot what I wanted to happen once a button was pressed, and it came up with the necessary code to make it happen.
Now there were of course some issues (because whose code works perfectly the first time!?) but the Copilot was able to handle them expertly.
I asked Copilot to write the text extraction code once the button was pressed.
Errors & Edits
Errors - the bane of all programmers’ existence. Since the advent of LLMs, it has become much easier to deal with errors in code. Copilot was essential in the debugging process for my code. It made it super easy to deal with errors - whether the errors were emergent in the terminal, functionality or syntax - Copilot handled it like a pro.
One of the best parts about working with Copilot is the ability to simply highlight a piece of faulty code and simply ask Copilot to fix it. It’s so unbelievably fast and easy and something I have been taking advantage of majorly since Copilot was introduced like a couple years back (yes, I’m an og Github Copilot user 😉). A true gamechanger!
Asking Copilot to ‘fix’ a highlighted error in my code which I absolutely had no idea how to solve.
Asking Copilot to fix an error with the functionality.
Autocomplete
It still feels like magic how you just start writing some code and Copilot suggests the completion for you - it’s come in handy so many times. And for SHIFT too I heavily relied on Autocomplete for creating the backend Python functions as well as deployment using Flask. It saved a lot of time 🕰️!
Chat
The in-editor Copilot chat came super useful when it was time to deploy the extension - both the backend on Render, and the extension itself on Google Developers Store.
I used Copilot for various purposes during deployment, some are highlighted below.
Asking Copilot to create the .gitignore file by attaching the entire codebase (don’t worry, I did double check it before committing the code).
Chatting with Copilot about free backend deployment options - it helped me throughout the deployment process and fixing errors.
Copilot also came up with the Privacy Policy for my browser extension that was required for publishing it (again, I double-checked it y’all).
Additional Features I Loved
There are so many other ways Github Copilot assisted me throughout the development of this app, from terminal commands, testing deployed API endpoints to logging function outputs. It really optimized the entire workflow.
Copilot is super clear about which files to modify and edit.
Copilot makes inserting terminal commands a breeze - multiple commands in just one click!
Making my readme file in seconds with Copilot.
GitHub Models
This is the first time I tried Github Models and I am very impressed and super pleased that I can use GPT-4o and 4o mini APIs for free, even if there is rate-limiting.
The limits are perfect for testing and prototyping and it is something so beneficial for developers because you don’t have to purchase credits just for creating basic MVPs and testing.
And the ease of use that Github Model Playground provides is so convenient. It literally took seconds to configure the LLM API through Github Models. Without a doubt, Github Models will now be my go-to choice for calling LLM APIs in my projects. I also love how so many LLMs, both proprietary and open-source, are supported.
For SHIFT, I used GPT-4o-mini because its speed and response capabilities are perfect for my use case and the rate limits are also more generous than 4o. And the results, well, lightning-fast is the only word to describe them.
I tested out prompts for my app functions right there in the playground and then further in a Python notebook to perfect them and then created the final backend functions.
The tasks that LLM handles via Github Models are the sustainability analysis of products and suggestion of sustainable alternatives (with links!).
Basically the core part of the app is the LLM.
Conclusion
I had so much fun making this app - it truly brought out my creative side. It was the weekend and I was able to fully lock in and get into hyper-focus mode.
I developed this entire browser extension app and sent it for publishing on the Google Developers Store on Saturday, 18th January in a span of about 8 hours.
The prompts provided as the hackathon tracks were super unique and interesting and definitely out-of-the-box as compared to other hackathons so that made it even more interesting.
SHIFT fits perfectly in the Fresh Starts prompt due to its focus on sustainability and helping people get a ‘fresh start’ on their lifestyle choices and shopping habits, reducing negative impact on the environment.
Other than that, I also believe that SHIFT qualifies for the New Beginnings prompt because it motivates people to do better and embark on a new journey of more sustainable and greener lifestyle choices choices.
Even though this app is currently just a small prototype that I built in a day, I can see that it has potential.
People are becoming increasingly climate-conscious in light of the current issues of global warming and climate change. SHIFT, thus, may prove to be a valuable tool to help people reduce their carbon footprint and shift towards a greener lifestyle.
I will definitely take SHIFT further (I mean, I have published it on Google Developers Store so I am serious about this) and work on it more.
I hope this can actually benefit our planet in some way and be something people get in the habit of using. This is a cause I genuinely care about. 🌱
Note: The publication date shows 20 Jan because it's 20 Jan here but the PST time is still 19th Jan.
Top comments (2)
Awesome :)
Such a cool idea✨️