class PythonCodeStudio { constructor() { this.pipeline = null; this.isInitialized = false; this.pyodide = null; this.initializeElements(); this.attachEventListeners(); this.initializePyodide(); } initializeElements() { this.generateBtn = document.getElementById('generateBtn'); this.runBtn = document.getElementById('runBtn'); this.debugBtn = document.getElementById('debugBtn'); this.clearBtn = document.getElementById('clearBtn'); this.promptInput = document.getElementById('promptInput'); this.codeEditor = document.getElementById('codeEditor'); this.outputText = document.getElementById('outputText'); this.statusIndicator = document.getElementById('statusIndicator'); this.statusText = this.statusIndicator.querySelector('.status-text'); this.progressContainer = document.getElementById('progressContainer'); this.progressBar = document.getElementById('progressBar'); this.progressText = document.getElementById('progressText'); this.exampleButtons = document.querySelectorAll('.example-btn'); } attachEventListeners() { this.generateBtn.addEventListener('click', () => this.generateCode()); this.runBtn.addEventListener('click', () => this.runCode()); this.debugBtn.addEventListener('click', () => this.debugCode()); this.clearBtn.addEventListener('click', () => this.clearAll()); this.exampleButtons.forEach(btn => { btn.addEventListener('click', (e) => { this.promptInput.value = e.target.dataset.prompt; this.generateCode(); }); }); // Add keyboard shortcuts document.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); this.runCode(); } }); } async initializePyodide() { try { this.updateStatus('loading', 'Loading Python runtime...'); // Load Pyodide for Python execution if (typeof loadPyodide === 'function') { this.pyodide = await loadPyodide({ indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.23.4/full/' }); // Install common packages await this.pyodide.loadPackage(['micropip']); const micropip = this.pyodide.pyimport('micropip'); this.updateStatus('success', 'Python runtime ready'); } else { this.updateStatus('error', 'Pyodide not available - code execution disabled'); this.runBtn.disabled = true; } } catch (error) { console.error('Failed to initialize Pyodide:', error); this.updateStatus('error', 'Python runtime failed to load'); this.runBtn.disabled = true; } } async initializeTransformers() { if (this.isInitialized) return; try { this.updateStatus('loading', 'Loading AI models...'); this.showProgress(0); // Create a text generation pipeline for code generation this.pipeline = await transformers.pipeline( 'text-generation', 'microsoft/DialogRPT-updown', { progress_callback: (progress) => { const percent = Math.round(progress * 100); this.showProgress(percent); } } ); this.isInitialized = true; this.updateStatus('success', 'AI models ready'); this.hideProgress(); } catch (error) { console.error('Failed to initialize transformers:', error); this.updateStatus('error', 'Failed to load AI models'); this.hideProgress(); } } async generateCode() { const prompt = this.promptInput.value.trim(); if (!prompt) { this.showOutput('Please enter a description of the code you want to generate.', 'error'); return; } if (!this.isInitialized) { await this.initializeTransformers(); } try { this.updateStatus('loading', 'Generating Python code...'); this.generateBtn.disabled = true; // Enhanced prompt for better code generation const enhancedPrompt = `Write a complete Python script for: ${prompt} Requirements: - Include proper error handling - Add comments explaining the code - Use best practices - Make it ready to run Python code:`; const result = await this.pipeline(enhancedPrompt, { max_new_tokens: 512, temperature: 0.7, do_sample: true, return_full_text: false }); const generatedCode = result[0].generated_text; // Clean up the generated code const cleanCode = this.cleanGeneratedCode(generatedCode); this.codeEditor.value = cleanCode; this.updateStatus('success', 'Code generated successfully'); this.showOutput('✅ Code generated successfully! Click "Run Script" to test it.', 'success'); } catch (error) { console.error('Code generation failed:', error); this.updateStatus('error', 'Code generation failed'); this.showOutput(`❌ Error generating code: ${error.message}`, 'error'); } finally { this.generateBtn.disabled = false; } } cleanGeneratedCode(code) { // Remove markdown code blocks if present code = code.replace(/