| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Local LLM Chat</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> |
| <style> |
| :root { |
| --primary: #6366f1; |
| --primary-dark: #4f46e5; |
| --bg: #0f172a; |
| --text: #e2e8f0; |
| --text-light: #94a3b8; |
| --border: #1e293b; |
| } |
| |
| .dark { |
| --bg: #0f172a; |
| --text: #e2e8f0; |
| --text-light: #94a3b8; |
| --border: #1e293b; |
| } |
| |
| .light { |
| --bg: #f9fafb; |
| --text: #111827; |
| --text-light: #6b7280; |
| --border: #e5e7eb; |
| } |
| |
| body { |
| width: 400px; |
| height: 600px; |
| font-family: 'Inter', sans-serif; |
| background-color: var(--bg); |
| color: var(--text); |
| transition: background-color 0.3s, color 0.3s; |
| } |
| |
| .chat-container { |
| height: calc(100% - 60px); |
| } |
| |
| .message-user { |
| background-color: var(--primary); |
| color: white; |
| border-radius: 12px 12px 0 12px; |
| } |
| |
| .message-ai { |
| background-color: #1e293b; |
| border: 1px solid var(--border); |
| border-radius: 12px 12px 12px 0; |
| } |
| |
| .rounded-12px { |
| border-radius: 12px !important; |
| } |
| |
| .rounded-none { |
| border-radius: 0 !important; |
| } |
| |
| .rounded-full { |
| border-radius: 9999px !important; |
| } |
| |
| .typing-indicator span { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| background-color: var(--primary); |
| border-radius: 50%; |
| margin: 0 2px; |
| opacity: 0.4; |
| } |
| |
| .typing-indicator span:nth-child(1) { |
| animation: pulse 1s infinite; |
| } |
| |
| .typing-indicator span:nth-child(2) { |
| animation: pulse 1s infinite 0.2s; |
| } |
| |
| .typing-indicator span:nth-child(3) { |
| animation: pulse 1s infinite 0.4s; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 0.4; |
| transform: scale(1); |
| } |
| 50% { |
| opacity: 1; |
| transform: scale(1.2); |
| } |
| } |
| |
| .input-box { |
| box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); |
| background-color: #1e293b; |
| } |
| |
| .header-dark { |
| background-color: #1e293b; |
| border-color: #334155; |
| } |
| |
| .modal-dark { |
| background-color: #1e293b; |
| color: #e2e8f0; |
| } |
| |
| .modal-dark input, |
| .modal-dark select { |
| background-color: #334155; |
| color: #e2e8f0; |
| border-color: #475569; |
| } |
| |
| .modal-dark .border-gray-200 { |
| border-color: #334155; |
| } |
| </style> |
| </head> |
| <body class="flex flex-col"> |
| <header class="header-dark px-4 py-3 border-b border-gray-800 flex items-center justify-between sticky top-0 z-10"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i data-feather="cpu" class="text-indigo-500 w-4 h-4"></i> |
| </div> |
| <h1 class="font-semibold text-white">Local LLM</h1> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button id="settings-btn" class="p-1 rounded-full hover:bg-gray-700"> |
| <i data-feather="settings" class="w-5 h-5 text-white"></i> |
| </button> |
| <button id="clear-btn" class="p-1 rounded-full hover:bg-gray-700"> |
| <i data-feather="trash-2" class="w-5 h-5 text-white"></i> |
| </button> |
| </div> |
| </header> |
|
|
| <div class="chat-container overflow-y-auto flex-1 px-4 py-3 space-y-3" id="chat-messages"> |
| <div class="message-ai p-3 max-w-[80%]"> |
| <p class="text-sm">Hello! I'm your local AI assistant. How can I help you today?</p> |
| </div> |
| </div> |
|
|
| <div class="input-box bg-white px-4 py-3 border-t border-gray-200 sticky bottom-0"> |
| <div class="flex items-center space-x-2"> |
| <input |
| type="text" |
| id="message-input" |
| placeholder="Type your message..." |
| class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm bg-white text-gray-900" |
| autocomplete="off" |
| > |
| <button id="send-btn" class="bg-indigo-500 hover:bg-indigo-600 text-white rounded-full p-2 transition-colors"> |
| <i data-feather="send" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <div class="flex items-center justify-between mt-2 text-xs text-gray-500"> |
| <div class="flex items-center space-x-2"> |
| <button id="model-selector" class="flex items-center space-x-1 hover:text-indigo-500"> |
| <span>Ollama</span> |
| <i data-feather="chevron-down" class="w-3 h-3"></i> |
| </button> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button id="api-settings" class="hover:text-indigo-500 flex items-center"> |
| <i data-feather="link" class="w-3 h-3 mr-1"></i> |
| <span>API Settings</span> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> |
| <div class="modal-dark bg-gray-900 rounded-lg w-full max-w-md mx-4"> |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> |
| <h3 class="text-lg font-medium text-gray-900">Settings</h3> |
| <button id="close-settings" class="text-gray-400 hover:text-gray-500"> |
| <i data-feather="x" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="px-6 py-4 space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">AI Role</label> |
| <textarea id="ai-role" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm" placeholder="You are a helpful AI assistant..."></textarea> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Prompt Library</label> |
| <select id="prompt-library" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"> |
| <option value="">Select a prompt...</option> |
| <option value="creative">Creative Writer</option> |
| <option value="coder">Code Assistant</option> |
| <option value="analyst">Data Analyst</option> |
| <option value="tutor">Learning Tutor</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Ollama API URL</label> |
| <input type="text" id="api-url" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm" placeholder="http://localhost:11434"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Default Model</label> |
| <select id="default-model" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"> |
| <option value="llama2">Llama 2</option> |
| <option value="mistral">Mistral</option> |
| <option value="gemma">Gemma</option> |
| <option value="phi">Phi</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Theme</label> |
| <select id="theme-selector" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"> |
| <option value="light">Light</option> |
| <option value="dark">Dark</option> |
| <option value="system">System</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Message Style</label> |
| <select id="message-style" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"> |
| <option value="rounded">Rounded</option> |
| <option value="square">Square</option> |
| <option value="bubble">Bubble</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Font Size</label> |
| <select id="font-size" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"> |
| <option value="small">Small</option> |
| <option value="medium">Medium</option> |
| <option value="large">Large</option> |
| </select> |
| </div> |
| <div class="flex items-center justify-between"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Enable Markdown</label> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" id="markdown-toggle" class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div> |
| </label> |
| </div> |
| <div class="flex items-center justify-between"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Enable Animations</label> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" id="animations-toggle" class="sr-only peer"> |
| <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div> |
| </label> |
| </div> |
| </div> |
| <div class="px-6 py-4 border-t border-gray-200 flex justify-end"> |
| <button id="save-settings" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium">Save</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const messageInput = document.getElementById('message-input'); |
| const sendBtn = document.getElementById('send-btn'); |
| const chatMessages = document.getElementById('chat-messages'); |
| const settingsBtn = document.getElementById('settings-btn'); |
| const clearBtn = document.getElementById('clear-btn'); |
| const settingsModal = document.getElementById('settings-modal'); |
| const closeSettings = document.getElementById('close-settings'); |
| const saveSettings = document.getElementById('save-settings'); |
| const apiSettings = document.getElementById('api-settings'); |
| const modelSelector = document.getElementById('model-selector'); |
| |
| |
| document.documentElement.classList.add('dark'); |
| |
| |
| chrome.storage.sync.get([ |
| 'apiUrl', |
| 'defaultModel', |
| 'theme', |
| 'messageStyle', |
| 'fontSize', |
| 'markdownEnabled', |
| 'animationsEnabled', |
| 'aiRole', |
| 'selectedPrompt' |
| ], (result) => { |
| if (result.apiUrl) document.getElementById('api-url').value = result.apiUrl; |
| if (result.defaultModel) document.getElementById('default-model').value = result.defaultModel; |
| if (result.theme) applyTheme(result.theme); |
| if (result.messageStyle) document.getElementById('message-style').value = result.messageStyle; |
| if (result.fontSize) document.getElementById('font-size').value = result.fontSize; |
| if (result.markdownEnabled) document.getElementById('markdown-toggle').checked = result.markdownEnabled; |
| if (result.animationsEnabled) document.getElementById('animations-toggle').checked = result.animationsEnabled; |
| |
| applyMessageStyle(result.messageStyle || 'rounded'); |
| applyFontSize(result.fontSize || 'medium'); |
| }); |
| |
| |
| sendBtn.addEventListener('click', sendMessage); |
| messageInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| sendMessage(); |
| } |
| }); |
| |
| settingsBtn.addEventListener('click', () => { |
| settingsModal.classList.remove('hidden'); |
| }); |
| |
| closeSettings.addEventListener('click', () => { |
| settingsModal.classList.add('hidden'); |
| }); |
| |
| saveSettings.addEventListener('click', () => { |
| const apiUrl = document.getElementById('api-url').value; |
| const defaultModel = document.getElementById('default-model').value; |
| const theme = document.getElementById('theme-selector').value; |
| const messageStyle = document.getElementById('message-style').value; |
| const fontSize = document.getElementById('font-size').value; |
| const markdownEnabled = document.getElementById('markdown-toggle').checked; |
| const animationsEnabled = document.getElementById('animations-toggle').checked; |
| const aiRole = document.getElementById('ai-role').value; |
| const selectedPrompt = document.getElementById('prompt-library').value; |
| |
| chrome.storage.sync.set({ |
| apiUrl, |
| defaultModel, |
| theme, |
| messageStyle, |
| fontSize, |
| markdownEnabled, |
| animationsEnabled, |
| aiRole, |
| selectedPrompt |
| }, () => { |
| applyTheme(theme); |
| applyMessageStyle(messageStyle); |
| applyFontSize(fontSize); |
| settingsModal.classList.add('hidden'); |
| showNotification('Settings saved successfully'); |
| }); |
| }); |
| |
| clearBtn.addEventListener('click', () => { |
| chatMessages.innerHTML = ` |
| <div class="message-ai p-3 max-w-[80%]"> |
| <p class="text-sm">Hello! I'm your local AI assistant. How can I help you today?</p> |
| </div> |
| `; |
| }); |
| |
| apiSettings.addEventListener('click', () => { |
| settingsModal.classList.remove('hidden'); |
| }); |
| |
| |
| function sendMessage() { |
| const message = messageInput.value.trim(); |
| if (!message) return; |
| |
| |
| chrome.storage.sync.get(['aiRole', 'selectedPrompt'], (result) => { |
| let fullMessage = message; |
| |
| if (result.aiRole) { |
| fullMessage = `${result.aiRole}\n\n${message}`; |
| } |
| |
| if (result.selectedPrompt) { |
| const prompts = { |
| 'creative': 'You are a creative writer. Respond with imaginative and vivid descriptions.', |
| 'coder': 'You are a coding assistant. Respond with clean, efficient code examples.', |
| 'analyst': 'You are a data analyst. Respond with clear, structured analysis.', |
| 'tutor': 'You are a learning tutor. Explain concepts clearly with examples.' |
| }; |
| fullMessage = `${prompts[result.selectedPrompt]}\n\n${fullMessage}`; |
| } |
| |
| |
| addMessage(message, 'user'); |
| messageInput.value = ''; |
| |
| |
| const typingIndicator = document.createElement('div'); |
| typingIndicator.className = 'typing-indicator p-3 max-w-[80%]'; |
| typingIndicator.innerHTML = ` |
| <div class="flex space-x-1"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| `; |
| chatMessages.appendChild(typingIndicator); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| |
| |
| chrome.storage.sync.get(['apiUrl', 'defaultModel'], async (result) => { |
| const apiUrl = result.apiUrl || 'http://localhost:11434'; |
| const model = result.defaultModel || 'llama2'; |
| |
| try { |
| |
| const response = await fetch(`${apiUrl}/api/generate`, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ |
| model: model, |
| prompt: fullMessage, |
| stream: false |
| }) |
| }); |
| |
| if (!response.ok) { |
| throw new Error(`API request failed: ${response.status}`); |
| } |
| |
| const data = await response.json(); |
| |
| |
| chatMessages.removeChild(typingIndicator); |
| |
| |
| addMessage(data.response, 'ai'); |
| } catch (error) { |
| console.error('Error:', error); |
| chatMessages.removeChild(typingIndicator); |
| addMessage(`Error: ${error.message}`, 'ai'); |
| } |
| }); |
| } |
| |
| function addMessage(text, sender) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message-${sender} p-3 max-w-[80%] ${sender === 'user' ? 'ml-auto' : ''}`; |
| |
| |
| chrome.storage.sync.get(['markdownEnabled'], (result) => { |
| if (result.markdownEnabled) { |
| |
| text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); |
| text = text.replace(/\*(.*?)\*/g, '<em>$1</em>'); |
| text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" class="text-indigo-400 hover:underline" target="_blank">$1</a>'); |
| } |
| |
| messageDiv.innerHTML = `<p class="text-sm">${text}</p>`; |
| chatMessages.appendChild(messageDiv); |
| |
| |
| chrome.storage.sync.get(['animationsEnabled'], (result) => { |
| if (result.animationsEnabled) { |
| messageDiv.style.opacity = '0'; |
| messageDiv.style.transform = 'translateY(10px)'; |
| messageDiv.style.transition = 'all 0.3s ease'; |
| setTimeout(() => { |
| messageDiv.style.opacity = '1'; |
| messageDiv.style.transform = 'translateY(0)'; |
| }, 10); |
| } |
| }); |
| |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| }); |
| } |
| |
| function applyMessageStyle(style) { |
| const messages = document.querySelectorAll('.message-user, .message-ai'); |
| |
| messages.forEach(msg => { |
| msg.classList.remove('rounded-12px', 'rounded-none', 'rounded-full'); |
| |
| switch(style) { |
| case 'rounded': |
| msg.classList.add('rounded-[12px]'); |
| break; |
| case 'square': |
| msg.classList.add('rounded-none'); |
| break; |
| case 'bubble': |
| msg.classList.add('rounded-full'); |
| break; |
| } |
| }); |
| } |
| |
| function applyFontSize(size) { |
| const messages = document.querySelectorAll('.message-user p, .message-ai p'); |
| |
| messages.forEach(msg => { |
| msg.classList.remove('text-xs', 'text-sm', 'text-base'); |
| |
| switch(size) { |
| case 'small': |
| msg.classList.add('text-xs'); |
| break; |
| case 'medium': |
| msg.classList.add('text-sm'); |
| break; |
| case 'large': |
| msg.classList.add('text-base'); |
| break; |
| } |
| }); |
| } |
| |
| function applyTheme(theme) { |
| if (theme === 'system') { |
| theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; |
| } |
| |
| document.documentElement.classList.remove('light', 'dark'); |
| document.documentElement.classList.add(theme); |
| |
| |
| const header = document.querySelector('header'); |
| const modal = document.querySelector('#settings-modal > div'); |
| |
| if (theme === 'dark') { |
| header.classList.add('header-dark'); |
| header.classList.remove('bg-white'); |
| modal.classList.add('modal-dark'); |
| modal.classList.remove('bg-white'); |
| } else { |
| header.classList.remove('header-dark'); |
| header.classList.add('bg-white'); |
| modal.classList.remove('modal-dark'); |
| modal.classList.add('bg-white'); |
| } |
| } |
| |
| function showNotification(message) { |
| const notification = document.createElement('div'); |
| notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-md text-sm shadow-lg'; |
| notification.textContent = message; |
| document.body.appendChild(notification); |
| |
| setTimeout(() => { |
| notification.classList.add('opacity-0', 'transition-opacity', 'duration-300'); |
| setTimeout(() => { |
| document.body.removeChild(notification); |
| }, 300); |
| }, 3000); |
| } |
| |
| |
| document.getElementById('prompt-library').addEventListener('change', function() { |
| if (this.value) { |
| document.getElementById('ai-role').value = ''; |
| } |
| }); |
| |
| document.getElementById('ai-role').addEventListener('input', function() { |
| if (this.value) { |
| document.getElementById('prompt-library').value = ''; |
| } |
| }); |
| |
| |
| chrome.storage.sync.get(['aiRole', 'selectedPrompt'], (result) => { |
| if (result.aiRole) { |
| document.getElementById('ai-role').value = result.aiRole; |
| } |
| if (result.selectedPrompt) { |
| document.getElementById('prompt-library').value = result.selectedPrompt; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
