Parrot is a Chrome extension developed as part of the winning project for the GenAI venture bootcamp at IE University. The extension aims to provide a seamless solution for language learning by scanning the user's webview, selecting optimal words for learning in Spanish, and presenting them to the user in a quiz format. This functionality helps users learn new words in Spanish effortlessly as they browse the web.
School article about the project
Parrot is designed to enhance the language learning experience by integrating it into the user's daily web browsing activities. By leveraging AI and real-time text analysis, Parrot identifies suitable words from the content being viewed and quizzes the user on their translations to Spanish. This innovative approach helps users learn new vocabulary contextually and engagingly.
- Real-time Text Analysis: Scans the webpage content to extract visible text and selects words for learning.
- Interactive Quizzes: Presents quizzes with multiple choice options to help users learn the translations.
- Customizable Settings: Allows users to enable or disable the extension and configure various settings.
- Chrome Extension: Developed using HTML, CSS, and JavaScript.
- Backend Server: Flask framework in Python.
- AI Integration: Utilizes OpenAI's GPT-4 for text processing and quiz generation.
The system architecture consists of the following components:
- Content Script (content.js): Scans the webpage content and sends the text to the backend server.
- Backend Server (server/app.py): Processes the text using AI to select a word and generate quiz options.
- Popup Interface (popup.html, popup.js): Provides the user interface for enabling/disabling the extension and configuring settings.
- Background Script (background.js): Manages the state of the extension.
- Google Chrome
- Node.js and npm
- Python 3.8 or higher
- Flask
-
Clone the Repository:
git clone https://github.com/gabrieldeolaguibel/GenAI-Hackathon.git cd GenAI-Hackathon
-
Install Dependencies:
pip install -r requirements.txt
-
Configure API Keys:
- Obtain API keys from OpenAI.
- Create
secrets
directory in the root of the project. - Add
api_key.txt
andapi_org.txt
with your OpenAI API key and organization respectively.
-
Run the Backend Server:
cd server python app.py
-
Load the Extension in Chrome:
- Open Chrome and navigate to
chrome://extensions/
. - Enable Developer mode.
- Click "Load unpacked" and select the
extension
directory from the cloned repository.
- Open Chrome and navigate to
-
Enable the Extension:
- Open the extension popup and enable it using the toggle switch.
-
Start Browsing:
- The extension will automatically scan the webpages you visit and select words for learning.
-
Take Quizzes:
- Quizzes will pop up periodically with words selected from the webpage content. Answer the quizzes to reinforce your learning.