=== index.html === AnyCoder - AI Code Generation IDE

File Manager

Settings

Language:

Code Editor

Output

Chat with AI

Quick Actions

AI Tools

Recent History

All Files

Filename	Size	Type	Modified	Actions

Project Statistics

Export Project

Execution History

Theme Settings

Theme:

Editor Settings

Font Size: 14px

Tab Size: 4

Show Line Numbers

Word Wrap

AI Settings

AI Creativity: 0.7

Max Response Length: 1000

Reset Options

=== assets/css/styles.css === * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #667eea; --secondary-color: #764ba2; --success-color: #48bb78; --error-color: #f56565; --warning-color: #ed8936; --dark-bg: #1a202c; --light-bg: #f7fafc; --card-bg: #2d3748; --text-primary: #ffffff; --text-secondary: #a0aec0; --border-color: #4a5568; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2); } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); color: var(--text-primary); min-height: 100vh; line-height: 1.6; } .app-container { display: flex; flex-direction: column; min-height: 100vh; } .header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); padding: 2rem; text-align: center; box-shadow: var(--shadow-lg); } .header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; color: white; } .header p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin: 0.25rem 0; } .header a { color: white; text-decoration: underline; transition: opacity 0.3s; } .header a:hover { opacity: 0.8; } .main-content { flex: 1; padding: 1rem; max-width: 1400px; margin: 0 auto; width: 100%; } .tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0; } .tab-button { background: transparent; border: none; color: var(--text-secondary); padding: 1rem 1.5rem; cursor: pointer; font-size: 1rem; transition: all 0.3s; border-bottom: 3px solid transparent; margin-bottom: -2px; } .tab-button:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); } .tab-button.active { color: var(--text-primary); border-bottom-color: var(--primary-color); background: rgba(102, 126, 234, 0.1); } .tab-panel { display: none; animation: fadeIn 0.3s; } .tab-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Editor Layout */ .editor-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; height: calc(100vh - 250px); } .sidebar { background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; box-shadow: var(--shadow); overflow-y: auto; } .file-manager h3, .settings-panel h3 { margin-bottom: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .file-controls { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .file-controls input { padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 0.25rem; background: var(--dark-bg); color: var(--text-primary); } .file-controls button, .control-group button { padding: 0.5rem 1rem; border: none; border-radius: 0.25rem; cursor: pointer; font-size: 0.9rem; transition: all 0.3s; display: flex; align-items: center; gap: 0.5rem; justify-content: center; } .create-btn { background: var(--success-color); color: white; } .save-btn { background: var(--primary-color); color: white; } .delete-btn { background: var(--error-color); color: white; } .run-btn { background: var(--success-color); color: white; } .clear-btn { background: var(--warning-color); color: white; } .file-select { width: 100%; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 0.25rem; background: var(--dark-bg); color: var(--text-primary); } .control-group { margin-bottom: 1rem; } .control-group label { display: block; margin-bottom: 0.5rem; color: var(--text-secondary); } .control-group select { width: 100%; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 0.25rem; background: var(--dark-bg); color: var(--text-primary); } .editor-section { background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1rem; } .editor-header, .output-header { display: flex; justify-content: space-between; align-items: center; } .editor-header h3, .output-header h3 { color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .editor-container { flex: 1; border: 1px solid var(--border-color); border-radius: 0.25rem; overflow: hidden; } .CodeMirror { height: 100%; font-size: 14px; } .output-section { background: var(--dark-bg); border-radius: 0.25rem; } .output-display { background: #000; color: #00ff00; padding: 1rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; min-height: 150px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; } /* Assistant Layout */ .assistant-layout { display: grid; grid-template-columns: 1fr 350px; gap: 1rem; height: calc(100vh - 250px); } .chat-section { background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; } .chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .chat-header h3 { color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .chat-messages { flex: 1; overflow-y: auto; padding: 1rem; background: var(--dark-bg); border-radius: 0.25rem; margin-bottom: 1rem; } .message { margin-bottom: 1rem; padding: 0.75rem; border-radius: 0.5rem; animation: slideIn 0.3s; } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .message.user { background: var(--primary-color); margin-left: 2rem; } .message.assistant { background: var(--dark-bg); margin-right: 2rem; border: 1px solid var(--border-color); } .message strong { display: block; margin-bottom: 0.25rem; color: var(--text-secondary); } .chat-input-section { display: flex; gap: 0.5rem; } .chat-input-section textarea { flex: 1; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 0.25rem; background: var(--dark-bg); color: var(--text-primary); resize: vertical; min-height: 60px; } .send-btn { background: var(--primary-color); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s; } .send-btn:hover { background: var(--secondary-color); } .tools-section { display: flex; flex-direction: column; gap: 1rem; } .quick-actions, .ai-tools, .history-section { background: var(--card-bg); padding: 1rem; border-radius: 0.5rem; box-shadow: var(--shadow); } .quick-actions h3, .ai-tools h3, .history-section h3 { margin-bottom: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .template-controls { display: flex; flex-direction: column; gap: 0.5rem; } .template-controls select { padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 0.25rem; background: var(--dark-bg); color: var(--text-primary); } .template-btn, .tool-btn { width: 100%; padding: 0.5rem; border: none; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .template-btn { background: var(--primary-color); color: white; } .tool-btn { background: var(--dark-bg); color: var(--text-primary); border: 1px solid var(--border-color); margin-bottom: 0.5rem; } .tool-btn:hover { background: var(--primary-color); color: white; } .history-display { max-height: 200px; overflow-y: auto; background: var(--dark-bg); padding: 0.5rem; border-radius: 0.25rem; font-size: 0.9rem; } .history-item { padding: 0.5rem; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.3s; } .history-item:hover { background: rgba(255, 255, 255, 0.1); } /* Files Layout */ .files-layout { display: grid; grid-template-columns: 1fr 350px; gap: 1rem; height: calc(100vh - 250px); } .files-section { background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; box-shadow: var(--shadow); } .files-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .files-header h3 { color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .refresh-btn { background: var(--primary-color); color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s; } .files-table-container { overflow-y: auto; max-height: calc(100% - 60px); } .files-table { width: 100%; border-collapse: collapse; } .files-table th, .files-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border-color); } .files-table th { background: var(--dark-bg); color: var(--text-primary); position: sticky; top: 0; } .files-table tr:hover { background: rgba(255, 255, 255, 0.05); } .file-action-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; margin-right: 0.25rem; transition: all 0.3s; } .file-action-btn:hover { background: var(--primary-color); border-color: var(--primary-color); } .stats-section { display: flex; flex-direction: column; gap: 1rem; } .stats-card, .export-section, .execution-history { background: var(--card-bg); padding: 1rem; border-radius: 0.5rem; box-shadow: var(--shadow); } .stats-card h3, .export-section h3, .execution-history h3 { margin-bottom: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .stats-display { display: grid; gap: 0.5rem; } .stat-item { display: flex; justify-content: space-between; padding: 0.5rem; background: var(--dark-bg); border-radius: 0.25rem; } .export-controls { display: flex; flex-direction: column; gap: 0.5rem; } .export-controls select { padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 0.25rem; background: var(--dark-bg); color: var(--text-primary); } .export-btn { background: var(--success-color); color: white; border: none; padding: 0.5rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s; } .exec-history { max-height: 300px; overflow-y: auto; } .exec-item { padding: 0.5rem; background: var(--dark-bg); border-radius: 0.25rem; margin-bottom: 0.5rem; font-size: 0.9rem; } .exec-item.success { border-left: 3px solid var(--success-color); } .exec-item.error { border-left: 3px solid var(--error-color); } /* Settings Layout */ .settings-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .settings-section { background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; box-shadow: var(--shadow); } .settings-section h3 { margin-bottom: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .setting-group { margin-bottom: 1rem; } .setting-group label { display: block; margin-bottom: 0.5rem; color: var(--text-secondary); } .setting-group select, .setting-group input[type="range"] { width: 100%; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 0.25rem; background: var(--dark-bg); color: var(--text-primary); } .setting-group input[type="checkbox"] { margin-right: 0.5rem; } .setting-group span { margin-left: 0.5rem; color: var(--text-secondary); } .reset-buttons { display: flex; gap: 0.5rem; } .reset-btn, .clear-all-btn { flex: 1; padding: 0.75rem; border: none; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s; } .reset-btn { background: var(--warning-color); color: white; } .clear-all-btn { background: var(--error-color); color: white; } /* Responsive Design */ @media (max-width: 768px) { .editor-layout, .assistant-layout, .files-layout { grid-template-columns: 1fr; height: auto; } .tabs { flex-wrap: wrap; } .tab-button { flex: 1; min-width: 120px; } .header h1 { font-size: 1.8rem; } .main-content { padding: 0.5rem; } } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--dark-bg); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-color); } === assets/js/app.js === // Main Application Logic class AnyCoderIDE { constructor() { this.files = JSON.parse(localStorage.getItem('anycoder_files')) || {}; this.currentFile = null; this.chatHistory = JSON.parse(localStorage.getItem('anycoder_chat')) || []; this.executionHistory = JSON.parse(localStorage.getItem('anycoder_exec')) || []; this.settings = JSON.parse(localStorage.getItem('anycoder_settings')) || { theme: 'dark', fontSize: 14, tabSize: 4, lineNumbers: true, wordWrap: false, aiCreativity: 0.7, maxTokens: 1000 }; this.editor = null; this.init(); } init() { this.initEditor(); this.initEventListeners(); this.initTabs(); this.loadFiles(); this.loadChatHistory(); this.applySettings(); } initEditor() { const textarea = document.getElementById('codeEditor'); this.editor = CodeMirror.fromTextArea(textarea, { lineNumbers: this.settings.lineNumbers, mode: 'python', theme: 'monokai', indentUnit: this.settings.tabSize, tabSize: this.settings.tabSize, lineWrapping: this.settings.wordWrap, autofocus: true }); this.editor.on('change', () => { if (this.currentFile) { this.files[this.currentFile] = this.editor.getValue(); this.saveFiles(); } }); } initTabs() { const tabButtons = document.querySelectorAll('.tab-button'); const tabPanels = document.querySelectorAll('.tab-panel'); tabButtons.forEach(button => { button.addEventListener('click', () => { const tabName = button.dataset.tab; tabButtons.forEach(btn => btn.classList.remove('active')); tabPanels.forEach(panel => panel.classList.remove('active')); button.classList.add('active'); document.getElementById(tabName).classList.add('active'); }); }); } initEventListeners() { // File Management document.getElementById('createFileBtn').addEventListener('click', () => this.createFile()); document.getElementById('saveFileBtn').addEventListener('click', () => this.saveCurrentFile()); document.getElementById('deleteFileBtn').addEventListener('click', () => this.deleteCurrentFile()); document.getElementById('fileList').addEventListener('change', (e) => this.loadFile(e.target.value)); // Code Execution document.getElementById('runCodeBtn').addEventListener('click', () => this.runCode()); document.getElementById('clearEditorBtn').addEventListener('click', () => this.clearEditor()); document.getElementById('clearOutputBtn').addEventListener('click', () => this.clearOutput()); // Language Selection document.getElementById('languageSelect').addEventListener('change', (e) => this.changeLanguage(e.target.value)); // AI Assistant document.getElementById('sendChatBtn').addEventListener('click', () => this.sendChatMessage()); document.getElementById('chatInput').addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.sendChatMessage(); } }); document.getElementById('clearChatBtn').addEventListener('click', () => this.clearChat()); document.getElementById('explainBtn').addEventListener('click', () => this.explainCode()); document.getElementById('debugBtn').addEventListener('click', () => this.debugCode()); document.getElementById('optimizeBtn').addEventListener('click', () => this.optimizeCode()); // Templates document.getElementById('useTemplateBtn').addEventListener('click', () => this.useTemplate()); // Project Files document.getElementById('refreshFilesBtn').addEventListener('click', () => this.refreshFiles()); document.getElementById('exportBtn').addEventListener('click', () => this.exportProject()); // Settings document.getElementById('themeSelect').addEventListener('change', (e) => this.changeTheme(e.target.value)); document.getElementById('fontSize').addEventListener('input', (e) => this.updateFontSize(e.target.value)); document.getElementById('tabSize').addEventListener('input', (e) => this.updateTabSize(e.target.value)); document.getElementById('lineNumbers').addEventListener('change', (e) => this.toggleLineNumbers(e.target.checked)); document.getElementById('wordWrap').addEventListener('change', (e) => this.toggleWordWrap(e.target.checked)); document.getElementById('aiCreativity').addEventListener('input', (e) => this.updateAICreativity(e.target.value)); document.getElementById('maxTokens').addEventListener('input', (e) => this.updateMaxTokens(e.target.value)); document.getElementById('resetSettingsBtn').addEventListener('click', () => this.resetSettings()); document.getElementById('clearAllBtn').addEventListener('click', () => this.clearAllData()); } // File Management Methods createFile() { const filename = document.getElementById('newFileName').value.trim(); if (!filename) { this.showOutput('Error: Please enter a filename', 'error'); return; } if (this.files[filename]) { this.showOutput(`Error: File ${filename} already exists`, 'error'); return; } this.files[filename] = ''; this.currentFile = filename; this.editor.setValue(''); this.saveFiles(); this.updateFileList(); this.showOutput(`Created file: ${filename}`, 'success'); document.getElementById('newFileName').value = ''; } saveCurrentFile() { if (!this.currentFile) { this.showOutput('No file selected', 'error'); return; } this.files[this.currentFile] = this.editor.getValue(); this.saveFiles(); this.showOutput(`Saved: ${this.currentFile}`, 'success'); } deleteCurrentFile() { if (!this.currentFile) { this.showOutput('No file selected', 'error'); return; } delete this.files[this.currentFile]; this.saveFiles(); this.updateFileList(); this.showOutput(`Deleted: ${this.currentFile}`, 'success'); this.currentFile = null; this.editor.setValue(''); } loadFile(filename) { if (!filename) return; this.currentFile = filename; this.editor.setValue(this.files[filename] || ''); this.showOutput(`Loaded: ${filename}`, 'success'); } updateFileList() { const select = document.getElementById('fileList'); select.innerHTML = ''; Object.keys(this.files).forEach(filename => { const option = document.createElement('option'); option.value = filename; option.textContent = filename; select.appendChild(option); }); select.value = this.currentFile || ''; } loadFiles() { this.updateFileList(); this.refreshFiles(); } saveFiles() { localStorage.setItem('anycoder_files', JSON.stringify(this.files)); } // Code Execution runCode() { const code = this.editor.getValue(); const language = document.getElementById('languageSelect').value; if (!code) { this.showOutput('No code to run', 'error'); return; } this.showOutput('Running code...', 'info'); // Simulate code execution setTimeout(() => { const result = this.simulateExecution(code, language); this.addToExecutionHistory(language, result.success); this.showOutput(result.output, result.success ? 'success' : 'error'); }, 1000); } simulateExecution(code, language) { // Simple simulation of code execution if (language === 'python') { if (code.includes('print(')) { const match = code.match(/print$['"`]([^'"`]+)['"`]$/); if (match) { return { output: match[1], success: true }; } } return { output: 'Python code executed successfully (simulated)', success: true }; } else if (language === 'javascript') { if (code.includes('console.log')) { const match = code.match(/console\.log$['"`]([^'"`]+)['"`]$/); if (match) { return { output: match[1], success: true }; } } return { output: 'JavaScript code executed successfully (simulated)', success: true }; } return { output: `${language} code executed successfully (simulated)`, success: true }; } addToExecutionHistory(language, success) { const historyItem = { timestamp: new Date().toISOString(), language: language, success: success }; this.executionHistory.unshift(historyItem); if (this.executionHistory.length > 20) { this.executionHistory = this.executionHistory.slice(0, 20); } localStorage.setItem('anycoder_exec', JSON.stringify(this.executionHistory)); this.updateExecutionHistory(); } updateExecutionHistory() { const container = document.getElementById('execHistory'); container.innerHTML = ''; this.executionHistory.slice(0, 10).forEach(item => { const div = document.createElement('div'); div.className = `exec-item ${item.success ? 'success' : 'error'}`; div.innerHTML = `

${new Date(item.timestamp).toLocaleString()}

Language: ${item.language}

Status: ${item.success ? '✅ Success' : '❌ Error'}

`; container.appendChild(div); }); } clearEditor() { this.editor.setValue(''); this.showOutput('Editor cleared', 'info'); } clearOutput() { document.getElementById('outputDisplay').textContent = ''; } showOutput(message, type = 'info') { const output = document.getElementById('outputDisplay'); const timestamp = new Date().toLocaleTimeString(); const prefix = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️'; output.textContent += `[${timestamp}] ${prefix} ${message}\n`; output.scrollTop = output.scrollHeight; } // Language Management changeLanguage(language) { const modeMap = { 'python': 'python', 'javascript': 'javascript', 'html': 'htmlmixed', 'css': 'css', 'xml': 'xml' }; this.editor.setOption('mode', modeMap[language] || 'python'); } // AI Assistant Methods sendChatMessage() { const input = document.getElementById('chatInput'); const message = input.value.trim(); if (!message) return; this.addChatMessage('user', message); input.value = ''; // Simulate AI response setTimeout(() => { const response = this.generateAIResponse(message); this.addChatMessage('assistant', response); }, 1000); } generateAIResponse(message) { const responses = { 'react': `Here's a React component template: import React from 'react'; function MyComponent() { return (

Hello World

); } export default MyComponent;`, 'python': `Here's a Python function: def my_function(): """This is a sample function""" print("Hello, World!") return True # Example usage if __name__ == "__main__": my_function()`, 'javascript': `Here's a JavaScript function: function myFunction() { console.log("Hello, World!"); return true; } // Example usage myFunction();`, 'default': `I'll help you with that! Here's some code based on your request: // Generated code for: ${message} // This is a simulated AI response function solution() { // TODO: Implement your solution console.log("Working on: ${message}"); } solution();` }; const lowerMessage = message.toLowerCase(); for (const [key, response] of Object.entries(responses)) { if (lowerMessage.includes(key)) { return response; } } return responses.default; } addChatMessage(role, content) { const chatMessages = document.getElementById('chatMessages'); const messageDiv = document.createElement('div'); messageDiv.className = `message ${role}`; const roleLabel = role === 'user' ? 'You' : 'AI Assistant'; messageDiv.innerHTML = ` ${roleLabel}

${content}

`; chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; this.chatHistory.push({ role, content, timestamp: new Date().toISOString() }); this.saveChatHistory(); } loadChatHistory() { const chatMessages = document.getElementById('chatMessages'); chatMessages.innerHTML = ''; this.chatHistory.forEach(msg => { const messageDiv = document.createElement('div'); messageDiv.className = `message ${msg.role}`; const roleLabel = msg.role === 'user' ? 'You' : 'AI Assistant'; messageDiv.innerHTML = ` ${roleLabel}

${msg.content}

`; chatMessages.appendChild(messageDiv); }); } saveChatHistory() { localStorage.setItem('anycoder_chat', JSON.stringify(this.chatHistory)); } clearChat() { this.chatHistory = []; this.saveChatHistory(); document.getElementById('chatMessages').innerHTML = ''; this.showOutput('Chat history cleared', 'info'); } explainCode() { const code = this.editor.getValue(); if (!code) { this.showOutput('No code to explain', 'error'); return; } this.addChatMessage('user', 'Explain this code'); setTimeout(() => { const explanation = this.generateExplanation(code); this.addChatMessage('assistant', explanation); }, 1000); } generateExplanation(code) { const lines = code.split('\n').slice(0, 10); let explanation = 'Code Analysis:\n\n'; lines.forEach((line, index) => { if (line.trim()) { if (line.includes('def ') || line.includes('function ')) { explanation += `Line ${index + 1}: Function definition\n`; } else if (line.includes('import ') || line.includes('require')) { explanation += `Line ${index + 1}: Import statement\n`; } else if (line.includes('class ')) { explanation += `Line ${index + 1}: Class definition\n`; } else if (line.includes('=')) { explanation += `Line ${index + 1}: Variable assignment\n`; } else { explanation += `Line ${index + 1}: Code statement\n`; } } }); explanation += '\nThis is a basic analysis. For detailed explanations, consider adding more context.'; return explanation; } debugCode() { const code = this.editor.getValue(); if (!code) { this.showOutput('No code to debug', 'error'); return; } this.addChatMessage('user', 'Debug this code'); setTimeout(() => { const debugInfo = this.generateDebugInfo(code); this.addChatMessage('assistant', debugInfo); }, 1000); } generateDebugInfo(code) { return `Debugging Suggestions:\n\n• Check for syntax errors and typos\n• Verify all variables are properly declared\n• Ensure proper indentation\n• Check for missing imports or dependencies\n• Review logic flow and control structures\n\nCommon Issues:\n• Missing semicolons in JavaScript\n• Indentation errors in Python\n• Undefined variables\n• Type mismatches\n\nWould you like me to help fix any specific errors?`; } optimizeCode() { const code = this.editor.getValue(); if (!code) { this.showOutput('No code to optimize', 'error'); return; } this.addChatMessage('user', 'Optimize this code'); setTimeout(() => { const optimization = this.generateOptimization(code); this.addChatMessage('assistant', optimization); }, 1000); } generateOptimization(code) { return `Optimization Suggestions:\n\nPerformance:\n• Use efficient algorithms and data structures\n• Minimize unnecessary computations\n• Cache expensive operations\n• Use lazy loading where applicable\n\nCode Quality:\n• Remove unused variables and imports\n• Simplify complex expressions\n• Use meaningful variable names\n• Add comments for complex logic\n\nMemory:\n• Avoid memory leaks\n• Use appropriate data structures\n• Release resources properly\n• Consider streaming for large datasets\n\nWould you like me to implement these optimizations?`; } // Templates useTemplate() { const template = document.getElementById('templateSelect').value; const templates = { 'react': `import React from 'react'; function Component() { return (

Hello World

); } export default Component;`, 'fastapi': `from fastapi import FastAPI app = FastAPI() @app.get("/") def read_root(): return {"message": "Hello World"} @app.get("/items/{item_id}") def read_item(item_id: int, q: str = None): return {"item_id": item_id, "q": q}`, 'python': `def main(): """Main function""" print("Hello, World!") if __name__ == "__main__": main()`, 'express': `const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { res.json({ message: 'Hello World!' }); }); app.listen(port, () => { console.log(\`Server running at http://localhost:\${port}\`); });`, 'gradio': `import gradio as gr def greet(name): return f"Hello {name}!" demo = gr.Interface(fn=greet, inputs="text", outputs="text") demo.launch()` }; if (templates[template]) { this.editor.setValue(templates[template]); this.showOutput(`Template loaded: ${template}`, 'success'); } } // Project Files refreshFiles() { const tableBody = document.getElementById('filesTableBody'); tableBody.innerHTML = ''; Object.keys(this.files).forEach(filename => { const content = this.files[filename]; const size = content.length; const type = filename.split('.').pop() || 'text'; const modified = new Date().toLocaleDateString(); const row = document.createElement('tr'); row.innerHTML = ` ${filename} ${size} chars ${type} ${modified} `; tableBody.appendChild(row); }); this.updateStats(); } deleteFileByName(filename) { delete this.files[filename]; this.saveFiles(); this.refreshFiles(); if (this.currentFile === filename) { this.currentFile = null; this.editor.setValue(''); } this.showOutput(`Deleted: ${filename}`, 'success'); } updateStats() { const statsDisplay = document.getElementById('statsDisplay'); const totalFiles = Object.keys(this.files).length; const totalChars = Object.values(this.files).reduce((sum, content) => sum + content.length, 0); const languages = [...new Set(Object.keys(this.files).map(f => f.split('.').pop()))]; statsDisplay.innerHTML = `

Total Files: ${totalFiles}

Total Characters: ${totalChars}

Languages: ${languages.join(', ')}

Chat Messages: ${this.chatHistory.length}

`; } exportProject() { const format = document.getElementById('exportFormat').value; if (format === 'json') { const data = { files: this.files, chatHistory: this.chatHistory, settings: this.settings, exportDate: new Date().toISOString() }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `anycoder_project_${Date.now()}.json`; a.click(); URL.revokeObjectURL(url); this.showOutput('Project exported as JSON', 'success'); } else { this.showOutput('ZIP export not available in browser environment', 'info'); } } // Settings changeTheme(theme) { document.body.className = `theme-${theme}`; this.settings.theme = theme; this.saveSettings(); } updateFontSize(size) { this.editor.getWrapperElement().style.fontSize = `${size}px`; document.getElementById('fontSizeValue').textContent = `${size}px`; this.settings.fontSize = parseInt(size); this.saveSettings(); } updateTabSize(size) { this.editor.setOption('tabSize', parseInt(size)); this.editor.setOption('indentUnit', parseInt(size)); document.getElementById('tabSizeValue').textContent = size; this.settings.tabSize = parseInt(size); this.saveSettings(); } toggleLineNumbers(enabled) { this.editor.setOption('lineNumbers', enabled); this.settings.lineNumbers = enabled; this.saveSettings(); } toggleWordWrap(enabled) { this.editor.setOption('lineWrapping', enabled); this.settings.wordWrap = enabled; this.saveSettings(); } updateAICreativity(value) { document.getElementById('aiCreativityValue').textContent = value; this.settings.aiCreativity = parseFloat(value); this.saveSettings(); } updateMaxTokens(value) { document.getElementById('maxTokensValue').textContent = value; this.settings.maxTokens = parseInt(value); this.saveSettings(); } applySettings() { document.getElementById('themeSelect').value = this.settings.theme; document.getElementById('fontSize').value = this.settings.fontSize; document.getElementById('tabSize').value = this.settings.tabSize; document.getElementById('lineNumbers').checked = this.settings.lineNumbers; document.getElementById('wordWrap').checked = this.settings.wordWrap; document.getElementById('aiCreativity').value = this.settings.aiCreativity; document.getElementById('maxTokens').value = this.settings.maxTokens; document.getElementById('fontSizeValue').textContent = `${this.settings.fontSize}px`; document.getElementById('tabSizeValue').textContent = this.settings.tabSize; document.getElementById('aiCreativityValue').textContent = this.settings.aiCreativity; document.getElementById('maxTokensValue').textContent = this.settings.maxTokens; this.changeTheme(this.settings.theme); } saveSettings() { localStorage.setItem('anycoder_settings', JSON.stringify(this.settings)); } resetSettings() { this.settings = { theme: 'dark', fontSize: 14, tabSize: 4, lineNumbers: true, wordWrap: false, aiCreativity: 0.7, maxTokens: 1000 }; this.saveSettings(); this.applySettings(); this.showOutput('Settings reset to defaults', 'success'); } clearAllData() { if (confirm('Are you sure you want to clear all data? This cannot be undone.')) { localStorage.clear(); this.files = {}; this.currentFile = null; this.chatHistory = []; this.executionHistory = []; this.editor.setValue(''); this.loadFiles(); this.loadChatHistory(); this.updateExecutionHistory(); this.showOutput('All data cleared', 'success'); } } } // Initialize the application const ide = new AnyCoderIDE();