Django Chat Interface

A modern, responsive chat interface built with Django for interacting with OpenAI's Large Language Models (LLMs).

Features

• 🎨 Modern UI: Beautiful, responsive design with gradient backgrounds and smooth animations
• 💬 Real-time Chat: Interactive chat interface with typing indicators
• 🤖 OpenAI Integration: Powered by GPT-3.5-turbo for intelligent responses
• 📱 Mobile Responsive: Works seamlessly on desktop and mobile devices
• 🔄 Session Management: Maintains chat history with unique session IDs
• 💾 Database Storage: Stores all chat messages in SQLite database
• 🛠️ Admin Interface: Django admin panel for managing chat messages
• 🚀 RESTful API: Clean API endpoints for sending messages and retrieving history
• 🧠 Conversation Memory: AI remembers conversation context for coherent responses

Screenshots

The interface features:

• Gradient background with modern card design
• User and AI message bubbles with distinct styling
• Typing indicators during AI responses
• Responsive design for all screen sizes

Prerequisites

• Python 3.8 or higher
• pip (Python package installer)
• OpenAI API key (get one at https://platform.openai.com/)

Installation

1. Clone or download the project

   cd test-project

2. Create and activate virtual environment

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

3. Install dependencies

   pip install -r requirements.txt

4. Set up OpenAI API key

   Create a .env file in the project root:

   cp env.example .env

   Edit .env and add your OpenAI API key:

   OPENAI_API_KEY=your_actual_openai_api_key_here

5. Run database migrations

   python manage.py makemigrations
   python manage.py migrate

6. Create superuser (optional, for admin access)

   python manage.py createsuperuser

7. Run the development server

   python manage.py runserver

8. Open your browser and navigate to

   http://127.0.0.1:8000/
   

Usage

Chat Interface

• Type your message in the input field
• Press Enter or click Send to submit
• View AI responses in real-time
• Chat history is automatically saved

Admin Panel

• Access at http://127.0.0.1:8000/admin/
• View and manage all chat messages
• Filter by role, session, or timestamp
• Search through message content

Project Structure

test-project/
├── chat/                          # Chat application
│   ├── models.py                  # Database models
│   ├── views.py                   # View functions and API endpoints
│   ├── urls.py                    # URL routing for chat app
│   ├── admin.py                   # Admin interface configuration
│   └── templates/chat/            # HTML templates
│       └── chat.html              # Main chat interface
├── chat_project/                  # Django project settings
│   ├── settings.py                # Project configuration
│   ├── urls.py                    # Main URL routing
│   └── wsgi.py                    # WSGI configuration
├── manage.py                      # Django management script
├── requirements.txt               # Python dependencies
└── README.md                      # This file

API Endpoints

Send Message

• URL: /api/send/
• Method: POST
• Body: {"message": "Your message", "conversation_id": "optional_conversation_id"}
• Response: {"success": true, "response": "AI response", "conversation_id": "conversation_id"}

Get Chat History

• URL: /api/history/<conversation_id>/
• Method: GET
• Response: {"messages": [{"role": "user", "content": "...", "timestamp": "..."}]}

Create Conversation

• URL: /api/conversation/create/
• Method: POST
• Body: {"title": "Conversation title"}
• Response: {"success": true, "conversation_id": "id", "title": "title"}

Delete Conversation

• URL: /api/conversation/<conversation_id>/delete/
• Method: DELETE
• Response: {"success": true}

OpenAI Integration

This project now includes full OpenAI integration:

Features

• GPT-3.5-turbo: Uses OpenAI's latest chat model
• Conversation Memory: AI remembers the full conversation context
• Error Handling: Graceful handling of API errors, rate limits, and authentication issues
• Configurable: Easy to switch models or adjust parameters

Configuration

The OpenAI integration is configured through environment variables:

# Required
OPENAI_API_KEY=your_openai_api_key_here

# Optional (can be set in settings.py)
OPENAI_MODEL=gpt-3.5-turbo  # Default model
OPENAI_MAX_TOKENS=1000      # Maximum response length
OPENAI_TEMPERATURE=0.7      # Response creativity (0.0-1.0)

How It Works

1. User sends a message
2. System formats the conversation history for OpenAI API
3. OpenAI generates a contextual response
4. Response is saved to the database
5. User receives the AI response

Customization

You can easily customize the AI behavior by modifying chat/services.py:

# Change the model
ai_response = openai_service.get_chat_response(messages_for_api, model="gpt-4")

# Adjust system prompt
messages.append({
    "role": "system",
    "content": "You are a helpful coding assistant. Provide code examples and explanations."
})

Customization

Integrating with Real LLM APIs

To connect with actual LLM services (OpenAI, Anthropic, etc.), modify the send_message view in chat/views.py:

# Example OpenAI integration
import openai

# In the send_message view, replace the placeholder response with:
openai.api_key = 'your-api-key'
response = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=[{"role": "user", "content": user_message}]
)
ai_response = response.choices[0].message.content

Styling

• Modify CSS in chat/templates/chat/chat.html
• Update color schemes, fonts, and layout
• Add custom animations and transitions

Development

Running Tests

python manage.py test

Code Quality

• Follow PEP 8 style guidelines
• Use meaningful variable and function names
• Add docstrings to functions and classes

Deployment

Production Settings

1. Set DEBUG = False in settings.py
2. Configure ALLOWED_HOSTS with your domain
3. Use a production database (PostgreSQL, MySQL)
4. Set up static file serving
5. Configure HTTPS

Environment Variables

export DJANGO_SECRET_KEY="your-secret-key"
export DJANGO_DEBUG="False"
export DATABASE_URL="your-database-url"

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

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

Support

For issues and questions:

• Check the Django documentation
• Review the code comments
• Open an issue in the repository

Future Enhancements

• User authentication and user-specific chat history
• File upload support
• Real-time WebSocket communication
• Multiple AI model support
• Chat export functionality
• Advanced message formatting
• Chat analytics and insights