Experience lightning-fast AI responses with Groq's cutting-edge inference technology!
| Feature | Description |
|---|---|
| ⚡ Ultra-Fast AI | Powered by Groq's high-performance inference API for instant responses |
| 🎨 Modern UI Design | Beautiful gradient backgrounds with smooth, eye-catching animations |
| 💬 Real-time Chat | Interactive chat interface with live typing indicators |
| 📱 Fully Responsive | Seamlessly works on desktop, tablet, and mobile devices |
| ✨ Cool Animations | Smooth transitions, typewriter effects, and animated backgrounds |
| 🎯 User-Friendly | Character counter, auto-resize input, and intuitive keyboard shortcuts |
| 🔒 Secure | Environment-based API key management for maximum security |
| 🌈 Beautiful Design | Modern dark theme with gradient accents and glassmorphism effects |
- ⚡ Lightning Fast: Get responses in milliseconds, not seconds
- 💰 Cost-Effective: More affordable than traditional APIs
- 🔥 High Performance: Optimized for speed and efficiency
- 🚀 Easy Integration: Simple API with excellent documentation
- 📈 Scalable: Handles high traffic with ease
Before you begin, ensure you have:
- ✅ Python 3.8+ installed on your system
- ✅ Groq API Key (Get one here)
- ✅ pip package manager
- ✅ A modern web browser
git clone https://github.com/yourusername/ai-chatbot.git
cd ai-chatbotpip install -r requirements.txtCreate a .env file in the root directory:
# Create .env file
touch .env # On Windows: create .env file manuallyAdd your Groq API key to .env:
GROQ_API_KEY=your_groq_api_key_here💡 Get your API key: Visit Groq Console to generate your API key
python app.pyNavigate to: Orion AI chatbot
🎉 You're all set! Start chatting with your AI assistant!
ai-chatbot/
│
├── 📄 app.py # Flask backend server with Groq API integration
├── 📁 templates/
│ └── 📄 index.html # Main HTML interface
├── 📁 static/
│ ├── 🎨 styles.css # Beautiful CSS with animations
│ └── ⚡ script.js # Interactive JavaScript functionality
├── 📦 requirements.txt # Python dependencies
├── 🔧 Procfile # Deployment configuration
├── 📝 README.md # This file
├── 📚 DEPLOYMENT.md # Deployment guide
└── 🔑 .env # Environment variables (create this)
- ⚡ Groq API Integration - Ultra-fast AI inference
- 🔄 RESTful API - Clean endpoint for chat interactions
- 🛡️ Error Handling - Comprehensive error management
- 🌐 CORS Enabled - Cross-origin request support
- 🔐 Secure Configuration - Environment variable management
- 🎭 Animated Background - Floating gradient circles with smooth motion
- 💬 Message Bubbles - Distinct styles for user and AI messages
- ⌨️ Typing Indicator - Visual feedback when AI is processing
- ✍️ Typewriter Effect - AI responses appear with realistic typing animation
- 📜 Smooth Scrolling - Auto-scrolls to latest messages
- 🔢 Character Counter - Real-time count with color-coded warnings
- 📏 Auto-resize Input - Textarea expands dynamically as you type
- ⌨️ Keyboard Shortcuts - Enter to send, Shift+Enter for new line
In app.py, you can switch between different Groq models:
model="llama-3.1-70b-versatile" # Default - fast and versatile
# Other options:
# model="mixtral-8x7b-32768" # For longer context
# model="gemma-7b-it" # Google's Gemma modelEdit CSS variables in static/styles.css:
:root {
--primary-color: #6366f1; /* Change primary color */
--secondary-color: #8b5cf6; /* Change secondary color */
--bg-dark: #0f172a; /* Change background */
/* ... customize more colors ... */
}Customize the AI's personality in app.py:
{"role": "system", "content": "You are a helpful, friendly, and conversational AI assistant. Provide clear and concise responses."}| Problem | Solution |
|---|---|
| "API key not configured" | Ensure .env file exists with GROQ_API_KEY=your-key |
| "Invalid API key" | Verify your key at Groq Console |
| Key not working | Check for extra spaces or quotes in .env file |
If port 5000 is busy, change it in app.py:
port = int(os.environ.get('PORT', 5001)) # Use port 5001 insteadReinstall dependencies:
pip install --upgrade -r requirements.txtEnsure flask-cors is installed:
pip install flask-corsDeploy your chatbot to the cloud and share it with the world!
| Platform | Free Tier | Difficulty | Best For |
|---|---|---|---|
| Render | ✅ Yes | ⭐ Easy | Beginners |
| Railway | ✅ Yes | ⭐ Easy | Quick deployment |
| PythonAnywhere | ✅ Yes | ⭐⭐ Medium | Python-focused |
| Fly.io | ✅ Yes | ⭐⭐ Medium | Global deployment |
📖 Detailed deployment guide: See DEPLOYMENT.md
- ✅ Deploy to Render or Railway (free tiers available)
- ✅ Add the live URL to your portfolio
- ✅ Include screenshots and project description
- ✅ Link to GitHub repository
💡 Add your own screenshots to showcase the beautiful UI!
| Category | Technology |
|---|---|
| Backend | Python 3.8+, Flask 3.0 |
| AI Engine | Groq API (Ultra-fast inference) |
| Frontend | HTML5, CSS3, Vanilla JavaScript |
| Styling | Custom CSS with animations |
| Deployment | Render, Railway, or any Python host |
- 📖 Setup Guide - Detailed setup instructions
- 🔑 API Key Setup - How to configure your Groq API key
- 🚀 Deployment Guide - Deploy to various platforms
- ⚡ Quick Deploy - 5-minute deployment guide
- 💼 Portfolio Tips - Showcase your project
Contributions are welcome! Feel free to:
- 🐛 Report bugs
- 💡 Suggest new features
- 🔧 Submit pull requests
- 📝 Improve documentation
- 💾 Conversation history persistence
- 🔐 User authentication
- 🎨 Multiple chat themes
- 📎 File upload capabilities
- 🌍 Multi-language support
- 📊 Usage analytics
This project is open source and available under the MIT License.
- Groq - For the amazing ultra-fast inference API
- Flask - For the lightweight web framework
- Poppins Font - For the beautiful typography