Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeCleaner 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.net.min.js"></script> | |
| <style> | |
| .code-container { | |
| font-family: 'Courier New', monospace; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(118, 75, 162, 0.5); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div id="vanta-bg" class="absolute w-full h-full"></div> | |
| <div class="relative z-10 container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-16"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-600"> | |
| CodeCleaner AI Wizard 🧙♂️ | |
| </h1> | |
| <p class="text-xl md:text-2xl text-purple-200 max-w-3xl mx-auto"> | |
| Your magical assistant for transforming messy code into clean, efficient masterpieces | |
| </p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <!-- Left Column - Steps --> | |
| <div class="space-y-8"> | |
| <div class="gradient-bg p-6 rounded-xl glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-4"> | |
| <span class="font-bold text-xl">1</span> | |
| </div> | |
| <h3 class="text-2xl font-semibold">Platforms & Tools</h3> | |
| </div> | |
| <ul class="space-y-3 pl-14"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-400 mr-2 mt-1"></i> | |
| <span>Google Colab (free cloud GPUs)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-400 mr-2 mt-1"></i> | |
| <span>Visual Studio Code with Python</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-400 mr-2 mt-1"></i> | |
| <span>GitHub for version control</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="text-green-400 mr-2 mt-1"></i> | |
| <span>FastAPI for web deployment</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="gradient-bg p-6 rounded-xl glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-4"> | |
| <span class="font-bold text-xl">2</span> | |
| </div> | |
| <h3 class="text-2xl font-semibold">Languages & Libraries</h3> | |
| </div> | |
| <ul class="space-y-3 pl-14"> | |
| <li class="flex items-start"> | |
| <i data-feather="code" class="text-yellow-300 mr-2 mt-1"></i> | |
| <span>Python (main language)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="cpu" class="text-yellow-300 mr-2 mt-1"></i> | |
| <span>PyTorch or TensorFlow (ML)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="box" class="text-yellow-300 mr-2 mt-1"></i> | |
| <span>HuggingFace Transformers</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="search" class="text-yellow-300 mr-2 mt-1"></i> | |
| <span>Tree-sitter (code parsing)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Right Column - Steps --> | |
| <div class="space-y-8"> | |
| <div class="gradient-bg p-6 rounded-xl glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-4"> | |
| <span class="font-bold text-xl">3</span> | |
| </div> | |
| <h3 class="text-2xl font-semibold">Training Process</h3> | |
| </div> | |
| <ul class="space-y-3 pl-14"> | |
| <li class="flex items-start"> | |
| <i data-feather="database" class="text-pink-400 mr-2 mt-1"></i> | |
| <span>Collect code examples (GitHub)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="git-merge" class="text-pink-400 mr-2 mt-1"></i> | |
| <span>Create "before/after" pairs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="activity" class="text-pink-400 mr-2 mt-1"></i> | |
| <span>Fine-tune CodeT5 model</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="repeat" class="text-pink-400 mr-2 mt-1"></i> | |
| <span>Use RLHF (human feedback)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="gradient-bg p-6 rounded-xl glow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-4"> | |
| <span class="font-bold text-xl">4</span> | |
| </div> | |
| <h3 class="text-2xl font-semibold">Testing & Deployment</h3> | |
| </div> | |
| <ul class="space-y-3 pl-14"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-square" class="text-blue-300 mr-2 mt-1"></i> | |
| <span>Unit tests with PyTest</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="cloud-lightning" class="text-blue-300 mr-2 mt-1"></i> | |
| <span>Deploy on HuggingFace</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="globe" class="text-blue-300 mr-2 mt-1"></i> | |
| <span>Build API with FastAPI</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="monitor" class="text-blue-300 mr-2 mt-1"></i> | |
| <span>Create VS Code extension</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interactive Demo Section --> | |
| <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-6 glow"> | |
| <h2 class="text-3xl font-bold mb-6 text-center text-indigo-300">Try Our Live Demo</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-3 text-purple-200">Input (Messy Code)</h3> | |
| <div class="code-container bg-gray-900 p-4 rounded-lg h-64 overflow-auto"> | |
| <pre class="text-red-300"><code class="language-python">def calculate_sum(x,y): | |
| s=0 | |
| for i in range(x,y+1): | |
| s+=i | |
| return s | |
| # bad spacing and naming | |
| </code></pre> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-3 text-purple-200">Output (Clean Code)</h3> | |
| <div class="code-container bg-gray-900 p-4 rounded-lg h-64 overflow-auto"> | |
| <pre class="text-green-300"><code class="language-python">def calculate_range_sum(start: int, end: int) -> int: | |
| """Calculate the sum of integers in a range (inclusive).""" | |
| return sum(range(start, end + 1)) | |
| # Improved with type hints, docstring, and better naming | |
| </code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 flex items-center"> | |
| <i data-feather="zap" class="mr-2"></i> | |
| Clean My Code Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Next Steps --> | |
| <div class="mt-16 text-center"> | |
| <h2 class="text-3xl font-bold mb-6 text-indigo-300">Ready to Begin Your Journey?</h2> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#" class="bg-purple-700 hover:bg-purple-800 text-white px-6 py-3 rounded-lg transition-all"> | |
| <i data-feather="download" class="inline mr-2"></i> Get Started Guide | |
| </a> | |
| <a href="#" class="bg-indigo-700 hover:bg-indigo-800 text-white px-6 py-3 rounded-lg transition-all"> | |
| <i data-feather="code" class="inline mr-2"></i> Example Notebooks | |
| </a> | |
| <a href="#" class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg transition-all"> | |
| <i data-feather="message-square" class="inline mr-2"></i> Join Community | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x764ba2, | |
| backgroundColor: 0x111827, | |
| points: 8.00, | |
| maxDistance: 20.00, | |
| spacing: 16.00 | |
| }); | |
| </script> | |
| <script> | |
| feather.replace(); | |
| // Simple animation for the demo button | |
| document.querySelector('button').addEventListener('mouseenter', function() { | |
| anime({ | |
| targets: this, | |
| scale: 1.05, | |
| duration: 200 | |
| }); | |
| }); | |
| document.querySelector('button').addEventListener('mouseleave', function() { | |
| anime({ | |
| targets: this, | |
| scale: 1, | |
| duration: 200 | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |