🧠 Gaia Flashcard Generator

A lightweight, AI-powered flashcard application that leverages Gaia Node capabilities to create personalized learning experiences. Transform any topic into interactive flashcards with markdown support and a beautiful, modern interface.

✨ Features

• 🤖 AI-Powered Generation: Automatically create flashcards from any topic using Gaia Node
• 📝 Markdown Support: Rich text formatting with headers, lists, code blocks, and inline code
• 🎨 Modern UI: Vibrant gradient design with glassmorphism effects
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• 🔄 Interactive Cards: Smooth flip animations with 3D effects
• ⚡ Real-time Generation: Dynamic flashcard creation with loading states
• 🎯 Quick Prompts: Pre-defined topic suggestions for instant learning

🚀 What This App Does

Gaia Flashcards simplifies the learning process by:

1. Topic Input: Enter any subject you want to learn about
2. AI Processing: Uses your Gaia Node to generate relevant questions and answers
3. Interactive Learning: Review flashcards with smooth flip animations
4. Progress Tracking: Monitor token usage and generation statistics

Perfect for:

• 📚 Students preparing for exams
• 🧑‍💻 Developers learning new technologies
• 🎓 Educators creating study materials
• 🧠 Anyone wanting to improve memorization

🛠️ Technology Stack

• Frontend: HTML5, CSS3, Bootstrap 5.3.2, Vanilla JavaScript
• Backend: Express.js v5.1.0
• AI Integration: OpenAI SDK v5.15.0 (Gaia Node compatible)
• Runtime: Node.js v18+
• Styling: Custom CSS with gradients and glassmorphism effects

📋 Prerequisites

Before running this application, ensure you have:

• Node.js v18 or higher (Download here)
• npm (comes with Node.js)
• Gaia Node or OpenAI API access
• A modern web browser

🔧 Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd gaia-flashcards

2. Install Dependencies

npm install

3. Environment Configuration

Create a .env file in the root directory (optional):

# Gaia Node Configuration
GAIA_NODE_URL=https://your-gaia-node-url.gaia.domains/v1
GAIA_API_KEY=your-api-key

Note: If you don't set these environment variables, the app will use default Gaia Node settings:

• Default URL: https://0xee7253294f6580c32c3ed745fe578b2eb8220f46.gaia.domains/v1
• Default API Key: gaia

4. Start the Application

npm start
# or
node server.js

5. Open in Browser

Navigate to: http://localhost:3000

🎮 How to Use

Basic Usage

1. Enter a Topic: Type any subject in the input field

   Example: "Basics of Quantum Computing"
   

2. Generate Flashcards: Click the "Generate Flashcards" button

3. Review Cards: Click on any flashcard to flip between question and answer

4. Try Quick Prompts: Use the suggested topics for instant learning

Advanced Features

• Markdown Content: The AI can generate flashcards with formatted text, code examples, and lists
• Multiple Topics: Generate multiple sets of flashcards for different subjects
• Token Tracking: Monitor your API usage with the token counter

🔑 API Configuration

Using Your Own Gaia Node

1. Replace the GAIA_NODE_URL with your node's URL
2. Set your GAIA_API_KEY if required
3. Restart the server

📁 Project Structure

gaia-flashcards/
├── public/
│   ├── index.html          # Main application interface
│   └── style.css           # Custom styling and animations
├── server.js               # Express.js server and API endpoints
├── package.json            # Dependencies and scripts
├── package-lock.json       # Dependency lock file
└── README.md              # This file

🎨 Customization

Changing Colors

The app uses CSS variables for easy theming. Edit public/style.css:

:root {
    --primary-gradient: linear-gradient(135deg, #your-color 0%, #your-color 100%);
    --secondary-gradient: linear-gradient(135deg, #your-color 0%, #your-color 100%);
    /* ... more variables */
}

Modifying AI Behavior

Edit the prompts in server.js:

const questionPrompt = `Your custom prompt for generating questions...`;
const answerPrompt = `Your custom prompt for generating answers...`;

🔍 Troubleshooting

Common Issues

Server won't start:

• Ensure Node.js v18+ is installed
• Check if port 3000 is available
• Run npm install to install dependencies

Flashcards not generating:

• Verify your Gaia Node/API configuration
• Check network connectivity
• Ensure your API key has sufficient credits

UI issues:

• Clear browser cache
• Ensure JavaScript is enabled
• Try a different browser

Performance Tips

• Shorter topics generate faster
• Simple language works better with AI
• Monitor token usage to manage costs

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request