Menu

I Built an AI App Using Streamlit in 6 Hours

Category:

Introduction

Streamlit recently announced a hackathon inviting developers to create applications that utilize large language models while addressing real-world problems. Inspired by this challenge, I decided to build a Streamlit app, which I named QuizTube, over a weekend. The primary goal of this project is to inspire you to create your own applications, whether for your portfolio or simply for fun. Let’s dive into the details of how I constructed this app!

Demo of the App

QuizTube allows users to input a YouTube link and their OpenAI API key. Upon submission, the app generates a quiz based on the content of the video, enabling users to test their understanding. Correct answers trigger a celebratory balloon animation, while incorrect answers are displayed for review. The sidebar includes additional information about the app and my social links.

Demo of QuizTube app

How it Works

To break down the app’s functionality, I approached it in four main steps:

  1. Retrieve the YouTube Video ID: The app starts by extracting the YouTube video ID from the provided link. Instead of creating a complex function, I utilized the pytube module, which simplifies this process.
  2. Extract Video Captions: Once I have the video ID, I needed to obtain the video’s captions. I discovered a Python library that extracts captions directly from the video, provided that captions are available. The extracted format includes the text, starting time, and duration, but I focused solely on the text to create the full transcription.
  3. Generate the Quiz: With the transcription ready, I used LangChain’s prompt templates to generate the quiz. Initially, I aimed for a dictionary format but found better success with a list of lists. This output, despite appearing as a string, can be converted into an actual list using Python’s built-in capabilities.
  4. Create the Streamlit App: I built the app’s main interface, importing helper functions for quiz creation and error handling. The sidebar contains markdown for additional context, and users can input the YouTube link and OpenAI API key.

Additionally, I included a fun feature: toast messages that pop up randomly when the page reloads. I requested ChatGPT to generate a set of 20 messages for this purpose, adding a touch of personality to the app.

How QuizTube works

To make the app user-friendly, I integrated a tutorial hosted on YouTube, which I created using ElevenLabs for AI voiceovers. This way, users can easily navigate the app without my direct voiceover.

Outro

In conclusion, creating the QuizTube app was an exciting challenge that allowed me to blend various technologies, including Streamlit, LangChain, and OpenAI. The project not only helped me learn but also provided a functional tool for users to enhance their understanding of educational content on YouTube. I hope this post inspires you to embark on your own app-building journey!

You can find the source code linked below if you’re interested in repurposing it for your projects.

Further Links