Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-Powered Development Environment</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"> | |
| <style> | |
| .resize-handle { | |
| width: 4px; | |
| background-color: rgba(156, 163, 175, 0.2); | |
| cursor: col-resize; | |
| transition: background-color 0.2s; | |
| } | |
| .resize-handle:hover { | |
| background-color: rgba(156, 163, 175, 0.5); | |
| } | |
| .code-block { | |
| font-family: 'Courier New', Courier, monospace; | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| padding: 0.5rem; | |
| border-radius: 0.25rem; | |
| overflow-x: auto; | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #3b82f6; | |
| color: #3b82f6; | |
| } | |
| .mermaid-diagram { | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| min-height: 300px; | |
| } | |
| .terminal { | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| font-family: 'Courier New', Courier, monospace; | |
| padding: 0.5rem; | |
| border-radius: 0.25rem; | |
| height: 100%; | |
| overflow-y: auto; | |
| } | |
| .file-explorer { | |
| height: calc(100vh - 150px); | |
| overflow-y: auto; | |
| } | |
| .chat-message { | |
| max-width: 80%; | |
| } | |
| .chat-container { | |
| height: calc(100vh - 180px); | |
| overflow-y: auto; | |
| } | |
| .cursor-blink { | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .file-item.selected { | |
| background-color: #e2e8f0; | |
| } | |
| .project-item.selected { | |
| background-color: #e2e8f0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-800 h-screen flex flex-col"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm py-2 px-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-code text-blue-500 text-2xl mr-2"></i> | |
| <h1 class="text-xl font-bold text-gray-800">AI Dev Environment</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-4"> | |
| <button class="px-3 py-1 rounded hover:bg-gray-100">File</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-100">Edit</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-100">View</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-100">Tools</button> | |
| <button class="px-3 py-1 rounded hover:bg-gray-100">Help</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search projects..." class="pl-8 pr-4 py-1 border rounded-lg text-sm w-64"> | |
| <i class="fas fa-search absolute left-2 top-2 text-gray-400"></i> | |
| </div> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-user-circle mr-2"></i> | |
| <span>Account</span> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar - Projects --> | |
| <div class="w-64 bg-white shadow-sm flex flex-col"> | |
| <div class="p-4 border-b"> | |
| <button id="newProjectBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| <span>New Project</span> | |
| </button> | |
| </div> | |
| <div class="p-2 border-b flex justify-between items-center"> | |
| <h3 class="font-medium">Projects</h3> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-y-auto flex-1" id="projectsList"> | |
| <div class="project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <div> | |
| <div class="font-medium">E-commerce Platform</div> | |
| <div class="text-xs text-gray-500">Python, React</div> | |
| </div> | |
| </div> | |
| <div class="project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <div> | |
| <div class="font-medium">AI Chatbot</div> | |
| <div class="text-xs text-gray-500">Node.js, TensorFlow</div> | |
| </div> | |
| </div> | |
| <div class="project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <div> | |
| <div class="font-medium">Portfolio Website</div> | |
| <div class="text-xs text-gray-500">HTML, CSS, JS</div> | |
| </div> | |
| </div> | |
| <div class="project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <div> | |
| <div class="font-medium">Data Analysis Tool</div> | |
| <div class="text-xs text-gray-500">Python, Pandas</div> | |
| </div> | |
| </div> | |
| <div class="project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center"> | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <div> | |
| <div class="font-medium">Mobile App Backend</div> | |
| <div class="text-xs text-gray-500">Go, MongoDB</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t"> | |
| <div class="text-sm text-gray-500 mb-2">AI Models</div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-2 bg-gray-100 rounded"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-brain text-purple-500 mr-2"></i> | |
| <span>GPT-4</span> | |
| </div> | |
| <div class="w-2 h-2 bg-green-500 rounded-full"></div> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-blue-500 mr-2"></i> | |
| <span>Claude 3</span> | |
| </div> | |
| <div class="w-2 h-2 bg-green-500 rounded-full"></div> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-microchip text-red-500 mr-2"></i> | |
| <span>Groq</span> | |
| </div> | |
| <div class="w-2 h-2 bg-green-500 rounded-full"></div> | |
| </div> | |
| <div class="flex items-center justify-between p-2 rounded hover:bg-gray-100"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-server text-green-500 mr-2"></i> | |
| <span>Ollama</span> | |
| </div> | |
| <div class="w-2 h-2 bg-gray-500 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resizable Handle --> | |
| <div class="resize-handle"></div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Tabs --> | |
| <div class="bg-white border-b"> | |
| <div class="flex space-x-6 px-4"> | |
| <button class="tab-button py-3 tab-active">AI Chat</button> | |
| <button class="tab-button py-3">PRD</button> | |
| <button class="tab-button py-3">Diagram</button> | |
| <button class="tab-button py-3">Wireframe</button> | |
| <button class="tab-button py-3">Files</button> | |
| </div> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="flex-1 flex overflow-hidden"> | |
| <!-- Left Panel - Chat/PRD/Diagram --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- AI Chat Content (default visible) --> | |
| <div id="chatContent" class="flex-1 flex flex-col"> | |
| <div class="chat-container p-4 space-y-4" id="chatMessages"> | |
| <!-- AI Message --> | |
| <div class="flex"> | |
| <div class="chat-message bg-blue-50 rounded-lg p-3"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white mr-2"> | |
| <i class="fas fa-robot text-xs"></i> | |
| </div> | |
| <div class="font-medium">AI Assistant</div> | |
| </div> | |
| <div class="text-sm"> | |
| <p>Hello! I'm your AI development assistant. How can I help you with your project today?</p> | |
| <p class="mt-2">I can help with:</p> | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li>Code generation and refactoring</li> | |
| <li>Debugging assistance</li> | |
| <li>Project documentation</li> | |
| <li>Architecture diagrams</li> | |
| <li>Environment setup</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="flex justify-end"> | |
| <div class="chat-message bg-gray-100 rounded-lg p-3"> | |
| <div class="flex items-center mb-1 justify-end"> | |
| <div class="font-medium mr-2">You</div> | |
| <div class="w-6 h-6 rounded-full bg-gray-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="text-sm"> | |
| Can you help me set up a Python project with FastAPI and PostgreSQL? | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Message with Code --> | |
| <div class="flex"> | |
| <div class="chat-message bg-blue-50 rounded-lg p-3"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white mr-2"> | |
| <i class="fas fa-robot text-xs"></i> | |
| </div> | |
| <div class="font-medium">AI Assistant</div> | |
| </div> | |
| <div class="text-sm"> | |
| <p>Certainly! Here's how to set up a FastAPI project with PostgreSQL:</p> | |
| <div class="code-block mt-2 mb-2"> | |
| <pre># First, create a virtual environment | |
| python -m venv fastapi_env | |
| source fastapi_env/bin/activate # On Windows use `fastapi_env\Scripts\activate` | |
| # Install required packages | |
| pip install fastapi uvicorn sqlalchemy psycopg2-binary python-dotenv | |
| # Create a basic FastAPI app with PostgreSQL connection | |
| # main.py | |
| from fastapi import FastAPI | |
| from sqlalchemy import create_engine | |
| from sqlalchemy.ext.declarative import declarative_base | |
| from sqlalchemy.orm import sessionmaker | |
| app = FastAPI() | |
| # Database setup | |
| DATABASE_URL = "postgresql://user:password@localhost:5432/mydatabase" | |
| engine = create_engine(DATABASE_URL) | |
| SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) | |
| Base = declarative_base()</pre> | |
| </div> | |
| <p class="mt-2">Would you like me to:</p> | |
| <ol class="list-decimal pl-5 mt-1"> | |
| <li>Create the project structure for you?</li> | |
| <li>Explain any part in more detail?</li> | |
| <li>Generate a requirements.txt file?</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="p-4 border-t"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <textarea id="chatInput" class="w-full border rounded-lg pl-4 pr-10 py-2 resize-none" rows="1" placeholder="Ask the AI to help with your project..."></textarea> | |
| <button class="absolute right-2 bottom-2 text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| <button id="sendMessageBtn" class="p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-between mt-2 text-xs text-gray-500"> | |
| <div> | |
| <button class="mr-2 hover:text-blue-500">Add context</button> | |
| <button class="hover:text-blue-500">Select AI model</button> | |
| </div> | |
| <div> | |
| <span id="tokenCount">Token count: 0/4000</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PRD Content (hidden by default) --> | |
| <div id="prdContent" class="hidden flex-1 p-4 overflow-auto"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h2 class="text-xl font-bold mb-4">Project Requirements Document</h2> | |
| <div class="prose max-w-none"> | |
| <h3>1. Project Overview</h3> | |
| <p>This project will create a FastAPI backend service with PostgreSQL database integration. The service will provide RESTful API endpoints for a future frontend application.</p> | |
| <h3>2. Features</h3> | |
| <ul> | |
| <li>User authentication (JWT)</li> | |
| <li>CRUD operations for core entities</li> | |
| <li>Database migrations</li> | |
| <li>API documentation (Swagger/OpenAPI)</li> | |
| <li>Docker configuration</li> | |
| </ul> | |
| <h3>3. Technical Stack</h3> | |
| <table class="min-w-full border"> | |
| <thead> | |
| <tr class="bg-gray-50"> | |
| <th class="px-4 py-2 text-left">Component</th> | |
| <th class="px-4 py-2 text-left">Technology</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="px-4 py-2 border">Backend Framework</td> | |
| <td class="px-4 py-2 border">FastAPI</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 border">Database</td> | |
| <td class="px-4 py-2 border">PostgreSQL</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 border">ORM</td> | |
| <td class="px-4 py-2 border">SQLAlchemy</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 border">Authentication</td> | |
| <td class="px-4 py-2 border">JWT</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h3>4. API Endpoints</h3> | |
| <div class="code-block"> | |
| <pre>GET /api/users - List all users | |
| POST /api/users - Create new user | |
| GET /api/users/{id} - Get user details | |
| PUT /api/users/{id} - Update user | |
| DELETE /api/users/{id} - Delete user</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Diagram Content (hidden by default) --> | |
| <div id="diagramContent" class="hidden flex-1 p-4 overflow-auto"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">System Architecture Diagram</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded hover:bg-gray-200"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| <button class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"> | |
| <i class="fas fa-sync mr-1"></i> Regenerate | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mermaid-diagram"> | |
| <div class="flex justify-center items-center h-64 bg-gray-50 rounded border border-dashed border-gray-300"> | |
| <div class="text-center"> | |
| <i class="fas fa-diagram-project text-4xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-500">Mermaid diagram will appear here</p> | |
| <p class="text-sm text-gray-400 mt-2">Example: Flowchart, Sequence Diagram, Class Diagram, etc.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Mermaid Code</label> | |
| <textarea class="w-full h-32 border rounded p-2 font-mono text-sm" placeholder="Enter Mermaid diagram code here...">flowchart TD | |
| A[Client] -->|HTTP Request| B(FastAPI Server) | |
| B -->|Query| C[(PostgreSQL)] | |
| C -->|Results| B | |
| B -->|Response| A</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resizable Handle --> | |
| <div class="resize-handle"></div> | |
| <!-- Right Panel - Files/Terminal --> | |
| <div class="w-80 bg-white flex flex-col border-l"> | |
| <!-- Files Tab --> | |
| <div class="p-3 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium">Project Files</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="file-explorer p-2"> | |
| <div class="space-y-1" id="fileList"> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-folder text-yellow-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">fastapi_env</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-code text-blue-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">main.py</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-alt text-gray-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">requirements.txt</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-alt text-gray-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">README.md</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-alt text-purple-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">PROTOTYPE_LOG.md</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-alt text-green-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">WORKFLOW_SUMMARY.md</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-code text-blue-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">models.py</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-code text-blue-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">schemas.py</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-code text-blue-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">crud.py</span> | |
| </div> | |
| <div class="file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer"> | |
| <i class="fas fa-file-code text-blue-400 mr-2 w-4 text-center"></i> | |
| <span class="text-sm">database.py</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal Tab --> | |
| <div class="p-3 border-t border-b"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-medium">Terminal</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="terminal p-2 flex-1" id="terminalOutput"> | |
| <div class="text-green-400">$ <span class="text-white">python -m venv fastapi_env</span></div> | |
| <div class="text-green-400">$ <span class="text-white">source fastapi_env/bin/activate</span></div> | |
| <div class="text-white">(fastapi_env) $ <span class="text-white">pip install fastapi uvicorn sqlalchemy psycopg2-binary</span></div> | |
| <div class="text-gray-400 text-sm mt-1">Collecting fastapi</div> | |
| <div class="text-gray-400 text-sm">Downloading fastapi-0.95.2-py3-none-any.whl (56 kB)</div> | |
| <div class="text-gray-400 text-sm">━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 56.5/56.5 kB 1.2 MB/s eta 0:00:00</div> | |
| <div class="text-gray-400 text-sm">...</div> | |
| <div class="text-gray-400 text-sm">Successfully installed fastapi-0.95.2 sqlalchemy-2.0.15 uvicorn-0.22.0</div> | |
| <div class="text-green-400 mt-2">(fastapi_env) $ <span class="text-white">uvicorn main:app --reload</span></div> | |
| <div class="text-gray-400 text-sm">INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)</div> | |
| <div class="text-gray-400 text-sm">INFO: Started reloader process [12345] using WatchFiles</div> | |
| <div class="text-gray-400 text-sm">INFO: Started server process [12347]</div> | |
| <div class="text-gray-400 text-sm">INFO: Waiting for application startup.</div> | |
| <div class="text-gray-400 text-sm">INFO: Application startup complete.</div> | |
| <div class="text-green-400 mt-2">(fastapi_env) $ <span class="cursor-blink">█</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Project Modal --> | |
| <div id="newProjectModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="p-4 border-b"> | |
| <h3 class="text-lg font-medium">Create New Project</h3> | |
| </div> | |
| <div class="p-4 space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Project Name</label> | |
| <input type="text" id="projectName" class="w-full border rounded-lg px-3 py-2" placeholder="My Awesome Project"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Project Description</label> | |
| <textarea id="projectDescription" class="w-full border rounded-lg px-3 py-2" rows="3" placeholder="Brief description of your project..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Project Type</label> | |
| <select id="projectType" class="w-full border rounded-lg px-3 py-2"> | |
| <option>Python</option> | |
| <option>Node.js</option> | |
| <option>React</option> | |
| <option>Go</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Project Location</label> | |
| <div class="flex"> | |
| <input type="text" id="projectLocation" class="flex-1 border rounded-l-lg px-3 py-2" placeholder="/path/to/project"> | |
| <button id="browseLocationBtn" class="bg-gray-200 px-3 rounded-r-lg hover:bg-gray-300"> | |
| <i class="fas fa-folder-open"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="initGit" class="mr-2"> | |
| <label for="initGit" class="text-sm">Initialize Git repository</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="createEnv" class="mr-2" checked> | |
| <label for="createEnv" class="text-sm">Create virtual environment</label> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t flex justify-end space-x-3"> | |
| <button id="cancelProjectBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-100">Cancel</button> | |
| <button id="confirmProjectBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">Create Project</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| const tabContents = { | |
| 'chatContent': document.getElementById('chatContent'), | |
| 'prdContent': document.getElementById('prdContent'), | |
| 'diagramContent': document.getElementById('diagramContent') | |
| }; | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all tabs | |
| tabButtons.forEach(btn => btn.classList.remove('tab-active')); | |
| // Add active class to clicked tab | |
| button.classList.add('tab-active'); | |
| // Hide all content | |
| Object.values(tabContents).forEach(content => content.classList.add('hidden')); | |
| // Show corresponding content | |
| const tabName = button.textContent.trim(); | |
| if (tabName === 'AI Chat') tabContents['chatContent'].classList.remove('hidden'); | |
| else if (tabName === 'PRD') tabContents['prdContent'].classList.remove('hidden'); | |
| else if (tabName === 'Diagram') tabContents['diagramContent'].classList.remove('hidden'); | |
| }); | |
| }); | |
| // New project modal functionality | |
| const newProjectBtn = document.getElementById('newProjectBtn'); | |
| const newProjectModal = document.getElementById('newProjectModal'); | |
| const cancelProjectBtn = document.getElementById('cancelProjectBtn'); | |
| const confirmProjectBtn = document.getElementById('confirmProjectBtn'); | |
| const browseLocationBtn = document.getElementById('browseLocationBtn'); | |
| const projectsList = document.getElementById('projectsList'); | |
| newProjectBtn.addEventListener('click', () => { | |
| newProjectModal.classList.remove('hidden'); | |
| }); | |
| cancelProjectBtn.addEventListener('click', () => { | |
| newProjectModal.classList.add('hidden'); | |
| }); | |
| // Handle project creation | |
| confirmProjectBtn.addEventListener('click', () => { | |
| const projectName = document.getElementById('projectName').value.trim(); | |
| const projectDescription = document.getElementById('projectDescription').value.trim(); | |
| const projectType = document.getElementById('projectType').value; | |
| const projectLocation = document.getElementById('projectLocation').value.trim(); | |
| const initGit = document.getElementById('initGit').checked; | |
| const createEnv = document.getElementById('createEnv').checked; | |
| if (!projectName) { | |
| alert('Please enter a project name'); | |
| return; | |
| } | |
| // Create new project item | |
| const projectItem = document.createElement('div'); | |
| projectItem.className = 'project-item p-3 hover:bg-gray-100 cursor-pointer border-b flex items-center'; | |
| projectItem.innerHTML = ` | |
| <i class="fas fa-folder text-yellow-400 mr-3"></i> | |
| <div> | |
| <div class="font-medium">${projectName}</div> | |
| <div class="text-xs text-gray-500">${projectType}</div> | |
| </div> | |
| `; | |
| // Add click handler for the new project | |
| projectItem.addEventListener('click', () => { | |
| document.querySelectorAll('.project-item').forEach(item => item.classList.remove('selected')); | |
| projectItem.classList.add('selected'); | |
| // Update file explorer with project files | |
| updateFileExplorer(projectName, projectType); | |
| // Update terminal with project-specific commands | |
| updateTerminal(projectName, projectType); | |
| }); | |
| projectsList.prepend(projectItem); | |
| newProjectModal.classList.add('hidden'); | |
| // Clear form | |
| document.getElementById('projectName').value = ''; | |
| document.getElementById('projectDescription').value = ''; | |
| document.getElementById('projectLocation').value = ''; | |
| // Show success message | |
| alert(`Project "${projectName}" created successfully!`); | |
| }); | |
| // Simulate file browsing (in a real app, this would use the file system API) | |
| browseLocationBtn.addEventListener('click', () => { | |
| document.getElementById('projectLocation').value = '/Users/username/projects/' + | |
| document.getElementById('projectName').value.trim().toLowerCase().replace(/\s+/g, '-'); | |
| }); | |
| // Update file explorer based on selected project | |
| function updateFileExplorer(projectName, projectType) { | |
| const fileList = document.getElementById('fileList'); | |
| fileList.innerHTML = ''; | |
| // Common files for all project types | |
| const commonFiles = [ | |
| { name: 'README.md', icon: 'file-alt', color: 'gray-400' }, | |
| { name: '.gitignore', icon: 'file-alt', color: 'gray-400' } | |
| ]; | |
| // Project type specific files | |
| let projectFiles = []; | |
| if (projectType === 'Python') { | |
| projectFiles = [ | |
| { name: 'main.py', icon: 'file-code', color: 'blue-400' }, | |
| { name: 'requirements.txt', icon: 'file-alt', color: 'gray-400' }, | |
| { name: 'venv', icon: 'folder', color: 'yellow-400' } | |
| ]; | |
| } else if (projectType === 'Node.js') { | |
| projectFiles = [ | |
| { name: 'index.js', icon: 'file-code', color: 'blue-400' }, | |
| { name: 'package.json', icon: 'file-alt', color: 'gray-400' }, | |
| { name: 'node_modules', icon: 'folder', color: 'yellow-400' } | |
| ]; | |
| } else if (projectType === 'React') { | |
| projectFiles = [ | |
| { name: 'src', icon: 'folder', color: 'yellow-400' }, | |
| { name: 'package.json', icon: 'file-alt', color: 'gray-400' }, | |
| { name: 'public', icon: 'folder', color: 'yellow-400' } | |
| ]; | |
| } | |
| // Add all files to the explorer | |
| [...projectFiles, ...commonFiles].forEach(file => { | |
| const fileItem = document.createElement('div'); | |
| fileItem.className = 'file-item flex items-center p-1 hover:bg-gray-100 rounded cursor-pointer'; | |
| fileItem.innerHTML = ` | |
| <i class="fas fa-${file.icon} text-${file.color} mr-2 w-4 text-center"></i> | |
| <span class="text-sm">${file.name}</span> | |
| `; | |
| // Add click handler for file selection | |
| fileItem.addEventListener('click', () => { | |
| document.querySelectorAll('.file-item').forEach(item => item.classList.remove('selected')); | |
| fileItem.classList.add('selected'); | |
| // In a real app, this would load the file content | |
| console.log(`File selected: ${file.name}`); | |
| }); | |
| fileList.appendChild(fileItem); | |
| }); | |
| } | |
| // Update terminal with project-specific commands | |
| function updateTerminal(projectName, projectType) { | |
| const terminalOutput = document.getElementById('terminalOutput'); | |
| if (projectType === 'Python') { | |
| terminalOutput.innerHTML = ` | |
| <div class="text-green-400">$ <span class="text-white">cd ${projectName.toLowerCase().replace(/\s+/g, '-')}</span></div> | |
| <div class="text-green-400">$ <span class="text-white">python -m venv venv</span></div> | |
| <div class="text-green-400">$ <span class="text-white">source venv/bin/activate</span></div> | |
| <div class="text-white">(venv) $ <span class="text-white">pip install -r requirements.txt</span></div> | |
| <div class="text-white">(venv) $ <span class="text-white">python main.py</span></div> | |
| <div class="text-white">(venv) $ <span class="cursor-blink">█</span></div> | |
| `; | |
| } else if (projectType === 'Node.js') { | |
| terminalOutput.innerHTML = ` | |
| <div class="text-green-400">$ <span class="text-white">cd ${projectName.toLowerCase().replace(/\s+/g, '-')}</span></div> | |
| <div class="text-green-400">$ <span class="text-white">npm install</span></div> | |
| <div class="text-green-400">$ <span class="text-white">node index.js</span></div> | |
| <div class="text-green-400">$ <span class="cursor-blink">█</span></div> | |
| `; | |
| } | |
| // Auto-scroll to bottom | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| } | |
| // Chat functionality | |
| const chatInput = document.getElementById('chatInput'); | |
| const sendMessageBtn = document.getElementById('sendMessageBtn'); | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const tokenCount = document.getElementById('tokenCount'); | |
| function sendMessage() { | |
| const message = chatInput.value.trim(); | |
| if (message) { | |
| // Add user message to chat | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'flex justify-end'; | |
| userMessage.innerHTML = ` | |
| <div class="chat-message bg-gray-100 rounded-lg p-3"> | |
| <div class="flex items-center mb-1 justify-end"> | |
| <div class="font-medium mr-2">You</div> | |
| <div class="w-6 h-6 rounded-full bg-gray-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="text-sm">${message}</div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(userMessage); | |
| // Clear input | |
| chatInput.value = ''; | |
| chatInput.style.height = 'auto'; | |
| // Update token count (simplified - in a real app, you'd use a tokenizer) | |
| const tokens = Math.min(Math.ceil(message.length / 4), 4000); | |
| tokenCount.textContent = `Token count: ${tokens}/4000`; | |
| // Show "AI is typing" indicator | |
| const typingIndicator = document.createElement('div'); | |
| typingIndicator.className = 'flex'; | |
| typingIndicator.innerHTML = ` | |
| <div class="chat-message bg-blue-50 rounded-lg p-3"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white mr-2"> | |
| <i class="fas fa-robot text-xs"></i> | |
| </div> | |
| <div class="font-medium">AI Assistant</div> | |
| </div> | |
| <div class="text-sm"> | |
| <i class="fas fa-circle-notch fa-spin"></i> Thinking... | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(typingIndicator); | |
| // Scroll to bottom | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| // Remove typing indicator | |
| typingIndicator.remove(); | |
| // Add AI response | |
| const aiResponse = document.createElement('div'); | |
| aiResponse.className = 'flex'; | |
| aiResponse.innerHTML = ` | |
| <div class="chat-message bg-blue-50 rounded-lg p-3"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white mr-2"> | |
| <i class="fas fa-robot text-xs"></i> | |
| </div> | |
| <div class="font-medium">AI Assistant</div> | |
| </div> | |
| <div class="text-sm"> | |
| <p>Here's a response to your query about "${message.substring(0, 20)}...":</p> | |
| <p class="mt-2">In a real implementation, this would be the AI's actual response based on your query.</p> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(aiResponse); | |
| // Scroll to bottom again | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }, 1500); | |
| } | |
| } | |
| sendMessageBtn.addEventListener('click', sendMessage); | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| // Auto-resize textarea | |
| chatInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| // Initialize project selection | |
| document.querySelector('.project-item').click(); | |
| </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=NahFam13/not-cursor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |