🎥 Multimodal Video Analysis

A modern web application that analyzes YouTube videos using AI to extract transcripts, identify key topics, and provide intelligent insights with timestamps.

✨ Features

• 🎥 Video Analysis - Extract key frames and analyze visual content from YouTube videos
• 📝 Transcription - Generate accurate transcripts and identify key topics discussed
• 🤖 AI Insights - Get intelligent summaries and insights powered by Google Gemini AI
• ⏱️ Timestamped Topics - View topics with precise timestamps for easy navigation
• 🔄 Robust Error Handling - Automatic retry logic with fallback models for reliable AI responses
• 🎨 Modern UI - Beautiful dark-themed interface built with Tailwind CSS and Radix UI

🛠️ Tech Stack

• Next.js 15.1.7 - React framework with App Router
• React 19 - Latest React features
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS framework
• Google Gemini AI - Multimodal AI for video analysis
• YouTube Transcript - Transcript extraction
• Radix UI - Accessible component primitives
• React Hook Form - Form management
• Zod - Schema validation

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Google Gemini API key (Get one here)

Installation

1. Clone the repository

git clone https://github.com/yourusername/Multimodal-Video-Analysis.git
cd Multimodal-Video-Analysis

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install

3. Set up environment variables

Create a .env.local file in the root directory:

GOOGLE_API_KEY=your_google_gemini_api_key_here

4. Start the development server

npm run dev
# or
yarn dev
# or
pnpm dev

5. Open your browser

Navigate to http://localhost:3000 to see the application.

📁 Project Structure

Multimodal-Video-Analysis/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── video-analysis/    # Video analysis API endpoint
│   │   │   └── video-chat/         # Video chat API endpoint
│   │   ├── config/
│   │   │   └── env.ts              # Environment variable validation
│   │   ├── page.tsx                # Main page component
│   │   └── YouTubeInput.tsx        # YouTube input component
│   └── utils/
│       ├── geminiClient.ts         # Gemini AI client with retry logic
│       └── logger.ts               # Custom logging utility
├── public/                         # Static assets
├── package.json
└── README.md

🔧 API Endpoints

POST /api/video-analysis

Analyzes a YouTube video and returns topics with timestamps.

Request Body:

{
  "videoUrl": "https://www.youtube.com/watch?v=..."
}

Response:

{
  "result": "{\"topics\": [{\"timestamp\": \"00:00:00\", \"topic\": \"Introduction\"}]}"
}

🎯 How It Works

1. Input: User provides a YouTube video URL
2. Transcript Extraction: The app fetches the video transcript using the YouTube Transcript API
3. AI Analysis: The transcript is sent to Google Gemini AI for analysis
4. Topic Extraction: AI identifies key topics and assigns timestamps
5. Display: Results are displayed in a user-friendly format with timestamps

🔒 Environment Variables

Variable	Description	Required
GOOGLE_API_KEY	Your Google Gemini API key	Yes

🧪 Development

Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run format - Format code with Prettier

🚢 Deployment

Deploy on Vercel

The easiest way to deploy this Next.js app is using Vercel:

1. Push your code to GitHub
2. Import your repository on Vercel
3. Add your GOOGLE_API_KEY environment variable
4. Deploy!

Other Platforms

This Next.js application can be deployed on any platform that supports Node.js:

• Netlify
• Railway
• AWS
• Google Cloud

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📝 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Google Gemini for the AI capabilities
• Next.js for the amazing framework
• Radix UI for accessible components

📧 Contact

For questions or suggestions, please open an issue on GitHub.

---

Made with ❤️ using Next.js and Google Gemini AI