Spaces:
Running
Running
| <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> | |
| .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); | |
| } | |
| </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-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition"> | |
| <i class="fas fa-cog mr-2"></i>Settings | |
| </button> | |
| <div class="relative"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <span class="font-bold">U</span> | |
| </div> | |
| <span class="absolute top-0 right-0 w-3 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"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Left Column: Chat and Tasks --> | |
| <div class="space-y-8"> | |
| <!-- Task Creation --> | |
| <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-tasks mr-2 text-indigo-400"></i> Task Management | |
| </h2> | |
| <div class="flex mb-4"> | |
| <input type="text" id="taskInput" placeholder="Enter new task..." 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="addTaskBtn" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg transition"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-semibold mb-2 text-gray-300">Active Tasks</h3> | |
| <div id="taskList" class="space-y-3"> | |
| <!-- Tasks will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 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-80 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> | |
| <!-- Right Column: 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-[calc(100%-3rem)] 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> | |
| </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> | |
| <script> | |
| // Task management | |
| const taskInput = document.getElementById('taskInput'); | |
| const addTaskBtn = document.getElementById('addTaskBtn'); | |
| const taskList = document.getElementById('taskList'); | |
| addTaskBtn.addEventListener('click', addTask); | |
| taskInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') addTask(); | |
| }); | |
| function addTask() { | |
| const taskText = taskInput.value.trim(); | |
| if (taskText) { | |
| const taskId = Date.now(); | |
| const taskItem = document.createElement('div'); | |
| taskItem.className = 'task-item bg-gray-700 rounded-lg p-3 flex items-center justify-between'; | |
| taskItem.innerHTML = ` | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full border-2 border-indigo-400 mr-3"></div> | |
| <span>${taskText}</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-green-400 transition" onclick="completeTask(${taskId})"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-400 transition" onclick="deleteTask(${taskId})"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| taskList.appendChild(taskItem); | |
| taskInput.value = ''; | |
| // Simulate AI response to new task | |
| simulateAIResponse(`Task added: "${taskText}"`); | |
| addConsoleOutput(`agent --task "${taskText}"`); | |
| } | |
| } | |
| function completeTask(id) { | |
| const task = document.querySelector(`.task-item`); | |
| if (task) { | |
| task.classList.add('opacity-50'); | |
| task.querySelector('span').classList.add('line-through', 'text-gray-500'); | |
| simulateAIResponse('Task marked as completed!'); | |
| } | |
| } | |
| function deleteTask(id) { | |
| const task = document.querySelector(`.task-item`); | |
| if (task) { | |
| task.classList.add('opacity-0', 'h-0', 'py-0', 'mb-0'); | |
| setTimeout(() => task.remove(), 300); | |
| simulateAIResponse('Task removed successfully.'); | |
| } | |
| } | |
| // 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); | |
| </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> |