Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Advanced AI Code Generation Interface</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%); | |
| } | |
| .message-animation { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .settings-panel { | |
| transition: all 0.3s ease; | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .settings-panel.open { | |
| max-height: 1000px; | |
| } | |
| .code-block { | |
| font-family: 'Courier New', Courier, monospace; | |
| background-color: #1e293b; | |
| border-radius: 0.375rem; | |
| padding: 1rem; | |
| position: relative; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.5rem; | |
| background-color: #334155; | |
| border: none; | |
| color: white; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| cursor: pointer; | |
| font-size: 0.75rem; | |
| } | |
| .prompt-refinement { | |
| background-color: rgba(254, 243, 199, 0.3); | |
| border-left: 4px solid #f59e0b; | |
| } | |
| .resizeable-textarea { | |
| resize: vertical; | |
| min-height: 100px; | |
| max-height: 300px; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .token-counter { | |
| position: absolute; | |
| bottom: 0.5rem; | |
| right: 0.5rem; | |
| font-size: 0.75rem; | |
| color: #64748b; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 h-screen flex flex-col"> | |
| <header class="gradient-bg text-white p-4 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> CodeGen AI Studio | |
| </h1> | |
| <div class="flex space-x-4"> | |
| <button id="settings-btn" class="bg-white text-blue-800 px-4 py-2 rounded-lg font-medium hover:bg-blue-100 transition"> | |
| <i class="fas fa-cog mr-2"></i>Settings | |
| </button> | |
| <button class="bg-emerald-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-emerald-600 transition"> | |
| <i class="fas fa-save mr-2"></i>Save Project | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-800 text-white p-4 flex flex-col"> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-project-diagram mr-2"></i> Projects | |
| </h2> | |
| <div class="space-y-1"> | |
| <button class="w-full text-left px-3 py-2 bg-blue-700 rounded">Current Project</button> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">New Project</button> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">Templates</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-code mr-2"></i> Code Generation | |
| </h2> | |
| <div class="space-y-1"> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">Frontend</button> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">Backend</button> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">Database</button> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">Full Stack</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-magic mr-2"></i> Prompt Tools | |
| </h2> | |
| <div class="space-y-1"> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">Prompt Refinement</button> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">Chain Generation</button> | |
| <button class="w-full text-left px-3 py-2 hover:bg-gray-700 rounded">Iterative Refinement</button> | |
| </div> | |
| </div> | |
| <div class="mt-auto"> | |
| <div class="bg-gray-700 p-3 rounded-lg"> | |
| <h3 class="font-medium mb-1">Token Usage</h3> | |
| <div class="h-2 bg-gray-600 rounded-full mb-1"> | |
| <div class="h-2 bg-blue-500 rounded-full" style="width: 45%;"></div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>4,231 used</span> | |
| <span>10,000 limit</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Settings Panel --> | |
| <div id="settings-panel" class="settings-panel bg-white shadow-md"> | |
| <div class="p-4 border-b"> | |
| <h2 class="text-xl font-bold">Advanced Settings</h2> | |
| </div> | |
| <div class="p-4 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="font-semibold mb-3">AI Persona Configuration</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Persona Name</label> | |
| <input type="text" class="w-full p-2 border rounded" value="CodeGen Expert"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Role</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>Full-Stack Developer</option> | |
| <option>Frontend Specialist</option> | |
| <option>Backend Architect</option> | |
| <option>DevOps Engineer</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Expertise Level</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>Beginner</option> | |
| <option>Intermediate</option> | |
| <option selected>Advanced</option> | |
| <option>Expert</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold mb-3">System Instructions</h3> | |
| <textarea class="w-full p-2 border rounded resizeable-textarea h-40" placeholder="Enter detailed system instructions for the AI...">You are CodeGen AI, an advanced full-stack development assistant. Your role is to help users build complete web applications from scratch. You should: | |
| - Provide complete, production-ready code | |
| - Explain technical concepts clearly | |
| - Suggest best practices | |
| - Offer multiple implementation options | |
| - Identify potential issues | |
| - Help with debugging | |
| - Guide through deployment</textarea> | |
| <div class="token-counter">Tokens: 127</div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold mb-3">Model Parameters</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Temperature</label> | |
| <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full"> | |
| <div class="flex justify-between text-xs"> | |
| <span>Precise (0)</span> | |
| <span>Balanced (0.7)</span> | |
| <span>Creative (1)</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Max Tokens</label> | |
| <input type="number" class="w-full p-2 border rounded" value="2048"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Response Length</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>Short</option> | |
| <option selected>Medium</option> | |
| <option>Long</option> | |
| <option>Very Long</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold mb-3">Code Preferences</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Frontend Framework</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>React</option> | |
| <option>Vue</option> | |
| <option selected>Next.js</option> | |
| <option>Svelte</option> | |
| <option>Angular</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Backend Framework</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>Node.js</option> | |
| <option selected>Express</option> | |
| <option>NestJS</option> | |
| <option>Django</option> | |
| <option>Laravel</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Database</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>MongoDB</option> | |
| <option selected>PostgreSQL</option> | |
| <option>MySQL</option> | |
| <option>Firebase</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t flex justify-end space-x-2"> | |
| <button id="close-settings" class="px-4 py-2 border rounded">Cancel</button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded">Save Settings</button> | |
| </div> | |
| </div> | |
| <!-- Chat Area --> | |
| <div id="chat-container" class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <!-- System Message --> | |
| <div class="message-animation flex"> | |
| <div class="bg-blue-100 p-4 rounded-lg max-w-3xl"> | |
| <div class="font-semibold text-blue-800 mb-1">System</div> | |
| <p>Welcome to CodeGen AI Studio! I'm your AI assistant specialized in full-stack development. How can I help you build your application today?</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="text-xs bg-blue-600 text-white px-2 py-1 rounded">Quick Start Guide</button> | |
| <button class="text-xs border px-2 py-1 rounded">View Templates</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="message-animation flex justify-end"> | |
| <div class="bg-gray-200 p-4 rounded-lg max-w-3xl"> | |
| <div class="font-semibold text-gray-800 mb-1">You</div> | |
| <p>I need to build a full-stack e-commerce application with Next.js, Express, and PostgreSQL. Can you help me set up the basic structure?</p> | |
| </div> | |
| </div> | |
| <!-- AI Response --> | |
| <div class="message-animation flex"> | |
| <div class="bg-white p-4 rounded-lg max-w-3xl shadow border"> | |
| <div class="font-semibold text-gray-800 mb-1 flex items-center"> | |
| <i class="fas fa-robot text-blue-600 mr-2"></i> CodeGen AI | |
| </div> | |
| <p>Absolutely! Let's set up a robust e-commerce application. Here's the recommended structure:</p> | |
| <div class="mt-3 mb-3"> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li><strong>Frontend</strong>: Next.js with TypeScript</li> | |
| <li><strong>Backend</strong>: Express API with JWT authentication</li> | |
| <li><strong>Database</strong>: PostgreSQL with Prisma ORM</li> | |
| <li><strong>State Management</strong>: React Context or Redux</li> | |
| <li><strong>Styling</strong>: Tailwind CSS (already included)</li> | |
| </ul> | |
| </div> | |
| <p>Let me generate the initial project structure and basic configuration files:</p> | |
| <div class="mt-4"> | |
| <div class="flex border-b"> | |
| <button class="tab-btn active px-4 py-2 border-b-2 border-blue-500" data-tab="frontend">Frontend</button> | |
| <button class="tab-btn px-4 py-2" data-tab="backend">Backend</button> | |
| <button class="tab-btn px-4 py-2" data-tab="database">Database</button> | |
| </div> | |
| <div class="tab-content active mt-2" id="frontend"> | |
| <div class="code-block text-white"> | |
| <button class="copy-btn"><i class="fas fa-copy"></i> Copy</button> | |
| <pre><code>// Initialize Next.js project | |
| npx create-next-app@latest ecommerce-frontend --typescript | |
| cd ecommerce-frontend | |
| // Recommended folder structure: | |
| ├── components/ | |
| │ ├── common/ # Reusable UI components | |
| │ ├── layout/ # Layout components | |
| │ └── products/ # Product-related components | |
| ├── context/ # React context providers | |
| ├── hooks/ # Custom hooks | |
| ├── pages/ | |
| │ ├── api/ # API routes (optional) | |
| │ ├── products/ # Product pages | |
| │ ├── cart/ # Cart pages | |
| │ └── _app.tsx # Custom App component | |
| ├── public/ # Static assets | |
| ├── styles/ # Global styles | |
| ├── types/ # TypeScript types | |
| └── utils/ # Utility functions</code></pre> | |
| </div> | |
| </div> | |
| <div class="tab-content mt-2" id="backend"> | |
| <div class="code-block text-white"> | |
| <button class="copy-btn"><i class="fas fa-copy"></i> Copy</button> | |
| <pre><code>// Initialize Express backend | |
| mkdir ecommerce-backend | |
| cd ecommerce-backend | |
| npm init -y | |
| npm install express typescript ts-node @types/node @types/express --save-dev | |
| // Recommended folder structure: | |
| ├── src/ | |
| │ ├── config/ # Configuration files | |
| │ ├── controllers/ # Route controllers | |
| │ ├── middleware/ # Express middleware | |
| │ ├── models/ # Data models | |
| │ ├── routes/ # API routes | |
| │ ├── services/ # Business logic | |
| │ ├── utils/ # Utility functions | |
| │ └── app.ts # Express app setup | |
| ├── .env # Environment variables | |
| ├── package.json | |
| └── tsconfig.json</code></pre> | |
| </div> | |
| </div> | |
| <div class="tab-content mt-2" id="database"> | |
| <div class="code-block text-white"> | |
| <button class="copy-btn"><i class="fas fa-copy"></i> Copy</button> | |
| <pre><code># PostgreSQL Setup | |
| 1. Install PostgreSQL locally or use a cloud provider | |
| 2. Create a new database for your e-commerce app | |
| # Prisma ORM Setup | |
| npm install prisma @prisma/client --save | |
| npx prisma init | |
| # Configure schema.prisma | |
| datasource db { | |
| provider = "postgresql" | |
| url = env("DATABASE_URL") | |
| } | |
| model Product { | |
| id Int @id @default(autoincrement()) | |
| name String | |
| description String? | |
| price Float | |
| imageUrl String? | |
| createdAt DateTime @default(now()) | |
| updatedAt DateTime @updatedAt | |
| } | |
| # After defining your schema: | |
| npx prisma migrate dev --name init</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p>Would you like me to:</p> | |
| <div class="flex flex-wrap gap-2 mt-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded-full text-sm">Generate Full Setup Script</button> | |
| <button class="px-3 py-1 border rounded-full text-sm">Explain Each Part</button> | |
| <button class="px-3 py-1 border rounded-full text-sm">Show Deployment Options</button> | |
| <button class="px-3 py-1 border rounded-full text-sm">Add Authentication</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Engineering Tools --> | |
| <div class="border-t p-4 bg-white"> | |
| <div class="flex mb-2"> | |
| <button class="prompt-tool-btn active px-3 py-1 border-b-2 border-blue-500" data-tool="basic">Basic</button> | |
| <button class="prompt-tool-btn px-3 py-1" data-tool="refine">Refinement</button> | |
| <button class="prompt-tool-btn px-3 py-1" data-tool="chain">Chain Generation</button> | |
| <button class="prompt-tool-btn px-3 py-1" data-tool="iterative">Iterative</button> | |
| </div> | |
| <div id="basic-tool" class="prompt-tool-content active"> | |
| <textarea class="w-full p-3 border rounded resizeable-textarea" placeholder="Type your message here..." rows="2"></textarea> | |
| <div class="flex justify-between mt-2"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-200 rounded-full text-sm"> | |
| <i class="fas fa-magic mr-1"></i> Enhance | |
| </button> | |
| <button class="px-3 py-1 bg-gray-200 rounded-full text-sm"> | |
| <i class="fas fa-code mr-1"></i> Add Code Context | |
| </button> | |
| </div> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded">Send</button> | |
| </div> | |
| </div> | |
| <div id="refine-tool" class="prompt-tool-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Original Prompt</label> | |
| <textarea class="w-full p-3 border rounded resizeable-textarea" rows="4">Build a login page with React</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Refined Prompt</label> | |
| <div class="prompt-refinement p-3 rounded"> | |
| <p>Create a secure login page using React with the following features:</p> | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li>Email and password fields with validation</li> | |
| <li>Show/hide password toggle</li> | |
| <li>Remember me checkbox</li> | |
| <li>Forgot password link</li> | |
| <li>Social login options (Google, Facebook)</li> | |
| <li>Proper error handling</li> | |
| <li>Loading state during submission</li> | |
| </ul> | |
| <p>Use modern React hooks and context for state management. Include thorough TypeScript types and ensure accessibility compliance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-4"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded">Use Refined Prompt</button> | |
| </div> | |
| </div> | |
| <div id="chain-tool" class="prompt-tool-content"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Main Objective</label> | |
| <input type="text" class="w-full p-2 border rounded" placeholder="Build a full-stack e-commerce application"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Prompt Chain</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-center bg-gray-100 p-2 rounded"> | |
| <span class="mr-2">1.</span> | |
| <input type="text" class="flex-1 p-1 border rounded" value="Set up Next.js project structure"> | |
| <button class="ml-2 text-red-500"><i class="fas fa-times"></i></button> | |
| </div> | |
| <div class="flex items-center bg-gray-100 p-2 rounded"> | |
| <span class="mr-2">2.</span> | |
| <input type="text" class="flex-1 p-1 border rounded" value="Create Express API endpoints"> | |
| <button class="ml-2 text-red-500"><i class="fas fa-times"></i></button> | |
| </div> | |
| <div class="flex items-center bg-gray-100 p-2 rounded"> | |
| <span class="mr-2">3.</span> | |
| <input type="text" class="flex-1 p-1 border rounded" value="Design PostgreSQL database schema"> | |
| <button class="ml-2 text-red-500"><i class="fas fa-times"></i></button> | |
| </div> | |
| <button class="text-sm text-blue-600 flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> Add Step | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-4"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded">Execute Chain</button> | |
| </div> | |
| </div> | |
| <div id="iterative-tool" class="prompt-tool-content"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Initial Prompt</label> | |
| <textarea class="w-full p-2 border rounded resizeable-textarea" rows="2">Create a product listing component</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Iterations</label> | |
| <select class="w-full p-2 border rounded"> | |
| <option>Add filtering functionality</option> | |
| <option>Implement pagination</option> | |
| <option>Add sorting options</option> | |
| <option>Include product search</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Enhanced Prompt</label> | |
| <textarea class="w-full p-2 border rounded resizeable-textarea" rows="4">Create a product listing component with: | |
| - Filtering by category and price range | |
| - Pagination with 10 items per page | |
| - Sorting by price, name, and date added | |
| - Search functionality that queries product names and descriptions | |
| - Responsive grid layout that adapts to screen size | |
| - Loading state while fetching data | |
| - Error handling for API failures</textarea> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-4"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded">Generate Iteration</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Settings panel toggle | |
| document.getElementById('settings-btn').addEventListener('click', function() { | |
| document.getElementById('settings-panel').classList.toggle('open'); | |
| }); | |
| document.getElementById('close-settings').addEventListener('click', function() { | |
| document.getElementById('settings-panel').classList.remove('open'); | |
| }); | |
| // Tab functionality | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const tabId = this.getAttribute('data-tab'); | |
| // Remove active class from all tabs and contents | |
| document.querySelectorAll('.tab-btn').forEach(t => t.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); | |
| // Add active class to current tab and content | |
| this.classList.add('active'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Prompt tools tabs | |
| document.querySelectorAll('.prompt-tool-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const toolId = this.getAttribute('data-tool'); | |
| // Remove active class from all buttons and contents | |
| document.querySelectorAll('.prompt-tool-btn').forEach(t => t.classList.remove('active')); | |
| document.querySelectorAll('.prompt-tool-content').forEach(c => c.classList.remove('active')); | |
| // Add active class to current button and content | |
| this.classList.add('active'); | |
| document.getElementById(`${toolId}-tool`).classList.add('active'); | |
| }); | |
| }); | |
| // Copy code functionality | |
| document.querySelectorAll('.copy-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const codeBlock = this.parentElement.querySelector('code'); | |
| const range = document.createRange(); | |
| range.selectNode(codeBlock); | |
| window.getSelection().removeAllRanges(); | |
| window.getSelection().addRange(range); | |
| document.execCommand('copy'); | |
| window.getSelection().removeAllRanges(); | |
| // Show copied feedback | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-check"></i> Copied!'; | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| }); | |
| // Auto-resize textareas | |
| document.querySelectorAll('.resizeable-textarea').forEach(textarea => { | |
| textarea.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| }); | |
| // Simulate chat interaction | |
| document.querySelector('#basic-tool button.bg-blue-600').addEventListener('click', function() { | |
| const chatContainer = document.getElementById('chat-container'); | |
| const message = document.querySelector('#basic-tool textarea').value; | |
| if (message.trim() === '') return; | |
| // Add user message | |
| const userMsg = document.createElement('div'); | |
| userMsg.className = 'message-animation flex justify-end'; | |
| userMsg.innerHTML = ` | |
| <div class="bg-gray-200 p-4 rounded-lg max-w-3xl"> | |
| <div class="font-semibold text-gray-800 mb-1">You</div> | |
| <p>${message}</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(userMsg); | |
| // Clear input | |
| document.querySelector('#basic-tool textarea').value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const aiMsg = document.createElement('div'); | |
| aiMsg.className = 'message-animation flex'; | |
| aiMsg.innerHTML = ` | |
| <div class="bg-white p-4 rounded-lg max-w-3xl shadow border"> | |
| <div class="font-semibold text-gray-800 mb-1 flex items-center"> | |
| <i class="fas fa-robot text-blue-600 mr-2"></i> CodeGen AI | |
| </div> | |
| <p>I've processed your request. Here's what I can suggest for your e-commerce application:</p> | |
| <ul class="list-disc pl-5 mt-2"> | |
| <li>Implementing a product catalog with filters</li> | |
| <li>Setting up user authentication</li> | |
| <li>Creating a shopping cart system</li> | |
| <li>Designing checkout flow</li> | |
| </ul> | |
| <p>Which aspect would you like me to focus on first?</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(aiMsg); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }, 1000); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }); | |
| </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=Boobs00/codegen-ai-studio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |