AI Chatbot Web App

A modern, attractive chatbot web application built with Python Flask. Features a responsive UI with smooth animations and SVG icons.

Features

• 🤖 Interactive chatbot with predefined responses
• 🎨 Modern, gradient-based UI design
• 📱 Responsive design for mobile and desktop
• ⚡ Real-time message exchange via AJAX
• 🎭 Smooth animations and transitions
• 🔄 Auto-scrolling chat messages

Technologies Used

• Backend: Python Flask
• Frontend: HTML5, CSS3, JavaScript
• Styling: Custom CSS with gradients and animations
• Icons: SVG icons for modern look

Installation

1. Clone the repository:

git clone https://github.com/nensii21/AI-simple-chatbot.git
cd chatbot-web-app

2. Create a virtual environment:

python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install dependencies:

pip install -r requirements.txt

4. Run the application:

python app.py

5. Open your browser and navigate to http://127.0.0.1:5000

Usage

• Type messages in the input field
• Press Enter or click the send button (paper plane icon)
• The chatbot responds with predefined messages based on keywords

Project Structure

chatbot-web-app/
├── app.py                 # Flask application
├── chatbot.py            # Command-line version (bonus)
├── requirements.txt       # Python dependencies
├── README.md             # Project documentation
├── .gitignore           # Git ignore file
├── templates/
│   └── index.html       # Main HTML template
└── static/
    ├── style.css        # CSS styles
    └── script.js        # JavaScript functionality

Customization

Adding New Responses

Edit the get_response() function in app.py to add more chatbot responses:

responses = {
    'hello': ['Hello!', 'Hi there!', 'Greetings!'],
    'your_keyword': ['Response 1', 'Response 2', 'Response 3'],
    # Add more responses here
}

Styling Changes

Modify static/style.css to customize the appearance:

• Change gradient colors
• Adjust animations
• Modify layout and spacing

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Screenshots

Future Enhancements

• Integration with AI APIs (OpenAI, Dialogflow)
• User authentication and chat history
• Voice input/output
• Multiple chat rooms
• File upload support
• Dark mode toggle

Support

If you find this project helpful, please give it a ⭐️ on GitHub!

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