|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Mentor Bot</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
500: '#d946ef', |
|
|
}, |
|
|
secondary: { |
|
|
500: '#eab308', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.chat-container { |
|
|
height: calc(100vh - 180px); |
|
|
} |
|
|
.typing-indicator::after { |
|
|
content: '...'; |
|
|
animation: typing 1.5s infinite; |
|
|
} |
|
|
@keyframes typing { |
|
|
0% { content: '.'; } |
|
|
33% { content: '..'; } |
|
|
66% { content: '...'; } |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, rgba(217, 70, 239, 0.2) 0%, rgba(234, 179, 8, 0.2) 100%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
<div class="flex flex-col h-screen"> |
|
|
|
|
|
<header class="bg-gray-800 p-4 shadow-lg"> |
|
|
<div class="container mx-auto flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i data-feather="cpu" class="text-primary-500 w-8 h-8"></i> |
|
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent"> |
|
|
AI Mentor Bot |
|
|
</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="themeToggle" class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition"> |
|
|
<i data-feather="moon" class="w-5 h-5"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition"> |
|
|
<i data-feather="settings" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 container mx-auto p-4 overflow-hidden"> |
|
|
<div class="gradient-bg rounded-xl p-6 shadow-lg mb-6"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-primary-500 p-3 rounded-full"> |
|
|
<i data-feather="zap" class="w-6 h-6 text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold">Welcome to AI Mentor!</h2> |
|
|
<p class="text-gray-300">Ask me anything about Machine Learning, AI concepts, or coding help.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="chat-container overflow-y-auto mb-4 bg-gray-800 rounded-xl p-4 shadow-inner"> |
|
|
<div id="chatMessages" class="space-y-4"> |
|
|
|
|
|
<div class="chat-message bot-message"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-secondary-500 p-2 rounded-full"> |
|
|
<i data-feather="cpu" class="w-5 h-5 text-gray-900"></i> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded-lg p-3 max-w-3xl"> |
|
|
<p>Hello! I'm your AI Mentor. I can help you learn Machine Learning concepts, debug your code, explain algorithms, and guide you through AI projects. What would you like to learn today?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-4 shadow-lg"> |
|
|
<div class="flex space-x-2"> |
|
|
<input |
|
|
id="userInput" |
|
|
type="text" |
|
|
placeholder="Ask about neural networks, Python code, or ML concepts..." |
|
|
class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary-500" |
|
|
> |
|
|
<button |
|
|
id="sendButton" |
|
|
class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition flex items-center" |
|
|
> |
|
|
<i data-feather="send" class="w-5 h-5 mr-2"></i> |
|
|
Send |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-2 flex space-x-2"> |
|
|
<button class="quick-prompt bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm transition"> |
|
|
Explain backpropagation |
|
|
</button> |
|
|
<button class="quick-prompt bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm transition"> |
|
|
Show Python ML example |
|
|
</button> |
|
|
<button class="quick-prompt bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm transition"> |
|
|
What's a GAN? |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 p-3 text-center text-gray-400 text-sm"> |
|
|
<p>AI Mentor Bot © 2023 - Your guide to Machine Learning mastery</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Theme Toggle |
|
|
const themeToggle = document.getElementById('themeToggle'); |
|
|
themeToggle.addEventListener('click', () => { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
const icon = themeToggle.querySelector('i'); |
|
|
if (document.documentElement.classList.contains('dark')) { |
|
|
feather.icons['moon'].toSvg().then(svg => icon.outerHTML = svg); |
|
|
} else { |
|
|
feather.icons['sun'].toSvg().then(svg => icon.outerHTML = svg); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Chat functionality |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const userInput = document.getElementById('userInput'); |
|
|
const sendButton = document.getElementById('sendButton'); |
|
|
const quickPrompts = document.querySelectorAll('.quick-prompt'); |
|
|
|
|
|
function addUserMessage(message) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'chat-message user-message'; |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3 justify-end"> |
|
|
<div class="bg-gray-700 rounded-lg p-3 max-w-3xl"> |
|
|
<p>${message}</p> |
|
|
</div> |
|
|
<div class="bg-primary-500 p-2 rounded-full"> |
|
|
<i data-feather="user" class="w-5 h-5 text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
chatMessages.appendChild(messageDiv); |
|
|
scrollToBottom(); |
|
|
} |
|
|
|
|
|
function addBotMessage(message, isTyping = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = 'chat-message bot-message'; |
|
|
|
|
|
let messageContent = isTyping |
|
|
? '<span class="typing-indicator"></span>' |
|
|
: `<p>${message}</p>`; |
|
|
|
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="bg-secondary-500 p-2 rounded-full"> |
|
|
<i data-feather="cpu" class="w-5 h-5 text-gray-900"></i> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded-lg p-3 max-w-3xl"> |
|
|
${messageContent} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
chatMessages.appendChild(messageDiv); |
|
|
scrollToBottom(); |
|
|
|
|
|
if (isTyping) { |
|
|
return messageDiv; |
|
|
} |
|
|
return null; |
|
|
} |
|
|
|
|
|
function scrollToBottom() { |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
// Simulate API call to Python backend |
|
|
async function getBotResponse(userMessage) { |
|
|
// In a real app, this would call your Python backend API |
|
|
// For demo purposes, we'll simulate responses |
|
|
|
|
|
const responses = { |
|
|
"hello": "Hello! How can I assist you with your AI/ML learning today?", |
|
|
"hi": "Hi there! What AI concept would you like to explore?", |
|
|
"explain backpropagation": "Backpropagation is the algorithm used to train neural networks. It works by:\n1. Forward pass: Compute predictions\n2. Calculate loss\n3. Backward pass: Compute gradients\n4. Update weights using gradient descent\n\nIt's called 'back' propagation because gradients flow backward through the network from output to input layers.", |
|
|
"show python ml example": "Here's a simple linear regression example using scikit-learn:\n |
|
|
// Send message when Enter is pressed |
|
|
userInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Send button click handler |
|
|
sendButton.addEventListener('click', sendMessage); |
|
|
|
|
|
// Quick prompt buttons |
|
|
quickPrompts.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
userInput.value = button.textContent; |
|
|
sendMessage(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
async function sendMessage() { |
|
|
const message = userInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
addUserMessage(message); |
|
|
userInput.value = ''; |
|
|
|
|
|
const typingIndicator = addBotMessage('', true); |
|
|
|
|
|
// Simulate API delay |
|
|
setTimeout(async () => { |
|
|
const response = await getBotResponse(message); |
|
|
chatMessages.removeChild(typingIndicator); |
|
|
addBotMessage(response); |
|
|
}, 1000 + Math.random() * 2000); |
|
|
} |
|
|
|
|
|
// Initialize Feather Icons |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
feather.replace(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
