🏗️ Chatbot Architecture
🏗️ Chatbot Architecture
System Overview
┌─────────────────────────────────────────────────────────────┐
│ Your Website │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ index.html │ │ styles.css │ │ script.js │ │
│ └────────────┘ └────────────┘ └────────────┘ │
│ │
│ ┌────────────┐ ┌────────────┐ │
│ │chatbot.js │ │chatbot.css │ ← New chatbot files │
│ └─────┬──────┘ └────────────┘ │
└────────┼─────────────────────────────────────────────────────┘
│
│ HTTP Request
│ (localhost:11434)
↓
┌─────────────────────────────────────────────────────────────┐
│ Ollama Service │
│ (Running on your Mac) │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ darya-assistant Model │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ Llama 3.2 Base Model (3B) │ │ │
│ │ │ • Natural language processing │ │ │
│ │ │ • Conversation abilities │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ │ + │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ Your Resume Data (Modelfile) │ │ │
│ │ │ • Education & GPA │ │ │
│ │ │ • Work experience │ │ │
│ │ │ • Technical skills │ │ │
│ │ │ • Projects & achievements │ │ │
│ │ │ • Contact information │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Data Flow
User Types Question
↓
┌──────────────────┐
│ Chat Widget │ (chatbot.js)
│ • Captures input│
│ • Shows typing │
└────────┬─────────┘
│
↓
┌──────────────────┐
│ Format Request │
│ • Add context │
│ • Set parameters│
└────────┬─────────┘
│
↓ HTTP POST
┌──────────────────┐
│ Ollama API │ (localhost:11434)
│ • Receives query│
│ • Loads model │
└────────┬─────────┘
│
↓
┌──────────────────┐
│ AI Processing │
│ • Understands Q │
│ • Searches data │
│ • Generates ans │
└────────┬─────────┘
│
↓ JSON Response
┌──────────────────┐
│ Display Answer │ (chatbot.js)
│ • Format text │
│ • Show in chat │
└──────────────────┘
↓
User sees answer
File Structure
your-project/
│
├── index.html ← Main website (updated)
├── styles.css ← Main styles
├── script.js ← Main JavaScript
│
├── chatbot.js ← 🆕 Chatbot logic & Ollama integration
├── chatbot.css ← 🆕 Chatbot styling
├── Modelfile ← 🆕 Your custom AI model definition
│
├── start-chatbot.sh ← 🆕 Setup automation script
├── test-chatbot.sh ← 🆕 Testing script
├── test-chatbot.html ← 🆕 Standalone test page
│
├── QUICK-START.md ← 🆕 3-step guide
├── CHATBOT-README.md ← 🆕 Full documentation
├── setup-local-llm.md ← 🆕 Detailed setup
├── SETUP-SUMMARY.md ← 🆕 Overview
└── ARCHITECTURE.md ← 🆕 This file
Component Breakdown
1. Chat Widget (chatbot.js + chatbot.css)
Purpose: User interface for the chatbot
Features:
- Floating button in bottom-right
- Expandable chat window
- Message history
- Typing indicators
- Quick question buttons
- Mobile responsive
Key Functions:
initChatbot() // Initialize on page load
toggleChat() // Open/close chat window
handleSubmit() // Process user input
addMessage() // Display messages
getBotResponse() // Get AI response
2. Ollama Service
Purpose: Run the AI model locally
Components:
- HTTP API server (port 11434)
- Model management
- Inference engine
- Memory management
Endpoints Used:
GET /api/tags // List available models
POST /api/generate // Generate response
POST /api/chat // Chat completion
3. Custom Model (Modelfile)
Purpose: Define your personalized AI assistant
Contains:
- Base model reference (llama3.2:3b)
- System prompt with your data
- Generation parameters
- Example conversations
Structure:
FROM llama3.2:3b
PARAMETER temperature 0.7
PARAMETER num_ctx 4096
SYSTEM """[Your resume data]"""
MESSAGE user [example]
MESSAGE assistant [example]
Request/Response Flow
User Asks Question
// 1. User types: "What are Darya's skills?"
const userMessage = "What are Darya's skills?";
// 2. chatbot.js formats request
const request = {
model: 'darya-assistant',
prompt: userMessage,
stream: false,
options: {
temperature: 0.7,
num_predict: 500
}
};
// 3. Send to Ollama
fetch('http://localhost:11434/api/generate', {
method: 'POST',
body: JSON.stringify(request)
});
// 4. Ollama processes with your model
// - Loads darya-assistant model
// - Reads system prompt (your resume)
// - Generates contextual response
// 5. Response received
{
"response": "Darya has strong technical skills in C++...",
"done": true
}
// 6. Display in chat widget
addMessage(response.response, 'bot');
Model Training Process
┌─────────────────────┐
│ Base Model │ Llama 3.2 (3B parameters)
│ (General AI) │ • Language understanding
└──────────┬──────────┘ • Conversation ability
│
↓ + Modelfile
┌─────────────────────┐
│ System Prompt │ Your resume data
│ (Your Data) │ • Education
└──────────┬──────────┘ • Experience
│ • Skills
│ • Projects
↓
┌─────────────────────┐
│ Example Convos │ Q&A pairs
│ (Training) │ • "What skills?" → "C++, Python..."
└──────────┬──────────┘ • "Research?" → "GNN security..."
│
↓
┌─────────────────────┐
│ Custom Model │ darya-assistant
│ (Specialized) │ • Knows about you
└─────────────────────┘ • Answers naturally
Performance Optimization
Speed Factors
Response Time = Model Size + Context Length + Hardware
Fast (1-2s):
- Small model (3B parameters)
- Short context (4096 tokens)
- Good hardware (8GB+ RAM)
Slow (5-10s):
- Large model (70B parameters)
- Long context (8192 tokens)
- Limited hardware (4GB RAM)
Memory Usage
Model Size → RAM Needed
3B params → 4GB RAM ✅ Your setup
7B params → 8GB RAM
13B params → 16GB RAM
70B params → 64GB RAM
Security & Privacy
┌─────────────────────────────────────────┐
│ Your Computer │
│ │
│ ┌────────────┐ ┌──────────────┐ │
│ │ Browser │ ←──→ │ Ollama │ │
│ │ (Website) │ │ (Local AI) │ │
│ └────────────┘ └──────────────┘ │
│ │
│ All data stays here ✅ │
│ No external API calls ✅ │
│ No tracking ✅ │
└─────────────────────────────────────────┘
❌ No connection to cloud
❌ No data sent to OpenAI
❌ No analytics or tracking
Deployment Options
Option 1: Local Only (Current)
Your Mac → Ollama → Website
(localhost)
Pros: Free, private, fast Cons: Only works on your machine
Option 2: Server Deployment
User → Your Server → Ollama → Response
(VPS/Cloud)
Pros: Accessible anywhere Cons: Server costs, setup complexity
Option 3: Hybrid
Development: Local Ollama
Production: OpenAI API
Pros: Best of both worlds Cons: API costs in production
Technology Stack
Frontend:
├── HTML5
├── CSS3 (Custom properties, Grid, Flexbox)
├── Vanilla JavaScript (ES6+)
└── Font Awesome (Icons)
Backend:
├── Ollama (LLM runtime)
├── Llama 3.2 (Base model)
└── Custom model (Your data)
Development:
├── Bash scripts (Automation)
├── Python HTTP server (Testing)
└── curl (API testing)
Comparison: Local vs Cloud
┌─────────────────┬──────────────┬──────────────┐
│ Feature │ Local (You) │ Cloud (API) │
├─────────────────┼──────────────┼──────────────┤
│ Cost │ $0 │ $10-50/month │
│ Privacy │ 100% private │ Data shared │
│ Speed │ 1-2 seconds │ 2-5 seconds │
│ Offline │ ✅ Yes │ ❌ No │
│ Setup │ 5 minutes │ 1 minute │
│ Customization │ Full control │ Limited │
│ Scalability │ 1 user │ Unlimited │
│ Maintenance │ Minimal │ None │
└─────────────────┴──────────────┴──────────────┘
Future Enhancements
Possible Additions
1. Voice Input/Output
└── Web Speech API integration
2. Multi-language Support
└── Detect language, respond accordingly
3. Context Memory
└── Remember previous conversations
4. Analytics Dashboard
└── Track popular questions
5. Admin Panel
└── Update responses without code
6. Email Integration
└── Send conversation transcripts
7. Calendar Integration
└── Schedule meetings directly
8. File Upload
└── Answer questions about uploaded docs
Monitoring & Debugging
Check System Status
# Is Ollama running?
ollama ps
# List models
ollama list
# Test API
curl http://localhost:11434/api/tags
# View logs (macOS)
tail -f ~/Library/Logs/Ollama/server.log
Browser Debugging
// Open console (F12)
// Check for errors
console.log('Chatbot initialized');
// Test Ollama connection
fetch('http://localhost:11434/api/tags')
.then(r => r.json())
.then(d => console.log('Models:', d));
Summary
Your chatbot uses a 3-tier architecture:
- Frontend (chatbot.js/css) - User interface
- API (Ollama) - AI processing
- Model (darya-assistant) - Your knowledge base
Everything runs locally on your Mac, making it:
- ✅ Free
- ✅ Private
- ✅ Fast
- ✅ Customizable
Questions? Check the other documentation files!