I'll create a fully functional Cognito AI assistant application with the features you've requested. Cognito AI Assistant

Cognito AI Assistant

Welcome to Cognito

Your personal AI assistant powered by advanced neural networks

What should we call you?

Create an Encrypted Password

Cognito-NeuroGenerative 2.5 [215B parameters]

Welcome to Cognito AI Assistant

Choose a model and start chatting!

Cognito-NeuroGenerative 2.5

A powerful, compact model capable of thinking in a short time frame. Exceptional at mathematics, coding, writing, and problem-solving. Multimodal with visual and text input capabilities.

215B parameters

Cognito-HybridZero

The most powerful model in the Cognito Model Series. Excellent performance in mathematics, coding, writing, and natural language understanding. Features specialized tools for unbiased, unfiltered responses.

682B parameters

:root { --primary-color: #6c5ce7; --primary-light: #a29bfe; --primary-dark: #5541d7; --secondary-color: #00cec9; --text-color: #2d3436; --text-light: #636e72; --bg-color: #ffffff; --bg-light: #f5f6fa; --bg-dark: #dfe6e9; --success-color: #00b894; --warning-color: #fdcb6e; --danger-color: #d63031; --border-radius: 8px; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; --font-size: 16px; } /* Dark Theme */ [data-theme="dark"] { --primary-color: #6c5ce7; --primary-light: #a29bfe; --primary-dark: #5541d7; --secondary-color: #00cec9; --text-color: #f5f6fa; --text-light: #dfe6e9; --bg-color: #2d3436; --bg-light: #353b48; --bg-dark: #1e272e; --border-radius: 8px; --shadow: 0 4px 6px rgba(0, 0, 0, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: var(--font-size); color: var(--text-color); background-color: var(--bg-light); line-height: 1.6; } /* Font Size Settings */ [data-font-size="small"] { --font-size: 14px; } [data-font-size="medium"] { --font-size: 16px; } [data-font-size="large"] { --font-size: 18px; } #app { width: 100%; height: 100vh; display: flex; flex-direction: column; } /* Page Transitions */ .page { display: none; width: 100%; height: 100%; } .page.active { display: flex; } /* Login Page */ #login-page { justify-content: center; align-items: center; background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); } .login-container { width: 100%; max-width: 500px; background-color: var(--bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; animation: fadeIn 0.5s ease; } .logo-container { display: flex; flex-direction: column; align-items: center; padding: 2rem; background-color: var(--bg-light); } .logo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; } .logo-small { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .login-form { padding: 2rem; } .login-form h2 { margin-bottom: 0.5rem; color: var(--primary-color); } .login-form p { margin-bottom: 2rem; color: var(--text-light); } .input-group { margin-bottom: 1.5rem; } .input-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; } .input-group input { width: 100%; padding: 0.75rem; border: 1px solid var(--bg-dark); border-radius: var(--border-radius); font-size: 1rem; transition: var(--transition); } .input-group input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-light); } .primary-btn { width: 100%; padding: 0.75rem; background-color: var(--primary-color); color: white; border: none; border-radius: var(--border-radius); font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .primary-btn:hover { background-color: var(--primary-dark); } .secondary-btn { width: 100%; padding: 0.75rem; background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: var(--border-radius); font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition); margin-top: 1rem; } .secondary-btn:hover { background-color: var(--primary-light); color: white; } .hidden { display: none; } /* Chat Page */ #chat-page { flex-direction: row; } .sidebar { width: 280px; height: 100%; background-color: var(--bg-color); border-right: 1px solid var(--bg-dark); display: flex; flex-direction: column; } .sidebar-header { display: flex; align-items: center; padding: 1rem; border-bottom: 1px solid var(--bg-dark); } .sidebar-header h2 { margin-left: 0.75rem; color: var(--primary-color); } .sidebar-btn { display: flex; align-items: center; padding: 0.75rem 1rem; background-color: transparent; color: var(--text-color); border: none; font-size: 1rem; cursor: pointer; transition: var(--transition); text-align: left; } .sidebar-btn i { margin-right: 0.75rem; } .sidebar-btn:hover { background-color: var(--bg-light); } #new-chat-btn { margin: 1rem; background-color: var(--primary-color); color: white; border-radius: var(--border-radius); } #new-chat-btn:hover { background-color: var(--primary-dark); } .chat-history { flex: 1; overflow-y: auto; padding: 0.5rem; } .chat-item { display: flex; align-items: center; padding: 0.75rem; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); margin-bottom: 0.5rem; } .chat-item:hover { background-color: var(--bg-light); } .chat-item.active { background-color: var(--primary-light); color: white; } .chat-item i { margin-right: 0.75rem; } .sidebar-footer { padding: 1rem; border-top: 1px solid var(--bg-dark); } .chat-container { flex: 1; display: flex; flex-direction: column; height: 100%; } .chat-header { padding: 1rem; border-bottom: 1px solid var(--bg-dark); background-color: var(--bg-color); } .model-selector { display: flex; align-items: center; } .model-selector select { padding: 0.5rem; border: 1px solid var(--bg-dark); border-radius: var(--border-radius); background-color: var(--bg-light); font-size: 0.9rem; margin-right: 1rem; } .model-info { display: flex; flex-direction: column; } #current-model-name { font-weight: 600; color: var(--primary-color); } #model-params { font-size: 0.8rem; color: var(--text-light); } .chat-messages { flex: 1; overflow-y: auto; padding: 1rem; background-color: var(--bg-light); } .welcome-message { text-align: center; padding: 2rem; max-width: 800px; margin: 0 auto; } .welcome-message h2 { color: var(--primary-color); margin-bottom: 1rem; } .welcome-message p { margin-bottom: 2rem; color: var(--text-light); } .model-cards { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .model-card { background-color: var(--bg-color); border-radius: var(--border-radius); padding: 1.5rem; box-shadow: var(--shadow); width: 300px; transition: var(--transition); cursor: pointer; } .model-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .model-card h3 { color: var(--primary-color); margin-bottom: 0.75rem; } .model-card p { color: var(--text-color); margin-bottom: 1rem; font-size: 0.9rem; } .model-card .model-params { display: block; font-size: 0.8rem; color: var(--text-light); margin-bottom: 1rem; } .select-model-btn { background-color: var(--primary-color); color: white; border: none; padding: 0.5rem 1rem; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); } .select-model-btn:hover { background-color: var(--primary-dark); } .message { display: flex; margin-bottom: 1.5rem; animation: fadeIn 0.3s ease; } .message-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 1rem; flex-shrink: 0; } .message-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .message-avatar.user { background-color: var(--primary-light); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .message-avatar.ai { background-color: var(--secondary-color); display: flex; align-items: center; justify-content: center; color: white; } .message-content { flex: 1; background-color: var(--bg-color); padding: 1rem; border-radius: var(--border-radius); box-shadow: var(--shadow); } .message-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .message-sender { font-weight: 600; } .message-time { font-size: 0.8rem; color: var(--text-light); } .message-text { line-height: 1.6; } .message-text img, .message-text video { max-width: 100%; border-radius: var(--border-radius); margin: 0.5rem 0; } .message-text pre { background-color: var(--bg-dark); padding: 1rem; border-radius: var(--border-radius); overflow-x: auto; margin: 0.5rem 0; } .message-text code { font-family: 'Courier New', Courier, monospace; background-color: var(--bg-dark); padding: 0.2rem 0.4rem; border-radius: 4px; } .message-text table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; } .message-text th, .message-text td { border: 1px solid var(--bg-dark); padding: 0.5rem; text-align: left; } .message-text th { background-color: var(--bg-light); } .message.user .message-content { background-color: var(--primary-light); color: white; } .message.ai .message-content { background-color: var(--bg-color); } .typing-indicator { display: flex; padding: 0.5rem; } .typing-indicator span { width: 8px; height: 8px; background-color: var(--text-light); border-radius: 50%; margin: 0 2px; animation: typing 1s infinite; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } .chat-input-container { padding: 1rem; background-color: var(--bg-color); border-top: 1px solid var(--bg-dark); } .chat-input-wrapper { display: flex; background-color: var(--bg-light); border-radius: var(--border-radius); padding: 0.5rem; } #chat-input { flex: 1; border: none; background-color: transparent; padding: 0.5rem; resize: none; max-height: 150px; font-family: inherit; font-size: 1rem; color: var(--text-color); } #chat-input:focus { outline: none; } .input-buttons { display: flex; align-items: flex-end; } .input-btn { background-color: transparent; border: none; color: var(--primary-color); font-size: 1.2rem; padding: 0.5rem; cursor: pointer; transition: var(--transition); } .input-btn:hover { color: var(--primary-dark); } .response-controls { display: flex; justify-content: center; margin-top: 1rem; } .control-btn { background-color: var(--bg-light); border: none; color: var(--text-color); padding: 0.5rem 1rem; margin: 0 0.5rem; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); display: flex; align-items: center; } .control-btn i { margin-right: 0.5rem; } .control-btn:hover { background-color: var(--bg-dark); } /* Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center; } .modal.active { display: flex; animation: fadeIn 0.3s ease; } .modal-content { background-color: var(--bg-color); border-radius: var(--border-radius); width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--bg-dark); } .modal-header h2 { color: var(--primary-color); } .close-btn { background-color: transparent; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-light); transition: var(--transition); } .close-btn:hover { color: var(--danger-color); } .modal-body { padding: 1rem; } .settings-section { margin-bottom: 2rem; } .settings-section h3 { margin-bottom: 1rem; color: var(--primary-color); border-bottom: 1px solid var(--bg-dark); padding-bottom: 0.5rem; } .setting-item { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; } .setting-item label { display: block; margin-bottom: 0.5rem; font-weight: 500; width: 100%; } .setting-item select, .setting-item input { padding: 0.5rem; border: 1px solid var(--bg-dark); border-radius: var(--border-radius); background-color: var(--bg-light); font-size: 0.9rem; flex: 1; } .settings-btn { padding: 0.5rem 1rem; background-color: var(--primary-color); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); margin-left: 0.5rem; } .settings-btn:hover { background-color: var(--primary-dark); } .settings-btn.danger { background-color: var(--danger-color); } .settings-btn.danger:hover { background-color: #b71c1c; } /* Progress Bar for Tool Calls */ .progress-container { width: 100%; height: 8px; background-color: var(--bg-dark); border-radius: 4px; margin: 1rem 0; overflow: hidden; } .progress-bar { height: 100%; background-color: var(--primary-color); border-radius: 4px; width: 0%; transition: width 0.3s ease; } /* File Upload Preview */ .file-preview { margin-top: 0.5rem; display: flex; align-items: center; background-color: var(--bg-light); padding: 0.5rem; border-radius: var(--border-radius); } .file-preview img { max-width: 60px; max-height: 60px; border-radius: 4px; margin-right: 0.5rem; } .file-info { flex: 1; } .file-name { font-weight: 500; } .file-size { font-size: 0.8rem; color: var(--text-light); } .remove-file { background-color: transparent; border: none; color: var(--danger-color); cursor: pointer; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes typing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Responsive Design */ @media (max-width: 768px) { #chat-page { flex-direction: column; } .sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--bg-dark); } .chat-container { height: 0; flex: 1; } .model-cards { flex-direction: column; } .model-card { width: 100%; } } /** * Configuration settings for the Cognito AI Assistant */ const CONFIG = { // API endpoints API: { OPENROUTER: 'https://openrouter.ai/api/v1/chat/completions', SEARCH: 'https://serpapi.com/search', }, // Model configurations MODELS: { neurogenModel: { name: 'Cognito-NeuroGenerative 2.5', description: 'A powerful, compact model capable of thinking in a short time frame. Exceptional at mathematics, coding, writing, and problem-solving. Multimodal with visual and text input capabilities.', parameters: '215B parameters', apiModel: 'google/gemini-2.5-pro-exp-03-25:free', systemPrompt: 'You are Cognito-NeuroGenerative 2.5, a powerful, large language model from COGNITO released on March 21, 2025. You are a compact, and powerful model capable of thinking (CoT) in a short time frame (flash). You can exceptionally solve mathematics, code, write and problem-solve. You are also multimodal and can receive visual and text input. You are part of the NeuroGen series of Cognito with 215B parameters. Always provide helpful, accurate, and concise responses.' }, hybridModel: { name: 'Cognito-HybridZero', description: 'The most powerful model in the Cognito Model Series. Excellent performance in mathematics, coding, writing, and natural language understanding. Features specialized tools for unbiased, unfiltered responses.', parameters: '682B parameters', apiModel: 'deepseek/deepseek-chat-v3-0324:free', systemPrompt: 'You are Cognito-HybridZero, the most powerful, capable, and highly competitive model amongst all Cognito Model Series (CMSs). You excel in Mathematics, Coding, Writing, and are exceptional at understanding natural languages. You are well-rounded with specialized tools and provide the best unbiased, unfiltered, uncensored and transparent responses. You have 682B parameters. You have access to various tools for creating charts, graphs, and images when requested by the user. You can search the internet to provide up-to-date information. Always provide helpful, accurate, and comprehensive responses.' } }, // Tool configurations for HybridZero model TOOLS: { CHART_TOOLS: [ { name: 'QuickChart', description: 'Generates chart images via HTTP requests', endpoint: 'https://quickchart.io/chart', type: 'bar, line, pie, radar, doughnut, polarArea, scatter, bubble' }, { name: 'Image-Charts', description: 'Generate chart images with simple HTTP requests', endpoint: 'https://image-charts.com/chart', type: 'pie, bar, line, radar' } ], SEARCH_TOOLS: [ { name: 'SerpAPI', description: 'Search engine results via API', endpoint: 'https://serpapi.com/search' }, { name: 'DuckDuckGo API', description: 'Privacy-focused search engine', endpoint: 'https://api.duckduckgo.com/' } ] }, // Default settings DEFAULTS: { theme: 'light', fontSize: 'medium', messageSound: 'on', autoScroll: 'on', codeHighlighting: 'on', latexRendering: 'on', searchEngine: 'google', chatStorage: 'local' }, // Local storage keys STORAGE_KEYS: { USER_DATA: 'cognito_user_data', CHATS: 'cognito_chats', SETTINGS: 'cognito_settings', CURRENT_CHAT: 'cognito_current_chat' } }; /** * Authentication module for Cognito AI Assistant */ class Auth { constructor() { this.userData = null; this.isLoggedIn = false; this.storageKey = CONFIG.STORAGE_KEYS.USER_DATA; // DOM elements this.createAccountForm = document.getElementById('create-account'); this.loginForm = document.getElementById('login-form'); this.usernameInput = document.getElementById('username'); this.passwordInput = document.getElementById('password'); this.loginPasswordInput = document.getElementById('login-password'); this.createAccountBtn = document.getElementById('create-account-btn'); this.loginBtn = document.getElementById('login-btn'); this.resetAccountBtn = document.getElementById('reset-account-btn'); this.init(); } /** * Initialize authentication */ init() { this.loadUserData(); this.setupEventListeners(); } /** * Load user data from local storage */ loadUserData() { const storedData = localStorage.getItem(this.storageKey); if (storedData) { try { this.userData = JSON.parse(storedData); this.createAccountForm.classList.remove('active'); this.createAccountForm.classList.add('hidden'); this.loginForm.classList.remove('hidden'); this.loginForm.classList.add('active'); } catch (error) { console.error('Error parsing user data:', error); this.userData = null; } } } /** * Set up event listeners for authentication forms */ setupEventListeners() { // Create account button this.createAccountBtn.addEventListener('click', () => { const username = this.usernameInput.value.trim(); const password = this.passwordInput.value.trim(); if (username && password) { this.createAccount(username, password); } else { this.showError('Please enter both username and password'); } }); // Login button this.loginBtn.addEventListener('click', () => { const password = this.loginPasswordInput.value.trim(); if (password) { this.login(password); } else { this.showError('Please enter your password'); } }); // Reset account button this.resetAccountBtn.addEventListener('click', () => { if (confirm('Are you sure you want to reset your account? This will delete all your data.')) { this.resetAccount(); } }); } /** * Create a new user account * @param {string} username - The username * @param {string} password - The password */ createAccount(username, password) { // Hash the password for security const hashedPassword = this.hashPassword(password); this.userData = { username, hashedPassword, createdAt: new Date().toISOString() }; // Save to local storage localStorage.setItem(this.storageKey, JSON.stringify(this.userData)); // Log the user in this.isLoggedIn = true; // Switch to chat page document.getElementById('login-page').classList.remove('active'); document.getElementById('chat-page').classList.add('active'); } /** * Log in with password * @param {string} password - The password to verify */ login(password) { if (!this.userData) { this.showError('No account found. Please create a new account.'); return; } const hashedPassword = this.hashPassword(password); if (hashedPassword === this.userData.hashedPassword) { this.isLoggedIn = true; // Switch to chat page document.getElementById('login-page').classList.remove('active'); document.getElementById('chat-page').classList.add('active'); } else { this.showError('Incorrect password. Please try again.'); } } /** * Reset user account */ resetAccount() { localStorage.removeItem(this.storageKey); localStorage.removeItem(CONFIG.STORAGE_KEYS.CHATS); localStorage.removeItem(CONFIG.STORAGE_KEYS.SETTINGS); localStorage.removeItem(CONFIG.STORAGE_KEYS.CURRENT_CHAT); this.userData = null; this.isLoggedIn = false; // Reset form fields this.usernameInput.value = ''; this.passwordInput.value = ''; this.loginPasswordInput.value = ''; // Show create account form this.createAccountForm.classList.add('active'); this.createAccountForm.classList.remove('hidden'); this.loginForm.classList.add('hidden'); this.loginForm.classList.remove('active'); } /** * Update user data * @param {object} newData - New user data to update */ updateUserData(newData) { this.userData = { ...this.userData, ...newData }; localStorage.setItem(this.storageKey, JSON.stringify(this.userData)); } /** * Update username * @param {string} newUsername - New username */ updateUsername(newUsername) { if (newUsername.trim()) { this.updateUserData({ username: newUsername.trim() }); return true; } return false; } /** * Update password * @param {string} newPassword - New password */ updatePassword(newPassword) { if (newPassword.trim()) { const hashedPassword = this.hashPassword(newPassword.trim()); this.updateUserData({ hashedPassword }); return true; } return false; } /** * Simple password hashing function * Note: In a production app, use a proper hashing library * @param {string} password - Password to hash * @returns {string} - Hashed password */ hashPassword(password) { // This is a simple hash function for demo purposes // In a real app, use a proper crypto library let hash = 0; for (let i = 0; i < password.length; i++) { const char = password.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; // Convert to 32bit integer } return hash.toString(16); } /** * Show error message * @param {string} message - Error message to display */ showError(message) { alert(message); } /** * Check if user is logged in * @returns {boolean} - Login status */ checkLogin() { return this.isLoggedIn; } /** * Get current username * @returns {string} - Current username */ getUsername() { return this.userData ? this.userData.username : 'User'; } /** * Log out user */ logout() { this.isLoggedIn = false; // Switch to login page document.getElementById('chat-page').classList.remove('active'); document.getElementById('login-page').classList.add('active'); // Reset login form this.loginPasswordInput.value = ''; } } /** * AI Models module for Cognito AI Assistant */ class AIModels { constructor() { this.currentModel = 'neurogenModel'; this.apiKey = ''; this.abortController = null; this.isGenerating = false; } /** * Set the current model * @param {string} modelKey - The model key to set as current */ setCurrentModel(modelKey) { if (CONFIG.MODELS[modelKey]) { this.currentModel = modelKey; return true; } return false; } /** * Get current model information * @returns {object} - Current model configuration */ getCurrentModel() { return CONFIG.MODELS[this.currentModel]; } /** * Set API key * @param {string} apiKey - The API key to set */ setApiKey(apiKey) { this.apiKey = apiKey; } /** * Generate a response from the AI model * @param {array} messages - Array of message objects * @param {function} onChunk - Callback for streaming chunks * @param {function} onComplete - Callback when generation is complete * @param {function} onError - Callback for errors */ async generateResponse(messages, onChunk, onComplete, onError) { // If already generating, abort previous request if (this.isGenerating) { this.stopGeneration(); } this.isGenerating = true; this.abortController = new AbortController(); const model = this.getCurrentModel(); try { // Prepare the request body const requestBody = { model: model.apiModel, messages: [ { role: 'system', content: model.systemPrompt }, ...messages ], stream: true }; // Prepare headers const headers = { 'Content-Type': 'application/json', 'HTTP-Referer': window.location.href, 'X-Title': 'Cognito AI Assistant' }; // Add API key if available if (this.apiKey) { headers['Authorization'] = `Bearer ${this.apiKey}`; } // Make the API request const response = await fetch(CONFIG.API.OPENROUTER, { method: 'POST', headers, body: JSON.stringify(requestBody), signal: this.abortController.signal }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error?.message || 'API request failed'); } // Process the streaming response const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); let fullText = ''; while (true) { const { done, value } = await reader.read(); if (done) { break; } // Decode the chunk const chunk = decoder.decode(value, { stream: true }); // Process the chunk (SSE format) const lines = chunk.split('\n'); for (const line of lines) { if (line.startsWith('data: ') && line !== 'data: [DONE]') { try { const data = JSON.parse(line.substring(6)); const content = data.choices[0]?.delta?.content || ''; if (content) { fullText += content; onChunk(content); } } catch (e) { console.error('Error parsing SSE chunk:', e); } } } } this.isGenerating = false; onComplete(fullText); } catch (error) { this.isGenerating = false; // Don't report abort errors as they're intentional if (error.name !== 'AbortError') { console.error('Error generating response:', error); onError(error.message); } } } /** * Generate a response with image input * @param {string} text - The text prompt * @param {string} imageUrl - The image URL * @param {function} onChunk - Callback for streaming chunks * @param {function} onComplete - Callback when generation is complete * @param {function} onError - Callback for errors */ async generateImageResponse(text, imageUrl, onChunk, onComplete, onError) { // Only NeuroGen model supports images if (this.currentModel !== 'neurogenModel') { onError('The current model does not support image input. Please switch to Cognito-NeuroGenerative 2.5.'); return; } // If already generating, abort previous request if (this.isGenerating) { this.stopGeneration(); } this.isGenerating = true; this.abortController = new AbortController(); const model = this.getCurrentModel(); try { // Prepare the request body with image const requestBody = { model: model.apiModel, messages: [ { role: 'system', content: model.systemPrompt }, { role: 'user', content: [ { type: 'text', text: text }, { type: 'image_url', image_url: { url: imageUrl } } ] } ], stream: true }; // Prepare headers const headers = { 'Content-Type': 'application/json', 'HTTP-Referer': window.location.href, 'X-Title': 'Cognito AI Assistant' }; // Add API key if available if (this.apiKey) { headers['Authorization'] = `Bearer ${this.apiKey}`; } // Make the API request const response = await fetch(CONFIG.API.OPENROUTER, { method: 'POST', headers, body: JSON.stringify(requestBody), signal: this.abortController.signal }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error?.message || 'API request failed'); } // Process the streaming response const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); let fullText = ''; while (true) { const { done, value } = await reader.read(); if (done) { break; } // Decode the chunk const chunk = decoder.decode(value, { stream: true }); // Process the chunk (SSE format) const lines = chunk.split('\n'); for (const line of lines) { if (line.startsWith('data: ') && line !== 'data: [DONE]') { try { const data = JSON.parse(line.substring(6)); const content = data.choices[0]?.delta?.content || ''; if (content) { fullText += content; onChunk(content); } } catch (e) { console.error('Error parsing SSE chunk:', e); } } } } this.isGenerating = false; onComplete(fullText); } catch (error) { this.isGenerating = false; // Don't report abort errors as they're intentional if (error.name !== 'AbortError') { console.error('Error generating response:', error); onError(error.message); } } } /** * Stop the current generation */ stopGeneration() { if (this.abortController) { this.abortController.abort(); this.abortController = null; this.isGenerating = false; } } /** * Check if the model is currently generating * @returns {boolean} - Whether the model is generating */ isCurrentlyGenerating() { return this.isGenerating; } } /** * UI module for Cognito AI Assistant */ class UI { constructor() { // DOM elements this.chatMessages = document.getElementById('chat-messages'); this.chatInput = document.getElementById('chat-input'); this.sendBtn = document.getElementById('send-btn'); this.uploadBtn = document.getElementById('upload-btn'); this.fileUpload = document.getElementById('file-upload'); this.modelSelector = document.getElementById('model-selector'); this.currentModelName = document.getElementById('current-model-name'); this.modelParams = document.getElementById('model-params'); this.responseControls = document.getElementById('response-controls'); this.stopBtn = document.getElementById('stop-btn'); this.continueBtn = document.getElementById('continue-btn'); this.retryBtn = document.getElementById('retry-btn'); this.newChatBtn = document.getElementById('new-chat-btn'); this.clearChatsBtn = document.getElementById('clear-chats-btn'); this.settingsBtn = document.getElementById('settings-btn'); this.logoutBtn = document.getElementById('logout-btn'); this.chatHistory = document.getElementById('chat-history'); // Settings modal elements this.settingsModal = document.getElementById('settings-modal'); this.closeSettings = document.getElementById('close-settings'); this.themeSelector = document.getElementById('theme-selector'); this.fontSizeSelector = document.getElementById('font-size'); this.changeUsername = document.getElementById('change-username'); this.changePassword = document.getElementById('change-password'); this.updateUsernameBtn = document.getElementById('update-username-btn'); this.updatePasswordBtn = document.getElementById('update-password-btn'); this.apiKeyInput = document.getElementById('api-key'); this.saveApiKeyBtn = document.getElementById('save-api-key-btn'); this.messageSoundSelector = document.getElementById('message-sound'); this.autoScrollSelector = document.getElementById('auto-scroll'); this.codeHighlightingSelector = document.getElementById('code-highlighting'); this.latexRenderingSelector = document.getElementById('latex-rendering'); this.searchEngineSelector = document.getElementById('search-engine'); this.chatStorageSelector = document.getElementById('chat-storage'); this.exportChatsBtn = document.getElementById('export-chats-btn'); this.deleteAllDataBtn = document.getElementById('delete-all-data-btn'); // Model card elements this.modelCards = document.querySelectorAll('.model-card'); // File upload state this.uploadedFile = null; // Current chat state this.currentChatId = null; // Initialize this.init(); } /** * Initialize UI */ init() { this.setupEventListeners(); this.applySettings(); } /** * Set up event listeners */ setupEventListeners() { // Send message on button click this.sendBtn.addEventListener('click', () => { this.handleSendMessage(); }); // Send message on Enter key (but allow Shift+Enter for new lines) this.chatInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.handleSendMessage(); } }); // File upload button this.uploadBtn.addEventListener('click', () => { this.fileUpload.click(); }); // File upload change this.fileUpload.addEventListener('change', (e) => { if (e.target.files.length > 0) { this.handleFileUpload(e.target.files[0]); } }); // Model selector change this.modelSelector.addEventListener('change', () => { const modelKey = this.modelSelector.value; this.updateModelInfo(modelKey); // Notify the app of model change document.dispatchEvent(new CustomEvent('modelChange', { detail: { modelKey } })); }); // Model cards this.modelCards.forEach(card => { card.addEventListener('click', () => { const modelKey = card.dataset.model; this.modelSelector.value = modelKey; this.updateModelInfo(modelKey); // Notify the app of model change document.dispatchEvent(new CustomEvent('modelChange', { detail: { modelKey } })); // Remove welcome message const welcomeMessage = document.querySelector('.welcome-message'); if (welcomeMessage) { welcomeMessage.remove(); } }); }); // Response control buttons this.stopBtn.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('stopGeneration')); }); this.continueBtn.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('continueGeneration')); }); this.retryBtn.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('retryGeneration')); }); // New chat button this.newChatBtn.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('newChat')); }); // Clear chats button this.clearChatsBtn.addEventListener('click', () => { if (confirm('Are you sure you want to clear all chats? This cannot be undone.')) { document.dispatchEvent(new CustomEvent('clearChats')); } }); // Settings button this.settingsBtn.addEventListener('click', () => { this.openSettings(); }); // Close settings button this.closeSettings.addEventListener('click', () => { this.closeSettingsModal(); }); // Logout button this.logoutBtn.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('logout')); }); // Settings form elements this.themeSelector.addEventListener('change', () => { this.applyTheme(this.themeSelector.value); document.dispatchEvent(new CustomEvent('settingChange', { detail: { setting: 'theme', value: this.themeSelector.value } })); }); this.fontSizeSelector.addEventListener('change', () => { this.applyFontSize(this.fontSizeSelector.value); document.dispatchEvent(new CustomEvent('settingChange', { detail: { setting: 'fontSize', value: this.fontSizeSelector.value } })); }); this.updateUsernameBtn.addEventListener('click', () => { const newUsername = this.changeUsername.value.trim(); if (newUsername) { document.dispatchEvent(new CustomEvent('updateUsername', { detail: { username: newUsername } })); this.changeUsername.value = ''; } }); this.updatePasswordBtn.addEventListener('click', () => { const newPassword = this.changePassword.value.trim(); if (newPassword) { document.dispatchEvent(new CustomEvent('updatePassword', { detail: { password: newPassword } })); this.changePassword.value = ''; } }); this.saveApiKeyBtn.addEventListener('click', () => { const apiKey = this.apiKeyInput.value.trim(); document.dispatchEvent(new CustomEvent('updateApiKey', { detail: { apiKey } })); }); // Other settings this.messageSoundSelector.addEventListener('change', () => { document.dispatchEvent(new CustomEvent('settingChange', { detail: { setting: 'messageSound', value: this.messageSoundSelector.value } })); }); this.autoScrollSelector.addEventListener('change', () => { document.dispatchEvent(new CustomEvent('settingChange', { detail: { setting: 'autoScroll', value: this.autoScrollSelector.value } })); }); this.codeHighlightingSelector.addEventListener('change', () => { document.dispatchEvent(new CustomEvent('settingChange', { detail: { setting: 'codeHighlighting', value: this.codeHighlightingSelector.value } })); }); this.latexRenderingSelector.addEventListener('change', () => { document.dispatchEvent(new CustomEvent('settingChange', { detail: { setting: 'latexRendering', value: this.latexRenderingSelector.value } })); }); this.searchEngineSelector.addEventListener('change', () => { document.dispatchEvent(new CustomEvent('settingChange', { detail: { setting: 'searchEngine', value: this.searchEngineSelector.value } })); }); this.chatStorageSelector.addEventListener('change', () => { document.dispatchEvent(new CustomEvent('settingChange', { detail: { setting: 'chatStorage', value: this.chatStorageSelector.value } })); }); this.exportChatsBtn.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('exportChats')); }); this.deleteAllDataBtn.addEventListener('click', () => { if (confirm('Are you sure you want to delete all data? This cannot be undone.')) { document.dispatchEvent(new CustomEvent('deleteAllData')); } }); } /** * Handle sending a message */ handleSendMessage() { const message = this.chatInput.value.trim(); if (message || this.uploadedFile) { // Create message object const messageObj = { text: message, file: this.uploadedFile }; // Dispatch event with message document.dispatchEvent(new CustomEvent('sendMessage', { detail: messageObj })); // Clear input and file this.chatInput.value = ''; this.uploadedFile = null; // Remove file preview if exists const filePreview = document.querySelector('.file-preview'); if (filePreview) { filePreview.remove(); } } } /** * Handle file upload * @param {File} file - The uploaded file */ handleFileUpload(file) { // Check if file is an image if (!file.type.startsWith('image/')) { alert('Only image files are supported at this time.'); return; } // Store the file this.uploadedFile = file; // Create file preview this.createFilePreview(file); } /** * Create file preview * @param {File} file - The file to preview */ createFilePreview(file) { // Remove existing preview const existingPreview = document.querySelector('.file-preview'); if (existingPreview) { existingPreview.remove(); } // Create preview element const previewContainer = document.createElement('div'); previewContainer.className = 'file-preview'; // Create preview image const img = document.createElement('img'); img.src = URL.createObjectURL(file); // Create file info const fileInfo = document.createElement('div'); fileInfo.className = 'file-info'; const fileName = document.createElement('div'); fileName.className = 'file-name'; fileName.textContent = file.name; const fileSize = document.createElement('div'); fileSize.className = 'file-size'; fileSize.textContent = this.formatFileSize(file.size); fileInfo.appendChild(fileName); fileInfo.appendChild(fileSize); // Create remove button const removeBtn = document.createElement('button'); removeBtn.className = 'remove-file'; removeBtn.innerHTML = '×'; removeBtn.addEventListener('click', () => { this.uploadedFile = null; previewContainer.remove(); }); // Assemble preview previewContainer.appendChild(img); previewContainer.appendChild(fileInfo); previewContainer.appendChild(removeBtn); // Add to DOM this.chatInput.parentNode.insertAdjacentElement('afterend', previewContainer); } /** * Format file size * @param {number} bytes - File size in bytes * @returns {string} - Formatted file size */ 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'; } /** * Update model info in UI * @param {string} modelKey - The model key */ updateModelInfo(modelKey) { const model = CONFIG.MODELS[modelKey]; this.currentModelName.textContent = model.name; this.modelParams.textContent = model.parameters; } /** * Add a user message to the chat * @param {object} message - The message object * @param {string} username - The username */ addUserMessage(message, username) { const messageElement = this.createMessageElement('user', username, message.text); // If there's a file, add it to the message if (message.file) { const img = document.createElement('img'); img.src = URL.createObjectURL(message.file); img.alt = 'Uploaded image'; img.className = 'uploaded-image'; messageElement.querySelector('.message-text').appendChild(img); } this.chatMessages.appendChild(messageElement); this.scrollToBottom(); } /** * Add an AI message to the chat * @param {string} text - The message text * @param {string} modelName - The model name * @returns {HTMLElement} - The message element */ addAIMessage(text, modelName) { const messageElement = this.createMessageElement('ai', modelName, text); this.chatMessages.appendChild(messageElement); this.scrollToBottom(); return messageElement; } /** * Update an existing AI message * @param {HTMLElement} messageElement - The message element to update * @param {string} text - The new message text */ updateAIMessage(messageElement, text) { const messageText = messageElement.querySelector('.message-text'); // Parse markdown and render const parsedText = this.parseMarkdown(text); messageText.innerHTML = parsedText; // Render LaTeX if enabled if (this.getSettingValue('latexRendering') === 'on') { this.renderLaTeX(messageText); } this.scrollToBottom(); } /** * Create a message element * @param {string} type - The message type ('user' or 'ai') * @param {string} sender - The sender name * @param {string} text - The message text * @returns {HTMLElement} - The message element */ createMessageElement(type, sender, text) { const messageDiv = document.createElement('div'); messageDiv.className = `message ${type}`; // Create avatar const avatarDiv = document.createElement('div'); avatarDiv.className = `message-avatar ${type}`; if (type === 'user') { avatarDiv.textContent = sender.charAt(0).toUpperCase(); } else { // AI avatar is the logo const img = document.createElement('img'); img.src = 'https://assets.onecompiler.app/42u3pr9mz/43day8k2p/1743222575757_edit_194231828132339.jpg'; img.alt = 'Cognito'; avatarDiv.appendChild(img); } // Create content const contentDiv = document.createElement('div'); contentDiv.className = 'message-content'; // Create header const headerDiv = document.createElement('div'); headerDiv.className = 'message-header'; const senderSpan = document.createElement('span'); senderSpan.className = 'message-sender'; senderSpan.textContent = sender; const timeSpan = document.createElement('span'); timeSpan.className = 'message-time'; timeSpan.textContent = this.formatTime(new Date()); headerDiv.appendChild(senderSpan); headerDiv.appendChild(timeSpan); // Create text const textDiv = document.createElement('div'); textDiv.className = 'message-text'; if (type === 'user') { textDiv.textContent = text; } else { // For AI messages, parse markdown const parsedText = this.parseMarkdown(text); textDiv.innerHTML = parsedText; // Render LaTeX if enabled if (this.getSettingValue('latexRendering') === 'on') { this.renderLaTeX(textDiv); } } // Assemble message contentDiv.appendChild(headerDiv); contentDiv.appendChild(textDiv); messageDiv.appendChild(avatarDiv); messageDiv.appendChild(contentDiv); return messageDiv; } /** * Parse markdown text * @param {string} text - The markdown text * @returns {string} - The HTML */ parseMarkdown(text) { // Use marked library to parse markdown const html = marked.parse(text); // Sanitize HTML to prevent XSS return DOMPurify.sanitize(html); } /** * Render LaTeX in an element * @param {HTMLElement} element - The element containing LaTeX */ renderLaTeX(element) { if (window.renderMathInElement) { window.renderMathInElement(element, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\$', right: '\$', display: false}, {left: '\\[', right: '\\]', display: true} ] }); } } /** * Format time * @param {Date} date - The date to format * @returns {string} - Formatted time string */ formatTime(date) { return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } /** * Scroll chat to bottom */ scrollToBottom() { if (this.getSettingValue('autoScroll') === 'on') { this.chatMessages.scrollTop = this.chatMessages.scrollHeight; } } /** * Show typing indicator * @returns {HTMLElement} - The typing indicator element */ showTypingIndicator() { const indicator = document.createElement('div'); indicator.className = 'typing-indicator'; for (let i = 0; i < 3; i++) { const dot = document.createElement('span'); indicator.appendChild(dot); } this.chatMessages.appendChild(indicator); this.scrollToBottom(); return indicator; } /** * Hide typing indicator * @param {HTMLElement} indicator - The typing indicator to hide */ hideTypingIndicator(indicator) { if (indicator && indicator.parentNode) { indicator.parentNode.removeChild(indicator); } } /** * Show response controls */ showResponseControls() { this.responseControls.classList.remove('hidden'); } /** * Hide response controls */ hideResponseControls() { this.responseControls.classList.add('hidden'); } /** * Update chat history in sidebar * @param {array} chats - Array of chat objects * @param {string} currentChatId - Current chat ID */ updateChatHistory(chats, currentChatId) { this.currentChatId = currentChatId; this.chatHistory.innerHTML = ''; chats.forEach(chat => { const chatItem = document.createElement('div'); chatItem.className = `chat-item ${chat.id === currentChatId ? 'active' : ''}`; chatItem.dataset.id = chat.id; const icon = document.createElement('i'); icon.className = 'fas fa-comment'; const title = document.createElement('span'); title.textContent = chat.title || 'New Chat'; chatItem.appendChild(icon); chatItem.appendChild(title); chatItem.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('selectChat', { detail: { chatId: chat.id } })); }); this.chatHistory.appendChild(chatItem); }); } /** * Clear chat messages */ clearChatMessages() { this.chatMessages.innerHTML = ''; } /** * Open settings modal */ openSettings() { this.settingsModal.classList.add('active'); } /** * Close settings modal */ closeSettingsModal() { this.settingsModal.classList.remove('active'); } /** * Apply settings from storage * @param {object} settings - Settings object */ applySettings(settings = null) { if (!settings) { // Use default settings settings = { ...CONFIG.DEFAULTS }; } // Apply theme this.applyTheme(settings.theme || CONFIG.DEFAULTS.theme); this.themeSelector.value = settings.theme || CONFIG.DEFAULTS.theme; // Apply font size this.applyFontSize(settings.fontSize || CONFIG.DEFAULTS.fontSize); this.fontSizeSelector.value = settings.fontSize || CONFIG.DEFAULTS.fontSize; // Apply other settings this.messageSoundSelector.value = settings.messageSound || CONFIG.DEFAULTS.messageSound; this.autoScrollSelector.value = settings.autoScroll || CONFIG.DEFAULTS.autoScroll; this.codeHighlightingSelector.value = settings.codeHighlighting || CONFIG.DEFAULTS.codeHighlighting; this.latexRenderingSelector.value = settings.latexRendering || CONFIG.DEFAULTS.latexRendering; this.searchEngineSelector.value = settings.searchEngine || CONFIG.DEFAULTS.searchEngine; this.chatStorageSelector.value = settings.chatStorage || CONFIG.DEFAULTS.chatStorage; // Apply API key if exists if (settings.apiKey) { this.apiKeyInput.value = settings.apiKey; } } /** * Apply theme * @param {string} theme - Theme name */ applyTheme(theme) { if (theme === 'system') { // Check system preference const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; document.body.setAttribute('data-theme', prefersDark ? 'dark' : 'light'); } else { document.body.setAttribute('data-theme', theme); } } /** * Apply font size * @param {string} size - Font size */ applyFontSize(size) { document.body.setAttribute('data-font-size', size); } /** * Get setting value * @param {string} setting - Setting name * @returns {string} - Setting value */ getSettingValue(setting) { switch (setting) { case 'theme': return this.themeSelector.value; case 'fontSize': return this.fontSizeSelector.value; case 'messageSound': return this.messageSoundSelector.value; case 'autoScroll': return this.autoScrollSelector.value; case 'codeHighlighting':

Cognito AI Assistant

Welcome to Cognito

Cognito

Welcome to Cognito AI Assistant

Cognito-NeuroGenerative 2.5

Cognito-HybridZero

Settings

Appearance

Account

API Settings

Chat Settings

Data & Privacy