| | <!DOCTYPE html> |
| | <html lang="es"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>DeepSeek IDE - Live Code Editor</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css"> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css"> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script> |
| | |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/clike/clike.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/php/php.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/ruby/ruby.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/shell/shell.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/sql/sql.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/swift/swift.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/go/go.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/rust/rust.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closebrackets.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/comment/comment.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/display/placeholder.min.js"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.0.0/diff.min.js"></script> |
| | <style> |
| | .cm-s-dracula .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.1) !important; } |
| | .diff-added { background-color: rgba(40, 167, 69, 0.2); } |
| | .diff-removed { background-color: rgba(220, 53, 69, 0.2); } |
| | .diff-unchanged { opacity: 0.7; } |
| | .CodeMirror { height: 100% !important; font-size: 14px; } |
| | .resize-handle { width: 4px; background: rgba(156, 163, 175, 0.3); cursor: col-resize; } |
| | .resize-handle:hover { background: rgba(156, 163, 175, 0.6); } |
| | #output-container { scrollbar-width: thin; } |
| | #output-container::-webkit-scrollbar { width: 6px; } |
| | #output-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } |
| | #output-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } |
| | .tab-active { border-bottom: 2px solid #3b82f6; color: white !important; } |
| | .CodeMirror pre { padding: 0 8px; } |
| | .file-tab { position: relative; } |
| | .file-tab.active { background-color: rgba(59, 130, 246, 0.2); } |
| | .file-tab-close { visibility: hidden; } |
| | .file-tab:hover .file-tab-close { visibility: visible; } |
| | .history-item:hover { background-color: rgba(55, 65, 81, 0.5); } |
| | .prompt-container { transition: all 0.3s ease; } |
| | .prompt-container.collapsed { height: 40px; overflow: hidden; } |
| | .prompt-toggle { transform: rotate(0deg); transition: transform 0.3s ease; } |
| | .prompt-toggle.collapsed { transform: rotate(180deg); } |
| | .apply-diff-btn { transition: all 0.2s ease; } |
| | .apply-diff-btn:hover { transform: scale(1.05); } |
| | .code-block { position: relative; } |
| | .code-block-copy { position: absolute; top: 0.5rem; right: 0.5rem; opacity: 0; transition: opacity 0.2s ease; } |
| | .code-block:hover .code-block-copy { opacity: 1; } |
| | .ai-cursor { position: absolute; background-color: rgba(59, 130, 246, 0.3); border-left: 2px solid #3b82f6; } |
| | .ai-cursor-label { position: absolute; background-color: #3b82f6; color: white; font-size: 0.75rem; padding: 0.1rem 0.3rem; border-radius: 0.25rem; top: -1.25rem; left: -2px; white-space: nowrap; } |
| | .typewriter-cursor { position: absolute; width: 2px; background-color: #3b82f6; animation: blink 1s infinite; } |
| | @keyframes blink { |
| | 0%, 100% { opacity: 1; } |
| | 50% { opacity: 0; } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900 text-gray-100 h-screen flex flex-col overflow-hidden"> |
| | |
| | <header class="bg-gray-800 px-4 py-3 flex items-center justify-between border-b border-gray-700"> |
| | <div class="flex items-center space-x-2"> |
| | <i class="fas fa-code text-blue-400 text-xl"></i> |
| | <h1 class="text-xl font-bold">DeepSeek IDE</h1> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <div class="relative"> |
| | <input type="password" id="api-key" placeholder="DeepSeek API Key" |
| | class="bg-gray-700 px-3 py-1 rounded text-sm w-64 focus:outline-none focus:ring-1 focus:ring-blue-500"> |
| | <button id="save-key-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-400"> |
| | <i class="fas fa-save"></i> |
| | </button> |
| | </div> |
| | <button id="new-file-btn" class="text-gray-400 hover:text-blue-400 px-2 py-1 rounded text-sm flex items-center"> |
| | <i class="fas fa-plus mr-1"></i> |
| | <span>New</span> |
| | </button> |
| | <button id="analyze-btn" class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded text-sm flex items-center space-x-1"> |
| | <i class="fas fa-play"></i> |
| | <span>Analyze</span> |
| | </button> |
| | </div> |
| | </header> |
| |
|
| | |
| | <div id="prompt-container" class="prompt-container bg-gray-800 border-b border-gray-700 px-4 py-2"> |
| | <div class="flex justify-between items-center cursor-pointer" id="prompt-toggle"> |
| | <h3 class="text-sm font-medium flex items-center"> |
| | <i class="fas fa-comment-dots mr-2 text-blue-400"></i> |
| | Custom Prompt |
| | </h3> |
| | <i class="fas fa-chevron-up prompt-toggle text-gray-400"></i> |
| | </div> |
| | <div class="mt-2"> |
| | <textarea id="custom-prompt" placeholder="Describe what changes you want to make to the code (e.g. 'Optimize this function', 'Fix bugs', 'Explain how it works')..." |
| | class="w-full bg-gray-700 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="flex flex-1 overflow-hidden"> |
| | |
| | <div class="flex-1 flex flex-col border-r border-gray-700 relative"> |
| | <div class="bg-gray-800 px-3 py-2 flex items-center justify-between"> |
| | <div class="flex items-center space-x-2 overflow-x-auto"> |
| | |
| | </div> |
| | <div class="flex items-center space-x-2"> |
| | <select id="language-selector" class="bg-gray-700 text-sm rounded px-2 py-1"> |
| | <option value="javascript">JavaScript</option> |
| | <option value="python">Python</option> |
| | <option value="htmlmixed">HTML</option> |
| | <option value="css">CSS</option> |
| | <option value="text/x-java">Java</option> |
| | <option value="text/x-csrc">C</option> |
| | <option value="text/x-c++src">C++</option> |
| | <option value="text/x-csharp">C#</option> |
| | <option value="text/x-go">Go</option> |
| | <option value="text/x-rustsrc">Rust</option> |
| | <option value="text/x-swift">Swift</option> |
| | <option value="text/x-php">PHP</option> |
| | <option value="text/x-ruby">Ruby</option> |
| | <option value="text/x-sql">SQL</option> |
| | <option value="text/x-sh">Shell</option> |
| | </select> |
| | <button id="format-btn" class="text-gray-400 hover:text-blue-400 text-sm"> |
| | <i class="fas fa-align-left mr-1"></i>Format |
| | </button> |
| | <button id="clear-btn" class="text-gray-400 hover:text-red-400 text-sm"> |
| | <i class="fas fa-trash-alt mr-1"></i>Clear |
| | </button> |
| | </div> |
| | </div> |
| | <div id="editor" class="flex-1"></div> |
| | <div id="ai-cursor-container"></div> |
| | </div> |
| |
|
| | |
| | <div class="resize-handle"></div> |
| |
|
| | |
| | <div class="w-1/3 flex flex-col bg-gray-800"> |
| | <div class="bg-gray-800 px-3 py-2 flex border-b border-gray-700"> |
| | <button data-tab="diffs" class="tab-active px-3 py-1 text-sm font-medium"> |
| | <i class="fas fa-code-compare mr-1"></i>Diffs |
| | </button> |
| | <button data-tab="response" class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-white"> |
| | <i class="fas fa-robot mr-1"></i>AI Response |
| | </button> |
| | <button data-tab="history" class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-white"> |
| | <i class="fas fa-history mr-1"></i>History |
| | </button> |
| | <button data-tab="console" class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-white"> |
| | <i class="fas fa-terminal mr-1"></i>Console |
| | </button> |
| | </div> |
| | <div id="output-container" class="flex-1 overflow-auto p-4"> |
| | <div id="diff-container" class="tab-content active"> |
| | <div class="text-center text-gray-500 py-8"> |
| | <i class="fas fa-code-compare text-3xl mb-2"></i> |
| | <p>Make changes to your code to see the differences here</p> |
| | </div> |
| | </div> |
| | <div id="response-container" class="tab-content hidden"> |
| | <div class="text-center text-gray-500 py-8"> |
| | <i class="fas fa-robot text-3xl mb-2"></i> |
| | <p>Click "Analyze" to get AI feedback on your code</p> |
| | </div> |
| | </div> |
| | <div id="history-container" class="tab-content hidden"> |
| | <div class="text-center text-gray-500 py-8"> |
| | <i class="fas fa-history text-3xl mb-2"></i> |
| | <p>Your analysis history will appear here</p> |
| | </div> |
| | </div> |
| | <div id="console-output" class="tab-content hidden"> |
| | <div class="text-center text-gray-500 py-8"> |
| | <i class="fas fa-terminal text-3xl mb-2"></i> |
| | <p>Console output will appear here</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | // File system and state management |
| | const state = { |
| | files: { |
| | 'script.js': { |
| | content: `// Ejemplo de función en JavaScript |
| | function saludar(nombre) { |
| | return \`Hola, \${nombre}!\`; |
| | } |
| | |
| | console.log(saludar("Mundo"));`, |
| | language: 'javascript', |
| | lastContent: '' |
| | } |
| | }, |
| | currentFile: 'script.js', |
| | history: [], |
| | apiKey: localStorage.getItem('deepseek-api-key') || '', |
| | promptCollapsed: localStorage.getItem('prompt-collapsed') === 'true', |
| | proposedChanges: null, |
| | isApplyingChanges: false, |
| | typewriterInterval: null |
| | }; |
| | |
| | // Language mode mapping |
| | const languageModes = { |
| | 'javascript': 'javascript', |
| | 'python': 'python', |
| | 'html': 'htmlmixed', |
| | 'css': 'css', |
| | 'java': 'text/x-java', |
| | 'c': 'text/x-csrc', |
| | 'cpp': 'text/x-c++src', |
| | 'csharp': 'text/x-csharp', |
| | 'go': 'text/x-go', |
| | 'rust': 'text/x-rustsrc', |
| | 'swift': 'text/x-swift', |
| | 'php': 'text/x-php', |
| | 'ruby': 'text/x-ruby', |
| | 'sql': 'text/x-sql', |
| | 'sh': 'text/x-sh', |
| | 'htmlmixed': 'htmlmixed' |
| | }; |
| | |
| | // Initialize CodeMirror editor |
| | const editor = CodeMirror(document.getElementById('editor'), { |
| | mode: 'javascript', |
| | theme: 'dracula', |
| | lineNumbers: true, |
| | indentUnit: 4, |
| | tabSize: 4, |
| | lineWrapping: true, |
| | autoCloseBrackets: true, |
| | matchBrackets: true, |
| | extraKeys: { |
| | 'Ctrl-Enter': analyzeCode, |
| | 'Cmd-Enter': analyzeCode, |
| | 'Ctrl-/': 'toggleComment', |
| | 'Cmd-/': 'toggleComment', |
| | 'Shift-Ctrl-F': formatCode, |
| | 'Shift-Cmd-F': formatCode |
| | }, |
| | placeholder: '// Escribe tu código aquí...\n// Presiona Ctrl+Enter o Cmd+Enter para analizar' |
| | }); |
| | |
| | // Initialize the UI |
| | function initUI() { |
| | // Load API key if exists |
| | document.getElementById('api-key').value = state.apiKey; |
| | |
| | // Set up file tabs |
| | renderFileTabs(); |
| | loadFile(state.currentFile); |
| | |
| | // Set up language selector |
| | document.getElementById('language-selector').value = state.files[state.currentFile].language; |
| | |
| | // Set up initial diff |
| | updateDiff(); |
| | |
| | // Set up prompt toggle |
| | setupPromptToggle(); |
| | |
| | // Load custom prompt if exists |
| | const savedPrompt = localStorage.getItem('custom-prompt'); |
| | if (savedPrompt) { |
| | document.getElementById('custom-prompt').value = savedPrompt; |
| | } |
| | } |
| | |
| | // File management functions |
| | function renderFileTabs() { |
| | const tabsContainer = document.querySelector('.bg-gray-800 > div:first-child'); |
| | tabsContainer.innerHTML = ''; |
| | |
| | Object.keys(state.files).forEach(filename => { |
| | const isActive = filename === state.currentFile; |
| | const tab = document.createElement('div'); |
| | tab.className = `file-tab flex items-center px-3 py-1 rounded-t text-sm cursor-pointer mr-1 ${isActive ? 'active' : ''}`; |
| | tab.innerHTML = ` |
| | <span>${filename}</span> |
| | <button class="file-tab-close ml-2 text-gray-400 hover:text-red-400" data-file="${filename}"> |
| | <i class="fas fa-times text-xs"></i> |
| | </button> |
| | `; |
| | |
| | tab.addEventListener('click', () => switchFile(filename)); |
| | |
| | const closeBtn = tab.querySelector('.file-tab-close'); |
| | closeBtn.addEventListener('click', (e) => { |
| | e.stopPropagation(); |
| | closeFile(filename); |
| | }); |
| | |
| | tabsContainer.appendChild(tab); |
| | }); |
| | } |
| | |
| | function switchFile(filename) { |
| | if (filename === state.currentFile) return; |
| | |
| | // Save current file content |
| | state.files[state.currentFile].content = editor.getValue(); |
| | |
| | // Switch to new file |
| | state.currentFile = filename; |
| | loadFile(filename); |
| | |
| | // Update UI |
| | renderFileTabs(); |
| | document.getElementById('language-selector').value = state.files[filename].language; |
| | } |
| | |
| | function loadFile(filename) { |
| | const file = state.files[filename]; |
| | editor.setValue(file.content); |
| | |
| | // Set the editor mode based on file extension |
| | const mode = languageModes[file.language] || 'javascript'; |
| | editor.setOption('mode', mode); |
| | |
| | // Store the original content for diff |
| | file.lastContent = file.content; |
| | } |
| | |
| | function createNewFile() { |
| | const filename = prompt('Enter new file name (include extension):', 'newfile.js'); |
| | if (!filename) return; |
| | |
| | // Determine language from extension |
| | const extension = filename.split('.').pop().toLowerCase(); |
| | let language = 'javascript'; |
| | |
| | if (extension === 'py') language = 'python'; |
| | else if (extension === 'html') language = 'htmlmixed'; |
| | else if (extension === 'css') language = 'css'; |
| | else if (extension === 'java') language = 'text/x-java'; |
| | else if (extension === 'c') language = 'text/x-csrc'; |
| | else if (extension === 'cpp' || extension === 'c++') language = 'text/x-c++src'; |
| | else if (extension === 'cs') language = 'text/x-csharp'; |
| | else if (extension === 'go') language = 'text/x-go'; |
| | else if (extension === 'rs') language = 'text/x-rustsrc'; |
| | else if (extension === 'swift') language = 'text/x-swift'; |
| | else if (extension === 'php') language = 'text/x-php'; |
| | else if (extension === 'rb') language = 'text/x-ruby'; |
| | else if (extension === 'sql') language = 'text/x-sql'; |
| | else if (extension === 'sh') language = 'text/x-sh'; |
| | |
| | state.files[filename] = { |
| | content: '', |
| | language: language, |
| | lastContent: '' |
| | }; |
| | |
| | state.currentFile = filename; |
| | renderFileTabs(); |
| | loadFile(filename); |
| | document.getElementById('language-selector').value = language; |
| | } |
| | |
| | function closeFile(filename) { |
| | if (Object.keys(state.files).length <= 1) { |
| | alert('You must have at least one file open'); |
| | return; |
| | } |
| | |
| | delete state.files[filename]; |
| | |
| | // Switch to another file |
| | const remainingFiles = Object.keys(state.files); |
| | state.currentFile = remainingFiles[0]; |
| | |
| | renderFileTabs(); |
| | loadFile(state.currentFile); |
| | } |
| | |
| | // Language selector |
| | document.getElementById('language-selector').addEventListener('change', (e) => { |
| | const language = e.target.value; |
| | state.files[state.currentFile].language = language; |
| | |
| | // Set the editor mode |
| | const mode = languageModes[language] || 'javascript'; |
| | editor.setOption('mode', mode); |
| | }); |
| | |
| | // Prompt toggle functionality |
| | function setupPromptToggle() { |
| | const promptContainer = document.getElementById('prompt-container'); |
| | const promptToggle = document.getElementById('prompt-toggle'); |
| | const toggleIcon = promptToggle.querySelector('.prompt-toggle'); |
| | |
| | if (state.promptCollapsed) { |
| | promptContainer.classList.add('collapsed'); |
| | toggleIcon.classList.add('collapsed'); |
| | } |
| | |
| | promptToggle.addEventListener('click', () => { |
| | promptContainer.classList.toggle('collapsed'); |
| | toggleIcon.classList.toggle('collapsed'); |
| | state.promptCollapsed = !state.promptCollapsed; |
| | localStorage.setItem('prompt-collapsed', state.promptCollapsed); |
| | }); |
| | } |
| | |
| | // Tab switching functionality |
| | document.querySelectorAll('[data-tab]').forEach(tab => { |
| | tab.addEventListener('click', () => { |
| | // Update active tab |
| | document.querySelectorAll('[data-tab]').forEach(t => { |
| | t.classList.remove('tab-active'); |
| | t.classList.add('text-gray-400'); |
| | }); |
| | tab.classList.add('tab-active'); |
| | tab.classList.remove('text-gray-400'); |
| | |
| | // Show corresponding content |
| | const tabId = tab.getAttribute('data-tab'); |
| | document.querySelectorAll('.tab-content').forEach(content => { |
| | content.classList.add('hidden'); |
| | content.classList.remove('active'); |
| | }); |
| | |
| | const contentId = `${tabId}-container`; |
| | document.getElementById(contentId).classList.remove('hidden'); |
| | document.getElementById(contentId).classList.add('active'); |
| | }); |
| | }); |
| | |
| | // Button functionality |
| | document.getElementById('clear-btn').addEventListener('click', () => { |
| | if (confirm('¿Estás seguro de que quieres borrar todo el código?')) { |
| | editor.setValue(''); |
| | state.files[state.currentFile].content = ''; |
| | updateDiff(); |
| | } |
| | }); |
| | |
| | document.getElementById('format-btn').addEventListener('click', formatCode); |
| | document.getElementById('new-file-btn').addEventListener('click', createNewFile); |
| | document.getElementById('analyze-btn').addEventListener('click', analyzeCode); |
| | document.getElementById('save-key-btn').addEventListener('click', () => { |
| | const apiKey = document.getElementById('api-key').value; |
| | state.apiKey = apiKey; |
| | localStorage.setItem('deepseek-api-key', apiKey); |
| | showToast('API Key guardada localmente'); |
| | }); |
| | |
| | // Save custom prompt when changed |
| | document.getElementById('custom-prompt').addEventListener('change', (e) => { |
| | localStorage.setItem('custom-prompt', e.target.value); |
| | }); |
| | |
| | // Resize functionality |
| | const resizeHandle = document.querySelector('.resize-handle'); |
| | const editorPanel = document.querySelector('.flex-1.flex-col'); |
| | const outputPanel = document.querySelector('.w-1\\/3'); |
| | |
| | let isResizing = false; |
| | |
| | resizeHandle.addEventListener('mousedown', (e) => { |
| | isResizing = true; |
| | document.body.style.cursor = 'col-resize'; |
| | e.preventDefault(); |
| | }); |
| | |
| | document.addEventListener('mousemove', (e) => { |
| | if (!isResizing) return; |
| | |
| | const containerWidth = document.querySelector('.flex-1.overflow-hidden').clientWidth; |
| | const newEditorWidth = e.clientX; |
| | const newOutputWidth = containerWidth - e.clientX - 4; // 4px for the resize handle |
| | |
| | editorPanel.style.width = `${newEditorWidth}px`; |
| | outputPanel.style.width = `${newOutputWidth}px`; |
| | |
| | editor.refresh(); |
| | }); |
| | |
| | document.addEventListener('mouseup', () => { |
| | isResizing = false; |
| | document.body.style.cursor = ''; |
| | }); |
| | |
| | // Code formatting |
| | function formatCode() { |
| | const code = editor.getValue(); |
| | const language = state.files[state.currentFile].language; |
| | |
| | // Basic formatting for different languages |
| | let formattedCode = code; |
| | |
| | if (language === 'javascript' || language === 'text/x-java' || language === 'text/x-csharp') { |
| | formattedCode = formatCurlyBraceLanguage(code); |
| | } else if (language === 'python') { |
| | formattedCode = formatPython(code); |
| | } else if (language === 'htmlmixed') { |
| | formattedCode = formatHtml(code); |
| | } else if (language === 'css') { |
| | formattedCode = formatCss(code); |
| | } |
| | |
| | editor.setValue(formattedCode); |
| | showToast('Formato básico aplicado'); |
| | } |
| | |
| | function formatCurlyBraceLanguage(code) { |
| | const lines = code.split('\n'); |
| | let formattedCode = ''; |
| | let indentLevel = 0; |
| | |
| | for (const line of lines) { |
| | const trimmedLine = line.trim(); |
| | |
| | // Decrease indent if line closes a block |
| | if (trimmedLine.endsWith('}') || trimmedLine.endsWith(');')) { |
| | indentLevel = Math.max(0, indentLevel - 1); |
| | } |
| | |
| | // Add current indentation |
| | formattedCode += ' '.repeat(indentLevel) + trimmedLine + '\n'; |
| | |
| | // Increase indent if line opens a block |
| | if (trimmedLine.endsWith('{') || (trimmedLine.endsWith('(') && !trimmedLine.endsWith(');'))) { |
| | indentLevel += 1; |
| | } |
| | } |
| | |
| | return formattedCode.trim(); |
| | } |
| | |
| | function formatPython(code) { |
| | // Very basic Python formatting |
| | const lines = code.split('\n'); |
| | let formattedCode = ''; |
| | let indentLevel = 0; |
| | |
| | for (const line of lines) { |
| | const trimmedLine = line.trim(); |
| | |
| | // Decrease indent if line starts with dedent keywords |
| | if (trimmedLine.startsWith('return') || trimmedLine.startsWith('pass') || |
| | trimmedLine.startsWith('break') || trimmedLine.startsWith('continue') || |
| | trimmedLine.startsWith('raise')) { |
| | indentLevel = Math.max(0, indentLevel - 1); |
| | } |
| | |
| | // Add current indentation |
| | formattedCode += ' '.repeat(indentLevel) + trimmedLine + '\n'; |
| | |
| | // Increase indent if line ends with colon |
| | if (trimmedLine.endsWith(':')) { |
| | indentLevel += 1; |
| | } |
| | } |
| | |
| | return formattedCode.trim(); |
| | } |
| | |
| | function formatHtml(code) { |
| | // Basic HTML formatting |
| | const lines = code.split('\n'); |
| | let formattedCode = ''; |
| | let indentLevel = 0; |
| | |
| | for (const line of lines) { |
| | const trimmedLine = line.trim(); |
| | |
| | // Decrease indent for closing tags |
| | if (trimmedLine.startsWith('</')) { |
| | indentLevel = Math.max(0, indentLevel - 1); |
| | } |
| | |
| | // Add current indentation |
| | formattedCode += ' '.repeat(indentLevel) + trimmedLine + '\n'; |
| | |
| | // Increase indent for opening tags (unless they're self-closing) |
| | if (trimmedLine.startsWith('<') && !trimmedLine.startsWith('<!') && |
| | !trimmedLine.endsWith('/>') && !trimmedLine.includes('</')) { |
| | indentLevel += 1; |
| | } |
| | } |
| | |
| | return formattedCode.trim(); |
| | } |
| | |
| | function formatCss(code) { |
| | // Basic CSS formatting |
| | const lines = code.split('\n'); |
| | let formattedCode = ''; |
| | let indentLevel = 0; |
| | |
| | for (const line of lines) { |
| | const trimmedLine = line.trim(); |
| | |
| | // Decrease indent after closing brace |
| | if (trimmedLine.endsWith('}')) { |
| | indentLevel = Math.max(0, indentLevel - 1); |
| | } |
| | |
| | // Add current indentation |
| | formattedCode += ' '.repeat(indentLevel) + trimmedLine + '\n'; |
| | |
| | // Increase indent after opening brace |
| | if (trimmedLine.endsWith('{')) { |
| | indentLevel += 1; |
| | } |
| | } |
| | |
| | return formattedCode.trim(); |
| | } |
| | |
| | // Diff functionality |
| | function updateDiff() { |
| | const currentFile = state.files[state.currentFile]; |
| | const oldContent = currentFile.lastContent; |
| | const newContent = editor.getValue(); |
| | |
| | if (oldContent === newContent) return; |
| | |
| | const diff = Diff.diffLines(oldContent, newContent); |
| | const diffContainer = document.getElementById('diff-container'); |
| | |
| | let html = '<div class="font-mono text-sm">'; |
| | |
| | diff.forEach((part) => { |
| | const lines = part.value.split('\n'); |
| | if (lines[lines.length - 1] === '') lines.pop(); |
| | |
| | const className = part.added ? 'diff-added' : part.removed ? 'diff-removed' : 'diff-unchanged'; |
| | |
| | lines.forEach(line => { |
| | if (line.trim() === '') return; |
| | html += `<div class="${className} px-2 py-1 my-1 rounded">${escapeHtml(line)}</div>`; |
| | }); |
| | }); |
| | |
| | html += '</div>'; |
| | diffContainer.innerHTML = html; |
| | |
| | // Update last content if not empty |
| | if (newContent.trim() !== '') { |
| | currentFile.lastContent = newContent; |
| | } |
| | } |
| | |
| | // Show AI cursor in the editor |
| | function showAICursor(line, ch, length, label = 'AI') { |
| | const cursorContainer = document.getElementById('ai-cursor-container'); |
| | cursorContainer.innerHTML = ''; |
| | |
| | const lineHeight = editor.defaultTextHeight(); |
| | const charWidth = editor.defaultCharWidth(); |
| | |
| | const cursor = document.createElement('div'); |
| | cursor.className = 'ai-cursor'; |
| | cursor.style.top = `${line * lineHeight}px`; |
| | cursor.style.left = `${ch * charWidth}px`; |
| | cursor.style.height = `${lineHeight}px`; |
| | cursor.style.width = `${length * charWidth}px`; |
| | |
| | const cursorLabel = document.createElement('div'); |
| | cursorLabel.className = 'ai-cursor-label'; |
| | cursorLabel.textContent = label; |
| | |
| | cursor.appendChild(cursorLabel); |
| | cursorContainer.appendChild(cursor); |
| | } |
| | |
| | // Typewriter effect for applying changes |
| | function applyChangesWithTypewriter(newCode, callback) { |
| | const currentCode = editor.getValue(); |
| | const cursor = editor.getCursor(); |
| | |
| | // Clear any existing interval |
| | if (state.typewriterInterval) { |
| | clearInterval(state.typewriterInterval); |
| | } |
| | |
| | // Set the new code immediately but keep track for animation |
| | editor.setValue(newCode); |
| | |
| | // Move cursor to the first change position |
| | const diff = Diff.diffLines(currentCode, newCode); |
| | let firstChangePos = {line: 0, ch: 0}; |
| | |
| | for (let i = 0; i < diff.length; i++) { |
| | if (diff[i].added) { |
| | const lines = newCode.split('\n'); |
| | for (let j = 0; j < lines.length; j++) { |
| | if (lines[j].includes(diff[i].value.trim())) { |
| | firstChangePos = {line: j, ch: 0}; |
| | break; |
| | } |
| | } |
| | break; |
| | } |
| | } |
| | |
| | editor.setCursor(firstChangePos); |
| | |
| | // Add typewriter cursor effect |
| | const typewriterCursor = document.createElement('div'); |
| | typewriterCursor.className = 'typewriter-cursor'; |
| | typewriterCursor.style.top = `${firstChangePos.line * editor.defaultTextHeight()}px`; |
| | typewriterCursor.style.left = `${firstChangePos.ch * editor.defaultCharWidth()}px`; |
| | typewriterCursor.style.height = `${editor.defaultTextHeight()}px`; |
| | document.getElementById('ai-cursor-container').appendChild(typewriterCursor); |
| | |
| | // Remove cursor after animation |
| | setTimeout(() => { |
| | typewriterCursor.remove(); |
| | if (callback) callback(); |
| | }, 1000); |
| | } |
| | |
| | // Analysis function with real API integration |
| | async function analyzeCode() { |
| | const code = editor.getValue(); |
| | const apiKey = state.apiKey; |
| | const customPrompt = document.getElementById('custom-prompt').value; |
| | |
| | if (!code.trim()) { |
| | showToast('Please enter some code to analyze', 'error'); |
| | return; |
| | } |
| | |
| | if (!apiKey) { |
| | showToast('Please enter your DeepSeek API key', 'error'); |
| | return; |
| | } |
| | |
| | // Save current content |
| | state.files[state.currentFile].content = code; |
| | |
| | // Show loading state |
| | const responseContainer = document.getElementById('response-container'); |
| | responseContainer.innerHTML = ` |
| | <div class="flex flex-col items-center justify-center py-8"> |
| | <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div> |
| | <p>Analizando tu código...</p> |
| | </div> |
| | `; |
| | |
| | // Switch to response tab |
| | document.querySelector('[data-tab="response"]').click(); |
| | |
| | try { |
| | const messages = [ |
| | { |
| | role: "system", |
| | content: `You are a helpful code assistant. Analyze the provided code and respond with: |
| | 1. An explanation of what the code does |
| | 2. Suggestions for improvement |
| | 3. A modified version of the code with improvements |
| | 4. A clear markdown formatted response with code blocks |
| | |
| | Important: When providing the modified code, include the ENTIRE code file with all changes applied, not just the modified parts. This is crucial for the diff tool to work properly. |
| | |
| | Format your response like this: |
| | ### Analysis |
| | [Explanation of the code] |
| | |
| | ### Suggestions |
| | [Bullet points with improvement suggestions] |
| | |
| | ### Improved Code |
| | \`\`\`[language] |
| | [Complete modified code here] |
| | \`\`\` |
| | |
| | Additional notes: |
| | - Respond in the same language as the code comments |
| | - Preserve all original functionality |
| | - Include any necessary imports or boilerplate` |
| | } |
| | ]; |
| | |
| | // Add custom prompt if provided |
| | if (customPrompt.trim()) { |
| | messages.push({ |
| | role: "user", |
| | content: customPrompt |
| | }); |
| | } |
| | |
| | // Add the code to analyze |
| | messages.push({ |
| | role: "user", |
| | content: `Here is my ${state.files[state.currentFile].language} code:\n\n${code}` |
| | }); |
| | |
| | const response = await fetch('https://api.deepseek.com/v1/chat/completions', { |
| | method: 'POST', |
| | headers: { |
| | 'Content-Type': 'application/json', |
| | 'Authorization': `Bearer ${apiKey}` |
| | }, |
| | body: JSON.stringify({ |
| | model: "deepseek-coder", |
| | messages: messages, |
| | temperature: 0.7, |
| | max_tokens: 2000 |
| | }) |
| | }); |
| | |
| | if (!response.ok) { |
| | throw new Error(`API request failed with status ${response.status}`); |
| | } |
| | |
| | const data = await response.json(); |
| | const aiResponse = data.choices[0].message.content; |
| | |
| | // Extract the improved code from the response |
| | const improvedCodeMatch = aiResponse.match(/```(?:[a-zA-Z]*)\n([\s\S]*?)```/); |
| | let improvedCode = improvedCodeMatch ? improvedCodeMatch[1] : null; |
| | |
| | // Add to history |
| | state.history.unshift({ |
| | timestamp: new Date().toISOString(), |
| | code: code, |
| | response: aiResponse, |
| | prompt: customPrompt, |
| | improvedCode: improvedCode |
| | }); |
| | |
| | // Update history tab |
| | renderHistory(); |
| | |
| | // Format the response as HTML |
| | responseContainer.innerHTML = ` |
| | <div class="prose prose-invert max-w-none"> |
| | ${formatAIResponse(aiResponse)} |
| | ${improvedCode ? ` |
| | <div class="mt-6 flex space-x-3"> |
| | <button id="show-diff-btn" class="bg-blue-600 hover:bg-blue-700 px-3 py-2 rounded text-sm flex items-center space-x-1"> |
| | <i class="fas fa-code-compare mr-1"></i> |
| | <span>Show Changes</span> |
| | </button> |
| | <button id="apply-changes-btn" class="bg-green-600 hover:bg-green-700 px-3 py-2 rounded text-sm flex items-center space-x-1"> |
| | <i class="fas fa-magic mr-1"></i> |
| | <span>Apply Changes</span> |
| | </button> |
| | </div> |
| | ` : ''} |
| | </div> |
| | `; |
| | |
| | // Add event listeners for buttons |
| | if (improvedCode) { |
| | document.getElementById('show-diff-btn').addEventListener('click', () => { |
| | showProposedDiff(code, improvedCode); |
| | }); |
| | |
| | document.getElementById('apply-changes-btn').addEventListener('click', () => { |
| | applyChangesWithTypewriter(improvedCode, () => { |
| | state.files[state.currentFile].content = improvedCode; |
| | state.files[state.currentFile].lastContent = improvedCode; |
| | showToast('Changes applied successfully'); |
| | }); |
| | }); |
| | } |
| | |
| | showToast('Analysis completed successfully'); |
| | } catch (error) { |
| | console.error('API Error:', error); |
| | responseContainer.innerHTML = ` |
| | <div class="bg-red-900/30 p-4 rounded border border-red-700"> |
| | <h3 class="text-red-400 font-bold">Error</h3> |
| | <p>${escapeHtml(error.message)}</p> |
| | <p class="mt-2 text-sm">Please check your API key and network connection.</p> |
| | </div> |
| | `; |
| | showToast('Analysis failed', 'error'); |
| | } |
| | } |
| | |
| | function formatAIResponse(text) { |
| | // Improved formatting with copy buttons for code blocks |
| | let html = escapeHtml(text) |
| | .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') |
| | .replace(/\*(.*?)\*/g, '<em>$1</em>') |
| | .replace(/```(\w*)\n([\s\S]*?)```/g, (match, language, code) => { |
| | return ` |
| | <div class="code-block bg-gray-700 rounded my-3 relative"> |
| | <button class="code-block-copy bg-gray-600 hover:bg-gray-500 text-white text-xs px-2 py-1 rounded" |
| | onclick="navigator.clipboard.writeText(\`${escapeHtml(code).replace(/`/g, '\\`')}\`)"> |
| | <i class="fas fa-copy mr-1"></i>Copy |
| | </button> |
| | <pre class="p-3 overflow-x-auto"><code>${escapeHtml(code)}</code></pre> |
| | </div> |
| | `; |
| | }) |
| | .replace(/`(.*?)`/g, '<code class="bg-gray-700 px-1 rounded">$1</code>') |
| | .replace(/\n/g, '<br>'); |
| | |
| | return html; |
| | } |
| | |
| | function renderHistory() { |
| | const historyContainer = document.getElementById('history-container'); |
| | |
| | if (state.history.length === 0) { |
| | historyContainer.innerHTML = ` |
| | <div class="text-center text-gray-500 py-8"> |
| | <i class="fas fa-history text-3xl mb-2"></i> |
| | <p>No analysis history yet</p> |
| | </div> |
| | `; |
| | return; |
| | } |
| | |
| | let html = '<div class="space-y-4">'; |
| | |
| | state.history.forEach((item, index) => { |
| | const date = new Date(item.timestamp); |
| | const formattedDate = date.toLocaleString(); |
| | |
| | html += ` |
| | <div class="history-item bg-gray-700/50 p-3 rounded-lg cursor-pointer" data-index="${index}"> |
| | <div class="flex justify-between items-center mb-2"> |
| | <span class="text-sm font-medium">Analysis #${state.history.length - index}</span> |
| | <span class="text-xs text-gray-400">${formattedDate}</span> |
| | </div> |
| | ${item.prompt ? `<div class="text-xs text-blue-400 mb-1">Prompt: "${escapeHtml(item.prompt.substring(0, 50))}${item.prompt.length > 50 ? '...' : ''}"</div>` : ''} |
| | <div class="text-sm text-gray-300 truncate">${escapeHtml(item.response.substring(0, 100))}...</div> |
| | ${item.improvedCode ? `<div class="mt-2 text-xs text-green-400">Contains code modifications</div>` : ''} |
| | </div> |
| | `; |
| | }); |
| | |
| | html += '</div>'; |
| | historyContainer.innerHTML = html; |
| | |
| | // Add click handlers to history items |
| | document.querySelectorAll('.history-item').forEach(item => { |
| | item.addEventListener('click', () => { |
| | const index = item.getAttribute('data-index'); |
| | const historyItem = state.history[index]; |
| | |
| | document.getElementById('response-container').innerHTML = ` |
| | <div class="prose prose-invert max-w-none"> |
| | <div class="flex justify-between items-center mb-4"> |
| | <h3>Analysis from ${new Date(historyItem.timestamp).toLocaleString()}</h3> |
| | <div class="flex space-x-2"> |
| | <button id="load-code-btn" class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-xs"> |
| | <i class="fas fa-code mr-1"></i>Load Code |
| | </button> |
| | ${historyItem.improvedCode ? ` |
| | <button id="apply-history-changes-btn" class="bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-xs"> |
| | <i class="fas fa-magic mr-1"></i>Apply Changes |
| | </button> |
| | ` : ''} |
| | </div> |
| | </div> |
| | ${historyItem.prompt ? `<div class="bg-gray-700/50 p-3 rounded mb-4"> |
| | <h4 class="text-blue-400 font-medium mb-1">Prompt:</h4> |
| | <p>${escapeHtml(historyItem.prompt)}</p> |
| | </div>` : ''} |
| | ${formatAIResponse(historyItem.response)} |
| | </div> |
| | `; |
| | |
| | // Add handler for load code button |
| | document.getElementById('load-code-btn').addEventListener('click', () => { |
| | editor.setValue(historyItem.code); |
| | if (historyItem.prompt) { |
| | document.getElementById('custom-prompt').value = historyItem.prompt; |
| | localStorage.setItem('custom-prompt', historyItem.prompt); |
| | } |
| | showToast('Code loaded from history'); |
| | }); |
| | |
| | // Add handler for apply changes button |
| | if (historyItem.improvedCode) { |
| | document.getElementById('apply-history-changes-btn').addEventListener('click', () => { |
| | applyChangesWithTypewriter(historyItem.improvedCode, () => { |
| | state.files[state.currentFile].content = historyItem.improvedCode; |
| | state.files[state.currentFile].lastContent = historyItem.improvedCode; |
| | showToast('Changes applied successfully'); |
| | }); |
| | }); |
| | } |
| | |
| | document.querySelector('[data-tab="response"]').click(); |
| | }); |
| | }); |
| | } |
| | |
| | // Helper functions |
| | function escapeHtml(unsafe) { |
| | return unsafe |
| | .replace(/&/g, "&") |
| | .replace(/</g, "<") |
| | .replace(/>/g, ">") |
| | .replace(/"/g, """) |
| | .replace(/'/g, "'"); |
| | } |
| | |
| | function showToast(message, type = 'success') { |
| | const toast = document.createElement('div'); |
| | toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-lg ${ |
| | type === 'success' ? 'bg-green-600' : 'bg-red-600' |
| | } text-white animate-fade-in`; |
| | toast.textContent = message; |
| | document.body.appendChild(toast); |
| | |
| | setTimeout(() => { |
| | toast.classList.remove('animate-fade-in'); |
| | toast.classList.add('animate-fade-out'); |
| | setTimeout(() => toast.remove(), 300); |
| | }, 3000); |
| | } |
| | |
| | // Auto-save and diff updates |
| | editor.on('change', () => { |
| | updateDiff(); |
| | |
| | // Auto-save every 5 seconds |
| | clearTimeout(window.autoSaveTimer); |
| | window.autoSaveTimer = setTimeout(() => { |
| | state.files[state.currentFile].content = editor.getValue(); |
| | }, 5000); |
| | }); |
| | |
| | // Initialize the app |
| | initUI(); |
| | |
| | // Add some CSS animations |
| | const style = document.createElement('style'); |
| | style.textContent = ` |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(10px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | @keyframes fadeOut { |
| | from { opacity: 1; transform: translateY(0); } |
| | to { opacity: 0; transform: translateY(10px); } |
| | } |
| | .animate-fade-in { |
| | animation: fadeIn 0.3s ease-out forwards; |
| | } |
| | .animate-fade-out { |
| | animation: fadeOut 0.3s ease-out forwards; |
| | } |
| | `; |
| | document.head.appendChild(style); |
| | </script> |
| | </body> |
| | </html> |
| |
|
