Spaces:
Running
Running
Мне нужно выходить из настроек чтобы они применились так не должно быть! - Follow Up Deployment
5392a7d
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Agent Console</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'console-bg': '#1e1e1e', | |
| 'console-text': '#d4d4d4', | |
| 'ai-purple': '#8b5cf6', | |
| 'user-blue': '#3b82f6' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Mobile-first responsive styles */ | |
| @media (max-width: 640px) { | |
| .container { | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| } | |
| header .container { | |
| flex-direction: column; | |
| gap: 1rem; | |
| padding: 1rem; | |
| } | |
| .bg-gray-800 { | |
| padding: 0.75rem; | |
| } | |
| #chatContainer, #consoleOutput { | |
| height: 350px; | |
| font-size: 0.9rem; | |
| } | |
| .chat-bubble-ai, .chat-bubble-user { | |
| max-width: 85%; | |
| font-size: 0.9rem; | |
| } | |
| .tab-btn { | |
| padding: 0.5rem; | |
| font-size: 0.8rem; | |
| } | |
| .tab-btn i { | |
| margin-right: 0.25rem; | |
| } | |
| main { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| footer { | |
| padding: 1rem; | |
| font-size: 0.8rem; | |
| } | |
| } | |
| @media (max-width: 400px) { | |
| #chatContainer, #consoleOutput { | |
| height: 300px; | |
| } | |
| .chat-bubble-ai, .chat-bubble-user { | |
| max-width: 80%; | |
| } | |
| } | |
| .console-scrollbar::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .console-scrollbar::-webkit-scrollbar-track { | |
| background: #2d2d2d; | |
| } | |
| .console-scrollbar::-webkit-scrollbar-thumb { | |
| background: #555; | |
| border-radius: 4px; | |
| } | |
| .console-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #888; | |
| } | |
| .chat-bubble-ai { | |
| background-color: #8b5cf6; | |
| color: white; | |
| border-radius: 18px 18px 18px 4px; | |
| } | |
| .chat-bubble-user { | |
| background-color: #3b82f6; | |
| color: white; | |
| border-radius: 18px 18px 4px 18px; | |
| } | |
| .terminal-cursor { | |
| display: inline-block; | |
| width: 8px; | |
| height: 18px; | |
| background-color: #d4d4d4; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .task-item { | |
| transition: all 0.3s ease; | |
| } | |
| .task-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active-tab { | |
| display: block; | |
| } | |
| .active-tab { | |
| background-color: #4f46e5; | |
| } | |
| /* Theme styles */ | |
| .light-theme { | |
| --bg-color: #f3f4f6; | |
| --text-color: #111827; | |
| --header-bg: #e5e7eb; | |
| --console-bg: #ffffff; | |
| --console-text: #374151; | |
| --border-color: #d1d5db; | |
| } | |
| .dark-theme { | |
| --bg-color: #111827; | |
| --text-color: #f3f4f6; | |
| --header-bg: #1f2937; | |
| --console-bg: #1e1e1e; | |
| --console-text: #d4d4d4; | |
| --border-color: #374151; | |
| } | |
| /* Apply theme variables */ | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| } | |
| header.bg-gray-800 { | |
| background-color: var(--header-bg) ; | |
| border-color: var(--border-color) ; | |
| } | |
| .bg-console-bg { | |
| background-color: var(--console-bg) ; | |
| } | |
| .text-console-text { | |
| color: var(--console-text) ; | |
| } | |
| .bg-gray-800 { | |
| background-color: var(--header-bg) ; | |
| } | |
| footer.bg-gray-800 { | |
| background-color: var(--header-bg) ; | |
| border-color: var(--border-color) ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-gray-800 border-b border-gray-700"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-gradient-to-r from-purple-600 to-indigo-600 w-10 h-10 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold">AI Agent Console</h1> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <nav class="flex space-x-1 bg-gray-700 p-1 rounded-lg overflow-x-auto whitespace-nowrap"> | |
| <button data-tab="chat" class="tab-btn px-3 sm:px-4 py-2 rounded-md transition hover:bg-gray-600 active-tab"> | |
| <i class="fas fa-comments mr-1 sm:mr-2"></i><span class="hidden sm:inline">Chat</span> | |
| </button> | |
| <button data-tab="console" class="tab-btn px-3 sm:px-4 py-2 rounded-md transition hover:bg-gray-600"> | |
| <i class="fas fa-terminal mr-1 sm:mr-2"></i><span class="hidden sm:inline">Console</span> | |
| </button> | |
| </nav> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-3 sm:px-4 py-2 rounded-lg transition ml-2"> | |
| <i class="fas fa-cog mr-1 sm:mr-2"></i><span class="hidden sm:inline">Settings</span> | |
| </button> | |
| <div class="relative"> | |
| <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <span class="font-bold text-sm sm:text-base">U</span> | |
| </div> | |
| <span class="absolute top-0 right-0 w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full border-2 border-gray-800"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Tab Content --> | |
| <div id="chat-tab" class="tab-content active-tab"> | |
| <div class="grid grid-cols-1 gap-8"> | |
| <!-- Chat Interface --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-comments mr-2 text-indigo-400"></i> AI Communication | |
| </h2> | |
| <div id="chatContainer" class="h-[700px] overflow-y-auto mb-4 bg-gray-700 rounded-lg p-4 console-scrollbar"> | |
| <div class="chat-message mb-4"> | |
| <div class="flex items-start mb-2"> | |
| <div class="bg-gradient-to-r from-purple-500 to-indigo-500 w-8 h-8 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-sm"></i> | |
| </div> | |
| <div class="chat-bubble-ai px-4 py-2 max-w-[80%]"> | |
| Hello! I'm your AI assistant. How can I help you today? | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-400 ml-11">Just now</div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" id="messageInput" placeholder="Type your message..." class="flex-grow bg-gray-700 text-white rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button id="sendMessageBtn" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="console-tab" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 gap-8"> | |
| <!-- Console --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-terminal mr-2 text-indigo-400"></i> Agent Console | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm"> | |
| <i class="fas fa-trash mr-1"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| <div id="consoleOutput" class="bg-console-bg text-console-text font-mono text-sm p-4 rounded-lg h-[700px] overflow-y-auto console-scrollbar"> | |
| <div class="mb-2"> | |
| <span class="text-green-400">user@ai-console:~$</span> | |
| <span>agent --start</span> | |
| </div> | |
| <div class="mb-2 text-green-500">AI Agent initialized successfully</div> | |
| <div class="mb-2"> | |
| <span class="text-green-400">user@ai-console:~$</span> | |
| <span>agent --status</span> | |
| </div> | |
| <div class="mb-2"> | |
| Agent Status: <span class="text-green-500">Active</span><br> | |
| Memory Usage: <span class="text-yellow-300">42%</span><br> | |
| Tasks in Queue: <span class="text-blue-300">3</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-green-400">user@ai-console:~$</span> | |
| <span>agent --task "Analyze user preferences"</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-cyan-300">[TASK]</span> Starting analysis of user preferences...<br> | |
| <span class="text-cyan-300">[TASK]</span> Loading user profile data...<br> | |
| <span class="text-green-500">[SUCCESS]</span> Profile loaded successfully<br> | |
| <span class="text-cyan-300">[TASK]</span> Processing historical interactions...<br> | |
| <span class="text-yellow-300">[WARNING]</span> Incomplete data in interaction history<br> | |
| <span class="text-cyan-300">[TASK]</span> Generating preference model...<br> | |
| <span class="text-green-500">[SUCCESS]</span> Preference model created<br> | |
| <span class="text-green-500">[TASK COMPLETE]</span> Analysis finished in 1.42s | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-green-400">user@ai-console:~$</span> | |
| <span class="terminal-cursor"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 border-t border-gray-700 mt-12 py-6"> | |
| <div class="container mx-auto px-4 text-center text-gray-400"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <a href="#" class="hover:text-indigo-400 transition"><i class="fab fa-github"></i></a> | |
| <a href="#" class="hover:text-indigo-400 transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="hover:text-indigo-400 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-indigo-400 transition"><i class="fas fa-book"></i></a> | |
| </div> | |
| <p>AI Agent Console v1.0 © 2023 | Real-time AI communication platform</p> | |
| </div> | |
| </footer> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Settings</h3> | |
| <button id="closeSettings" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Theme</label> | |
| <select class="w-full bg-gray-700 rounded-lg px-4 py-2"> | |
| <option>Dark</option> | |
| <option>Light</option> | |
| <option>System</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Font Size</label> | |
| <input type="range" min="12" max="18" value="14" class="w-full"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="soundToggle" class="mr-2"> | |
| <label for="soundToggle">Enable Sounds</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Chat functionality | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendMessageBtn = document.getElementById('sendMessageBtn'); | |
| const chatContainer = document.getElementById('chatContainer'); | |
| sendMessageBtn.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message) { | |
| addMessage(message, 'user'); | |
| messageInput.value = ''; | |
| // Simulate AI response after a short delay | |
| setTimeout(() => { | |
| simulateAIResponse(getAIResponse(message)); | |
| }, 1000); | |
| } | |
| } | |
| function addMessage(message, sender) { | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = 'chat-message mb-4'; | |
| const timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); | |
| messageElement.innerHTML = ` | |
| <div class="flex items-start mb-2 ${sender === 'ai' ? '' : 'justify-end'}"> | |
| ${sender === 'ai' ? | |
| `<div class="bg-gradient-to-r from-purple-500 to-indigo-500 w-8 h-8 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-sm"></i> | |
| </div>` : '' | |
| } | |
| <div class="${sender === 'ai' ? 'chat-bubble-ai' : 'chat-bubble-user'} px-4 py-2 max-w-[80%]"> | |
| ${message} | |
| </div> | |
| ${sender === 'user' ? | |
| `<div class="bg-gradient-to-r from-blue-500 to-cyan-500 w-8 h-8 rounded-full flex items-center justify-center ml-3"> | |
| <i class="fas fa-user text-sm"></i> | |
| </div>` : '' | |
| } | |
| </div> | |
| <div class="text-xs text-gray-400 ${sender === 'ai' ? 'ml-11' : 'text-right mr-11'}">${timestamp}</div> | |
| `; | |
| chatContainer.appendChild(messageElement); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function simulateAIResponse(message) { | |
| addMessage(message, 'ai'); | |
| addConsoleOutput(`agent --response "${message}"`); | |
| } | |
| function getAIResponse(userMessage) { | |
| const responses = [ | |
| "I've processed your request and the results are ready.", | |
| "I understand your request. Working on it now...", | |
| "That's an interesting task. I'll start working on it immediately.", | |
| "I've added this to my task queue. Estimated completion in 2 minutes.", | |
| "Based on your request, I recommend considering these additional factors...", | |
| "I've completed the task. Would you like me to provide more details?", | |
| "I've detected a potential optimization for this task. Should I implement it?", | |
| "Task completed successfully. Let me know if you need anything else!" | |
| ]; | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| // Console functionality | |
| const consoleOutput = document.getElementById('consoleOutput'); | |
| function addConsoleOutput(command) { | |
| const commandElement = document.createElement('div'); | |
| commandElement.className = 'mb-2'; | |
| const prompt = `<span class="text-green-400">user@ai-console:~$</span>`; | |
| const output = ` | |
| <div class="mt-1 ml-4"> | |
| <span class="text-cyan-300">[TASK]</span> Processing command: ${command}<br> | |
| <span class="text-green-500">[SUCCESS]</span> Command executed successfully | |
| </div> | |
| `; | |
| commandElement.innerHTML = `${prompt} <span>${command}</span>${output}`; | |
| consoleOutput.appendChild(commandElement); | |
| // Add new prompt line | |
| const newPrompt = document.createElement('div'); | |
| newPrompt.className = 'mb-2'; | |
| newPrompt.innerHTML = `<span class="text-green-400">user@ai-console:~$</span> <span class="terminal-cursor"></span>`; | |
| consoleOutput.appendChild(newPrompt); | |
| consoleOutput.scrollTop = consoleOutput.scrollHeight; | |
| } | |
| // Simulate initial console activity | |
| setTimeout(() => { | |
| addConsoleOutput('agent --monitor'); | |
| setTimeout(() => { | |
| addConsoleOutput('agent --optimize'); | |
| }, 3000); | |
| }, 2000); | |
| // Simulate periodic AI activity | |
| setInterval(() => { | |
| const activities = [ | |
| 'agent --update', | |
| 'agent --check-performance', | |
| 'agent --clean-cache', | |
| 'agent --report' | |
| ]; | |
| addConsoleOutput(activities[Math.floor(Math.random() * activities.length)]); | |
| }, 15000); | |
| // Settings Modal functionality | |
| const settingsBtn = document.querySelector('.bg-indigo-600'); | |
| const settingsModal = document.getElementById('settingsModal'); | |
| const closeSettings = document.getElementById('closeSettings'); | |
| const themeSelect = document.querySelector('#settingsModal select'); | |
| const fontSizeSlider = document.querySelector('#settingsModal input[type="range"]'); | |
| const soundToggle = document.getElementById('soundToggle'); | |
| const saveSettingsBtn = document.querySelector('#settingsModal button'); | |
| // Load saved settings | |
| function loadSettings() { | |
| const settings = JSON.parse(localStorage.getItem('aiConsoleSettings')) || {}; | |
| if (settings.theme) themeSelect.value = settings.theme; | |
| if (settings.fontSize) { | |
| fontSizeSlider.value = settings.fontSize; | |
| document.documentElement.style.fontSize = `${settings.fontSize}px`; | |
| } | |
| if (settings.sound !== undefined) { | |
| soundToggle.checked = settings.sound; | |
| } | |
| } | |
| // Save settings | |
| function saveSettings() { | |
| const settings = { | |
| theme: themeSelect.value, | |
| fontSize: fontSizeSlider.value, | |
| sound: soundToggle.checked | |
| }; | |
| localStorage.setItem('aiConsoleSettings', JSON.stringify(settings)); | |
| applySettings(); | |
| settingsModal.classList.add('hidden'); | |
| } | |
| // Apply settings | |
| function applySettings() { | |
| // Save settings first | |
| const settings = { | |
| theme: themeSelect.value, | |
| fontSize: fontSizeSlider.value, | |
| sound: soundToggle.checked | |
| }; | |
| localStorage.setItem('aiConsoleSettings', JSON.stringify(settings)); | |
| // Apply font size | |
| document.documentElement.style.fontSize = `${fontSizeSlider.value}px`; | |
| // Apply theme | |
| if (themeSelect.value === 'Light') { | |
| document.documentElement.classList.add('light-theme'); | |
| document.documentElement.classList.remove('dark-theme'); | |
| } else if (themeSelect.value === 'Dark') { | |
| document.documentElement.classList.add('dark-theme'); | |
| document.documentElement.classList.remove('light-theme'); | |
| } else { | |
| // System theme - check prefers-color-scheme | |
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) { | |
| document.documentElement.classList.add('light-theme'); | |
| document.documentElement.classList.remove('dark-theme'); | |
| } else { | |
| document.documentElement.classList.add('dark-theme'); | |
| document.documentElement.classList.remove('light-theme'); | |
| } | |
| } | |
| } | |
| // Event Listeners | |
| settingsBtn.addEventListener('click', () => { | |
| loadSettings(); | |
| settingsModal.classList.remove('hidden'); | |
| }); | |
| closeSettings.addEventListener('click', () => { | |
| settingsModal.classList.add('hidden'); | |
| }); | |
| // Apply settings immediately when changed | |
| themeSelect.addEventListener('change', applySettings); | |
| fontSizeSlider.addEventListener('input', applySettings); | |
| soundToggle.addEventListener('change', () => { | |
| const settings = JSON.parse(localStorage.getItem('aiConsoleSettings')) || {}; | |
| settings.sound = soundToggle.checked; | |
| localStorage.setItem('aiConsoleSettings', JSON.stringify(settings)); | |
| }); | |
| // Close modal when clicking outside | |
| settingsModal.addEventListener('click', (e) => { | |
| if (e.target === settingsModal) { | |
| settingsModal.classList.add('hidden'); | |
| } | |
| }); | |
| // System theme change listener | |
| if (window.matchMedia) { | |
| window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => { | |
| if (themeSelect.value === 'System') { | |
| applySettings(); | |
| } | |
| }); | |
| } | |
| // Load settings on page load | |
| loadSettings(); | |
| // Tab switching functionality | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const tabId = button.getAttribute('data-tab'); | |
| // Update active tab button | |
| tabButtons.forEach(btn => { | |
| btn.classList.remove('active-tab'); | |
| btn.classList.remove('bg-indigo-600'); | |
| }); | |
| button.classList.add('active-tab', 'bg-indigo-600'); | |
| // Show selected tab content | |
| tabContents.forEach(content => { | |
| content.classList.remove('active-tab'); | |
| content.classList.add('hidden'); | |
| }); | |
| document.getElementById(`${tabId}-tab`).classList.add('active-tab'); | |
| document.getElementById(`${tabId}-tab`).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=davydluben/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |