YouTutors

The Learning Pyramid

Confess, fellow knowledge seekers, how many times has that lecture syllabus transformed into a podcast recommendation list? You open that lecture recording, ready to conquer the knowledge mountain. But then... a notification pops up. Is it a life-or-death email? Nope, just another irresistible cat picture. Next thing you know, lecture is over and your notes boast a single, majestic drawing: a cat with a crown, because clearly, it deserves to rule the lecture hall.

Inspiration

Even though schools are largely back in-person, the pandemic's influence on education is undeniable, with more students embracing online learning materials and pre-recorded lectures. While remote learning has its benefit in flexibility and accessibility, passively listening isn't the best way to learn. Research shows our brains retain more information when we actively engage with the the material.

What it does

YouTutor is a chrome extension that creates a series of questions to quiz students on the key concepts of any YouTube lecture. In particular, it turns key concepts of the lecture into multiple-choice questions via Gemini, so that students can quickly assess their understanding and reinforce learning.

How we built it

YouTutor was built as a Chrome Extension using web development tools such as HTML, JavaScript, and CSS for the frontend, and Python with Flask for the backend. The quiz generation pipeline transcribes videos using the YouTube Transcript API and generates quiz questions with the Google Gemini 1.5 Pro API through one-shot learning. The quiz data is then sent to the JavaScript frontend in JSON format via Flask. Finally, JavaScript is responsible for displaying the quiz and grading the user's answers.

Challenges we ran into

The biggest challenge we faced was integrating Python and JavaScript. Python has a convenient API to transcribe YouTube videos, but building a Chrome Extension requires JavaScript. We decided to use Flask to send the data through a local server; however, encoding and parsing the data then became another challenge.

On the backend, we also had a hard time identifying the error caused by Flask's Cross-Origin Resource Sharing. The simple solution was to use flask_cors, but the process of identifying the cause was particularly tedious.

Accomplishments that we're proud of

It's our first hackathon, and also our first time developing with an LLM that solves real-world problems. The outcome is great. The user experience is smooth and intuitive. We have verified the quality of the generated quiz questions, which are accurate and inspiring. We are thrilled to have created a local Chrome Extension that can assist in our own studies, especially when learning on YouTube.

What we learned

Yiran: This is my first time building chrome extension, and I'm happy we are able to use it to solve a real-world problem.

Junwei: Learned basics of Javascript and HTML. It's my first time building Chrome Extension. First time using LLM API. Learned to use Flask to link Python backend and Javascript frontend.

What's next for YouTutors

Make use of timestamp so that the quiz pops up during video to make it more interactive. Develop more features such as summarizing video, analysizing solutions. Redevelop it purely based on Javascript so that we do not need Python or local server.