Upload index.js with huggingface_hub

index.js

@@ -0,0 +1,260 @@
+/**
+ * AnyCoder - AI Code Generator
+ * Main application logic for browser-based code generation using Transformers.js
+ */
+
+// DOM Elements
+const promptInput = document.getElementById('prompt');
+const languageSelect = document.getElementById('language');
+const generateBtn = document.getElementById('generate-btn');
+const loadingSection = document.getElementById('loading-section');
+const progressBar = document.getElementById('progress-bar');
+const loadingText = document.getElementById('loading-text');
+const errorSection = document.getElementById('error-section');
+const errorText = document.getElementById('error-text');
+const outputSection = document.getElementById('output-section');
+const generatedCodeElement = document.getElementById('generated-code');
+const copyBtn = document.getElementById('copy-btn');
+
+// Application state
+let isModelLoaded = false;
+let isGenerating = false;
+let worker = null;
+
+// Initialize the application
+function init() {
+    // Create and setup Web Worker
+    worker = new Worker('worker.js', { type: 'module' });
+    
+    // Listen for messages from worker
+    worker.onmessage = handleWorkerMessage;
+    
+    // Setup event listeners
+    generateBtn.addEventListener('click', handleGenerate);
+    copyBtn.addEventListener('click', handleCopy);
+    promptInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && e.ctrlKey) {
+            handleGenerate();
+        }
+    });
+    
+    // Load model on page load
+    loadModel();
+}
+
+// Handle messages from Web Worker
+function handleWorkerMessage(event) {
+    const { type, data } = event.data;
+    
+    switch (type) {
+        case 'progress':
+            updateProgress(data);
+            break;
+        case 'modelLoaded':
+            onModelLoaded();
+            break;
+        case 'generationComplete':
+            onGenerationComplete(data);
+            break;
+        case 'error':
+            onError(data);
+            break;
+        default:
+            console.warn('Unknown message type from worker:', type);
+    }
+}
+
+// Load the model
+function loadModel() {
+    loadingSection.style.display = 'block';
+    loadingText.textContent = 'Initializing model...';
+    
+    // Send load command to worker
+    worker.postMessage({ type: 'loadModel' });
+}
+
+// Update progress bar
+function updateProgress(progress) {
+    const percent = Math.round(progress * 100);
+    progressBar.style.width = `${percent}%`;
+    loadingText.textContent = `Loading model... ${percent}%`;
+}
+
+// Called when model is loaded
+function onModelLoaded() {
+    isModelLoaded = true;
+    loadingSection.style.display = 'none';
+    progressBar.style.width = '0%';
+    generateBtn.disabled = false;
+    console.log('Model loaded successfully');
+}
+
+// Handle generate button click
+async function handleGenerate() {
+    const prompt = promptInput.value.trim();
+    
+    if (!prompt) {
+        showError('Please enter a description of what you want to generate.');
+        return;
+    }
+    
+    if (!isModelLoaded) {
+        showError('Model is still loading. Please wait...');
+        return;
+    }
+    
+    if (isGenerating) {
+        return;
+    }
+    
+    // Clear previous errors and output
+    hideError();
+    outputSection.style.display = 'none';
+    
+    // Update UI state
+    isGenerating = true;
+    generateBtn.disabled = true;
+    generateBtn.querySelector('.btn-text').textContent = 'Generating...';
+    generateBtn.querySelector('.btn-spinner').style.display = 'block';
+    
+    // Prepare the prompt with language context
+    const language = languageSelect.value;
+    const enhancedPrompt = `Generate ${language} code: ${prompt}\n\n\`\`\`${language}\n`;
+    
+    // Send generation request to worker
+    worker.postMessage({
+        type: 'generate',
+        data: { prompt: enhancedPrompt, language }
+    });
+}
+
+// Called when generation is complete
+function onGenerationComplete(result) {
+    const { generatedText, language } = result;
+    
+    // Extract code between code fences if present
+    let code = generatedText;
+    const codeFenceMatch = generatedText.match(/```(?:\w+)?\n([\s\S]*?)```/);
+    if (codeFenceMatch) {
+        code = codeFenceMatch[1];
+    } else {
+        // If no code fences, try to extract code after the prompt
+        const promptEnd = `Generate ${language} code:`;
+        const promptIndex = generatedText.indexOf(promptEnd);
+        if (promptIndex !== -1) {
+            code = generatedText.substring(promptIndex + promptEnd.length).trim();
+            // Remove any trailing text after code
+            const lines = code.split('\n');
+            const codeLines = [];
+            for (let line of lines) {
+                if (line.trim().startsWith('//') || line.trim().startsWith('#') || line.trim().startsWith('--')) {
+                    codeLines.push(line);
+                } else if (line.trim() && !line.includes('Here is') && !line.includes('This code')) {
+                    codeLines.push(line);
+                } else if (line.trim() === '') {
+                    codeLines.push(line);
+                } else {
+                    break;
+                }
+            }
+            code = codeLines.join('\n');
+        }
+    }
+    
+    // Clean up the code
+    code = code.trim();
+    
+    // Update the UI
+    displayGeneratedCode(code, language);
+    
+    // Reset UI state
+    resetUIState();
+}
+
+// Display generated code with syntax highlighting
+function displayGeneratedCode(code, language) {
+    // Set the code content
+    generatedCodeElement.textContent = code;
+    
+    // Update language class
+    generatedCodeElement.className = `language-${getPrismLanguage(language)}`;
+    
+    // Highlight the code
+    Prism.highlightElement(generatedCodeElement);
+    
+    // Show output section
+    outputSection.style.display = 'block';
+    
+    // Scroll to output
+    outputSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+// Get Prism.js language identifier
+function getPrismLanguage(language) {
+    const languageMap = {
+        'javascript': 'javascript',
+        'python': 'python',
+        'html': 'markup',
+        'react': 'jsx',
+        'sql': 'sql',
+        'bash': 'bash',
+        'other': 'javascript'
+    };
+    return languageMap[language] || 'javascript';
+}
+
+// Handle copy button click
+async function handleCopy() {
+    const code = generatedCodeElement.textContent;
+    
+    try {
+        await navigator.clipboard.writeText(code);
+        const originalText = copyBtn.textContent;
+        copyBtn.textContent = 'Copied!';
+        copyBtn.style.backgroundColor = 'var(--accent-success)';
+        
+        setTimeout(() => {
+            copyBtn.textContent = originalText;
+            copyBtn.style.backgroundColor = '';
+        }, 2000);
+    } catch (err) {
+        console.error('Failed to copy code:', err);
+        showError('Failed to copy code to clipboard');
+    }
+}
+
+// Show error message
+function showError(message) {
+    errorText.textContent = message;
+    errorSection.style.display = 'block';
+    
+    // Auto-hide after 5 seconds
+    setTimeout(hideError, 5000);
+}
+
+// Hide error message
+function hideError() {
+    errorSection.style.display = 'none';
+}
+
+// Reset UI state after generation
+function resetUIState() {
+    isGenerating = false;
+    generateBtn.disabled = false;
+    generateBtn.querySelector('.btn-text').textContent = 'Generate Code';
+    generateBtn.querySelector('.btn-spinner').style.display = 'none';
+}
+
+// Handle errors from worker
+function onError(error) {
+    console.error('Worker error:', error);
+    showError(`An error occurred: ${error.message || 'Unknown error'}`);
+    resetUIState();
+}
+
+// Initialize the app when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}