AI Interactive Slide Generator

An AI-powered application that generates interactive educational slide presentations using Next.js, TypeScript, AWS S3, and OpenAI.

Features

• AI-Powered Content Generation: Uses OpenAI GPT-4o to create educational content
• Dynamic Slide Creation: Generates slides based on topic complexity (2-8 slides)
• AI Image Generation: Creates consistent, professional illustrations using GPT Image 1
• Interactive Presentation: PowerPoint-like interface with navigation controls
• AWS S3 Storage: Stores presentations with metadata for future access
• Responsive Design: Works on desktop and mobile devices

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS
• AI Services: OpenAI GPT-4o (text), GPT Image 1 (images)
• Cloud Storage: AWS S3
• Styling: Tailwind CSS

Getting Started

1. Clone the repository

2. Install dependencies:

   npm install

3. Set up environment variables in .env.local:

   OPENAI_API_KEY=your_openai_api_key
   AWS_ACCESS_KEY_ID=your_aws_access_key
   AWS_SECRET_ACCESS_KEY=your_aws_secret_key
   AWS_REGION=your_aws_region
   AWS_S3_BUCKET=your_s3_bucket_name
   

4. Run the development server:

   npm run dev

5. Open http://localhost:3000 in your browser

How It Works

1. User Input: Enter a topic or prompt
2. Content Generation: AI generates structured educational content
3. Image Creation: AI creates consistent illustrations for each slide
4. Storage: Presentation is saved to AWS S3 with metadata
5. Interactive Display: View slides with navigation controls

Project Structure

src/
├── app/
│   ├── api/
│   │   └── generate-slides/     # API endpoint for slide generation
│   ├── page.tsx                 # Main application page
│   └── layout.tsx               # App layout
├── utils/
│   └── s3.ts                    # AWS S3 utilities

Features

• Dynamic Slide Count: Number of slides adapts to topic complexity
• Consistent Visual Style: All images use the same professional design
• Interactive Navigation: Previous/next buttons, slide dots, overview
• Metadata Storage: Saves presentation ID, prompt, creation time
• S3 Integration: Secure cloud storage with direct access links

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.