index.js

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(/