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>Workspace | 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); | |
| } | |
| .resize-handle { | |
| background-color: #374151; | |
| cursor: col-resize; | |
| width: 4px; | |
| } | |
| .resize-handle:hover { | |
| background-color: #ef4444; | |
| } | |
| .terminal { | |
| background-color: #1f2937; | |
| font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white h-screen overflow-hidden"> | |
| <!-- Workspace 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"> | |
| <button class="text-gray-300 hover:text-white transition-colors"> | |
| <i data-feather="menu" class="w-5 h-5"></i> | |
| </button> | |
| <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="code" class="w-3 h-3"></i> | |
| </div> | |
| <span class="font-semibold">CodeForge-AI Workspace</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>Python 3.11</span> | |
| </div> | |
| <div class="flex items-center space-x-2 text-sm text-gray-300"> | |
| <i data-feather="wifi" class="w-4 h-4"></i> | |
| <span>Connected</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 | |
| </button> | |
| <button class="text-gray-300 hover:text-white transition-colors"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex editor-container"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col"> | |
| <!-- File Explorer --> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h3 class="font-semibold text-white mb-3 flex items-center"> | |
| <i data-feather="folder" class="w-4 h-4 mr-2"></i> | |
| Project Files | |
| </h3> | |
| <div class="space-y-1 text-sm"> | |
| <div class="flex items-center space-x-2 text-gray-300 hover:text-white cursor-pointer py-1"> | |
| <i data-feather="file" class="w-4 h-4"></i> | |
| <span>main.py</span> | |
| </div> | |
| <div class="flex items-center space-x-2 text-gray-300 hover:text-white cursor-pointer py-1"> | |
| <i data-feather="file" class="w-4 h-4"></i> | |
| <span>requirements.txt</span> | |
| </div> | |
| <div class="flex items-center space-x-2 text-gray-300 hover:text-white cursor-pointer py-1"> | |
| <i data-feather="folder" class="w-4 h-4"></i> | |
| <span>src/</span> | |
| </div> | |
| <div class="flex items-center space-x-2 text-gray-300 hover:text-white cursor-pointer py-1"> | |
| <i data-feather="folder" class="w-4 h-4"></i> | |
| <span>tests/</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Panel --> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h3 class="font-semibold text-white mb-3 flex items-center"> | |
| <i data-feather="zap" class="w-4 h-4 mr-2"></i> | |
| Agent3 AI | |
| </h3> | |
| <button class="w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg text-sm font-medium transition-colors mb-2"> | |
| <i data-feather="message-circle" class="w-4 h-4 inline mr-2"></i> | |
| Get Help | |
| </button> | |
| <div class="text-xs text-gray-400"> | |
| <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> | |
| <!-- Deployment Panel --> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-white mb-3 flex items-center"> | |
| <i data-feather="cloud" class="w-4 h-4 mr-2"></i> | |
| Deployment | |
| </h3> | |
| <div class="space-y-2"> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors"> | |
| Deploy to Docker | |
| </button> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors"> | |
| Deploy to Kubernetes | |
| </button> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg text-sm font-medium transition-colors"> | |
| Deploy to Vercel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Editor Area --> | |
| <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 and Terminal Split View --> | |
| <div class="flex-1 flex"> | |
| <!-- Editor --> | |
| <div class="flex-1 relative"> | |
| <div id="editor" class="absolute inset-0"></div> | |
| </div> | |
| <!-- Resize Handle --> | |
| <div class="resize-handle" id="resize-handle"></div> | |
| <!-- Terminal --> | |
| <div class="w-1/2 flex flex-col"> | |
| <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 flex-1 p-4 font-mono text-sm overflow-auto"> | |
| <div class="text-green-400">$ python main.py</div> | |
| <div class="text-gray-300 mt-2">Hello from CodeForge-AI!</div> | |
| <div class="text-gray-300">Your code is running in a secure container.</div> | |
| <div class="text-gray-500 mt-4">Ready for commands...</div> | |
| </div> | |
| </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: `# Welcome to CodeForge-AI Workspace\n\n# Your secure development environment with AI assistance\n\ndef hello_world():\n print("Hello from CodeForge-AI!")\n return "Your code is running in an isolated Docker container"\n\n# Try running this code and see the output in the terminal\nhello_world()\n\n# Use Ctrl+Enter to run your code\n# Ask Agent3 AI for help with the button in the sidebar`, | |
| 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 resize functionality | |
| const resizeHandle = document.getElementById('resize-handle'); | |
| const editorContainer = document.querySelector('.flex-1.flex'); | |
| let isResizing = false; | |
| resizeHandle.addEventListener('mousedown', function(e) { | |
| isResizing = true; | |
| document.addEventListener('mousemove', handleMouseMove); | |
| document.addEventListener('mouseup', stopResize); | |
| }); | |
| function handleMouseMove(e) { | |
| if (!isResizing) return; | |
| const containerRect = editorContainer.getBoundingClientRect(); | |
| const newWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100; | |
| if (newWidth > 20 && newWidth < 80) { | |
| document.querySelector('.flex-1.relative').style.width = `${newWidth}%`; | |
| document.querySelector('.w-1\\/2').style.width = `${100 - newWidth}%`; | |
| } | |
| } | |
| function stopResize() { | |
| isResizing = false; | |
| document.removeEventListener('mousemove', handleMouseMove); | |
| document.removeEventListener('mouseup', stopResize); | |
| } | |
| </script> | |
| </body> | |
| </html> | |