🤖 Gemini AI Chatbot

A beautiful and responsive React application featuring Google's Gemini AI chatbot with a modern light blue theme.

✨ Features

• 💬 Real-time chat with Google's Gemini AI
• 🖼️ Image Analysis - Upload and analyze images
• 🎵 Audio Processing - Upload and analyze audio files
• 🎨 Beautiful light blue gradient design
• 📱 Fully responsive for all devices
• ⚡ Real-time typing indicators
• 📎 Drag-and-drop file upload
• ✨ Smooth animations and transitions
• 🚀 Easy setup and deployment

🛠 Prerequisites

Before running this application, make sure you have:

• Node.js (version 14 or higher) - Download here
• npm (comes with Node.js)
• A Google AI API key (already configured in this app)

🚀 Quick Start

Method 1: Automated Setup (Recommended)

1. Clone or download this project

2. Navigate to the project directory:

   cd Scene_Creator

3. Run the setup script:

   chmod +x setup.sh
   ./setup.sh

4. Start the application:

   npm start

Method 2: Manual Setup

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

3. Open your browser and go to:

   http://localhost:3000
   

🎮 How to Use

1. Text Chat: Type a message in the input field and press Enter or click send (📤)
2. Upload Files: Click the attach button (📎) to upload images or audio files
3. Multimodal Analysis: Upload files with or without text for AI analysis
4. File Management: Remove individual files or clear all before sending
5. Wait for Response: See typing indicator while Gemini AI processes your request
6. Continue Conversation: Chat history is preserved during the session

📎 Supported File Types

• Images: JPG, PNG, GIF, WebP, and other common image formats
• Audio: MP3, WAV, M4A, and other common audio formats
• File Size: Up to 20MB per file

🎨 Design Features

• Light Blue Theme: Calming gradient backgrounds and accents
• Modern UI: Clean, minimalist design with smooth animations
• Responsive: Works perfectly on desktop, tablet, and mobile devices
• Accessibility: Keyboard navigation and screen reader friendly
• Visual Feedback: Loading states, hover effects, and smooth transitions

🔧 Technical Stack

• React 18 - Modern React with hooks
• Google Generative AI - Official Gemini AI SDK
• CSS3 - Custom styling with gradients and animations
• ES6+ - Modern JavaScript features

📁 Project Structure

gemini-chatbot-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js          # Main chatbot component
│   ├── App.css         # Chatbot styling
│   ├── index.js        # React entry point
│   └── index.css       # Global styles
├── package.json        # Dependencies and scripts
├── setup.sh           # Automated setup script
└── README.md          # This file

🔐 API Configuration

The Google Gemini AI API key is already configured in this application. The chatbot uses the gemini-pro model for generating responses.

🚀 Available Scripts

• npm start - Runs the app in development mode
• npm build - Builds the app for production
• npm test - Launches the test runner
• npm eject - Ejects from Create React App (not recommended)

🐛 Troubleshooting

Common Issues:

1. "Module not found" errors

   • Make sure you've run npm install
   • Delete node_modules folder and package-lock.json, then run npm install again

2. API errors

   • Check your internet connection
   • The API key is pre-configured, but ensure it's still valid

3. Port already in use

   • The app runs on port 3000 by default
   • If port 3000 is busy, React will automatically suggest another port

Getting Help:

If you encounter any issues:

1. Check the browser console for error messages
2. Ensure all dependencies are properly installed
3. Verify that Node.js and npm are up to date

🌟 Features in Detail

Chat Interface

• Clean, modern chat bubble design
• User messages appear on the right (blue)
• AI responses appear on the left (white with blue border)
• Automatic scrolling to newest messages

Loading States

• Animated typing indicator while AI is responding
• Disabled input during processing
• Visual feedback for all user interactions

Responsive Design

• Optimized for mobile devices
• Touch-friendly interface
• Adaptive layout for different screen sizes

🎯 Future Enhancements

Potential improvements for this chatbot:

• 💾 Chat history persistence
• 🌙 Dark mode toggle
• 📄 Export chat conversations
• 🔄 Regenerate responses
• 📎 File upload support
• 🎵 Voice input/output
• 👥 Multiple conversation threads

📝 License

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

---

Enjoy chatting with your Gemini AI assistant! 🤖✨