🤖 AI Chatbot with Ollama

A modern, full-stack AI chatbot application powered by local LLMs

Features • Demo • Installation • Usage • Tech Stack • Contributing

---

✨ Features

🎨 Beautiful UI/UX

• 🌓 Dark/Light Mode - Seamless theme switching with custom dark blue palette
• 📱 Fully Responsive - Works flawlessly on desktop, tablet, and mobile
• 🎭 Smooth Animations - Elegant transitions and fade-in effects
• 🎯 Modern Design - Clean, intuitive interface with gradient accents

💬 Chat Functionality

• 🗨️ Multiple Chat Sessions - Create and manage unlimited conversations
• 🔍 Search Chats - Quickly find previous conversations
• 📝 Message History - Full conversation context maintained
• ⚡ Real-time Responses - Instant AI replies with typing indicators
• 🗑️ Delete Chats - Easy cleanup of unwanted conversations

🚀 Technical Features

• 🤖 Local LLM - Runs completely offline using Ollama (no API costs!)
• 💾 Persistent Storage - SQLite database for chat history
• 🔄 REST API - Clean Django REST Framework backend
• ⚛️ Modern Frontend - React 19 with hooks and functional components
• 📦 State Management - React Query for efficient data fetching

---

🛠️ Tech Stack

Frontend

• ⚛️ React 19.2.0 - Modern UI library
• 🎨 Tailwind CSS 4.0 - Utility-first CSS framework
• 🔀 React Router 7.9 - Client-side routing
• 🔄 TanStack Query 5.90 - Data fetching and caching
• 🎭 Lucide React - Beautiful icon library
• ⚡ Vite 7.2 - Lightning-fast build tool

Backend

• 🐍 Django 5.1 - High-level Python web framework
• 🔌 Django REST Framework 3.15 - Powerful API toolkit
• 🗄️ SQLite - Lightweight database
• 🦙 LangChain - LLM application framework
• 🤖 Ollama - Local LLM runtime

AI Model

• 🦙 Llama 2 - Meta's open-source language model
• 💻 Runs Locally - No internet required after setup
• 🔒 Private - Your data never leaves your machine
• 💰 Free - No API costs or rate limits

---

📦 Installation

Prerequisites

• 🐍 Python 3.10+
• 📦 Node.js 18+
• 🍺 Homebrew (macOS)
• 🤖 Ollama

1️⃣ Clone the Repository

git clone https://github.com/Yirmeyahuu/Askium.git
cd Askium

2️⃣ Backend Setup

# Navigate to backend
cd backend

# Create virtual environment
python -m venv virt
source virt/bin/activate  # On Windows: virt\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Run migrations
python manage.py migrate

# Start Django server
python manage.py runserver

3️⃣ Frontend Setup

# Navigate to frontend (in a new terminal)
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

4️⃣ Install Ollama & Model

# Install Ollama
brew install ollama

# Start Ollama service
brew services start ollama

# Pull Llama 2 model (in a new terminal)
ollama pull llama2

# Verify installation
ollama list

---

🚀 Usage

1. Start all services:

   # Terminal 1: Django backend
   cd backend && python manage.py runserver
   
   # Terminal 2: React frontend
   cd frontend && npm run dev
   
   # Terminal 3: Ollama (if not running as service)
   ollama serve

2. Open your browser:

   http://localhost:5173
   

3. Start chatting!

   • Click "New Chat" to create a conversation
   • Type your message and press Enter
   • Switch between light/dark mode with the theme toggle
   • Search through your chat history
   • Delete unwanted conversations

---

📁 Project Structure

llm-chatbot/
├── backend/                  # Django backend
│   ├── chats/               # Chat app
│   │   ├── models.py        # Database models
│   │   ├── views.py         # API endpoints
│   │   ├── serializers.py   # Data serialization
│   │   └── utils.py         # Ollama integration
│   ├── llmproject/          # Project settings
│   └── requirements.txt     # Python dependencies
│
├── frontend/                # React frontend
│   ├── src/
│   │   ├── components/      # React components
│   │   │   ├── Sidebar.jsx  # Chat list sidebar
│   │   │   ├── ChatRoom.jsx # Chat interface
│   │   │   └── ThemeToggle.jsx
│   │   ├── context/         # React context
│   │   │   └── ThemeContext.jsx
│   │   ├── services/        # API services
│   │   │   └── api.js
│   │   ├── App.jsx          # Main app component
│   │   └── App.css          # Global styles
│   └── package.json         # Node dependencies
│
└── README.md               # You are here!

---

🎯 API Endpoints

Method	Endpoint	Description
GET	/api/sessions/	List all chat sessions
POST	/api/sessions/new/	Create new chat session
GET	/api/sessions/:id/	Get specific chat session
POST	/api/sessions/:id/	Send message to chat
DELETE	/api/sessions/:id/	Delete chat session

---

🎨 Customization

Change AI Model

Edit backend/chats/utils.py:

llm = Ollama(
    model="mistral",  # or "llama3.2", "codellama", etc.
    base_url="http://localhost:11434",
    temperature=0.7
)

Modify Theme Colors

Edit frontend/src/App.css:

@theme {
  --color-dark-blue-950: #your-color;
}

Adjust AI Temperature

Higher = more creative, Lower = more focused

temperature=0.7  # Range: 0.0 to 1.0

---

🐛 Troubleshooting

Ollama Connection Issues

# Check if Ollama is running
ollama list

# Restart Ollama service
brew services restart ollama

# Or start manually
ollama serve

Port Already in Use

# Backend (Django)
python manage.py runserver 8001

# Frontend (Vite)
npm run dev -- --port 5174

Database Issues

cd backend
python manage.py migrate
python manage.py makemigrations

---

📝 License

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

---

🌟 Acknowledgments

• Ollama - For making local LLMs accessible
• LangChain - For the excellent LLM framework
• Meta AI - For the Llama 2 model
• Tailwind CSS - For the amazing styling framework
• Lucide - For beautiful icons

---

Project Link: https://github.com/Yirmeyahuu/Askium.git