| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>OpenRouter Chat Interface</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .typing-indicator { |
| display: inline-flex; |
| align-items: center; |
| } |
| .typing-dot { |
| width: 8px; |
| height: 8px; |
| margin: 0 2px; |
| background-color: #9CA3AF; |
| border-radius: 50%; |
| animation: pulse 1.5s infinite ease-in-out; |
| } |
| .typing-dot:nth-child(1) { animation-delay: 0s; } |
| .typing-dot:nth-child(2) { animation-delay: 0.3s; } |
| .typing-dot:nth-child(3) { animation-delay: 0.6s; } |
| .chat-container { |
| height: calc(100vh - 180px); |
| } |
| .message-transition { |
| transition: all 0.3s ease; |
| } |
| .model-selector:hover .model-dropdown { |
| display: block; |
| } |
| .scrollbar-thin::-webkit-scrollbar { |
| width: 4px; |
| } |
| .scrollbar-thin::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| .scrollbar-thin::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 2px; |
| } |
| .scrollbar-thin::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| .markdown-response strong { |
| font-weight: bold; |
| } |
| .markdown-response em { |
| font-style: italic; |
| } |
| .markdown-response code { |
| background-color: #f3f4f6; |
| padding: 0.2em 0.4em; |
| border-radius: 3px; |
| font-family: monospace; |
| } |
| .markdown-response pre { |
| background-color: #f3f4f6; |
| padding: 1em; |
| border-radius: 4px; |
| overflow-x: auto; |
| margin: 0.5em 0; |
| } |
| .markdown-response ul, |
| .markdown-response ol { |
| padding-left: 1.5em; |
| margin: 0.5em 0; |
| } |
| .markdown-response ul { |
| list-style-type: disc; |
| } |
| .markdown-response ol { |
| list-style-type: decimal; |
| } |
| |
| .model-category { |
| padding: 8px 12px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| color: #6b7280; |
| background-color: #f9fafb; |
| border-bottom: 1px solid #e5e7eb; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
| |
| .model-popular { |
| position: relative; |
| } |
| |
| .model-popular::after { |
| content: "★ Popular"; |
| position: absolute; |
| right: 10px; |
| top: 10px; |
| font-size: 0.65rem; |
| background-color: #fef3c7; |
| color: #92400e; |
| padding: 2px 4px; |
| border-radius: 4px; |
| } |
| |
| .model-new::after { |
| content: "🆕 New"; |
| position: absolute; |
| right: 10px; |
| top: 10px; |
| font-size: 0.65rem; |
| background-color: #dbeafe; |
| color: #1e40af; |
| padding: 2px 4px; |
| border-radius: 4px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div class="container mx-auto max-w-4xl p-4"> |
| |
| <header class="bg-white rounded-lg shadow-md p-4 mb-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-robot text-2xl text-indigo-600 mr-3"></i> |
| <h1 class="text-xl font-bold text-gray-800">OpenRouter Chat</h1> |
| </div> |
| <div class="relative model-selector"> |
| <button id="modelButton" class="flex items-center bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-medium py-2 px-4 rounded-lg transition"> |
| <span id="selectedModel">GPT-4</span> |
| <i class="fas fa-chevron-down ml-2 text-sm"></i> |
| </button> |
| <div class="model-dropdown hidden absolute right-0 mt-2 w-96 bg-white rounded-md shadow-lg z-10 border border-gray-200"> |
| <div class="p-2 border-b border-gray-200"> |
| <input type="text" id="modelSearch", placeholder="Search 100+ models...", class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| <div class="overflow-y-auto max-h-96 scrollbar-thin" id="modelList"> |
| |
| </div> |
| <div class="p-2 bg-gray-50 text-xs text-gray-500 border-t border-gray-200 flex justify-between"> |
| <span id="modelCount">Loading models...</span> |
| <span>OpenRouter.ai</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="chat-container bg-white rounded-lg shadow-md p-4 mb-4 overflow-y-auto scrollbar-thin"> |
| <div id="chatMessages" class="space-y-4"> |
| |
| <div class="message-transition flex justify-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify center"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="bg-gray-100 rounded-lg py-2 px-4 inline-block"> |
| <p class="text-gray-800">Hello! I'm your AI assistant powered by <strong>OpenRouter</strong>. Here's what you can do:</p> |
| <ul class="list-disc pl-5 mt-2 space-y-1"> |
| <li>Select different AI models from the dropdown above</li> |
| <li>Search through 100+ available models</li> |
| <li>Your messages will be sent to the selected model</li> |
| <li>All interaction happens through the OpenRouter API</li> |
| </ul> |
| <p class="mt-2 text-gray-800">Please enter your <strong>OpenRouter API Key</strong> in the settings to get started.</p> |
| </div> |
| <p class="text-xs text-gray-500 mt-1">Today at <span id="currentTime"></span></p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-md p-4"> |
| <div class="flex items-center"> |
| <textarea id="userInput" rows="1" class="flex-grow border border-gray-300 rounded-l-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none" placeholder="Type your message here..."></textarea> |
| <button id="sendButton" class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-r-lg transition h-10 flex items-center justify-center"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| <div class="flex justify-between items-center mt-2"> |
| <div class="text-xs text-gray-500"> |
| <span id="charCount">0</span>/1000 |
| </div> |
| <div class="flex space-x-2"> |
| <button id="settingsButton" class="text-gray-500 hover:text-indigo-600 transition"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="settingsModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 hidden"> |
| <div class="bg-white rounded-lg p-6 w-96"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Settings</h3> |
| <button id="closeSettings" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="space-y-4"> |
| <div> |
| <label for="apiKey" class="block text-sm font-medium text-gray-700 mb-1">OpenRouter API Key</label> |
| <input type="password" id="apiKey" placeholder="sk-or-XXXXXXXXXXXXXXXXXXXXXXXX", class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| <div> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" id="saveKey" checked class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"> |
| <span class="ml-2 text-sm text-gray-600">Save API Key (uses localStorage)</span> |
| </label> |
| </div> |
| <div> |
| <label for="temperature" class="block text-sm font-medium text-gray-700 mb-1">Temperature: <span id="tempValue">0.7</span></label> |
| <input type="range" id="temperature", min="0", max="2", step="0.1", value="0.7", class="w-full"> |
| </div> |
| </div> |
| <div class="mt-6 flex justify-end space-x-3"> |
| <button id="saveSettings" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition"> |
| Save |
| </button> |
| <button id="cancelSettings" class="bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 transition"> |
| Cancel |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const openRouterModels = [ |
| |
| { id: 'openai/gpt-4', name: 'GPT-4', provider: 'OpenAI', category: 'popular' }, |
| { id: 'openai/gpt-4-turbo', name: 'GPT-4 Turbo', provider: 'OpenAI', category: 'openai' }, |
| { id: 'openai/gpt-4-32k', name: 'GPT-4 32k', provider: 'OpenAI', category: 'openai' }, |
| { id: 'openai/gpt-3.5-turbo', name: 'GPT-3.5 Turbo', provider: 'OpenAI', category: 'openai' }, |
| { id: 'openai/gpt-3.5-turbo-16k', name: 'GPT-3.5 Turbo 16k', provider: 'OpenAI', category: 'openai' }, |
| |
| |
| { id: 'anthropic/claude-2', name: 'Claude 2', provider: 'Anthropic', category: 'popular' }, |
| { id: 'anthropic/claude-3-opus', name: 'Claude 3 Opus', provider: 'Anthropic', category: 'anthropic' }, |
| { id: 'anthropic/claude-3-sonnet', name: 'Claude 3 Sonnet', provider: 'Anthropic', category: 'anthropic', tags: ['new'] }, |
| { id: 'anthropic/claude-3-haiku', name: 'Claude 3 Haiku', provider: 'Anthropic', category: 'anthropic', tags: ['new'] }, |
| { id: 'anthropic/claude-2.1', name: 'Claude 2.1', provider: 'Anthropic', category: 'anthropic' }, |
| { id: 'anthropic/claude-instant-v1', name: 'Claude Instant', provider: 'Anthropic', category: 'anthropic' }, |
| |
| |
| { id: 'google/gemini-pro', name: 'Gemini Pro', provider: 'Google', category: 'google' }, |
| { id: 'google/palm-2-chat-bison', name: 'PaLM 2 Chat', provider: 'Google', category: 'google' }, |
| { id: 'google/palm-2-codechat-bison', name: 'PaLM 2 Code Chat', provider: 'Google', category: 'google' }, |
| { id: 'google/gemma-7b-it', name: 'Gemma 7B Instruct', provider: 'Google', category: 'google', tags: ['new'] }, |
| { id: 'google/gemma-2b-it', name: 'Gemma 2B Instruct', provider: 'Google', category: 'google', tags: ['new'] }, |
| { id: 'google/gemma-3-2b-instruct', name: 'Gemma 3 2B Instruct', provider: 'Google', category: 'google', tags: ['new'] }, |
| { id: 'google/gemma-3-7b-instruct', name: 'Gemma 3 7B Instruct', provider: 'Google', category: 'google', tags: ['new'] }, |
| { id: 'google/gemma-3-22b-instruct', name: 'Gemma 3 22B Instruct', provider: 'Google', category: 'google', tags: ['new'] }, |
| |
| |
| { id: 'meta-llama/llama-2-70b-chat', name: 'Llama 2 70B', provider: 'Meta', category: 'popular' }, |
| { id: 'meta-llama/llama-2-13b-chat', name: 'Llama 2 13B', provider: 'Meta', category: 'meta' }, |
| { id: 'meta-llama/llama-2-7b-chat', name: 'Llama 2 7B', provider: 'Meta', category: 'meta' }, |
| { id: 'meta-llama/codellama-34b-instruct', name: 'CodeLlama 34B', provider: 'Meta', category: 'meta' }, |
| |
| |
| { id: 'mistralai/mistral-7b-instruct', name: 'Mistral 7B', provider: 'Mistral', category: 'popular' }, |
| { id: 'mistralai/mixtral-8x7b-instruct', name: 'Mixtral 8x7B', provider: 'Mistral', category: 'mistral' }, |
| { id: 'mistralai/mistral-medium', name: 'Mistral Medium', provider: 'Mistral', category: 'mistral' }, |
| |
| |
| { id: 'nousresearch/nous-hermes-2-mixtral-8x7b-dpo', name: 'Hermes 2 Mixtral', provider: 'Nous', category: 'other' }, |
| { id: 'openchat/openchat-7b', name: 'OpenChat 7B', provider: 'OpenChat', category: 'other' }, |
| { id: 'phind/phind-codellama-34b', name: 'Phind CodeLlama', provider: 'Phind', category: 'other' }, |
| { id: 'intel/neural-chat-7b', name: 'Neural Chat 7B', provider: 'Intel', category: 'other' }, |
| { id: 'upstage/solar-10.7b-instruct-v1.0', name: 'Solar 10.7B', provider: 'Upstage', category: 'other' }, |
| { id: 'jondurbin/airoboros-l2-70b-2.2.1', name: 'Airoboros L2 70B', provider: 'Nous', category: 'other' }, |
| { id: 'gryphe/mythomax-l2-13b', name: 'MythoMax L2 13B', provider: 'Gryphe', category: 'other' }, |
| { id: 'undi95/remm-slerp-l2-13b', name: 'ReMM L2 13B', provider: 'Undi', category: 'other' }, |
| { id: 'migtissera/synthia-70b-v1.2b', name: 'Synthia 70B', provider: 'Migtissera', category: 'other' }, |
| { id: 'pygmalionai/mythalion-13b', name: 'Mythalion 13B', provider: 'Pygmalion', category: 'other' }, |
| |
| |
| { id: 'anthropic/claude-v2:enterprise', name: 'Claude Enterprise', provider: 'Anthropic', category: 'enterprise' }, |
| { id: 'cohere/command-nightly', name: 'Command', provider: 'Cohere', category: 'enterprise' }, |
| |
| |
| { id: 'deepseek-ai/deepseek-coder-33b-instruct', name: 'DeepSeek Coder 33B', provider: 'DeepSeek', category: 'coding' }, |
| { id: 'bigcode/starcoder', name: 'StarCoder', provider: 'BigCode', category: 'coding' }, |
| { id: 'codellama/codellama-34b-instruct', name: 'CodeLlama 34B (Fireworks)', provider: 'Meta', category: 'coding' }, |
| |
| |
| { id: 'lizpreciatior/lzlv-70b-fp16-hf', name: 'LZLV 70B', provider: 'Preciatior', category: 'creative' }, |
| { id: 'togethercomputer/alpaca-7b', name: 'Alpaca 7B', provider: 'Together', category: 'creative' }, |
| ]; |
| |
| |
| const categoryNames = { |
| 'popular': '⭐ Popular Models', |
| 'openai': 'OpenAI', |
| 'anthropic': 'Anthropic', |
| 'google': 'Google', |
| 'meta': 'Meta', |
| 'mistral': 'Mistral', |
| 'other': 'Other Models', |
| 'enterprise': 'Enterprise Models', |
| 'coding': 'Coding Models', |
| 'creative': 'Creative Writing' |
| }; |
| |
| |
| const app = { |
| currentModel: 'openai/gpt-4', |
| apiKey: null, |
| temperature: 0.7, |
| conversationHistory: [], |
| |
| init: function() { |
| |
| const now = new Date(); |
| const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); |
| document.getElementById('currentTime').textContent = timeString; |
| |
| |
| this.loadSettings(); |
| |
| |
| this.initModelSelection(); |
| this.initChat(); |
| this.initSettings(); |
| |
| |
| document.getElementById('userInput').focus(); |
| }, |
| |
| loadSettings: function() { |
| |
| if (localStorage.getItem('openRouterApiKey')) { |
| this.apiKey = localStorage.getItem('openRouterApiKey'); |
| document.getElementById('apiKey').value = this.apiKey; |
| } |
| |
| |
| if (localStorage.getItem('openRouterTemperature')) { |
| this.temperature = parseFloat(localStorage.getItem('openRouterTemperature')); |
| document.getElementById('temperature').value = this.temperature; |
| document.getElementById('tempValue').textContent = this.temperature.toFixed(1); |
| } |
| |
| |
| if (localStorage.getItem('openRouterSaveKey') === 'true') { |
| document.getElementById('saveKey').checked = true; |
| } |
| }, |
| |
| initModelSelection: function() { |
| const modelButton = document.getElementById('modelButton'); |
| const modelDropdown = document.querySelector('.model-dropdown'); |
| const selectedModel = document.getElementById('selectedModel'); |
| const modelSearch = document.getElementById('modelSearch'); |
| const modelList = document.getElementById('modelList'); |
| const modelCount = document.getElementById('modelCount'); |
| |
| |
| const groupedModels = {}; |
| openRouterModels.forEach(model => { |
| if (!groupedModels[model.category]) { |
| groupedModels[model.category] = []; |
| } |
| groupedModels[model.category].push(model); |
| }); |
| |
| |
| const categoryOrder = ['popular', 'openai', 'anthropic', 'google', 'meta', 'mistral', 'coding', 'creative', 'enterprise', 'other']; |
| const sortedCategories = categoryOrder.filter(cat => groupedModels[cat]); |
| |
| |
| let modelListHTML = ''; |
| sortedCategories.forEach(category => { |
| modelListHTML += `<div class="model-category">${categoryNames[category]}</div>`; |
| groupedModels[category].forEach(model => { |
| const providerColor = { |
| 'OpenAI': 'indigo', |
| 'Anthropic': 'purple', |
| 'Google': 'blue', |
| 'Meta': 'orange', |
| 'Mistral': 'green', |
| 'Nous': 'yellow', |
| 'OpenChat': 'cyan', |
| 'Phind': 'pink', |
| 'Intel': 'blue', |
| 'Upstage': 'gray', |
| 'DeepSeek': 'teal', |
| 'BigCode': 'indigo', |
| 'Pygmalion': 'fuchsia', |
| 'Undi': 'violet', |
| 'Gryphe': 'amber', |
| 'Preciatior': 'rose', |
| 'Migtissera': 'sky', |
| 'Together': 'emerald' |
| }[model.provider] || 'gray'; |
| |
| const tagsHTML = model.tags?.includes('new') ? |
| '<span class="absolute right-2 top-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">New</span>' : ''; |
| |
| const isPopular = model.category === 'popular' ? |
| '<span class="absolute right-2 top-2 text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Popular</span>' : ''; |
| |
| modelListHTML += ` |
| <div class="model-option relative py-2 px-4 hover:bg-indigo-50 cursor-pointer" data-model="${model.id}"> |
| ${tagsHTML} |
| ${isPopular} |
| <div class="flex justify-between items-center"> |
| <span>${model.name}</span> |
| <span class="text-xs bg-${providerColor}-100 text-${providerColor}-800 px-2 py-1 rounded">${model.provider}</span> |
| </div> |
| </div> |
| `; |
| }); |
| }); |
| |
| modelList.innerHTML = modelListHTML; |
| modelCount.textContent = `${openRouterModels.length} models available`; |
| |
| |
| const modelOptions = document.querySelectorAll('.model-option'); |
| |
| modelButton.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| modelDropdown.classList.toggle('hidden'); |
| if (!modelDropdown.classList.contains('hidden')) { |
| modelSearch.focus(); |
| } |
| }); |
| |
| modelOptions.forEach(option => { |
| option.addEventListener('click', function() { |
| const modelName = this.getAttribute('data-model'); |
| const selectedModelObj = openRouterModels.find(m => m.id === modelName); |
| app.currentModel = modelName; |
| selectedModel.textContent = selectedModelObj.name; |
| modelDropdown.classList.add('hidden'); |
| |
| |
| app.addSystemMessage(`Changed model to: ${selectedModelObj.name} (${selectedModelObj.provider})`); |
| }); |
| }); |
| |
| |
| modelSearch.addEventListener('input', function() { |
| const searchTerm = this.value.toLowerCase(); |
| const options = modelList.querySelectorAll('.model-option, .model-category'); |
| |
| if (searchTerm.trim() === '') { |
| |
| const categories = modelList.querySelectorAll('.model-category'); |
| categories.forEach(cat => cat.style.display = 'block'); |
| |
| modelList.querySelectorAll('.model-option').forEach(opt => { |
| opt.style.display = 'block'; |
| }); |
| return; |
| } |
| |
| let visibleCount = 0; |
| let lastVisibleCategory = null; |
| |
| options.forEach(option => { |
| if (option.classList.contains('model-category')) { |
| return; |
| } |
| |
| const modelName = option.textContent.toLowerCase(); |
| const modelId = option.getAttribute('data-model'); |
| const modelObj = openRouterModels.find(m => m.id === modelId); |
| |
| if (modelName.includes(searchTerm) || |
| modelObj.provider.toLowerCase().includes(searchTerm) || |
| modelObj.id.toLowerCase().includes(searchTerm)) { |
| |
| option.style.display = 'block'; |
| visibleCount++; |
| |
| |
| const category = modelObj.category; |
| const categoryHeading = Array.from(modelList.querySelectorAll('.model-category')) |
| .find(cat => cat.textContent === categoryNames[category]); |
| |
| if (categoryHeading && categoryHeading.style.display !== 'block') { |
| categoryHeading.style.display = 'block'; |
| lastVisibleCategory = categoryHeading; |
| } |
| } else { |
| option.style.display = 'none'; |
| } |
| }); |
| |
| |
| modelList.querySelectorAll('.model-category').forEach(cat => { |
| let hasVisible = false; |
| let nextElement = cat.nextElementSibling; |
| |
| while (nextElement && !nextElement.classList.contains('model-category')) { |
| if (nextElement.style.display === 'block') { |
| hasVisible = true; |
| break; |
| } |
| nextElement = nextElement.nextElementSibling; |
| } |
| |
| cat.style.display = hasVisible ? 'block' : 'none'; |
| }); |
| |
| |
| modelCount.textContent = `${visibleCount} of ${openRouterModels.length} models`; |
| |
| |
| if (searchTerm.trim() !== '') { |
| const firstVisible = modelList.querySelector('.model-option[style="display: block;"]'); |
| if (firstVisible) { |
| firstVisible.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
| } |
| } |
| }); |
| |
| |
| document.addEventListener('click', function(event) { |
| if (!modelButton.contains(event.target) && !modelDropdown.contains(event.target)) { |
| modelDropdown.classList.add('hidden'); |
| } |
| }); |
| }, |
| |
| initChat: function() { |
| const userInput = document.getElementById('userInput'); |
| const sendButton = document.getElementById('sendButton'); |
| const chatMessages = document.getElementById('chatMessages'); |
| const charCount = document.getElementById('charCount'); |
| |
| userInput.addEventListener('input', function() { |
| charCount.textContent = this.value.length; |
| }); |
| |
| sendButton.addEventListener('click', function() { |
| const message = userInput.value.trim(); |
| if (message) { |
| if (!app.apiKey) { |
| app.addSystemMessage('Please enter your OpenRouter API Key in settings first.'); |
| document.getElementById('settingsButton').click(); |
| return; |
| } |
| |
| app.addMessage(message, true); |
| userInput.value = ''; |
| charCount.textContent = '0'; |
| |
| const typingIndicator = app.showTypingIndicator(); |
| |
| |
| app.callOpenRouter(message, typingIndicator); |
| } |
| }); |
| |
| userInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter' && !e.shiftKey) { |
| e.preventDefault(); |
| sendButton.click(); |
| } |
| }); |
| |
| |
| userInput.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| }); |
| }, |
| |
| initSettings: function() { |
| const settingsModal = document.getElementById('settingsModal'); |
| const settingsButton = document.getElementById('settingsButton'); |
| const closeSettings = document.getElementById('closeSettings'); |
| const saveSettings = document.getElementById('saveSettings'); |
| const cancelSettings = document.getElementById('cancelSettings'); |
| const temperatureSlider = document.getElementById('temperature'); |
| const tempValue = document.getElementById('tempValue'); |
| |
| |
| settingsButton.addEventListener('click', function() { |
| settingsModal.classList.remove('hidden'); |
| }); |
| |
| |
| closeSettings.addEventListener('click', function() { |
| settingsModal.classList.add('hidden'); |
| }); |
| |
| cancelSettings.addEventListener('click', function() { |
| settingsModal.classList.add('hidden'); |
| }); |
| |
| |
| saveSettings.addEventListener('click', function() { |
| const apiKey = document.getElementById('apiKey').value.trim(); |
| const saveKey = document.getElementById('saveKey').checked; |
| |
| if (!apiKey) { |
| alert('Please enter your OpenRouter API Key'); |
| return; |
| } |
| |
| app.apiKey = apiKey; |
| app.temperature = parseFloat(temperatureSlider.value); |
| |
| if (saveKey) { |
| localStorage.setItem('openRouterApiKey', apiKey); |
| localStorage.setItem('openRouterSaveKey', 'true'); |
| } else { |
| localStorage.removeItem('openRouterApiKey'); |
| localStorage.removeItem('openRouterSaveKey'); |
| } |
| |
| localStorage.setItem('openRouterTemperature', app.temperature); |
| |
| settingsModal.classList.add('hidden'); |
| app.addSystemMessage('Settings saved successfully.'); |
| }); |
| |
| |
| temperatureSlider.addEventListener('input', function() { |
| tempValue.textContent = this.value; |
| }); |
| }, |
| |
| addMessage: function(content, isUser) { |
| const chatMessages = document.getElementById('chatMessages'); |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `message-transition flex ${isUser ? 'justify-end' : 'justify-start'}`; |
| |
| if (isUser) { |
| messageDiv.innerHTML = ` |
| <div class="mr-3"> |
| <div class="bg-indigo-600 text-white rounded-lg py-2 px-4 inline-block max-w-[90%]"> |
| <p>${content}</p> |
| </div> |
| <p class="text-xs text-gray-500 mt-1 text-right">Just now</p> |
| </div> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-600 flex items-center justify-center"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| `; |
| } else { |
| |
| const mdContent = this.simpleMarkdown(content); |
| |
| messageDiv.innerHTML = ` |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="bg-gray-100 rounded-lg py-2 px-4 inline-block max-w-[90%] markdown-response"> |
| ${mdContent} |
| </div> |
| <p class="text-xs text-gray-500 mt-1">Just now</p> |
| </div> |
| `; |
| } |
| |
| chatMessages.appendChild(messageDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| |
| |
| this.conversationHistory.push({ |
| role: isUser ? 'user' : 'assistant', |
| content: content |
| }); |
| }, |
| |
| addSystemMessage: function(content) { |
| const chatMessages = document.getElementById('chatMessages'); |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'message-transition flex justify-start'; |
| |
| messageDiv.innerHTML = ` |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center"> |
| <i class="fas fa-info-circle text-gray-600"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="bg-gray-200 rounded-lg py-2 px-4 inline-block"> |
| <p class="text-gray-800">${content}</p> |
| </div> |
| <p class="text-xs text-gray-500 mt-1">System</p> |
| </div> |
| `; |
| |
| chatMessages.appendChild(messageDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| }, |
| |
| showTypingIndicator: function() { |
| const chatMessages = document.getElementById('chatMessages'); |
| const typingDiv = document.createElement('div'); |
| typingDiv.className = 'message-transition flex justify-start'; |
| typingDiv.innerHTML = ` |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
| <i class="fas fa-robot text-indigo-600"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="bg-gray-100 rounded-lg py-2 px-4 inline-block"> |
| <div class="typing-indicator"> |
| <div class="typing-dot"></div> |
| <div class="typing-dot"></div> |
| <div class="typing-dot"></div> |
| </div> |
| </div> |
| </div> |
| `; |
| chatMessages.appendChild(typingDiv); |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| return typingDiv; |
| }, |
| |
| removeTypingIndicator: function(typingDiv) { |
| typingDiv.remove(); |
| }, |
| |
| simpleMarkdown: function(text) { |
| |
| text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); |
| text = text.replace(/\*(.*?)\*/g, '<em>$1</em>'); |
| text = text.replace(/`([^`]+)`/g, '<code>$1</code>'); |
| text = text.replace(/\n/g, '<br>'); |
| |
| |
| text = text.replace(/^\s*\*\s(.*)$/gm, '<li>$1</li>'); |
| text = text.replace(/<li>.*<\/li>/g, function(match) { |
| return '<ul>' + match + '</ul>'; |
| }); |
| |
| return text; |
| }, |
| |
| callOpenRouter: async function(message, typingIndicator) { |
| try { |
| const messages = [...this.conversationHistory]; |
| messages.push({ |
| role: 'user', |
| content: message |
| }); |
| |
| const response = await fetch('https://openrouter.ai/api/v1/chat/completions', { |
| method: 'POST', |
| headers: { |
| 'Authorization': `Bearer ${this.apiKey}`, |
| 'Content-Type': 'application/json', |
| 'HTTP-Referer': window.location.href, |
| 'X-Title': 'OpenRouter Chat Interface' |
| }, |
| body: JSON.stringify({ |
| model: this.currentModel, |
| messages: messages, |
| temperature: this.temperature |
| }) |
| }); |
| |
| if (!response.ok) { |
| throw new Error(`API request failed with status ${response.status}: ${await response.text()}`); |
| } |
| |
| const data = await response.json(); |
| const aiResponse = data.choices[0].message.content; |
| |
| this.removeTypingIndicator(typingIndicator); |
| this.addMessage(aiResponse, false); |
| |
| } catch (error) { |
| console.error('Error calling OpenRouter:', error); |
| this.removeTypingIndicator(typingIndicator); |
| this.addSystemMessage(`Error: ${error.message}`); |
| } |
| } |
| }; |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| app.init(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=fmlemos/zeroshot-chatbot-openrouter" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
