Girish Lade Chatbot
:root {
--primary-color: #10a37f;
--secondary-color: #343541;
--dark-color: #202123;
--text-color: #ececf1;
--border-color: #4d4d4f;
--hover-color: #2a2b32;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
body {
background-color: var(--secondary-color);
color: var(--text-color);
height: 100vh;
overflow: hidden;
}
.anime-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.15;
background: radial-gradient(circle at center, #5c59c9 0%, #2c3e50 100%);
overflow: hidden;
}
.anime-bg::before,
.anime-bg::after {
content: '';
position: absolute;
width: 150%;
height: 150%;
background: linear-gradient(#ff2c55, #ff7b55, #ffca86);
animation: rotate 15s linear infinite;
top: -25%;
left: -25%;
opacity: 0.2;
}
.anime-bg::after {
background: linear-gradient(#2cb2ff, #2c6eff, #2c2fff);
animation: rotate 12s linear infinite reverse;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.container {
display: flex;
height: 100vh;
overflow: hidden;
}
.sidebar {
width: 260px;
background-color: var(--dark-color);
border-right: 1px solid var(--border-color);
padding: 10px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.sidebar-collapsed {
width: 0;
padding: 0;
overflow: hidden;
}
.new-chat-btn,
.clear-history-btn {
display: flex;
align-items: center;
gap: 10px;
background-color: transparent;
border: 1px solid var(--border-color);
border-radius: 5px;
color: var(--text-color);
padding: 12px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
margin-bottom: 10px;
}
.new-chat-btn:hover,
.clear-history-btn:hover {
background-color: var(--hover-color);
}
.model-selector {
margin-bottom: 15px;
}
.model-selector select {
width: 100%;
padding: 10px;
background-color: var(--hover-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
.model-selector select:focus {
outline: none;
border-color: var(--primary-color);
}
.suggestion-title {
font-size: 12px;
color: #7d7d82;
margin: 10px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.suggestions {
margin-bottom: 20px;
}
.suggestion-btn {
width: 100%;
text-align: left;
background-color: transparent;
border: none;
color: var(--text-color);
padding: 10px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 8px;
transition: background-color 0.3s;
}
.suggestion-btn:hover {
background-color: var(--hover-color);
}
.main {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
.toggle-sidebar {
position: absolute;
top: 10px;
left: 10px;
z-index: 101;
background: transparent;
border: none;
color: var(--text-color);
cursor: pointer;
font-size: 20px;
padding: 5px;
border-radius: 4px;
}
.toggle-sidebar:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.chat-header {
text-align: center;
padding: 20px;
font-size: 28px;
font-weight: bold;
letter-spacing: 1px;
}
.model-indicator {
font-size: 14px;
opacity: 0.8;
font-weight: normal;
display: block;
margin-top: 5px;
}
.chat-container {
flex: 1;
padding: 20px 10%;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.empty-chat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
padding: 0 20px;
}
.empty-chat h2 {
font-size: 28px;
margin-bottom: 20px;
}
.empty-chat p {
font-size: 16px;
color: #8e8ea0;
max-width: 600px;
margin-bottom: 40px;
}
.feature-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.feature-button {
background-color: transparent;
border: 1px solid var(--border-color);
border-radius: 5px;
color: var(--text-color);
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
.feature-button:hover {
background-color: var(--hover-color);
}
.message {
display: flex;
padding: 20px;
border-radius: 8px;
line-height: 1.6;
position: relative;
}
.message.user,
.message.bot {
background-color: transparent; /* Background removed from messages */
}
.content-wrapper {
display: flex;
align-items: center;
}
.message.user .content-wrapper {
margin-left: auto; /* Align user messages to the right */
}
.message.user .avatar {
display: none; /* Hide avatar for user messages */
}
.avatar {
width: 30px;
height: 30px;
min-width: 30px;
border-radius: 2px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
}
.user .avatar {
background-color: #7c3aed;
}
.bot .avatar {
background-color: var(--primary-color);
}
.message-content {
overflow-wrap: break-word;
word-wrap: break-word;
font-size: 16px;
}
.copy-btn {
margin-left: 10px;
background-color: transparent;
border: none;
color: #007bff;
cursor: pointer;
}
.copy-btn:hover {
text-decoration: underline;
}
.input-container {
position: relative;
padding: 20px 10%;
background-color: var(--secondary-color);
border-top: 1px solid var(--border-color);
}
.input-wrapper {
display: flex;
align-items: flex-end;
position: relative;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.chat-input {
flex: 1;
border: 1px solid var(--border-color);
background-color: var(--hover-color);
border-radius: 8px;
color: var(--text-color);
padding: 15px 50px 15px 15px;
font-size: 16px;
resize: none;
min-height: 56px;
max-height: 200px;
overflow-y: auto;
line-height: 1.5;
transition: all 0.3s ease;
}
.chat-input:focus {
outline: none;
border-color: var(--primary-color);
}
.send-btn {
position: absolute;
right: 10px;
bottom: 10px;
background-color: transparent;
border: none;
color: var(--text-color);
font-size: 20px;
cursor: pointer;
padding: 5px;
border-radius: 4px;
}
.send-btn:hover {
color: var(--primary-color);
}
.disclaimer {
text-align: center;
font-size: 12px;
color: #8e8ea0;
margin-top: 15px;
padding: 0 20px;
}
.loading {
display: flex;
padding: 20px;
border-radius: 8px;
background-color: rgba(68, 70, 84, 0.8);
line-height: 1.6;
}
.loading-animation {
display: flex;
align-items: center;
gap: 10px;
}
.loading-dot {
width: 10px;
height: 10px;
background-color: var(--primary-color);
border-radius: 50%;
animation: bounce 1.5s infinite ease-in-out;
}
.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.history-tab {
position: absolute;
top: 50px;
left: 10px;
width: 200px;
background-color: #2c2c2c;
border: 1px solid #444;
padding: 10px;
max-height: 300px;
overflow-y: auto;
color: #fff;
z-index: 100;
}
.history-tab div {
margin-bottom: 5px;
cursor: pointer;
}
.history-tab div:hover {
background-color: #444;
}
@media (max-width: 768px) {
.sidebar {
position: absolute;
height: 100%;
z-index: 100;
}
.chat-container, .input-container {
padding: 20px 5%;
}
.feature-buttons {
flex-direction: column;
}
.anime-bg::before, .anime-bg::after {
animation: none;
}
}
code {
background-color: rgba(0, 0, 0, 0.2);
padding: 2px 4px;
border-radius: 4px;
font-family: monospace;
}
pre {
background-color: rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 4px;
overflow-x: auto;
margin: 10px 0;
}
pre code {
background-color: transparent;
padding: 0;
}
New Chat
Clear History
Dolphin3.0 R1 Mistral
DeepSeek: R1
DeepSeek: R1 Distill Llama 70B
Gemini Experimental 1206
Microsoft: Phi-3 Mini 128K Instruct
Hugging Face: Zephyr 7B
Qwen: Qwen2.5 VL 72B Instruct
Qwen: Qwen VL
Try asking about
Girish Lade
Dolphin3.0 R1 Mistral
Girish Lade
I'm an AI assistant designed to help you with information, creative tasks, and problem-solving. How can I help you today?
Explain quantum computing
Creative writing
Math help
Meal planning
Girish Lade can make mistakes. Consider checking important information.
// This is the JavaScript section that needs to be updated with the API keys
// Replace the existing script section with this code
const OPENROUTER_API_KEYS = {
"cognitivecomputations/dolphin3.0-r1-mistral-24b:free": "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",
"deepseek-ai/deepseek-v2-r1:free": "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",
"deepseek-ai/deepseek-v2-r1-distill-70b-llama:free": "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",
"google/gemini-1206-experimental-model:free": "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",
"microsoft/phi-3-mini-128k-instruct:free": "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",
"huggingfaceh4/zephyr-7b-beta:free": "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",
"qwen/qwen2.5-vl-72b-instruct:free": "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",
"qwen/qwen-vl-max:free": "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"
};
let MODEL = "cognitivecomputations/dolphin3.0-r1-mistral-24b:free";
let chatHistory = [];
let isLoading = false;
// Model display names for UI
const modelDisplayNames = {
"cognitivecomputations/dolphin3.0-r1-mistral-24b:free": "Dolphin3.0 R1 Mistral",
"deepseek-ai/deepseek-v2-r1:free": "DeepSeek: R1",
"deepseek-ai/deepseek-v2-r1-distill-70b-llama:free": "DeepSeek: R1 Distill Llama 70B",
"google/gemini-1206-experimental-model:free": "Gemini Experimental 1206",
"microsoft/phi-3-mini-128k-instruct:free": "Microsoft: Phi-3 Mini 128K Instruct",
"huggingfaceh4/zephyr-7b-beta:free": "Hugging Face: Zephyr 7B",
"qwen/qwen2.5-vl-72b-instruct:free": "Qwen: Qwen2.5 VL 72B Instruct",
"qwen/qwen-vl-max:free": "Qwen: Qwen VL"
};
const suggestionTopics = [
"Tell me about the latest advances in AI",
"How do I improve my coding skills?",
"What are some creative writing exercises?",
"Explain blockchain technology",
"How does machine learning work?",
"Give me tips for learning a new language",
"What are the best practices for web design?",
"Can you explain neural networks?",
"What are some healthy breakfast ideas?"
];
function init() {
const toggleSidebar = document.getElementById('toggle-sidebar');
const chatInput = document.getElementById('chat-input');
const sendBtn = document.getElementById('send-btn');
const newChatBtn = document.getElementById('new-chat');
const clearHistoryBtn = document.getElementById('clear-history');
const suggestionsContainer = document.getElementById('suggestions');
const modelSelector = document.getElementById('model-selector');
toggleSidebar.addEventListener('click', toggleSidebarVisibility);
chatInput.addEventListener('keydown', handleKeyDown);
chatInput.addEventListener('input', adjustInputHeight);
sendBtn.addEventListener('click', sendMessage);
newChatBtn.addEventListener('click', startNewChat);
clearHistoryBtn.addEventListener('click', clearHistory);
modelSelector.addEventListener('change', changeModel);
document.querySelectorAll('.feature-button').forEach(button => {
button.addEventListener('click', () => {
chatInput.value = button.getAttribute('data-query') || '';
adjustInputHeight();
sendMessage();
});
});
loadRandomSuggestions();
chatInput.focus();
// Load saved model if it exists
const savedModel = localStorage.getItem('selectedModel');
if (savedModel) {
MODEL = savedModel;
modelSelector.value = savedModel;
updateModelIndicator(savedModel);
}
}
function changeModel() {
const modelSelector = document.getElementById('model-selector');
MODEL = modelSelector.value;
// Save selected model to localStorage
localStorage.setItem('selectedModel', MODEL);
// Update the model indicator in the header
updateModelIndicator(MODEL);
}
function updateModelIndicator(modelId) {
const modelIndicator = document.getElementById('model-indicator');
modelIndicator.textContent = modelDisplayNames[modelId] || modelId;
}
function toggleSidebarVisibility() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('sidebar-collapsed');
}
function adjustInputHeight() {
const chatInput = document.getElementById('chat-input');
chatInput.style.height = 'auto';
chatInput.style.height = `${Math.min(Math.max(chatInput.scrollHeight, 56), 200)}px`;
}
function loadRandomSuggestions() {
const suggestionsContainer = document.getElementById('suggestions');
const randomSuggestions = [...suggestionTopics]
.sort(() => 0.5 - Math.random())
.slice(0, 5);
suggestionsContainer.innerHTML = '';
randomSuggestions.forEach(suggestion => {
const button = document.createElement('button');
button.className = 'suggestion-btn';
button.textContent = suggestion;
button.addEventListener('click', () => {
const chatInput = document.getElementById('chat-input');
chatInput.value = suggestion;
adjustInputHeight();
sendMessage();
});
suggestionsContainer.appendChild(button);
});
}
function handleKeyDown(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
}
function startNewChat() {
chatHistory = [];
const chatContainer = document.getElementById('chat-container');
chatContainer.innerHTML = '';
const emptyChat = document.getElementById('empty-chat');
emptyChat.style.display = 'flex';
const chatInput = document.getElementById('chat-input');
chatInput.value = '';
adjustInputHeight();
chatInput.focus();
// Show history tab
displayHistory();
if (window.innerWidth <= 768) {
const sidebar = document.getElementById('sidebar');
sidebar.classList.add('sidebar-collapsed');
}
}
function clearHistory() {
localStorage.removeItem('conversations');
alert('Chat history cleared!');
const historyTab = document.getElementById('history-tab');
historyTab.style.display = 'none';
}
function sendMessage() {
const chatInput = document.getElementById('chat-input');
const message = chatInput.value.trim();
if (!message || isLoading) return;
const emptyChat = document.getElementById('empty-chat');
if (emptyChat.style.display !== 'none') {
emptyChat.style.display = 'none';
}
addMessageToChat('user', message);
chatInput.value = '';
adjustInputHeight();
chatHistory.push({ role: 'user', content: message });
showLoadingAnimation();
fetchBotResponse(message);
}
function addMessageToChat(sender, content) {
const chatContainer = document.getElementById('chat-container');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
const avatar = document.createElement('div');
avatar.className = 'avatar';
avatar.textContent = sender === 'user' ? 'U' : 'GL';
const messageContent = document.createElement('div');
messageContent.className = 'message-content';
messageContent.innerHTML = formatMessageContent(content);
const copyButton = document.createElement('button');
copyButton.className = 'copy-btn';
copyButton.textContent = 'Copy';
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(content).then(() => {
alert('Message copied to clipboard!');
});
});
const contentWrapper = document.createElement('div');
contentWrapper.className = 'content-wrapper';
contentWrapper.appendChild(messageContent);
contentWrapper.appendChild(copyButton);
messageDiv.appendChild(avatar);
messageDiv.appendChild(contentWrapper);
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
function formatMessageContent(content) {
return content
.replace(/```
([\s\S]*?)
```/g, '<pre><code>$1')
.replace(/`([^`]+)`/g, '<code>$1')
.replace(/\n/g, '<br>');
}
function showLoadingAnimation() {
isLoading = true;
const chatContainer = document.getElementById('chat-container');
const loadingDiv = document.createElement('div');
loadingDiv.className = 'loading';
loadingDiv.id = 'loading-animation';
const avatar = document.createElement('div');
avatar.className = 'avatar';
avatar.textContent = 'GL';
const loadingAnimation = document.createElement('div');
loadingAnimation.className = 'loading-animation';
for (let i = 0; i < 3; i++) {
const dot = document.createElement('div');
dot.className = 'loading-dot';
loadingAnimation.appendChild(dot);
}
loadingDiv.appendChild(avatar);
loadingDiv.appendChild(loadingAnimation);
chatContainer.appendChild(loadingDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
function hideLoadingAnimation() {
isLoading = false;
const loadingDiv = document.getElementById('loading-animation');
if (loadingDiv) {
loadingDiv.remove();
}
}
function fetchBotResponse(message) {
// Get the specific API key for the selected model
const apiKey = OPENROUTER_API_KEYS[MODEL] || OPENROUTER_API_KEYS["cognitivecomputations/dolphin3.0-r1-mistral-24b:free"];
fetch("https://openrouter.ai/api/v1/chat/completions", {
method: "POST",
headers: {
"Authorization": `Bearer ${apiKey}`,
"HTTP-Referer": window.location.href,
"X-Title": "Girish Lade Chatbot",
"Content-Type": "application/json"
},
body: JSON.stringify({
"model": MODEL,
"messages": chatHistory
})
})
.then(response => response.json())
.then(data => {
if (data.choices && data.choices.length > 0) {
const botResponse = data.choices[0].message.content;
hideLoadingAnimation();
addMessageToChat('bot', botResponse);
chatHistory.push({ role: 'assistant', content: botResponse });
saveConversation();
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode
<path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"/>
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode
<path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"/>
