the buttons to generate the fiels dont work

index.html

@@ -230,8 +230,22 @@ const btn = this;
                                `# Start training\n` +
                                `train_model(data)`;
                 
-                const blob = new Blob([content], { type: 'text/x-python' });
-                const url = URL.createObjectURL(blob);
+                const blob = new Blob([content], { type: 'text/x-python'
+        });
+
+        // Helper function to download individual files
+        function downloadFile(filename, content) {
+            const blob = new Blob([decodeURIComponent(content)], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+const url = URL.createObjectURL(blob);
                 const a = document.createElement('a');
                 a.href = url;
                 a.download = `${datasetType}_notebook.ipynb`;
@@ -283,8 +297,37 @@ const btn = this;
             
             const datasetType = document.getElementById('dataset-type').value;
             const prompt = document.getElementById('dataset-prompt').value;
-            // Call Gemini API to actually generate the dataset
+            
+            // Show output section immediately with loading state
+            document.getElementById('output-section').style.display = 'block';
+            document.getElementById('file-explorer').innerHTML = `
+                <div class="file-item">
+                    <i data-feather="loader" class="file-icon animate-spin"></i>
+                    <span>Generating files...</span>
+                </div>
+            `;
+            feather.replace();
+
             try {
+                // Show progress bar
+                const progressBar = document.createElement('div');
+                progressBar.className = 'w-full bg-gray-200 rounded-full h-2.5 mb-4';
+                progressBar.innerHTML = `
+                    <div id="generation-progress" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
+                `;
+                document.getElementById('output-section').prepend(progressBar);
+                
+                // Simulate progress updates
+                let progress = 0;
+                const progressInterval = setInterval(() => {
+                    progress += 5;
+                    document.getElementById('generation-progress').style.width = `${progress}%`;
+                    if (progress >= 100) {
+                        clearInterval(progressInterval);
+                    }
+                }, 150);
+
+                // Call Gemini API to generate the dataset
                 const response = await fetch('https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=' + apiKey, {
                     method: 'POST',
                     headers: {
@@ -296,7 +339,8 @@ const btn = this;
                                 text: `Generate a ${datasetType} AI training dataset about: ${prompt}.\n` +
                                       `Provide Python code for training this dataset in a structured format.\n` +
                                       `Include all necessary files structure.\n` +
-                                      `Output should be in JSON format with files and content.`
+                                      `Output should be in JSON format with files and content.\n` +
+                                      `Example format: {"files": {"train.py": "python code...", "dataset.json": "json content..."}}`
                             }]
                         }]
                     })
@@ -305,87 +349,95 @@ const btn = this;
                 const data = await response.json();
                 if (!response.ok) throw new Error(data.error?.message || 'Failed to generate dataset');
                 
-                // Process the API response and update UI
-                const generatedContent = JSON.parse(data.candidates[0].content.parts[0].text);
-            // Show progress bar
-            const progressBar = document.createElement('div');
-            progressBar.className = 'w-full bg-gray-200 rounded-full h-2.5 mb-4';
-            progressBar.innerHTML = `
-                <div id="generation-progress" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
-            `;
-            document.getElementById('output-section').style.display = 'block';
-            document.getElementById('output-section').prepend(progressBar);
-            
-            // Simulate progress updates
-            let progress = 0;
-            const progressInterval = setInterval(() => {
-                progress += 5;
-                document.getElementById('generation-progress').style.width = `${progress}%`;
-                if (progress >= 100) {
-                    clearInterval(progressInterval);
-                    setTimeout(() => {
-                        let filesHTML = '';
-                        for (const [file, content] of Object.entries(generatedContent.files)) {
-                            filesHTML += `
-                                <div class="file-item" data-file="${file}" data-content="${encodeURIComponent(content)}">
-                                    <i data-feather="${file.includes('/') ? 'folder' : 'file-text'}" class="file-icon"></i>
-                                    <span>${file}</span>
-                                    <span class="ml-auto text-xs text-green-500">✓ Generated</span>
-                                </div>
-                            `;
-                        }
-                        document.getElementById('file-explorer').innerHTML = filesHTML;
-                        feather.replace();
-                        
-                        // Add completion message
-                        const completionMessage = document.createElement('div');
-                        completionMessage.className = 'p-3 bg-green-50 text-green-700 rounded-lg mb-4 text-sm';
-                        completionMessage.innerHTML = `
-                            <div class="flex items-center">
-                                <i data-feather="check-circle" class="mr-2"></i>
-                                Dataset generation completed successfully!
+                // Process the API response
+                let generatedContent;
+                try {
+                    if (data.candidates && data.candidates[0].content.parts[0].text) {
+                        generatedContent = JSON.parse(data.candidates[0].content.parts[0].text);
+                    } else {
+                        throw new Error('Invalid API response format');
+                    }
+                } catch (e) {
+                    console.error('Error parsing response:', e);
+                    throw new Error('Failed to parse generated content');
+                }
+                // Build files list
+                let filesHTML = '';
+                if (generatedContent && generatedContent.files) {
+                    for (const [file, content] of Object.entries(generatedContent.files)) {
+                        filesHTML += `
+                            <div class="file-item" data-file="${file}" data-content="${encodeURIComponent(content)}">
+                                <i data-feather="${file.endsWith('/') ? 'folder' : 'file-text'}" class="file-icon"></i>
+                                <span>${file}</span>
+                                <span class="ml-auto text-xs text-green-500">✓ Generated</span>
                             </div>
                         `;
-                        document.getElementById('output-section').prepend(completionMessage);
-                        feather.replace();
-                    }, 300);
+                    }
+                    
+                    // Update UI with generated files
+                    document.getElementById('file-explorer').innerHTML = filesHTML;
+                    
+                    // Add file click handlers
+                    document.querySelectorAll('.file-item').forEach(item => {
+                        item.addEventListener('click', function() {
+                            const file = this.getAttribute('data-file');
+                            const content = decodeURIComponent(this.getAttribute('data-content'));
+                            
+                            // Create a modal to show file content
+                            const modal = document.createElement('div');
+                            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
+                            modal.innerHTML = `
+                                <div class="bg-white rounded-lg w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+                                    <div class="p-4 border-b flex justify-between items-center">
+                                        <h3 class="font-medium">${file}</h3>
+                                        <button class="text-gray-500 hover:text-gray-700" onclick="this.parentElement.parentElement.parentElement.remove()">
+                                            <i data-feather="x"></i>
+                                        </button>
+                                    </div>
+                                    <pre class="p-4 bg-gray-50 text-sm overflow-auto flex-1">${content}</pre>
+                                    <div class="p-4 border-t flex justify-end">
+                                        <button class="bg-indigo-600 text-white px-4 py-2 rounded" 
+                                            onclick="downloadFile('${file}', '${encodeURIComponent(content)}')">
+                                            <i data-feather="download" class="mr-2"></i> Download
+                                        </button>
+                                    </div>
+                                </div>
+                            `;
+                            document.body.appendChild(modal);
+                            feather.replace();
+                        });
+                    });
+                    
+                    // Add to chat
+                    const chatContainer = document.getElementById('chat-container');
+                    const userMessage = document.createElement('div');
+                    userMessage.className = 'chat-message user-message';
+                    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.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);
+                    chatContainer.scrollTop = chatContainer.scrollHeight;
+                } else {
+                    throw new Error('No files were generated');
                 }
-            }, 150);
-document.getElementById('file-explorer').innerHTML = filesHTML;
-            
-            // Add click handlers to view file content
-            document.querySelectorAll('.file-item').forEach(item => {
-                item.addEventListener('click', function() {
-                    const file = this.getAttribute('data-file');
-                    const content = decodeURIComponent(this.getAttribute('data-content'));
-                    alert(`File: ${file}\n\n${content}`);
-                });
-            });
-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.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.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;
-        });
+            } catch (error) {
+                console.error('Generation error:', error);
+                alert(`Error generating dataset: ${error.message}`);
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = '<i data-feather="zap" class="mr-2 w-4 h-4"></i> Generate Dataset';
+                feather.replace();
+            }
+});
         document.getElementById('send-message').addEventListener('click', async function() {
             const apiKey = document.getElementById('api-key').value;
             if (!apiKey) {