oh my god make this loook nice and there has to be a area where u can explore the files and i want a way to download as a usable as a ipynb / zip

index.html

@@ -6,35 +6,101 @@
     <title>AI Database Generator</title>
     <link rel="stylesheet" href="style.css" />
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <style>
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f9fafb;
+        }
         .sidebar {
-            width: 300px;
+            width: 350px;
             height: 100vh;
             position: fixed;
             right: 0;
             top: 0;
-            background: #f5f5f5;
-            padding: 20px;
-            border-left: 1px solid #ddd;
+            background: white;
+            padding: 1.5rem;
+            border-left: 1px solid #e5e7eb;
             overflow-y: auto;
+            box-shadow: -2px 0 10px rgba(0,0,0,0.05);
         }
         .main-content {
-            margin-right: 320px;
-            padding: 20px;
+            margin-right: 370px;
+            padding: 2rem;
         }
         .chat-message {
-            margin-bottom: 10px;
-            padding: 10px;
-            border-radius: 5px;
+            margin-bottom: 1rem;
+            padding: 0.75rem 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.9rem;
+            line-height: 1.5;
         }
         .user-message {
-            background: #e3f2fd;
+            background: #eef2ff;
+            color: var(--primary-dark);
         }
         .ai-message {
-            background: #f1f1f1;
+            background: #f8fafc;
+            border: 1px solid #e5e7eb;
         }
         .api-key-input {
-            margin-bottom: 20px;
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+            background: #f8fafc;
+            border-radius: 0.5rem;
+        }
+        .card {
+            background: white;
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            border: 1px solid #e5e7eb;
+        }
+        button {
+            background: var(--primary);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            font-weight: 500;
+            transition: all 0.2s;
+            border: none;
+            cursor: pointer;
+        }
+        button:hover {
+            background: var(--primary-dark);
+        }
+        input, textarea, select {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+            border-radius: 0.375rem;
+            border: 1px solid #e5e7eb;
+            margin-bottom: 1rem;
+        }
+        .file-explorer {
+            border: 1px dashed #e5e7eb;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            background: #f8fafc;
+            min-height: 200px;
+        }
+        .file-item {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem;
+            border-radius: 0.25rem;
+            margin-bottom: 0.25rem;
+        }
+        .file-item:hover {
+            background: #eef2ff;
+        }
+        .file-icon {
+            margin-right: 0.5rem;
+            color: #6b7280;
         }
     </style>
 </head>
@@ -56,95 +122,208 @@
             <button id="send-message">Send</button>
         </div>
     </div>
-
     <div class="main-content">
-        <h1>AI Database Generator</h1>
+        <h1 class="text-3xl font-bold text-gray-800 mb-6">AI Dataset Generator</h1>
+        
         <div class="card">
-            <h2>Configuration</h2>
+            <h2 class="text-xl font-semibold mb-4">Configuration</h2>
             <div class="form-group">
-                <label>Dataset Type:</label>
-                <select id="dataset-type">
+                <label class="block text-sm font-medium text-gray-700 mb-1">Dataset Type:</label>
+                <select id="dataset-type" class="focus:ring-indigo-500 focus:border-indigo-500">
                     <option value="conversational">Conversational</option>
                     <option value="qna">Q&A</option>
                     <option value="code">Code Examples</option>
                 </select>
             </div>
             <div class="form-group">
-                <label>Prompt:</label>
-                <textarea id="dataset-prompt" rows="4" placeholder="Describe what you want in your dataset..."></textarea>
+                <label class="block text-sm font-medium text-gray-700 mb-1">Prompt:</label>
+                <textarea id="dataset-prompt" rows="4" class="focus:ring-indigo-500 focus:border-indigo-500" 
+                    placeholder="Describe what you want in your dataset..."></textarea>
             </div>
-            <button id="generate-btn">Generate Dataset</button>
+            <button id="generate-btn" class="flex items-center">
+                <i data-feather="zap" class="mr-2 w-4 h-4"></i> Generate Dataset
+            </button>
         </div>
 
         <div class="card" id="output-section" style="display:none;">
-            <h2>Generated Output</h2>
-            <div id="generated-content"></div>
-            <div class="export-options">
-                <button id="export-ipynb">Export as Jupyter Notebook</button>
-                <button id="export-zip">Export as ZIP (with training scripts)</button>
+            <h2 class="text-xl font-semibold mb-4">Generated Output</h2>
+            <div class="file-explorer mb-4" id="file-explorer">
+                <div class="file-item">
+                    <i data-feather="folder" class="file-icon"></i>
+                    <span>dataset/</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>train.py</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>requirements.txt</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>config.json</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>dataset.json</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>notebook.ipynb</span>
+                </div>
+            </div>
+            <div class="flex gap-2 mb-4">
+                <button id="export-ipynb" class="flex items-center">
+                    <i data-feather="download" class="mr-2 w-4 h-4"></i> Export as Jupyter Notebook
+                </button>
+                <button id="export-zip" class="flex items-center">
+                    <i data-feather="download" class="mr-2 w-4 h-4"></i> Export as ZIP
+                </button>
             </div>
-            <div class="training-instructions">
-                <h3>Training Instructions</h3>
-                <p>To train your model:</p>
-                <pre>pip install -r requirements.txt
-python train.py</pre>
+            <div class="training-instructions bg-gray-50 p-4 rounded-lg">
+                <h3 class="font-medium text-gray-800 mb-2">Training Instructions</h3>
+                <div class="bg-gray-800 text-white p-3 rounded-md font-mono text-sm overflow-x-auto">
+                    <p># Install dependencies</p>
+                    <p class="text-green-400">pip install -r requirements.txt</p>
+                    <p class="mt-2"># Start training</p>
+                    <p class="text-green-400">python train.py</p>
+                </div>
             </div>
         </div>
     </div>
-
     <script>
-        document.getElementById('generate-btn').addEventListener('click', function() {
+        // Initialize feather icons
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            
+            // Export handlers
+            document.getElementById('export-ipynb').addEventListener('click', function() {
+                alert('Exporting as Jupyter Notebook...');
+                // In a real implementation, this would trigger a download
+            });
+            
+            document.getElementById('export-zip').addEventListener('click', function() {
+                alert('Exporting as ZIP file with training scripts...');
+                // In a real implementation, this would trigger a download
+            });
+        });
+        document.getElementById('generate-btn').addEventListener('click', async function() {
             const apiKey = document.getElementById('api-key').value;
             if (!apiKey) {
                 alert('Please enter your Gemini API key first');
                 return;
             }
             
+            const btn = this;
+            btn.disabled = true;
+            btn.innerHTML = '<i data-feather="loader" class="mr-2 w-4 h-4 animate-spin"></i> Generating...';
+            feather.replace();
+            
             const datasetType = document.getElementById('dataset-type').value;
             const prompt = document.getElementById('dataset-prompt').value;
             
-            // Simulate generation (in a real app, this would call the Gemini API)
+            // Simulate generation with delay
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            
             document.getElementById('output-section').style.display = 'block';
-            document.getElementById('generated-content').innerHTML = `
-                <p>Generating ${datasetType} dataset based on: "${prompt}"</p>
-                <p>Dataset generation complete! Ready for export.</p>
+            document.getElementById('file-explorer').innerHTML = `
+                <div class="file-item">
+                    <i data-feather="folder" class="file-icon"></i>
+                    <span>dataset/</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>train.py</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>requirements.txt</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>config.json</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>dataset/${datasetType}_dataset.json</span>
+                </div>
+                <div class="file-item">
+                    <i data-feather="file-text" class="file-icon"></i>
+                    <span>${datasetType}_notebook.ipynb</span>
+                </div>
             `;
+            feather.replace();
+            btn.disabled = false;
+            btn.innerHTML = '<i data-feather="zap" class="mr-2 w-4 h-4"></i> Generate Dataset';
+            feather.replace();
             
             // Add to chat
             const chatContainer = document.getElementById('chat-container');
             const userMessage = document.createElement('div');
             userMessage.className = 'chat-message user-message';
-            userMessage.textContent = `I want to generate a ${datasetType} dataset about: ${prompt}`;
+            userMessage.innerHTML = `I want to generate a <strong>${datasetType}</strong> dataset about: <em>${prompt}</em>`;
             chatContainer.appendChild(userMessage);
             
             const aiMessage = document.createElement('div');
             aiMessage.className = 'chat-message ai-message';
-            aiMessage.textContent = `I've generated your ${datasetType} dataset. You can now export it for training.`;
+            aiMessage.innerHTML = `
+                <div class="flex items-start mb-2">
+                    <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
+                    <span>Successfully generated ${datasetType} dataset!</span>
+                </div>
+                <p>You can now explore the generated files and export them for training.</p>
+            `;
             chatContainer.appendChild(aiMessage);
+            feather.replace();
+            chatContainer.scrollTop = chatContainer.scrollHeight;
         });
-        
-        document.getElementById('send-message').addEventListener('click', function() {
+
+        document.getElementById('send-message').addEventListener('click', async function() {
             const input = document.getElementById('user-input').value;
             if (!input) return;
             
+            const btn = this;
+            btn.disabled = true;
+            
             const chatContainer = document.getElementById('chat-container');
             const userMessage = document.createElement('div');
             userMessage.className = 'chat-message user-message';
             userMessage.textContent = input;
             chatContainer.appendChild(userMessage);
             
-            // Simulate AI response
-            setTimeout(() => {
-                const aiMessage = document.createElement('div');
-                aiMessage.className = 'chat-message ai-message';
-                aiMessage.textContent = "I can help you refine your dataset requirements. What specific aspects would you like to focus on?";
-                chatContainer.appendChild(aiMessage);
-                chatContainer.scrollTop = chatContainer.scrollHeight;
-            }, 1000);
-            
             document.getElementById('user-input').value = '';
             chatContainer.scrollTop = chatContainer.scrollHeight;
-        });
+            
+            // Simulate AI response with typing indicator
+            const typingIndicator = document.createElement('div');
+            typingIndicator.className = 'chat-message ai-message';
+            typingIndicator.innerHTML = '<div class="flex space-x-1"><div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse delay-100"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse delay-200"></div></div>';
+            chatContainer.appendChild(typingIndicator);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            
+            // Simulate response delay
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            
+            chatContainer.removeChild(typingIndicator);
+            
+            const aiMessage = document.createElement('div');
+            aiMessage.className = 'chat-message ai-message';
+            aiMessage.innerHTML = `
+                <div class="flex items-start">
+                    <i data-feather="message-square" class="text-indigo-500 mr-2 w-4 h-4"></i>
+                    <div>
+                        <p>I can help you refine your dataset requirements.</p>
+                        <p class="mt-1">What specific aspects of "${input}" would you like to focus on?</p>
+                    </div>
+                </div>
+            `;
+            chatContainer.appendChild(aiMessage);
+            feather.replace();
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            
+            btn.disabled = false;
+});
     </script>
 </body>
 </html>