Spaces:

iohaijg
/

codecleano-ai-wizard

Running

App Files Files Community

iohaijg commited on Oct 13, 2025

Commit

0dd9d7b

verified ·

1 Parent(s): bb599b5

ok so now make the internals and make it work

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +369 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Codecleano Ai Wizard
-emoji: 🐨
-colorFrom: pink
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CodeCleano AI Wizard 🧙‍♂️
+colorFrom: yellow
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,370 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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="#" 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">
+                    <button id="process-btn" class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-lg font-bold text-lg transition">
+                        Clean My Code
+                    </button>
+                </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>
+        // 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 resultContainer = document.getElementById('result-container');
+        processBtn.addEventListener('click', async () => {
+            const code = codeEditor.value;
+            if (!code.trim()) return;
+            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('https://api.mocki.io/v2/c4d7a195/gpt-3', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        prompt: `Refactor this code following best practices:\n\n${code}\n\nRefactored code:`,
+                        max_tokens: 1000
+                    })
+                });
+                const data = await response.json();
+                resultContainer.innerHTML = `<pre class="text-green-400 p-4 bg-gray-800 rounded-lg"><code>${data.choices[0].text.trim()}</code></pre>`;
+            } 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();
+            }
+        });
+        feather.replace();
+    </script>
+</body>
 </html>