/KinoQuizAI

Django-based web application that offers AI-generated movie quizzes powered by ChatGPT API.

Primary LanguagePython

KinoQuizAI

Introduction

cover KinoQuizAI is a web application that offers AI-generated movie quizzes powered by ChatGPT API.

Users can test their knowledge of movies from various genres and time periods by playing random quizzes and earning scores. They can also compete with other users on the leaderboard and see how they rank among movie enthusiasts. KinoQuizAI is a fun and convenient way to challenge yourself and learn more about movies.

Features

KinoQuizAI allows users to play movie quizzes generated by ChatGPT, check the answers and explanations, and compete with other users by scoring points for consecutive correct answers.

  • A collection of movie quizzes generated by ChatGPT based on 300 films from 1996 to 2021 that have received more than 200,000 ratings on the IMDB Top 250 list.
  • A simple and intuitive interface that allows you to answer single-choice questions and get instant feedback.
  • A scoring system that rewards correct answers with 1 point and penalizes wrong answers with 1 heart loss. You start each game with 3 hearts and the game ends when you run out of hearts.
  • A leaderboard that displays the top scores of all users who have played the game.

Tech Stacks

  • Back-end : Python(Django)
  • Front-end : JavaScript, Tailwind CSS, HTML
  • Infra : GCP App Engine, Supabase(PostgreSQL, Storage)

Project Background

"Is it possible to use generative AI as a data backend?"

The KinoQuizAI project was born out of this single idea. I wanted to explore the possibility of using LLM(Large Language Model) as a content data backend for an app, instead of just a conversational agent.

Back in February 2023, I wrote a blog post about "Prompt Engineering" where I presented an example of engineering prompts to generate a movie quiz. This project applies similar but more advanced technique to create a fun and interactive quiz app using ChatGPT.

Lessons Learned

Maintaining consistency of GPT-genarated data

By using the ChatGPT API, the app can theoretically provide new movie quizzes that are never repeated. However, the main function of LLM like GPT is to predict the next text based on a given prompt. This means that ChatGPT may not always produce the data in the desired format or topic.

To minimize this problem and to maintain the consistency and quality of the generated quiz data, my project implements several data-handling functions on the back-end: sending a well-designed prompt with fine-tuned parameters to the third-party API, receiving the real-time generated data, validating and preprocessing the data, saving it to DB, and adding a retry mechanism for cases where fetching the data fails.

Through carefully crafted prompts, I was able to deliver quality movie quizzes and related content from ChatGPT in the desired format and topic every time. It was possible by implementing prompt engineering techniques like "Instruction Prompting" and "Few-shot Prompting" which are well explained in this article of Lilian Weng, the Head of OpenAI's Applied AI Research.

Implementing logic to reduce costs

KinoQuizAI currently utilizes the gpt-3.5-turbo model, which is a paid product of OpenAI at a rate of $0.002 per 1,000 tokens. Generally, between 1,000 and 1,500 tokens are needed for KinoQuizAI to exchange communication with the ChatGPT API and receive quiz data. In addition to the cost, the average response time of 5~15 seconds for exchanging data with the ChatGPT API also adversely affects the user experience.

To optimize the user experience and reduce the server costs, I have implemented a small logic that minimizes the number of requests to ChatGPT API. The logic works as follows: when a new user signs up for KinoQuizAI, they will first have access to quizzes that have been previously created by other users and stored in the DB. This way, they can enjoy quizzes without waiting for ChatGPT to generate them. Once a user has completed all the quizzes available in the DB, they will receive new quizzes from ChatGPT in real-time. These new quizzes will also be stored in the DB for future use by other users.

Using JS to create seamless user experience

To ensure a seamless and dynamic interface for the quiz playing screen, I have used JavaScript to manipulate the document structure according to the responses from the back-end side. By using fetch API in JavaScript, this app can request and receive data asynchronously while the user is playing the quiz. If the data is successfully received, the quiz page will be updated dynamically without reloading. This enhances the usability and interactivity of the app.

Remaining Challenges

"Hallucinations" in GPT-genarated data

Even with carefully engineered prompts, ChatGPT still may generate "hallucinations" or false information in the responses. This also affects the quality of the quiz content. Through my experiments during the development, I was able to reduce the chance of generating inaccurate quizzes to about one in ten with KinoQuizAI. However, I'm continuing to explore ways to reduce this frequency further.

Processing the response data

This app is designed to receive quiz data in a specific format from ChatGPT. But occasionally, it may receive data that does not conform to this format. In those cases, the app will display an error message and a button for the user to request the quiz data again. While currently, this is the solution, I am actively exploring more subtle ways to address this issue.

Screenshots

  • Playing Quiz quiz_playing

  • Getting Result quiz_result

  • Leaderboard leaderboard