Upload index.js with huggingface_hub

index.js

@@ -0,0 +1,158 @@
+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(/