| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Advanced AI Client</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> |
| .chat-message.user { |
| background-color: #f3f4f6; |
| border-radius: 1rem 1rem 0 1rem; |
| } |
| .chat-message.ai { |
| background-color: #e0f2fe; |
| border-radius: 1rem 1rem 1rem 0; |
| } |
| .typing-indicator { |
| display: inline-block; |
| } |
| .typing-indicator span { |
| height: 8px; |
| width: 8px; |
| background: #9ca3af; |
| border-radius: 50%; |
| display: inline-block; |
| margin: 0 2px; |
| opacity: 0.4; |
| } |
| .typing-indicator span:nth-child(1) { |
| animation: typing 1s infinite; |
| } |
| .typing-indicator span:nth-child(2) { |
| animation: typing 1s infinite 0.2s; |
| } |
| .typing-indicator span:nth-child(3) { |
| animation: typing 1s infinite 0.4s; |
| } |
| @keyframes typing { |
| 0%, 100% { |
| opacity: 0.4; |
| transform: translateY(0); |
| } |
| 50% { |
| opacity: 1; |
| transform: translateY(-5px); |
| } |
| } |
| .slide-in { |
| animation: slideIn 0.3s ease-out forwards; |
| } |
| @keyframes slideIn { |
| from { |
| transform: translateY(20px); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
| .file-preview { |
| max-width: 200px; |
| max-height: 200px; |
| border-radius: 0.5rem; |
| margin-top: 0.5rem; |
| } |
| .progress-bar { |
| height: 4px; |
| background-color: #e5e7eb; |
| border-radius: 2px; |
| margin-top: 4px; |
| } |
| .progress-bar-fill { |
| height: 100%; |
| background-color: #3b82f6; |
| border-radius: 2px; |
| transition: width 0.3s ease; |
| } |
| #dropzone { |
| border: 2px dashed #d1d5db; |
| border-radius: 0.5rem; |
| transition: all 0.2s ease; |
| } |
| #dropzone.active { |
| border-color: #3b82f6; |
| background-color: #eff6ff; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto max-w-6xl p-4"> |
| |
| <header class="flex justify-between items-center mb-6"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-robot text-3xl text-blue-500"></i> |
| <h1 class="text-2xl font-bold text-gray-800">Advanced AI Client</h1> |
| </div> |
| <div class="flex space-x-2"> |
| <button id="web-search-btn" class="p-2 rounded-full hover:bg-gray-200 transition" title="Web Search"> |
| <i class="fas fa-globe text-gray-600"></i> |
| </button> |
| <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-200 transition" title="Settings"> |
| <i class="fas fa-cog text-gray-600"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="flex flex-col md:flex-row gap-6"> |
| |
| <aside class="hidden md:block w-64 bg-white rounded-lg shadow p-4 h-fit sticky top-4"> |
| <div class="mb-6"> |
| <h2 class="font-semibold text-gray-700 mb-2">Conversations</h2> |
| <ul id="conversation-list" class="space-y-1"> |
| <li class="p-2 rounded hover:bg-gray-100 cursor-pointer flex items-center justify-between bg-blue-50"> |
| <span>New Chat</span> |
| <i class="fas fa-plus text-blue-500"></i> |
| </li> |
| <li class="p-2 rounded hover:bg-gray-100 cursor-pointer">API Configuration Help</li> |
| <li class="p-2 rounded hover:bg-gray-100 cursor-pointer">Creative Writing</li> |
| <li class="p-2 rounded hover:bg-gray-100 cursor-pointer">Code Assistance</li> |
| <li class="p-2 rounded hover:bg-gray-100 cursor-pointer">Multimodal Analysis</li> |
| </ul> |
| </div> |
| <div> |
| <h2 class="font-semibold text-gray-700 mb-2">Features</h2> |
| <div class="space-y-2"> |
| <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer"> |
| <i class="fas fa-globe text-blue-500 mr-2"></i> |
| <span>Web Search</span> |
| </div> |
| <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer"> |
| <i class="fas fa-file-upload text-blue-500 mr-2"></i> |
| <span>File Upload</span> |
| </div> |
| <div class="flex items-center p-2 rounded hover:bg-gray-100 cursor-pointer"> |
| <i class="fas fa-images text-blue-500 mr-2"></i> |
| <span>Multimodal</span> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <h2 class="font-semibold text-gray-700 mb-2">API Status</h2> |
| <div class="flex items-center mb-2"> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
| <span class="text-sm">Free API: Active</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-gray-300 mr-2"></div> |
| <span class="text-sm">Custom API: Inactive</span> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main class="flex-1 bg-white rounded-lg shadow overflow-hidden flex flex-col"> |
| <div id="chat-container" class="flex-1 p-4 overflow-y-auto space-y-4 h-96"> |
| <div class="chat-message ai p-4 max-w-[80%] slide-in"> |
| <div class="flex items-start space-x-2"> |
| <div class="bg-blue-500 text-white p-2 rounded-full"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-700">AI Assistant</p> |
| <p class="text-gray-600 mt-1">Hello! I'm your advanced AI assistant. You can use the free API or configure your own API key in the settings. I support web search, file uploads, and multimodal capabilities. How can I help you today?</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border-t p-4 bg-gray-50"> |
| |
| <div id="dropzone" class="p-4 mb-3 text-center hidden"> |
| <i class="fas fa-cloud-upload-alt text-3xl text-blue-500 mb-2"></i> |
| <p class="font-medium">Drop files here or click to upload</p> |
| <p class="text-sm text-gray-500 mt-1">Supports images, PDFs, and text files</p> |
| <input type="file" id="file-input" class="hidden" multiple> |
| </div> |
| |
| |
| <div id="file-previews" class="mb-3 hidden"></div> |
| |
| |
| <div id="web-search-toggle" class="flex items-center mb-3 hidden"> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" id="enable-web-search" class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-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-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> |
| <span class="ml-3 text-sm font-medium text-gray-700">Enable Web Search</span> |
| </label> |
| </div> |
| |
| |
| <form id="chat-form" class="flex space-x-2"> |
| <div class="flex-1 relative"> |
| <input |
| type="text" |
| id="user-input" |
| placeholder="Type your message here..." |
| class="w-full border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10" |
| autocomplete="off" |
| > |
| <button |
| type="button" |
| id="file-upload-btn" |
| class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-blue-500" |
| title="Upload files" |
| > |
| <i class="fas fa-paperclip"></i> |
| </button> |
| </div> |
| <button |
| type="submit" |
| class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 w-10 h-10 flex items-center justify-center transition" |
| > |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| <div class="mt-2 text-xs text-gray-500 flex justify-between"> |
| <span id="api-status">Using: Free API</span> |
| <span id="token-counter">Tokens: 0/1000 (Free limit)</span> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| |
| <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Advanced API Configuration</h2> |
| <button id="close-settings" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-6"> |
| |
| <div> |
| <h3 class="font-medium text-gray-700 mb-2">API Provider</h3> |
| <div class="grid grid-cols-2 gap-3"> |
| <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50"> |
| <input type="radio" name="api-provider" value="free" class="text-blue-500" checked> |
| <div> |
| <span class="font-medium">Free API</span> |
| <p class="text-xs text-gray-500">Limited capabilities, no setup required</p> |
| </div> |
| </label> |
| <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50"> |
| <input type="radio" name="api-provider" value="openai" class="text-blue-500"> |
| <div> |
| <span class="font-medium">OpenAI</span> |
| <p class="text-xs text-gray-500">GPT-4, GPT-3.5, DALL·E</p> |
| </div> |
| </label> |
| <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50"> |
| <input type="radio" name="api-provider" value="anthropic" class="text-blue-500"> |
| <div> |
| <span class="font-medium">Anthropic</span> |
| <p class="text-xs text-gray-500">Claude models</p> |
| </div> |
| </label> |
| <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50"> |
| <input type="radio" name="api-provider" value="google" class="text-blue-500"> |
| <div> |
| <span class="font-medium">Google</span> |
| <p class="text-xs text-gray-500">Gemini, Vertex AI</p> |
| </div> |
| </label> |
| <label class="flex items-center space-x-2 cursor-pointer p-3 border rounded hover:bg-gray-50"> |
| <input type="radio" name="api-provider" value="custom" class="text-blue-500"> |
| <div> |
| <span class="font-medium">Custom API</span> |
| <p class="text-xs text-gray-500">Fully customizable endpoint</p> |
| </div> |
| </label> |
| </div> |
| </div> |
| |
| |
| <div id="api-key-section" class="hidden"> |
| <h3 class="font-medium text-gray-700 mb-2">API Key</h3> |
| <div class="flex space-x-2"> |
| <input |
| type="password" |
| id="api-key-input" |
| placeholder="Enter your API key" |
| class="flex-1 border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" |
| > |
| <button id="toggle-api-key" class="bg-gray-100 hover:bg-gray-200 px-3 rounded"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
| <p class="text-xs text-gray-500 mt-1">Your API key is stored locally in your browser and never sent to our servers.</p> |
| </div> |
| |
| |
| <div id="custom-api-section" class="hidden"> |
| <h3 class="font-medium text-gray-700 mb-2">Custom API Configuration</h3> |
| <div class="space-y-3"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">API Endpoint</label> |
| <input |
| type="text" |
| id="api-endpoint-input" |
| placeholder="https://api.example.com/v1/chat" |
| class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" |
| > |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Request Method</label> |
| <select id="api-method-select" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="POST">POST</option> |
| <option value="GET">GET</option> |
| <option value="PUT">PUT</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Headers (JSON)</label> |
| <textarea |
| id="api-headers-input" |
| placeholder='{"Content-Type": "application/json", "Authorization": "Bearer $API_KEY"}' |
| class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 h-20" |
| ></textarea> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Request Body Template (JSON)</label> |
| <textarea |
| id="api-body-input" |
| placeholder='{"model": "$MODEL", "messages": $MESSAGES, "max_tokens": 1000}' |
| class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 h-20" |
| ></textarea> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="font-medium text-gray-700 mb-2">Model Selection</h3> |
| <select id="model-select" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="gpt-3.5-turbo">GPT-3.5 Turbo (Free)</option> |
| <option value="gpt-4">GPT-4</option> |
| <option value="claude-2">Claude 2</option> |
| <option value="gemini-pro">Gemini Pro</option> |
| <option value="custom">Custom Model</option> |
| </select> |
| </div> |
| |
| |
| <div class="pt-4 border-t"> |
| <h3 class="font-medium text-gray-700 mb-2">Features</h3> |
| <div class="space-y-3"> |
| <label class="flex items-center justify-between cursor-pointer"> |
| <div> |
| <span class="font-medium">Web Search</span> |
| <p class="text-xs text-gray-500">Enable internet search for up-to-date information</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" id="enable-web-search-setting" class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-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-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </label> |
| <label class="flex items-center justify-between cursor-pointer"> |
| <div> |
| <span class="font-medium">File Upload</span> |
| <p class="text-xs text-gray-500">Process documents, images, and other files</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" id="enable-file-upload-setting" class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-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-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </label> |
| <label class="flex items-center justify-between cursor-pointer"> |
| <div> |
| <span class="font-medium">Multimodal Support</span> |
| <p class="text-xs text-gray-500">Process both text and images together</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" id="enable-multimodal-setting" class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-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-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div> |
| </label> |
| </label> |
| </div> |
| </div> |
| |
| |
| <div class="pt-4 border-t"> |
| <button id="save-settings" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition"> |
| Save Configuration |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="web-search-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Web Search Configuration</h2> |
| <button id="close-web-search" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Search Query</label> |
| <input |
| type="text" |
| id="search-query-input" |
| placeholder="What would you like to search for?" |
| class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" |
| > |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Search Engine</label> |
| <select id="search-engine-select" class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="google">Google</option> |
| <option value="bing">Bing</option> |
| <option value="custom">Custom</option> |
| </select> |
| </div> |
| |
| <div id="custom-search-engine-section" class="hidden"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Custom Search API</label> |
| <input |
| type="text" |
| id="custom-search-api-input" |
| placeholder="https://api.example.com/search?q={query}" |
| class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" |
| > |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Number of Results</label> |
| <input |
| type="range" |
| id="search-results-count" |
| min="1" |
| max="10" |
| value="3" |
| class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" |
| > |
| <div class="flex justify-between text-xs text-gray-500"> |
| <span>1</span> |
| <span>3</span> |
| <span>5</span> |
| <span>7</span> |
| <span>10</span> |
| </div> |
| </div> |
| |
| <div class="pt-2"> |
| <button id="perform-search" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition"> |
| Perform Search |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const settingsBtn = document.getElementById('settings-btn'); |
| const closeSettings = document.getElementById('close-settings'); |
| const settingsModal = document.getElementById('settings-modal'); |
| const saveSettingsBtn = document.getElementById('save-settings'); |
| const chatForm = document.getElementById('chat-form'); |
| const userInput = document.getElementById('user-input'); |
| const chatContainer = document.getElementById('chat-container'); |
| const apiKeySection = document.getElementById('api-key-section'); |
| const customApiSection = document.getElementById('custom-api-section'); |
| const apiProviderRadios = document.querySelectorAll('input[name="api-provider"]'); |
| const modelSelect = document.getElementById('model-select'); |
| const tokenCounter = document.getElementById('token-counter'); |
| const apiStatus = document.getElementById('api-status'); |
| const fileUploadBtn = document.getElementById('file-upload-btn'); |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('file-input'); |
| const filePreviews = document.getElementById('file-previews'); |
| const webSearchBtn = document.getElementById('web-search-btn'); |
| const webSearchModal = document.getElementById('web-search-modal'); |
| const closeWebSearch = document.getElementById('close-web-search'); |
| const webSearchToggle = document.getElementById('web-search-toggle'); |
| const enableWebSearch = document.getElementById('enable-web-search'); |
| const toggleApiKey = document.getElementById('toggle-api-key'); |
| const apiKeyInput = document.getElementById('api-key-input'); |
| const customSearchEngineSection = document.getElementById('custom-search-engine-section'); |
| const searchEngineSelect = document.getElementById('search-engine-select'); |
| const performSearchBtn = document.getElementById('perform-search'); |
| |
| |
| let uploadedFiles = []; |
| let isWebSearchEnabled = false; |
| let searchResults = []; |
| |
| |
| let settings = JSON.parse(localStorage.getItem('aiClientSettings')) || { |
| apiProvider: 'free', |
| apiKey: '', |
| apiEndpoint: '', |
| apiMethod: 'POST', |
| apiHeaders: '{"Content-Type": "application/json"}', |
| apiBody: '{"model": "$MODEL", "messages": $MESSAGES}', |
| model: 'gpt-3.5-turbo', |
| tokenUsage: 0, |
| features: { |
| webSearch: false, |
| fileUpload: true, |
| multimodal: false |
| } |
| }; |
| |
| |
| updateUIFromSettings(); |
| |
| |
| settingsBtn.addEventListener('click', () => { |
| settingsModal.classList.remove('hidden'); |
| }); |
| |
| closeSettings.addEventListener('click', () => { |
| settingsModal.classList.add('hidden'); |
| }); |
| |
| apiProviderRadios.forEach(radio => { |
| radio.addEventListener('change', function() { |
| updateAPIConfigurationUI(); |
| }); |
| }); |
| |
| searchEngineSelect.addEventListener('change', function() { |
| if (this.value === 'custom') { |
| customSearchEngineSection.classList.remove('hidden'); |
| } else { |
| customSearchEngineSection.classList.add('hidden'); |
| } |
| }); |
| |
| toggleApiKey.addEventListener('click', function() { |
| const type = apiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password'; |
| apiKeyInput.setAttribute('type', type); |
| this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>'; |
| }); |
| |
| saveSettingsBtn.addEventListener('click', function() { |
| const selectedProvider = document.querySelector('input[name="api-provider"]:checked').value; |
| const apiKey = document.getElementById('api-key-input').value; |
| const apiEndpoint = document.getElementById('api-endpoint-input').value; |
| const apiMethod = document.getElementById('api-method-select').value; |
| const apiHeaders = document.getElementById('api-headers-input').value; |
| const apiBody = document.getElementById('api-body-input').value; |
| const model = document.getElementById('model-select').value; |
| const webSearchEnabled = document.getElementById('enable-web-search-setting').checked; |
| const fileUploadEnabled = document.getElementById('enable-file-upload-setting').checked; |
| const multimodalEnabled = document.getElementById('enable-multimodal-setting').checked; |
| |
| settings = { |
| apiProvider: selectedProvider, |
| apiKey: apiKey, |
| apiEndpoint: apiEndpoint, |
| apiMethod: apiMethod, |
| apiHeaders: apiHeaders, |
| apiBody: apiBody, |
| model: model, |
| tokenUsage: settings.tokenUsage, |
| features: { |
| webSearch: webSearchEnabled, |
| fileUpload: fileUploadEnabled, |
| multimodal: multimodalEnabled |
| } |
| }; |
| |
| localStorage.setItem('aiClientSettings', JSON.stringify(settings)); |
| updateUIFromSettings(); |
| settingsModal.classList.add('hidden'); |
| |
| |
| showToast('Settings saved successfully!', 'success'); |
| }); |
| |
| fileUploadBtn.addEventListener('click', function() { |
| if (settings.features.fileUpload) { |
| fileInput.click(); |
| } else { |
| showToast('File upload is disabled in settings', 'warning'); |
| } |
| }); |
| |
| fileInput.addEventListener('change', function(e) { |
| handleFiles(e.target.files); |
| }); |
| |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropzone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropzone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropzone.classList.add('active'); |
| } |
| |
| function unhighlight() { |
| dropzone.classList.remove('active'); |
| } |
| |
| dropzone.addEventListener('drop', function(e) { |
| if (settings.features.fileUpload) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| handleFiles(files); |
| } else { |
| showToast('File upload is disabled in settings', 'warning'); |
| } |
| }); |
| |
| dropzone.addEventListener('click', function() { |
| if (settings.features.fileUpload) { |
| fileInput.click(); |
| } else { |
| showToast('File upload is disabled in settings', 'warning'); |
| } |
| }); |
| |
| webSearchBtn.addEventListener('click', function() { |
| if (settings.features.webSearch) { |
| webSearchModal.classList.remove('hidden'); |
| } else { |
| showToast('Web search is disabled in settings', 'warning'); |
| } |
| }); |
| |
| closeWebSearch.addEventListener('click', function() { |
| webSearchModal.classList.add('hidden'); |
| }); |
| |
| enableWebSearch.addEventListener('change', function() { |
| isWebSearchEnabled = this.checked; |
| if (this.checked) { |
| showToast('Web search enabled for this conversation', 'info'); |
| } |
| }); |
| |
| performSearchBtn.addEventListener('click', function() { |
| const query = document.getElementById('search-query-input').value; |
| const searchEngine = document.getElementById('search-engine-select').value; |
| const customSearchAPI = document.getElementById('custom-search-api-input').value; |
| const resultCount = document.getElementById('search-results-count').value; |
| |
| if (!query) { |
| showToast('Please enter a search query', 'warning'); |
| return; |
| } |
| |
| |
| simulateWebSearch(query, resultCount); |
| webSearchModal.classList.add('hidden'); |
| }); |
| |
| chatForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const message = userInput.value.trim(); |
| if (message === '' && uploadedFiles.length === 0) return; |
| |
| |
| addMessageToChat('user', message); |
| userInput.value = ''; |
| |
| |
| const typingIndicator = document.createElement('div'); |
| typingIndicator.className = 'chat-message ai p-4 max-w-[80%]'; |
| typingIndicator.innerHTML = ` |
| <div class="flex items-start space-x-2"> |
| <div class="bg-blue-500 text-white p-2 rounded-full"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-700">AI Assistant</p> |
| <div class="typing-indicator mt-1"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| </div> |
| `; |
| chatContainer.appendChild(typingIndicator); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| |
| |
| setTimeout(() => { |
| |
| typingIndicator.remove(); |
| |
| |
| let response; |
| if (settings.apiProvider === 'free') { |
| |
| const tokensUsed = Math.floor(Math.random() * 30) + 20; |
| settings.tokenUsage += tokensUsed; |
| localStorage.setItem('aiClientSettings', JSON.stringify(settings)); |
| updateTokenCounter(); |
| |
| |
| const freeResponses = [ |
| "I'm responding using the free API service. For more advanced features, consider using your own API key.", |
| "This is a sample response from the free tier. The free API has limited capabilities compared to premium services.", |
| "Free API response: I can help with basic queries. For complex tasks, you might want to configure your own API key in settings.", |
| "Using the free service, my responses are limited. Did you know you can connect your own API for better performance?", |
| "This is a simulated response from the free API. In a real implementation, this would connect to an actual AI service." |
| ]; |
| response = freeResponses[Math.floor(Math.random() * freeResponses.length)]; |
| } else { |
| |
| const premiumResponses = [ |
| "This would be the actual response from your configured API. The web app would make a real API call to the service you specified.", |
| "If you had configured your API key, this response would come directly from the AI service provider you selected.", |
| "In a production environment, this would connect to the API endpoint you specified in the settings.", |
| "With a custom API, you would receive higher quality responses with more capabilities than the free tier.", |
| "Your own API key would enable more advanced features and longer conversations." |
| ]; |
| response = premiumResponses[Math.floor(Math.random() * premiumResponses.length)]; |
| } |
| |
| |
| if (isWebSearchEnabled && searchResults.length > 0) { |
| response += "\n\nWeb search results:\n"; |
| searchResults.forEach((result, index) => { |
| response += `${index + 1}. ${result.title}\n ${result.url}\n`; |
| }); |
| searchResults = []; |
| } |
| |
| |
| if (uploadedFiles.length > 0) { |
| response += "\n\nI've processed the following files:\n"; |
| uploadedFiles.forEach(file => { |
| response += `- ${file.name} (${file.type})\n`; |
| }); |
| |
| if (settings.features.multimodal) { |
| response += "\nI've analyzed the content of these files using multimodal capabilities."; |
| } |
| |
| |
| uploadedFiles = []; |
| filePreviews.innerHTML = ''; |
| filePreviews.classList.add('hidden'); |
| dropzone.classList.add('hidden'); |
| } |
| |
| addMessageToChat('ai', response); |
| }, 1500); |
| }); |
| |
| |
| function updateAPIConfigurationUI() { |
| const selectedProvider = document.querySelector('input[name="api-provider"]:checked').value; |
| |
| if (selectedProvider === 'free') { |
| apiKeySection.classList.add('hidden'); |
| customApiSection.classList.add('hidden'); |
| modelSelect.innerHTML = ` |
| <option value="gpt-3.5-turbo">GPT-3.5 Turbo (Free)</option> |
| <option value="gpt-3.5-turbo-16k">GPT-3.5 Turbo 16k</option> |
| `; |
| } else if (selectedProvider === 'custom') { |
| apiKeySection.classList.remove('hidden'); |
| customApiSection.classList.remove('hidden'); |
| modelSelect.innerHTML = ` |
| <option value="custom">Custom Model</option> |
| `; |
| } else { |
| apiKeySection.classList.remove('hidden'); |
| customApiSection.classList.add('hidden'); |
| if (selectedProvider === 'openai') { |
| modelSelect.innerHTML = ` |
| <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option> |
| <option value="gpt-4">GPT-4</option> |
| <option value="gpt-4-turbo">GPT-4 Turbo</option> |
| <option value="dall-e">DALL·E (Image Generation)</option> |
| `; |
| } else if (selectedProvider === 'anthropic') { |
| modelSelect.innerHTML = ` |
| <option value="claude-2">Claude 2</option> |
| <option value="claude-instant">Claude Instant</option> |
| `; |
| } else if (selectedProvider === 'google') { |
| modelSelect.innerHTML = ` |
| <option value="gemini-pro">Gemini Pro</option> |
| <option value="gemini-vision">Gemini Vision</option> |
| `; |
| } |
| } |
| } |
| |
| function updateUIFromSettings() { |
| |
| document.querySelector(`input[name="api-provider"][value="${settings.apiProvider}"]`).checked = true; |
| |
| |
| document.getElementById('api-key-input').value = settings.apiKey; |
| document.getElementById('api-endpoint-input').value = settings.apiEndpoint; |
| document.getElementById('api-method-select').value = settings.apiMethod; |
| document.getElementById('api-headers-input').value = settings.apiHeaders; |
| document.getElementById('api-body-input').value = settings.apiBody; |
| |
| |
| modelSelect.value = settings.model; |
| |
| |
| document.getElementById('enable-web-search-setting').checked = settings.features.webSearch; |
| document.getElementById('enable-file-upload-setting').checked = settings.features.fileUpload; |
| document.getElementById('enable-multimodal-setting').checked = settings.features.multimodal; |
| |
| |
| updateAPIConfigurationUI(); |
| |
| |
| updateTokenCounter(); |
| |
| |
| apiStatus.textContent = `Using: ${settings.apiProvider === 'free' ? 'Free API' : `${settings.apiProvider.charAt(0).toUpperCase() + settings.apiProvider.slice(1)} API`}`; |
| |
| |
| if (settings.features.webSearch) { |
| webSearchToggle.classList.remove('hidden'); |
| } else { |
| webSearchToggle.classList.add('hidden'); |
| } |
| } |
| |
| function updateTokenCounter() { |
| if (settings.apiProvider === 'free') { |
| const remaining = Math.max(0, 1000 - settings.tokenUsage); |
| tokenCounter.textContent = `Tokens: ${settings.tokenUsage}/1000 (${remaining} remaining)`; |
| |
| if (remaining < 200) { |
| tokenCounter.classList.add('text-red-500'); |
| tokenCounter.classList.remove('text-gray-500'); |
| } else { |
| tokenCounter.classList.remove('text-red-500'); |
| tokenCounter.classList.add('text-gray-500'); |
| } |
| } else { |
| tokenCounter.textContent = `Using: ${settings.apiProvider.charAt(0).toUpperCase() + settings.apiProvider.slice(1)} API`; |
| tokenCounter.classList.remove('text-red-500'); |
| tokenCounter.classList.add('text-gray-500'); |
| } |
| } |
| |
| function addMessageToChat(role, content) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = `chat-message ${role} p-4 max-w-[80%] slide-in`; |
| |
| if (role === 'user') { |
| messageDiv.innerHTML = ` |
| <div class="flex items-start space-x-2 justify-end"> |
| <div> |
| <p class="font-medium text-gray-700 text-right">You</p> |
| <p class="text-gray-600 mt-1">${content}</p> |
| </div> |
| <div class="bg-gray-500 text-white p-2 rounded-full"> |
| <i class="fas fa-user"></i> |
| </div> |
| </div> |
| `; |
| } else { |
| messageDiv.innerHTML = ` |
| <div class="flex items-start space-x-2"> |
| <div class="bg-blue-500 text-white p-2 rounded-full"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <div> |
| <p class="font-medium text-gray-700">AI Assistant</p> |
| <p class="text-gray-600 mt-1 whitespace-pre-line">${content}</p> |
| </div> |
| </div> |
| `; |
| } |
| |
| chatContainer.appendChild(messageDiv); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| |
| function handleFiles(files) { |
| if (!settings.features.fileUpload) { |
| showToast('File upload is disabled in settings', 'warning'); |
| return; |
| } |
| |
| for (let i = 0; i < files.length; i++) { |
| const file = files[i]; |
| if (file.size > 10 * 1024 * 1024) { |
| showToast(`File ${file.name} is too large (max 10MB)`, 'error'); |
| continue; |
| } |
| |
| uploadedFiles.push(file); |
| previewFile(file); |
| } |
| |
| if (uploadedFiles.length > 0) { |
| dropzone.classList.add('hidden'); |
| filePreviews.classList.remove('hidden'); |
| } |
| } |
| |
| function previewFile(file) { |
| const previewDiv = document.createElement('div'); |
| previewDiv.className = 'flex items-center justify-between p-2 bg-gray-100 rounded mb-2'; |
| |
| const fileInfoDiv = document.createElement('div'); |
| fileInfoDiv.className = 'flex items-center space-x-2'; |
| |
| let icon; |
| if (file.type.startsWith('image/')) { |
| icon = '<i class="fas fa-image text-blue-500"></i>'; |
| |
| |
| const reader = new FileReader(); |
| reader.onload = function(e) { |
| const imgPreview = document.createElement('img'); |
| imgPreview.src = e.target.result; |
| imgPreview.className = 'file-preview'; |
| fileInfoDiv.appendChild(imgPreview); |
| }; |
| reader.readAsDataURL(file); |
| } else if (file.type === 'application/pdf') { |
| icon = '<i class="fas fa-file-pdf text-red-500"></i>'; |
| } else if (file.type.startsWith('text/')) { |
| icon = '<i class="fas fa-file-alt text-green-500"></i>'; |
| } else { |
| icon = '<i class="fas fa-file text-gray-500"></i>'; |
| } |
| |
| fileInfoDiv.innerHTML += ` |
| ${icon} |
| <div> |
| <p class="text-sm font-medium">${file.name}</p> |
| <p class="text-xs text-gray-500">${formatFileSize(file.size)}</p> |
| <div class="progress-bar"> |
| <div class="progress-bar-fill" style="width: 100%"></div> |
| </div> |
| </div> |
| `; |
| |
| const removeBtn = document.createElement('button'); |
| removeBtn.className = 'text-red-500 hover:text-red-700'; |
| removeBtn.innerHTML = '<i class="fas fa-times"></i>'; |
| removeBtn.onclick = function() { |
| uploadedFiles = uploadedFiles.filter(f => f !== file); |
| previewDiv.remove(); |
| if (uploadedFiles.length === 0) { |
| filePreviews.classList.add('hidden'); |
| dropzone.classList.remove('hidden'); |
| } |
| }; |
| |
| previewDiv.appendChild(fileInfoDiv); |
| previewDiv.appendChild(removeBtn); |
| filePreviews.appendChild(previewDiv); |
| } |
| |
| function formatFileSize(bytes) { |
| if (bytes < 1024) return bytes + ' bytes'; |
| else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'; |
| else return (bytes / 1048576).toFixed(1) + ' MB'; |
| } |
| |
| function simulateWebSearch(query, count) { |
| |
| searchResults = []; |
| for (let i = 0; i < count; i++) { |
| searchResults.push({ |
| title: `Search result for "${query}" (${i + 1})`, |
| url: `https://example.com/search?q=${encodeURIComponent(query)}&result=${i + 1}`, |
| snippet: `This is a simulated snippet for search result ${i + 1} about "${query}". In a real implementation, this would come from an actual search API.` |
| }); |
| } |
| |
| showToast(`Found ${count} web results for "${query}"`, 'success'); |
| isWebSearchEnabled = true; |
| enableWebSearch.checked = true; |
| } |
| |
| function showToast(message, type) { |
| const colors = { |
| success: 'bg-green-500', |
| error: 'bg-red-500', |
| warning: 'bg-yellow-500', |
| info: 'bg-blue-500' |
| }; |
| |
| const toast = document.createElement('div'); |
| toast.className = `fixed bottom-4 right-4 ${colors[type]} text-white px-4 py-2 rounded shadow-lg flex items-center space-x-2 animate-fade-in`; |
| toast.innerHTML = ` |
| <i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle'}"></i> |
| <span>${message}</span> |
| `; |
| |
| document.body.appendChild(toast); |
| |
| setTimeout(() => { |
| toast.classList.add('animate-fade-out'); |
| setTimeout(() => { |
| toast.remove(); |
| }, 300); |
| }, 3000); |
| } |
| |
| |
| updateTokenCounter(); |
| if (settings.features.fileUpload) { |
| dropzone.classList.remove('hidden'); |
| } |
| }); |
| </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=chagtptmm/chatbox" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
