A modern, responsive AI chatbot application powered by Google's Gemini AI model. Features a sleek interface with advanced functionality and customization options.
- Sleek-style interface with glass-morphism design
- Dark/Light/Auto themes with smooth transitions
- Responsive design that works on all devices
- 3D animated background using Spline
- GSAP-powered animations for smooth interactions
- Real-time streaming responses from Google Gemini 1.5 Flash
- Markdown support with syntax highlighting
- Code block rendering with copy functionality
- Regenerate responses feature
- Keyboard shortcuts for power users
- Copy & paste functionality for messages and code
- Auto-scroll and timestamps options
Enter- Send messageShift + Enter- New lineCtrl + K- Clear chatCtrl + D- Toggle themeCtrl + S- Export chatEsc- Close modals
- Python 3.9 or higher
- Google Gemini API key
-
Clone the repository
git clone <your-repo-url> cd ai-chatbot
-
Install dependencies
pip install -r requirements.txt
-
Set up environment variables Create a
.envfile in the root directory:GEMINI_API_KEY=your_gemini_api_key_here
-
Run the application
python app.py
-
Open in browser Navigate to
http://localhost:5000
ai-chatbot/
├── app.py # Flask backend application
├── requirements.txt # Python dependencies
├── .env # Environment variables (create this)
├── .gitignore # Git ignore rules
├── templates/
│ └── index.html # Main HTML template
├── static/
│ ├── css/
│ │ └── style.css # Comprehensive styling
│ └── js/
│ └── app.js # Frontend JavaScript logic
GEMINI_API_KEY- Your Google Gemini API key (required)FLASK_ENV- Set todevelopmentfor debug mode (optional)
The application includes a settings modal where users can customize:
- Theme preferences (Auto/Light/Dark)
- Font size adjustment
- Chat behavior options
- Animation speed controls
- Sound effects toggle
- Type your message in the input field
- Press Enter or click the send button
- Watch the AI respond in real-time
- Copy messages: Click the copy button below AI responses
- Regenerate: Click regenerate to get a new response
- Settings: Access via the three-dot menu in the header
- Export: Download your chat history as a text file
- Clear: Remove all messages and start fresh
The application supports three theme modes:
- Auto: Follows system preference
- Light: Clean, bright interface
- Dark: Easy on the eyes for night use
Modify static/css/style.css to customize:
- Color schemes
- Typography
- Layout spacing
- Animation timings
Extend static/js/app.js to add:
- New keyboard shortcuts
- Additional settings
- Custom message handling
- Enhanced UI interactions
The application uses Google's Gemini 1.5 Flash model for AI responses. Key features:
- Streaming responses for real-time output
- Error handling with user-friendly messages
- Session management for conversation context
- Rate limiting protection
Fully responsive design with:
- Touch-friendly interface
- Optimized layouts for small screens
- Gesture support for common actions
- Progressive Web App capabilities
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Google Gemini AI for the powerful language model
- GSAP for smooth animations
- Font Awesome for beautiful icons
- Marked.js for markdown parsing
- Flask for the robust backend framework
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Include your browser and Python version