Storyteller AI Project

▶️ Demo Video

Click here to watch the demo video

📘 Introduction

GenAI Interactive Learning Games is an innovative project that leverages Generative AI to create immersive and adaptive educational experiences. This specific module—AI-Powered Language and Literacy Games—focuses on enhancing creativity, storytelling abilities, and language skills through interactive, narrative-based gameplay. Players co-create stories alongside an AI storyteller that dynamically adapts the storyline based on the user's choices, boosting both engagement and language proficiency.

🙏 Acknowledgment

We would also like to acknowledge Google DeepMind for providing access to the Gemini Large Language Model, which is central to our project.

Special thanks to the open-source and educational AI communities for their continued inspiration and innovation.

🎯 Objectives

 ✦ To develop AI-driven storytelling games that improve reading, writing, and listening skills.

 ✦ To enhance creativity and critical thinking through interactive, AI-generated narratives.

 ✦ To integrate multimodal learning using speech-to-text and text-to-speech technologies.

 ✦ To deliver personalized learning experiences using adaptive content generation by Gemini.

 ✦ To promote language development in a fun and user-centered environment.

🧠 Large Language Model (LLM) Used

 ✦ We use Gemini by Google DeepMind as the core Large Language Model for:

 ✦ Natural Language Understanding (NLU): Interpreting user inputs and story decisions.

 ✦ Natural Language Generation (NLG): Creating coherent and engaging narrative responses.

 ✦ Contextual Adaptation: Adapting storylines based on user history and preferences.

🖥️ User Interface

Our user interface is designed to provide a seamless and interactive storytelling experience, accessible to users of all ages.

Homepage :

Dashboard :

feature :

📁 Project Structure

[Storyteller_Ai/ # Frontend (React/Vite)
├── public/ #Static assets
│ ├── banner.png
│ └── vite.svg
├── src/
│ ├── assets/ # Images/fonts
│ ├── components/ # React components
│ ├── layouts/ # Page layouts
│ ├── routes/ # Application routes
│ ├── index.css
│ └── main.jsx # Entry point
├── .eslintrc.cjs # ESLint config
├── tailwind.config.js # Tailwind CSS config
└── vite.config.js # Vite config

storyteller-flask/ # Backend (Flask)
├── app.py # Main application
├── requirements.txt # Python dependencies
└── test_env.py # Environment tests

🚀 Setup Guide

Frontend (React/Vite)

1. Navigate to frontend folder:

   cd Storyteller_Ai

2. Install dependencies:

   npm install

3. Start development server:

     npm run dev

4. Open your browser at http://localhost:5173

Backend (Flask)

1. Navigate to backend folder:

   cd storyteller-flask

2. Install dependencies:

   pip install -r requirements.txt

3. Run Flask application:

   python app.py

4. Open your browser at http://localhost:5000

🔧 Configuration

 ✦ Frontend environment: .env in Storyteller_Ai/

 ✦ Backend environment: .env in storyteller-flask/

🛠️ Tech Stack

Frontend:

 ✦ React + Vite

 ✦ Tailwind CSS

Backend:

 ✦ Flask (Python)

 ✦ Python 3.x

🤝 Contributing :

Fork the repository

 ✦ Create a new branch (git checkout -b feature/your-feature)

 ✦ Commit changes (git commit -m 'Add some feature')

 ✦ Push to branch (git push origin feature/your-feature)

 ✦ Open a Pull Request

Team Members

• Parikhit Kurmi
• Sneha Nandi
• Abhishek podder