Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Code Corrector & Modifier</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .code-editor { | |
| font-family: 'Fira Code', 'Courier New', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| .suggestion-highlight { | |
| background-color: rgba(255, 255, 0, 0.3); | |
| border-bottom: 2px dashed orange; | |
| } | |
| .diff-added { | |
| background-color: rgba(0, 255, 0, 0.2); | |
| } | |
| .diff-removed { | |
| background-color: rgba(255, 0, 0, 0.2); | |
| text-decoration: line-through; | |
| } | |
| .tab-button.active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| #editor { | |
| height: 400px; | |
| } | |
| #suggestions-container { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-2xl font-bold"><i class="fas fa-code mr-3"></i>Code Corrector & Modifier</h1> | |
| <p class="mt-2 opacity-90">Analyze, correct and improve your code with AI assistance</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="analyze-btn" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-blue-50 transition flex items-center"> | |
| <i class="fas fa-magic mr-2"></i> Analyze Code | |
| </button> | |
| <button id="export-btn" class="bg-blue-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-900 transition flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6"> | |
| <!-- Left Column - Code Editor --> | |
| <div class="lg:col-span-2 space-y-4"> | |
| <div class="flex border-b"> | |
| <button class="tab-button active px-4 py-2" data-tab="editor">Editor</button> | |
| <button class="tab-button px-4 py-2" data-tab="diff">Diff View</button> | |
| <button class="tab-button px-4 py-2" data-tab="preview">Preview</button> | |
| </div> | |
| <div id="editor-tab" class="tab-content"> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-4 py-2 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-code mr-2"></i> | |
| <span>main.js</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-300 hover:text-white" title="Format Code"> | |
| <i class="fas fa-align-left"></i> | |
| </button> | |
| <button class="text-gray-300 hover:text-white" title="Settings"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <textarea id="editor" class="w-full p-4 code-editor bg-gray-900 text-gray-100 outline-none resize-none" spellcheck="false">// Sample code to analyze | |
| function calculateTotal(items, taxRate) { | |
| let total = 0; | |
| for (let i = 0; i < items.length; i++) { | |
| total += items[i].price; | |
| } | |
| total += total * taxRate; | |
| return total; | |
| } | |
| const items = [ | |
| { name: 'Book', price: 15 }, | |
| { name: 'Pen', price: 3.5 }, | |
| { name: 'Notebook', price: 8 } | |
| ]; | |
| const totalWithTax = calculateTotal(items, 0.1); | |
| console.log('Total with tax:', totalWithTax);</textarea> | |
| </div> | |
| </div> | |
| <div id="diff-tab" class="tab-content hidden"> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-4 py-2"> | |
| <i class="fas fa-code-compare mr-2"></i> | |
| <span>Code Differences</span> | |
| </div> | |
| <div id="diff-view" class="p-4 bg-gray-100 text-gray-800 code-editor whitespace-pre"> | |
| <!-- Diff content will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="preview-tab" class="tab-content hidden"> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-4 py-2"> | |
| <i class="fas fa-eye mr-2"></i> | |
| <span>Code Preview</span> | |
| </div> | |
| <div id="preview-content" class="p-4 bg-gray-100 text-gray-800 code-editor"> | |
| <!-- Preview content will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Suggestions --> | |
| <div class="space-y-4"> | |
| <div class="bg-white border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-100 px-4 py-3 border-b flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800"> | |
| <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Suggestions | |
| </h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full" id="suggestion-count">0</span> | |
| <button id="apply-all-btn" class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded hover:bg-green-200 transition"> | |
| Apply All | |
| </button> | |
| </div> | |
| </div> | |
| <div id="suggestions-container" class="p-4"> | |
| <div class="text-center text-gray-500 py-8" id="no-suggestions"> | |
| <i class="fas fa-comment-dots text-3xl mb-2"></i> | |
| <p>No suggestions yet. Click "Analyze Code" to get started.</p> | |
| </div> | |
| <!-- Suggestions will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| <div class="bg-white border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-100 px-4 py-3 border-b"> | |
| <h3 class="font-semibold text-gray-800"> | |
| <i class="fas fa-chart-line mr-2 text-purple-500"></i> Code Metrics | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <div class="text-blue-800 font-medium">Lines of Code</div> | |
| <div class="text-2xl font-bold" id="loc-metric">-</div> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded-lg"> | |
| <div class="text-green-800 font-medium">Complexity</div> | |
| <div class="text-2xl font-bold" id="complexity-metric">-</div> | |
| </div> | |
| <div class="bg-purple-50 p-3 rounded-lg"> | |
| <div class="text-purple-800 font-medium">Issues</div> | |
| <div class="text-2xl font-bold" id="issues-metric">0</div> | |
| </div> | |
| <div class="bg-yellow-50 p-3 rounded-lg"> | |
| <div class="text-yellow-800 font-medium">Readability</div> | |
| <div class="text-2xl font-bold" id="readability-metric">-</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Tab switching | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| // Add active class to clicked button | |
| button.classList.add('active'); | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.add('hidden'); | |
| }); | |
| // Show the selected tab content | |
| const tabId = button.getAttribute('data-tab') + '-tab'; | |
| document.getElementById(tabId).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Analyze button click handler | |
| document.getElementById('analyze-btn').addEventListener('click', analyzeCode); | |
| // Apply all button click handler | |
| document.getElementById('apply-all-btn').addEventListener('click', applyAllSuggestions); | |
| // Export button click handler | |
| document.getElementById('export-btn').addEventListener('click', exportCode); | |
| // Sample suggestions data (in a real app, this would come from an API) | |
| const sampleSuggestions = [ | |
| { | |
| id: 1, | |
| title: "Use Array.reduce() instead of for loop", | |
| description: "The for loop can be replaced with Array.reduce() for more concise and functional code.", | |
| category: "Best Practice", | |
| severity: "medium", | |
| line: 3, | |
| codeBefore: "let total = 0;\nfor (let i = 0; i < items.length; i++) {\n total += items[i].price;\n}", | |
| codeAfter: "const total = items.reduce((sum, item) => sum + item.price, 0);", | |
| applied: false | |
| }, | |
| { | |
| id: 2, | |
| title: "Use const instead of let for total", | |
| description: "Since total is not reassigned after initialization, it's better to use const.", | |
| category: "Code Style", | |
| severity: "low", | |
| line: 2, | |
| codeBefore: "let total = 0;", | |
| codeAfter: "const total = 0;", | |
| applied: false | |
| }, | |
| { | |
| id: 3, | |
| title: "Add input validation", | |
| description: "Consider adding validation for items and taxRate parameters to prevent runtime errors.", | |
| category: "Error Prevention", | |
| severity: "high", | |
| line: 1, | |
| codeBefore: "function calculateTotal(items, taxRate) {", | |
| codeAfter: "function calculateTotal(items = [], taxRate = 0) {\n if (!Array.isArray(items)) throw new Error('Items must be an array');\n if (typeof taxRate !== 'number') throw new Error('Tax rate must be a number');", | |
| applied: false | |
| } | |
| ]; | |
| // Analyze code function | |
| function analyzeCode() { | |
| // In a real app, this would send the code to an API for analysis | |
| // For this demo, we'll use the sample suggestions | |
| // Update metrics | |
| document.getElementById('loc-metric').textContent = document.getElementById('editor').value.split('\n').length; | |
| document.getElementById('complexity-metric').textContent = "Medium"; | |
| document.getElementById('issues-metric').textContent = sampleSuggestions.length; | |
| document.getElementById('readability-metric').textContent = "Good"; | |
| // Display suggestions | |
| displaySuggestions(sampleSuggestions); | |
| // Highlight code lines with suggestions | |
| highlightCodeLines(sampleSuggestions); | |
| } | |
| // Display suggestions | |
| function displaySuggestions(suggestions) { | |
| const container = document.getElementById('suggestions-container'); | |
| const noSuggestions = document.getElementById('no-suggestions'); | |
| if (suggestions.length === 0) { | |
| noSuggestions.classList.remove('hidden'); | |
| container.innerHTML = ''; | |
| document.getElementById('suggestion-count').textContent = '0'; | |
| return; | |
| } | |
| noSuggestions.classList.add('hidden'); | |
| container.innerHTML = ''; | |
| document.getElementById('suggestion-count').textContent = suggestions.length; | |
| suggestions.forEach(suggestion => { | |
| const suggestionElement = document.createElement('div'); | |
| suggestionElement.className = `mb-4 pb-4 border-b border-gray-200 ${suggestion.applied ? 'opacity-50' : ''}`; | |
| suggestionElement.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <h4 class="font-medium text-gray-800">${suggestion.title}</h4> | |
| <span class="text-xs px-2 py-1 rounded-full ${ | |
| suggestion.severity === 'high' ? 'bg-red-100 text-red-800' : | |
| suggestion.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' : | |
| 'bg-blue-100 text-blue-800' | |
| }">${suggestion.category}</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">${suggestion.description}</p> | |
| <div class="bg-gray-50 p-2 rounded mb-3 text-sm"> | |
| <div class="text-xs text-gray-500 mb-1">Current:</div> | |
| <div class="code-editor text-gray-700">${suggestion.codeBefore}</div> | |
| </div> | |
| <div class="bg-green-50 p-2 rounded mb-3 text-sm"> | |
| <div class="text-xs text-green-600 mb-1">Suggested:</div> | |
| <div class="code-editor text-gray-700">${suggestion.codeAfter}</div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 transition apply-suggestion" data-id="${suggestion.id}"> | |
| Apply Suggestion | |
| </button> | |
| </div> | |
| `; | |
| container.appendChild(suggestionElement); | |
| }); | |
| // Add event listeners to apply buttons | |
| document.querySelectorAll('.apply-suggestion').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const suggestionId = parseInt(this.getAttribute('data-id')); | |
| applySuggestion(suggestionId); | |
| }); | |
| }); | |
| } | |
| // Apply a single suggestion | |
| function applySuggestion(suggestionId) { | |
| // In a real app, this would be more sophisticated | |
| const suggestion = sampleSuggestions.find(s => s.id === suggestionId); | |
| if (!suggestion || suggestion.applied) return; | |
| // Mark as applied | |
| suggestion.applied = true; | |
| // Update the editor content (simplified for demo) | |
| const editor = document.getElementById('editor'); | |
| let code = editor.value; | |
| // Simple replacement (in a real app, this would need proper line/position handling) | |
| code = code.replace(suggestion.codeBefore, suggestion.codeAfter); | |
| editor.value = code; | |
| // Update the UI | |
| displaySuggestions(sampleSuggestions); | |
| updateDiffView(); | |
| updatePreview(); | |
| // Show success message | |
| showToast(`Applied suggestion: ${suggestion.title}`, 'success'); | |
| } | |
| // Apply all suggestions | |
| function applyAllSuggestions() { | |
| sampleSuggestions.forEach(suggestion => { | |
| if (!suggestion.applied) { | |
| suggestion.applied = true; | |
| // Update the editor content (simplified for demo) | |
| const editor = document.getElementById('editor'); | |
| let code = editor.value; | |
| code = code.replace(suggestion.codeBefore, suggestion.codeAfter); | |
| editor.value = code; | |
| } | |
| }); | |
| // Update the UI | |
| displaySuggestions(sampleSuggestions); | |
| updateDiffView(); | |
| updatePreview(); | |
| // Show success message | |
| showToast('All suggestions applied successfully', 'success'); | |
| } | |
| // Highlight code lines with suggestions | |
| function highlightCodeLines(suggestions) { | |
| // In a real app, this would highlight the specific lines in the editor | |
| // For this demo, we'll just show an alert | |
| const linesWithIssues = [...new Set(suggestions.map(s => s.line))]; | |
| showToast(`Found issues on lines: ${linesWithIssues.join(', ')}`, 'info'); | |
| } | |
| // Update diff view | |
| function updateDiffView() { | |
| const originalCode = `// Sample code to analyze | |
| function calculateTotal(items, taxRate) { | |
| let total = 0; | |
| for (let i = 0; i < items.length; i++) { | |
| total += items[i].price; | |
| } | |
| total += total * taxRate; | |
| return total; | |
| } | |
| const items = [ | |
| { name: 'Book', price: 15 }, | |
| { name: 'Pen', price: 3.5 }, | |
| { name: 'Notebook', price: 8 } | |
| ]; | |
| const totalWithTax = calculateTotal(items, 0.1); | |
| console.log('Total with tax:', totalWithTax);`; | |
| const currentCode = document.getElementById('editor').value; | |
| // Simple diff for demo purposes | |
| const diffView = document.getElementById('diff-view'); | |
| diffView.innerHTML = ''; | |
| const originalLines = originalCode.split('\n'); | |
| const currentLines = currentCode.split('\n'); | |
| const maxLines = Math.max(originalLines.length, currentLines.length); | |
| for (let i = 0; i < maxLines; i++) { | |
| const originalLine = originalLines[i] || ''; | |
| const currentLine = currentLines[i] || ''; | |
| if (originalLine === currentLine) { | |
| // No change | |
| const lineDiv = document.createElement('div'); | |
| lineDiv.textContent = originalLine; | |
| diffView.appendChild(lineDiv); | |
| } else { | |
| // Changed line | |
| const lineDiv = document.createElement('div'); | |
| lineDiv.className = 'mb-2'; | |
| if (originalLine) { | |
| const removedDiv = document.createElement('div'); | |
| removedDiv.className = 'diff-removed text-sm'; | |
| removedDiv.textContent = '- ' + originalLine; | |
| lineDiv.appendChild(removedDiv); | |
| } | |
| if (currentLine) { | |
| const addedDiv = document.createElement('div'); | |
| addedDiv.className = 'diff-added text-sm'; | |
| addedDiv.textContent = '+ ' + currentLine; | |
| lineDiv.appendChild(addedDiv); | |
| } | |
| diffView.appendChild(lineDiv); | |
| } | |
| } | |
| } | |
| // Update preview | |
| function updatePreview() { | |
| const currentCode = document.getElementById('editor').value; | |
| const previewContent = document.getElementById('preview-content'); | |
| previewContent.textContent = currentCode; | |
| } | |
| // Export code | |
| function exportCode() { | |
| const code = document.getElementById('editor').value; | |
| const blob = new Blob([code], { type: 'text/javascript' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'corrected-code.js'; | |
| a.click(); | |
| URL.revokeObjectURL(url); | |
| showToast('Code exported successfully', 'success'); | |
| } | |
| // Show toast notification | |
| function showToast(message, type) { | |
| const toast = document.createElement('div'); | |
| toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${ | |
| type === 'success' ? 'bg-green-500' : | |
| type === 'error' ? 'bg-red-500' : | |
| 'bg-blue-500' | |
| }`; | |
| toast.innerHTML = ` | |
| <div class="flex items-center"> | |
| <i class="fas ${ | |
| type === 'success' ? 'fa-check-circle' : | |
| type === 'error' ? 'fa-exclamation-circle' : | |
| 'fa-info-circle' | |
| } mr-2"></i> | |
| <span>${message}</span> | |
| </div> | |
| `; | |
| document.body.appendChild(toast); | |
| setTimeout(() => { | |
| toast.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => { | |
| toast.remove(); | |
| }, 300); | |
| }, 3000); | |
| } | |
| // Initialize the UI | |
| updateDiffView(); | |
| updatePreview(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/code-creator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |