Neural Nexus - AI Chat Interface

A beautiful, modern sci-fi themed chatbot web application powered by Google's Gemini AI. Experience the future of AI conversation with stunning visual effects and intuitive design.

✨ Features

• 🤖 Gemini AI Integration - Powered by Google's latest Gemini Pro model
• 🎨 Sci-Fi Design - Beautiful futuristic UI with neon colors and animations
• 💬 Real-time Chat - Smooth conversation flow with typing indicators
• ⚙️ Customizable Settings - Adjust temperature, max tokens, and more
• 📱 Responsive Design - Works perfectly on desktop and mobile devices
• ⌨️ Keyboard Shortcuts - Quick access to common functions
• 🌟 Particle Effects - Dynamic background animations
• 💾 Local Storage - Settings and preferences saved locally
• 📝 Markdown Support - Rich text formatting in AI responses

🚀 Quick Start

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A Google Gemini API key

Getting Your Gemini API Key

1. Visit Google AI Studio
2. Sign in with your Google account
3. Click "Create API Key"
4. Copy your API key (keep it secure!)

Installation

1. Clone or Download this repository
2. Configure your API key:
   • Copy config.example.js to config.js
   • Edit config.js and replace YOUR_API_KEY_HERE with your actual Gemini API key
3. Open index.html in your web browser
4. Start chatting with the AI!

Note: The config.js file is ignored by git to keep your API key secure.

🎯 Usage

Basic Chat

• Type your message in the input field
• Press Enter or click the send button
• The AI will respond with contextual, intelligent replies

Settings Configuration

1. Click the gear icon (⚙️) in the bottom right
2. Enter your Gemini API key
3. Adjust temperature (0.0-1.0) for response creativity
4. Set max tokens for response length
5. Save your settings

Keyboard Shortcuts

• Ctrl/Cmd + K - Focus on message input
• Ctrl/Cmd + L - Clear chat history
• Escape - Close settings panel
• Enter - Send message
• Shift + Enter - New line in message

🎨 Design Features

Visual Elements

• Animated Background - Dynamic gradient shifts and particle effects
• Neon Glows - Cyan and green accent colors with glow effects
• Smooth Animations - Message transitions and UI interactions
• Sci-Fi Typography - Orbitron and Rajdhani fonts for futuristic feel

UI Components

• Chat Interface - Clean message bubbles with avatars
• Settings Panel - Slide-out configuration panel
• Loading States - Animated spinners and typing indicators
• Notifications - Toast-style alerts for user feedback

🔧 Technical Details

Technologies Used

• HTML5 - Semantic markup structure
• CSS3 - Advanced styling with animations and gradients
• JavaScript (ES6+) - Modern JavaScript with classes and async/await
• Google Gemini API - AI conversation capabilities

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

API Integration

The application uses Google's Gemini Pro model through the REST API:

• Endpoint: https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent
• Supports conversation history
• Configurable generation parameters

🛠️ Customization

Styling

Modify styles.css to customize:

• Color scheme and gradients
• Animation timings
• Typography and spacing
• Responsive breakpoints

Functionality

Edit script.js to add:

• New keyboard shortcuts
• Additional API parameters
• Custom message formatting
• Enhanced error handling

Configuration

Adjust default settings in the JavaScript constructor:

this.temperature = 0.7;    // Response creativity (0.0-1.0)
this.maxTokens = 1000;     // Maximum response length

🔒 Privacy & Security

• Local Storage Only - Your API key is stored locally in your browser
• No Server Required - All processing happens client-side
• Secure API Calls - Direct communication with Google's secure endpoints
• No Data Collection - We don't store or transmit your conversations

🐛 Troubleshooting

Common Issues

"Please configure your Gemini API key"

• Open settings (gear icon) and enter your API key
• Make sure the key is valid and has proper permissions

"Failed to get response from Gemini API"

• Check your internet connection
• Verify your API key is correct
• Ensure you have sufficient API quota

Chat not working on mobile

• Try refreshing the page
• Check if JavaScript is enabled
• Ensure you're using a supported browser

Performance Tips

• Close other browser tabs to free up memory
• Use a modern browser for best performance
• Disable browser extensions if experiencing issues

📱 Mobile Experience

The application is fully responsive and optimized for mobile devices:

• Touch-friendly interface
• Adaptive layout for different screen sizes
• Optimized animations for mobile performance
• Full-screen settings panel on mobile

🔮 Future Enhancements

Planned features for upcoming versions:

• Voice input/output capabilities
• File upload and image analysis
• Multiple AI model support
• Conversation export/import
• Theme customization options
• Advanced conversation management

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Development Setup

1. Clone the repository
2. Open index.html in your browser
3. Use browser dev tools for debugging
4. Test on multiple browsers and devices

📄 License

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

🙏 Acknowledgments

• Google AI for providing the Gemini API
• Font Awesome for the beautiful icons
• Google Fonts for the typography
• The open source community for inspiration and tools

📞 Support

If you encounter any issues or have questions:

• Check the troubleshooting section above
• Review the browser console for error messages
• Ensure your API key is properly configured
• Try refreshing the page and clearing browser cache

---

Neural Nexus - Where human intelligence meets artificial intelligence in a beautiful, futuristic interface.

Built with ❤️ and powered by Google Gemini AI