Inspiration
Making flashcards is HARD. And while LLMs can create flashcards, the chat interfaces have context limits, can hallucinate, and can't create multi-modal flashcards (including images/graphics). The goal of this project was to make it easy for students and lifelong learners to convert a webpage into flashcards.
What it does
Our application seamlessly converts webpages into flashcards. Once on a webpage, the user can select text and create a flashcard via a modal or right-click on the page and create flashcards from the full webpage. After generating, the flashcards will appear in the extension and can be reviewed there or exported to CSV/JSON for import into the user's review tool of choice!
How we built it
The project is built as a Chrome Extension / Edge Add-in. It uses readability.js to capture key webpage content and scans the page for images.
The project uses GPT-4 through Azure Open AI service to create the flashcards and Azure AI Search to generate text and image embeddings. It then compares the embeddings against one another to add most relevant images to flashcards.
Flashcard Generation: Designed algorithms to structure the extracted information into question-and-answer pairs suitable for flashcard study.
User Interface: Developed an intuitive interface that allows users to input URLs, view generated flashcards, and track their learning progress.
Challenges we ran into
Making an edge add-in is challenging! I actually did not know Javascript before embarking on this journey, so it was challenging to learn how it works (why do we need to "await" a response? And how is data passed between the service worker and the popup?). Co-Pilot was extraordinary helpful in generating code, explaining it to me, and being my pair programmer / coach to help me with this application to correct and modify the code to get it working.
Accomplishments that we're proud of
Being able to generate flashcards is one thing, but making flashcards with images is something I'm very proud of. Being able to inject relevant images into flashcards (which can be very useful in reviewing and promoting retention) was very challenging and glad I was able to do so.
What we learned
I learned how to make a Edge extension, some Javascript, how to call Azure AI APIs, and a whole lot of other small things as I debugged extensively to get this application working!
What's next for Webpage -> Flashcards
I think the code to find similar images and add them to flashcards can be more sophisticated. Today it compares the embedding of text of the flashcard to the embedding of the image. I would like to package this as a non-chrome extension app and potentially use APIs that can find relevant images to attach to the flashcards.
Log in or sign up for Devpost to join the conversation.