Spaces:
Runtime error
Runtime error
| === index.html === | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AnyCoder - AI Code Generation IDE</title> | |
| <link rel="stylesheet" href="assets/css/codemirror.css"> | |
| <link rel="stylesheet" href="assets/css/monokai.css"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <h1><i class="fas fa-rocket"></i> AnyCoder</h1> | |
| <p>Uncensored AI Code Generation IDE with Conversational Assistant</p> | |
| <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </div> | |
| </header> | |
| <main class="main-content"> | |
| <div class="tabs"> | |
| <button class="tab-button active" data-tab="editor"> | |
| <i class="fas fa-code"></i> Code Editor | |
| </button> | |
| <button class="tab-button" data-tab="assistant"> | |
| <i class="fas fa-robot"></i> AI Assistant | |
| </button> | |
| <button class="tab-button" data-tab="files"> | |
| <i class="fas fa-folder"></i> Project Files | |
| </button> | |
| <button class="tab-button" data-tab="settings"> | |
| <i class="fas fa-cog"></i> Settings | |
| </button> | |
| </div> | |
| <div class="tab-content"> | |
| <!-- Code Editor Tab --> | |
| <div id="editor" class="tab-panel active"> | |
| <div class="editor-layout"> | |
| <aside class="sidebar"> | |
| <div class="file-manager"> | |
| <h3><i class="fas fa-folder-open"></i> File Manager</h3> | |
| <div class="file-controls"> | |
| <input type="text" id="newFileName" placeholder="filename.py"> | |
| <button id="createFileBtn"><i class="fas fa-plus"></i> New</button> | |
| <button id="saveFileBtn"><i class="fas fa-save"></i> Save</button> | |
| <button id="deleteFileBtn"><i class="fas fa-trash"></i> Delete</button> | |
| </div> | |
| <select id="fileList" class="file-select"> | |
| <option value="">Select a file...</option> | |
| </select> | |
| </div> | |
| <div class="settings-panel"> | |
| <h3><i class="fas fa-sliders-h"></i> Settings</h3> | |
| <div class="control-group"> | |
| <label for="languageSelect">Language:</label> | |
| <select id="languageSelect"> | |
| <option value="python">Python</option> | |
| <option value="javascript">JavaScript</option> | |
| <option value="html">HTML</option> | |
| <option value="css">CSS</option> | |
| <option value="xml">XML</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <button id="runCodeBtn" class="run-btn"> | |
| <i class="fas fa-play"></i> Run Code | |
| </button> | |
| <button id="clearEditorBtn" class="clear-btn"> | |
| <i class="fas fa-eraser"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| </aside> | |
| <section class="editor-section"> | |
| <div class="editor-header"> | |
| <h3><i class="fas fa-edit"></i> Code Editor</h3> | |
| </div> | |
| <div class="editor-container"> | |
| <textarea id="codeEditor"></textarea> | |
| </div> | |
| <div class="output-section"> | |
| <div class="output-header"> | |
| <h3><i class="fas fa-terminal"></i> Output</h3> | |
| <button id="clearOutputBtn" class="clear-btn"> | |
| <i class="fas fa-eraser"></i> Clear | |
| </button> | |
| </div> | |
| <div id="outputDisplay" class="output-display"></div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Tab --> | |
| <div id="assistant" class="tab-panel"> | |
| <div class="assistant-layout"> | |
| <div class="chat-section"> | |
| <div class="chat-header"> | |
| <h3><i class="fas fa-comments"></i> Chat with AI</h3> | |
| <button id="clearChatBtn" class="clear-btn"> | |
| <i class="fas fa-trash"></i> Clear Chat | |
| </button> | |
| </div> | |
| <div id="chatMessages" class="chat-messages"></div> | |
| <div class="chat-input-section"> | |
| <textarea id="chatInput" placeholder="Ask for code help..."></textarea> | |
| <button id="sendChatBtn" class="send-btn"> | |
| <i class="fas fa-paper-plane"></i> Send | |
| </button> | |
| </div> | |
| </div> | |
| <div class="tools-section"> | |
| <div class="quick-actions"> | |
| <h3><i class="fas fa-magic"></i> Quick Actions</h3> | |
| <div class="template-controls"> | |
| <select id="templateSelect"> | |
| <option value="react">React Component</option> | |
| <option value="fastapi">FastAPI</option> | |
| <option value="python">Python Function</option> | |
| <option value="express">Express Server</option> | |
| <option value="gradio">Gradio App</option> | |
| </select> | |
| <button id="useTemplateBtn" class="template-btn"> | |
| <i class="fas fa-file-code"></i> Use Template | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ai-tools"> | |
| <h3><i class="fas fa-tools"></i> AI Tools</h3> | |
| <div class="tool-buttons"> | |
| <button id="explainBtn" class="tool-btn"> | |
| <i class="fas fa-book"></i> Explain Code | |
| </button> | |
| <button id="debugBtn" class="tool-btn"> | |
| <i class="fas fa-bug"></i> Debug Code | |
| </button> | |
| <button id="optimizeBtn" class="tool-btn"> | |
| <i class="fas fa-tachometer-alt"></i> Optimize Code | |
| </button> | |
| </div> | |
| </div> | |
| <div class="history-section"> | |
| <h3><i class="fas fa-history"></i> Recent History</h3> | |
| <div id="historyDisplay" class="history-display"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Files Tab --> | |
| <div id="files" class="tab-panel"> | |
| <div class="files-layout"> | |
| <div class="files-section"> | |
| <div class="files-header"> | |
| <h3><i class="fas fa-folder-tree"></i> All Files</h3> | |
| <button id="refreshFilesBtn" class="refresh-btn"> | |
| <i class="fas fa-sync"></i> Refresh | |
| </button> | |
| </div> | |
| <div class="files-table-container"> | |
| <table id="filesTable" class="files-table"> | |
| <thead> | |
| <tr> | |
| <th>Filename</th> | |
| <th>Size</th> | |
| <th>Type</th> | |
| <th>Modified</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="filesTableBody"> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="stats-section"> | |
| <div class="stats-card"> | |
| <h3><i class="fas fa-chart-bar"></i> Project Statistics</h3> | |
| <div id="statsDisplay" class="stats-display"></div> | |
| </div> | |
| <div class="export-section"> | |
| <h3><i class="fas fa-download"></i> Export Project</h3> | |
| <div class="export-controls"> | |
| <select id="exportFormat"> | |
| <option value="json">JSON</option> | |
| <option value="zip">ZIP (Simulated)</option> | |
| </select> | |
| <button id="exportBtn" class="export-btn"> | |
| <i class="fas fa-file-export"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="execution-history"> | |
| <h3><i class="fas fa-terminal"></i> Execution History</h3> | |
| <div id="execHistory" class="exec-history"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Tab --> | |
| <div id="settings" class="tab-panel"> | |
| <div class="settings-layout"> | |
| <div class="settings-section"> | |
| <h3><i class="fas fa-palette"></i> Theme Settings</h3> | |
| <div class="setting-group"> | |
| <label for="themeSelect">Theme:</label> | |
| <select id="themeSelect"> | |
| <option value="dark">Dark</option> | |
| <option value="light">Light</option> | |
| <option value="monokai">Monokai</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h3><i class="fas fa-text-height"></i> Editor Settings</h3> | |
| <div class="setting-group"> | |
| <label for="fontSize">Font Size:</label> | |
| <input type="range" id="fontSize" min="10" max="24" value="14"> | |
| <span id="fontSizeValue">14px</span> | |
| </div> | |
| <div class="setting-group"> | |
| <label for="tabSize">Tab Size:</label> | |
| <input type="range" id="tabSize" min="2" max="8" value="4"> | |
| <span id="tabSizeValue">4</span> | |
| </div> | |
| <div class="setting-group"> | |
| <label> | |
| <input type="checkbox" id="lineNumbers" checked> Show Line Numbers | |
| </label> | |
| </div> | |
| <div class="setting-group"> | |
| <label> | |
| <input type="checkbox" id="wordWrap"> Word Wrap | |
| </label> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h3><i class="fas fa-robot"></i> AI Settings</h3> | |
| <div class="setting-group"> | |
| <label for="aiCreativity">AI Creativity:</label> | |
| <input type="range" id="aiCreativity" min="0.1" max="1.0" step="0.1" value="0.7"> | |
| <span id="aiCreativityValue">0.7</span> | |
| </div> | |
| <div class="setting-group"> | |
| <label for="maxTokens">Max Response Length:</label> | |
| <input type="range" id="maxTokens" min="100" max="2000" step="100" value="1000"> | |
| <span id="maxTokensValue">1000</span> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h3><i class="fas fa-undo"></i> Reset Options</h3> | |
| <div class="reset-buttons"> | |
| <button id="resetSettingsBtn" class="reset-btn"> | |
| <i class="fas fa-undo"></i> Reset Settings | |
| </button> | |
| <button id="clearAllBtn" class="clear-all-btn"> | |
| <i class="fas fa-trash-alt"></i> Clear All Data | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="assets/js/codemirror.js"></script> | |
| <script src="assets/js/mode/python/python.js"></script> | |
| <script src="assets/js/mode/javascript/javascript.js"></script> | |
| <script src="assets/js/mode/xml/xml.js"></script> | |
| <script src="assets/js/mode/css/css.js"></script> | |
| <script src="assets/js/mode/htmlmixed/htmlmixed.js"></script> | |
| <script src="assets/js/app.js"></script> | |
| </body> | |
| </html> | |
| === 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; | |
| } | |
| 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; | |
| } | |
| 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 */ | |
| .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 = '<option value="">Select a file...</option>'; | |
| 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 = ` | |
| <div>${new Date(item.timestamp).toLocaleString()}</div> | |
| <div>Language: ${item.language}</div> | |
| <div>Status: ${item.success ? '✅ Success' : '❌ Error'}</div> | |
| `; | |
| 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 ( | |
| <div> | |
| <h1>Hello World</h1> | |
| </div> | |
| ); | |
| } | |
| 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 = ` | |
| <strong>${roleLabel}</strong> | |
| <pre>${content}</pre> | |
| `; | |
| 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 = ` | |
| <strong>${roleLabel}</strong> | |
| <pre>${msg.content}</pre> | |
| `; | |
| 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 ( | |
| <div> | |
| <h1>Hello World</h1> | |
| </div> | |
| ); | |
| } | |
| 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 = ` | |
| <td>${filename}</td> | |
| <td>${size} chars</td> | |
| <td>${type}</td> | |
| <td>${modified}</td> | |
| <td> | |
| <button class="file-action-btn" onclick="ide.loadFile('${filename}')"> | |
| <i class="fas fa-open"></i> Open | |
| </button> | |
| <button class="file-action-btn" onclick="ide.deleteFileByName('${filename}')"> | |
| <i class="fas fa-trash"></i> Delete | |
| </button> | |
| </td> | |
| `; | |
| 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 = ` | |
| <div class="stat-item"> | |
| <span>Total Files:</span> | |
| <span>${totalFiles}</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span>Total Characters:</span> | |
| <span>${totalChars}</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span>Languages:</span> | |
| <span>${languages.join(', ')}</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span>Chat Messages:</span> | |
| <span>${this.chatHistory.length}</span> | |
| </div> | |
| `; | |
| } | |
| 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(); |