Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Editor | CodeForge-AI</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script> | |
| <style> | |
| .editor-container { | |
| height: calc(100vh - 4rem); | |
| } | |
| .chat-message { | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white h-screen overflow-hidden"> | |
| <!-- Header --> | |
| <header class="bg-gray-800 border-b border-red-500/20 h-16 flex items-center px-4"> | |
| <div class="flex items-center justify-between w-full"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="workspace-manager.html" class="text-gray-300 hover:text-white transition-colors"> | |
| <i data-feather="arrow-left" class="w-5 h-5"></i> | |
| </a> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-6 h-6 bg-red-500 rounded flex items-center justify-center"> | |
| <i data-feather="zap" class="w-3 h-3"></i> | |
| </div> | |
| <span class="font-semibold">AI-Powered Editor</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-300"> | |
| <i data-feather="cpu" class="w-4 h-4"></i> | |
| <span>Agent3 AI Active</span> | |
| </div> | |
| <div class="flex items-center space-x-2 text-sm text-gray-300"> | |
| <i data-feather="battery" class="w-4 h-4"></i> | |
| <span>87/100 Credits</span> | |
| </div> | |
| <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white text-sm font-medium transition-colors"> | |
| <i data-feather="play" class="w-4 h-4 inline mr-2"></i> | |
| Run Code | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex editor-container"> | |
| <!-- Editor Panel --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Editor Tabs --> | |
| <div class="bg-gray-800 border-b border-gray-700 flex items-center px-4"> | |
| <div class="flex space-x-1"> | |
| <div class="bg-gray-900 border border-gray-600 px-4 py-2 text-sm text-white rounded-t-lg flex items-center space-x-2"> | |
| <i data-feather="file-text" class="w-4 h-4"></i> | |
| <span>main.py</span> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="x" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Editor --> | |
| <div class="flex-1 relative"> | |
| <div id="editor" class="absolute inset-0"></div> | |
| </div> | |
| <!-- Terminal --> | |
| <div class="h-48 bg-gray-800 border-t border-gray-700"> | |
| <div class="bg-gray-800 border-b border-gray-700 px-4 py-2 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-300"> | |
| <i data-feather="terminal" class="w-4 h-4"></i> | |
| <span>Terminal</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="terminal p-4 font-mono text-sm overflow-auto h-40 bg-gray-900"> | |
| <div class="text-green-400">$ python main.py</div> | |
| <div class="text-gray-300 mt-2">Hello from AI-Powered Editor!</div> | |
| <div class="text-gray-300">Agent3 AI is ready to assist you.</div> | |
| <div class="text-gray-500 mt-4">Ready for commands...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Panel --> | |
| <div class="w-96 bg-gray-800 border-l border-gray-700 flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h3 class="font-semibold text-white mb-3 flex items-center"> | |
| <i data-feather="message-circle" class="w-4 h-4 mr-2"></i> | |
| Agent3 AI Assistant | |
| </h3> | |
| <div class="text-xs text-gray-400 mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span>AI Credits:</span> | |
| <span class="text-red-400">87/100</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-1"> | |
| <div class="bg-red-500 h-1 rounded-full" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors"> | |
| <i data-feather="zap" class="w-4 h-4 inline mr-2"></i> | |
| Generate | |
| </button> | |
| <button class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors"> | |
| <i data-feather="help-circle" class="w-4 h-4 inline mr-2"></i> | |
| Explain | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <div class="chat-message bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm text-white mb-2">Hello! I'm Agent3 AI, your coding assistant. I can help you write, debug, and optimize code. What would you like to work on today?</p> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-white transition-colors"> | |
| Generate Function | |
| </button> | |
| <button class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-white transition-colors"> | |
| Fix Bugs | |
| </button> | |
| <button class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-white transition-colors"> | |
| Optimize Code | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message bg-gray-900 border border-gray-600 rounded-lg p-4 ml-8"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="user" class="w-4 h-4"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm text-white">Can you help me write a function to sort a list of numbers?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-message bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm text-white mb-2">Sure! Here's a Python function to sort a list of numbers using the built-in sorted function:</p> | |
| <pre class="bg-gray-800 rounded p-3 text-xs text-green-400 overflow-x-auto"> | |
| def sort_numbers(numbers): | |
| """Sort a list of numbers in ascending order.""" | |
| return sorted(numbers) | |
| # Example usage: | |
| numbers = [3, 1, 4, 1, 5, 9, 2, 6] | |
| sorted_numbers = sort_numbers(numbers) | |
| print(sorted_numbers) # Output: [1, 1, 2, 3, 4, 5, 6, 9]</pre> | |
| <button class="mt-2 text-xs bg-red-500 hover:bg-red-600 px-3 py-1 rounded text-white transition-colors"> | |
| <i data-feather="copy" class="w-3 h-3 inline mr-1"></i> | |
| Insert into Editor | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="p-4 border-t border-gray-700"> | |
| <div class="flex space-x-2"> | |
| <input type="text" placeholder="Ask Agent3 AI for help..." class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-red-500"> | |
| <button class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white transition-colors"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Monaco Editor | |
| require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' }}); | |
| require(['vs/editor/editor.main'], function() { | |
| const editor = monaco.editor.create(document.getElementById('editor'), { | |
| value: `# AI-Powered Code Editor\n\n# Ask Agent3 AI for help with:\n# - Code generation\n# - Bug fixes\n# - Code optimization\n# - Documentation\n# - Best practices\n\ndef main():\n # Your code here\n print("Welcome to AI-Powered Editor!")\n \n # Try asking: "Can you help me write a function to calculate factorial?"\n \nif __name__ == "__main__":\n main()`, | |
| language: 'python', | |
| theme: 'vs-dark', | |
| fontSize: 14, | |
| minimap: { enabled: true }, | |
| automaticLayout: true | |
| }); | |
| // Add keyboard shortcut for running code | |
| editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function() { | |
| document.querySelector('button.bg-red-500').click(); | |
| }); | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Simple chat functionality | |
| document.querySelector('button.bg-red-500:last-child').addEventListener('click', function() { | |
| const input = document.querySelector('input[type="text"]'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| const chatContainer = document.querySelector('.space-y-4'); | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'chat-message bg-gray-900 border border-gray-600 rounded-lg p-4 ml-8'; | |
| userMessage.innerHTML = ` | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="user" class="w-4 h-4"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm text-white">${message}</p> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(userMessage); | |
| input.value = ''; | |
| // Scroll to bottom | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Simulate AI response after delay | |
| setTimeout(() => { | |
| const aiMessage = document.createElement('div'); | |
| aiMessage.className = 'chat-message bg-gray-700 rounded-lg p-4'; | |
| aiMessage.innerHTML = ` | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm text-white mb-2">I understand you're asking about "${message}". Here's how I can help with that:</p> | |
| <button class="text-xs bg-red-500 hover:bg-red-600 px-3 py-1 rounded text-white transition-colors"> | |
| <i data-feather="copy" class="w-3 h-3 inline mr-1"></i> | |
| Generate Sample Code | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| chatContainer.appendChild(aiMessage); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| feather.replace(); | |
| }, 1000); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |