Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCleano AI Wizard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%); | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| background: #1e293b; | |
| border-radius: 0.5rem; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 20px rgba(74, 108, 247, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <!-- Vanta.js Globe Background --> | |
| <div id="globe-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800/80 backdrop-blur-md fixed w-full z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="cpu" class="text-blue-400"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">CodeCleano</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-blue-400 transition">Home</a> | |
| <a href="#" class="hover:text-blue-400 transition">Features</a> | |
| <a href="#" class="hover:text-blue-400 transition">Tutorial</a> | |
| <a href="api.html" class="hover:text-blue-400 transition">API</a> | |
| <a href="#" class="hover:text-blue-400 transition" onclick="document.getElementById('demo-modal').classList.remove('hidden')">Live Demo</a> | |
| </div> | |
| <button onclick="document.getElementById('demo-modal').classList.remove('hidden')" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-medium transition"> | |
| Live Demo | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient min-h-screen flex items-center pt-20"> | |
| <div class="container mx-auto px-6 py-16"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> | |
| Transform Messy Code<br> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-yellow-500">Into Clean Art</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-200 mb-8 max-w-lg"> | |
| Your AI-powered code janitor that understands, analyzes, and refactors code automatically. Perfect for beginners and pros alike. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button onclick="document.getElementById('demo-modal').classList.remove('hidden')" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold text-lg transition"> | |
| Try Demo | |
| </button> | |
| <button class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 rounded-lg font-bold text-lg transition"> | |
| Watch Tutorial | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="code-block p-6 glow-effect transform rotate-1"> | |
| <div class="flex mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <pre class="text-green-400 overflow-x-auto"><code class="text-sm"># Before AI Cleanup | |
| def messy(x,y,z): | |
| a=x+y | |
| b=a*z | |
| if(b>100): | |
| return True | |
| else:return False | |
| # After AI Cleanup | |
| def calculate_profit(revenue, cost, multiplier): | |
| total = revenue + cost | |
| result = total * multiplier | |
| return result > 100</code></pre> | |
| </div> | |
| <div class="absolute -bottom-8 -right-8 bg-purple-600/20 w-64 h-64 rounded-full filter blur-3xl -z-10"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-gray-800/50 backdrop-blur-sm"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500"> | |
| How CodeCleano Works | |
| </span> | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-12"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-800/70 p-8 rounded-xl hover:transform hover:-translate-y-2 transition duration-300 border border-gray-700/50"> | |
| <div class="w-14 h-14 bg-blue-500/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="code" class="text-blue-400 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Code Analysis</h3> | |
| <p class="text-gray-300"> | |
| Our AI parses your code structure, identifies patterns, and detects inefficiencies using advanced static analysis. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-800/70 p-8 rounded-xl hover:transform hover:-translate-y-2 transition duration-300 border border-gray-700/50"> | |
| <div class="w-14 h-14 bg-purple-500/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="refresh-cw" class="text-purple-400 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Smart Refactoring</h3> | |
| <p class="text-gray-300"> | |
| Automatically applies best practices like variable renaming, function extraction, and complexity reduction. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-800/70 p-8 rounded-xl hover:transform hover:-translate-y-2 transition duration-300 border border-gray-700/50"> | |
| <div class="w-14 h-14 bg-green-500/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="text-green-400 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Performance Boost</h3> | |
| <p class="text-gray-300"> | |
| Optimizes algorithms, reduces complexity, and suggests faster alternatives while preserving functionality. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tutorial Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Build Your Own Code AI | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Follow our step-by-step guide to create your own code optimization AI | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <!-- Step 1 --> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 mr-4 mt-1">1</div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Choose Your Platform</h3> | |
| <p class="text-gray-300"> | |
| Start with Python and Jupyter Notebook for experimentation. Then move to: | |
| <ul class="list-disc list-inside mt-2 text-gray-400"> | |
| <li>Google Colab (free GPU)</li> | |
| <li>VS Code with Python extension</li> | |
| <li>Docker for deployment</li> | |
| </ul> | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 mr-4 mt-1">2</div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Essential Libraries</h3> | |
| <p class="text-gray-300"> | |
| Install these Python packages: | |
| <div class="code-block p-4 my-2"> | |
| <pre class="text-sm text-green-400">pip install transformers torch astor libcst pytest</pre> | |
| </div> | |
| We'll use HuggingFace Transformers for the AI core and AST parsing for code analysis. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 mr-4 mt-1">3</div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Training Process</h3> | |
| <p class="text-gray-300"> | |
| 1. Collect code examples (GitHub is great)<br> | |
| 2. Create "before/after" refactored pairs<br> | |
| 3. Fine-tune a model like CodeT5<br> | |
| 4. Validate with test cases | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/70 p-8 rounded-xl border border-gray-700/50"> | |
| <div class="code-block p-6"> | |
| <div class="flex mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <pre class="text-green-400 overflow-x-auto text-sm"><code># Sample training script | |
| from transformers import T5ForConditionalGeneration, Trainer | |
| model = T5ForConditionalGeneration.from_pretrained("Salesforce/codet5-base") | |
| trainer = Trainer( | |
| model=model, | |
| train_dataset=code_dataset, | |
| args=training_args | |
| ) | |
| trainer.train() | |
| # Saving the model | |
| model.save_pretrained("code_cleaner_model")</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-purple-900/40 to-blue-900/40"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-8 max-w-4xl mx-auto"> | |
| Ready to Transform Your Coding Workflow? | |
| </h2> | |
| <p class="text-xl text-gray-300 mb-12 max-w-2xl mx-auto"> | |
| Join thousands of developers who save hours every week with automated code optimization. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-lg font-bold text-lg transition"> | |
| Start Free Trial | |
| </button> | |
| <button class="bg-white/10 hover:bg-white/20 border border-white/20 px-8 py-4 rounded-lg font-bold text-lg transition"> | |
| Watch Demo Video | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Modal --> | |
| <div id="demo-modal" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4"> | |
| <div class="bg-gray-800 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-2xl font-bold">Code Cleaning Demo</h3> | |
| <button onclick="document.getElementById('demo-modal').classList.add('hidden')" class="text-gray-400 hover:text-white"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Input Your Code</label> | |
| <textarea id="code-editor" class="w-full h-64 bg-gray-900 text-gray-100 p-4 rounded-lg font-mono" placeholder="Paste your messy code here..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Cleaned Result</label> | |
| <div id="result-container" class="w-full h-64 bg-gray-900 p-4 rounded-lg overflow-auto"> | |
| <p class="text-gray-500 italic">Your cleaned code will appear here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mb-4"> | |
| <button id="process-btn" class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-bold text-lg transition w-full md:w-auto"> | |
| Clean This Code | |
| </button> | |
| </div> | |
| <div id="detected-language" class="text-center text-gray-400 mb-4 hidden"> | |
| Detected: <span class="text-blue-400 font-medium"></span> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-gray-400 mb-2">OR</p> | |
| <button id="repo-btn" class="border border-blue-500 text-blue-400 hover:bg-blue-500/10 px-6 py-2 rounded-lg transition"> | |
| <i data-feather="github" class="inline mr-2"></i> Clean Entire Repository | |
| </button> | |
| <div id="repo-input" class="hidden mt-4"> | |
| <input type="text" id="repo-url" class="bg-gray-700 text-white p-2 rounded w-full mb-2" placeholder="https://github.com/user/repo"> | |
| <button id="process-repo" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg transition w-full"> | |
| Process Repository | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900/80 py-12 border-t border-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> | |
| <i data-feather="cpu" class="text-blue-400"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">CodeCleano</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 CodeCleano AI. All rights reserved. Made with <i data-feather="heart" class="w-4 h-4 inline text-red-400"></i> for developers</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Auto-process when code is pasted | |
| codeEditor.addEventListener('paste', (e) => { | |
| setTimeout(() => { | |
| if (codeEditor.value.trim()) { | |
| processBtn.click(); | |
| } | |
| }, 100); | |
| }); | |
| // Initialize Vanta.js globe | |
| VANTA.GLOBE({ | |
| el: "#globe-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0x111827, | |
| size: 0.8 | |
| }); | |
| // Code Processing Functionality | |
| const codeEditor = document.getElementById('code-editor'); | |
| const processBtn = document.getElementById('process-btn'); | |
| const repoBtn = document.getElementById('repo-btn'); | |
| const processRepoBtn = document.getElementById('process-repo'); | |
| const repoInput = document.getElementById('repo-input'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const repoUrl = document.getElementById('repo-url'); | |
| const detectedLangEl = document.getElementById('detected-language'); | |
| const detectedLangText = detectedLangEl.querySelector('span'); | |
| // Language detection patterns | |
| const languagePatterns = { | |
| python: /^(def |import |from |print\(|#)/m, | |
| javascript: /^(function |const |let |var |\/\/)/m, | |
| java: /^(public |private |class |import |\/\/)/m, | |
| csharp: /^(using |namespace |class |\/\/)/m, | |
| php: /^(<\?php|\$|function )/m | |
| }; | |
| function detectLanguage(code) { | |
| for (const [lang, pattern] of Object.entries(languagePatterns)) { | |
| if (pattern.test(code)) { | |
| return lang; | |
| } | |
| } | |
| return 'python'; // default fallback | |
| } | |
| // Toggle repository input | |
| repoBtn.addEventListener('click', () => { | |
| repoInput.classList.toggle('hidden'); | |
| if (!repoInput.classList.contains('hidden')) { | |
| codeEditor.value = ''; | |
| } | |
| }); | |
| // Process single code snippet | |
| processBtn.addEventListener('click', async () => { | |
| const code = codeEditor.value.trim(); | |
| if (!code) return; | |
| // Detect language | |
| const detectedLanguage = detectLanguage(code); | |
| detectedLangText.textContent = detectedLanguage; | |
| detectedLangEl.classList.remove('hidden'); | |
| processBtn.disabled = true; | |
| processBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i> Processing...'; | |
| feather.replace(); | |
| try { | |
| // Using a mock API for demonstration | |
| // In production, replace with your actual API endpoint | |
| const response = await fetch('/api/clean', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| code: code, | |
| language: detectedLanguage | |
| }) | |
| }); | |
| const data = await response.json(); | |
| resultContainer.innerHTML = ` | |
| <div class="mb-4 flex justify-between items-center"> | |
| <h4 class="font-bold text-blue-400">Cleaned Code</h4> | |
| <button onclick="copyResult()" class="text-xs bg-gray-700 px-2 py-1 rounded"> | |
| <i data-feather="copy" class="w-3 h-3"></i> Copy | |
| </button> | |
| </div> | |
| <pre class="text-green-400 p-4 bg-gray-800 rounded-lg overflow-auto"><code>${data.cleaned_code}</code></pre> | |
| `; | |
| feather.replace(); | |
| } catch (error) { | |
| resultContainer.innerHTML = `<div class="text-red-400 p-4 bg-gray-800 rounded-lg">Error: ${error.message}</div>`; | |
| } finally { | |
| processBtn.disabled = false; | |
| processBtn.innerHTML = 'Clean My Code'; | |
| feather.replace(); | |
| } | |
| }); | |
| // Process entire repository | |
| processRepoBtn.addEventListener('click', async () => { | |
| const url = repoUrl.value.trim(); | |
| if (!url) return; | |
| processRepoBtn.disabled = true; | |
| processRepoBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i> Processing Repository...'; | |
| feather.replace(); | |
| try { | |
| const response = await fetch('/api/clean-repo', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| repo_url: url, | |
| // Auto-detect will happen on server for repos | |
| language: 'auto' | |
| }) | |
| }); | |
| const data = await response.json(); | |
| resultContainer.innerHTML = ` | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-blue-400">Repository Analysis</h4> | |
| <p class="text-sm text-gray-400">${data.files_processed} files processed</p> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm">Found ${data.issues_found} issues</span> | |
| <a href="${data.download_url}" class="text-blue-400 hover:underline text-sm"> | |
| <i data-feather="download" class="inline mr-1 w-3 h-3"></i> Download Cleaned Code | |
| </a> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 max-h-64 overflow-auto"> | |
| ${data.summary.replace(/\n/g, '<br>')} | |
| </div> | |
| `; | |
| } catch (error) { | |
| resultContainer.innerHTML = `<div class="text-red-400 p-4 bg-gray-800 rounded-lg">Error: ${error.message}</div>`; | |
| } finally { | |
| processRepoBtn.disabled = false; | |
| processRepoBtn.innerHTML = 'Process Repository'; | |
| feather.replace(); | |
| } | |
| }); | |
| function copyResult() { | |
| const code = resultContainer.querySelector('code').textContent; | |
| navigator.clipboard.writeText(code); | |
| } | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |