Spaces:
Running
Running
File size: 9,724 Bytes
b553391 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started - 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>
<style>
.step-card {
transition: all 0.3s ease;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(118, 75, 162, 0.3);
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<div class="container mx-auto px-4 py-12">
<!-- Navigation -->
<nav class="flex justify-between items-center mb-12">
<a href="index.html" class="text-2xl font-bold gradient-text flex items-center">
<i data-feather="wand" class="mr-2"></i> CodeCleaner AI
</a>
<div class="flex space-x-4">
<a href="index.html" class="hover:text-purple-300 transition">Home</a>
<a href="#" class="text-purple-400 font-medium">Get Started</a>
<a href="#" class="hover:text-purple-300 transition">Resources</a>
<a href="#" class="hover:text-purple-300 transition">Community</a>
</div>
</nav>
<!-- Hero Section -->
<div class="text-center mb-16">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Your <span class="gradient-text">Step-by-Step</span> Guide</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Follow these steps to build your own AI code cleaner from scratch
</p>
</div>
<!-- Steps -->
<div class="grid md:grid-cols-3 gap-8 mb-16">
<!-- Step 1 -->
<div class="bg-gray-800 rounded-xl p-6 step-card">
<div class="w-14 h-14 rounded-full bg-indigo-600 flex items-center justify-center mb-4 text-2xl font-bold">1</div>
<h3 class="text-xl font-semibold mb-3">Setup Your Environment</h3>
<p class="text-gray-300 mb-4">Install Python and essential tools:</p>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1"></i>
<span>Install Python 3.8+</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1"></i>
<span>Set up VS Code with Python extension</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="text-green-400 mr-2 mt-1"></i>
<span>Create virtual environment</span>
</li>
</ul>
<div class="mt-6 bg-gray-700 p-4 rounded-lg">
<code class="text-sm text-purple-300">
python -m venv aienv<br>
source aienv/bin/activate<br>
pip install torch transformers
</code>
</div>
</div>
<!-- Step 2 -->
<div class="bg-gray-800 rounded-xl p-6 step-card">
<div class="w-14 h-14 rounded-full bg-indigo-600 flex items-center justify-center mb-4 text-2xl font-bold">2</div>
<h3 class="text-xl font-semibold mb-3">Collect Training Data</h3>
<p class="text-gray-300 mb-4">Gather code examples:</p>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<i data-feather="github" class="text-purple-400 mr-2 mt-1"></i>
<span>Scrape GitHub for code samples</span>
</li>
<li class="flex items-start">
<i data-feather="edit" class="text-purple-400 mr-2 mt-1"></i>
<span>Create "before/after" pairs</span>
</li>
<li class="flex items-start">
<i data-feather="database" class="text-purple-400 mr-2 mt-1"></i>
<span>Store in structured format (JSON)</span>
</li>
</ul>
<div class="mt-6 bg-gray-700 p-4 rounded-lg">
<code class="text-sm text-purple-300">
# Example training pair<br>
{<br>
"before": "def calc(x,y):...",<br>
"after": "def calculate(...",<br>
"language": "python"<br>
}
</code>
</div>
</div>
<!-- Step 3 -->
<div class="bg-gray-800 rounded-xl p-6 step-card">
<div class="w-14 h-14 rounded-full bg-indigo-600 flex items-center justify-center mb-4 text-2xl font-bold">3</div>
<h3 class="text-xl font-semibold mb-3">Fine-tune the Model</h3>
<p class="text-gray-300 mb-4">Train your AI code cleaner:</p>
<ul class="space-y-2 text-sm">
<li class="flex items-start">
<i data-feather="cpu" class="text-yellow-400 mr-2 mt-1"></i>
<span>Use CodeT5 or GPT-3 base model</span>
</li>
<li class="flex items-start">
<i data-feather="activity" class="text-yellow-400 mr-2 mt-1"></i>
<span>Fine-tune with your dataset</span>
</li>
<li class="flex items-start">
<i data-feather="bar-chart-2" class="text-yellow-400 mr-2 mt-1"></i>
<span>Evaluate with test cases</span>
</li>
</ul>
<div class="mt-6 bg-gray-700 p-4 rounded-lg">
<code class="text-sm text-purple-300">
from transformers import T5ForConditionalGeneration<br>
model = T5ForConditionalGeneration.from_pretrained("Salesforce/codet5-base")<br>
# Training loop here...
</code>
</div>
</div>
</div>
<!-- Additional Resources -->
<div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-8 mb-16">
<h2 class="text-2xl font-bold mb-6 text-center text-indigo-300">Additional Resources</h2>
<div class="grid sm:grid-cols-2 gap-6">
<div class="bg-gray-700 p-5 rounded-lg">
<div class="flex items-center mb-3">
<i data-feather="book-open" class="text-blue-400 mr-3"></i>
<h3 class="text-lg font-semibold">Learning Materials</h3>
</div>
<ul class="space-y-2">
<li><a href="#" class="text-purple-300 hover:underline">Transformers for Code</a></li>
<li><a href="#" class="text-purple-300 hover:underline">Code Quality Metrics</a></li>
<li><a href="#" class="text-purple-300 hover:underline">AST Parsing Guide</a></li>
</ul>
</div>
<div class="bg-gray-700 p-5 rounded-lg">
<div class="flex items-center mb-3">
<i data-feather="download-cloud" class="text-green-400 mr-3"></i>
<h3 class="text-lg font-semibold">Templates & Tools</h3>
</div>
<ul class="space-y-2">
<li><a href="#" class="text-purple-300 hover:underline">Starter Notebook</a></li>
<li><a href="#" class="text-purple-300 hover:underline">Dataset Collector</a></li>
<li><a href="#" class="text-purple-300 hover:underline">Evaluation Scripts</a></li>
</ul>
</div>
</div>
</div>
<!-- Call to Action -->
<div class="text-center">
<h2 class="text-2xl font-bold mb-6 text-indigo-300">Ready to start coding?</h2>
<a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105">
<i data-feather="terminal" class="inline mr-2"></i>
Launch Tutorial Notebook
</a>
</div>
</div>
<script>
feather.replace();
// Animate steps on scroll
document.addEventListener('DOMContentLoaded', function() {
const steps = document.querySelectorAll('.step-card');
steps.forEach((step, index) => {
setTimeout(() => {
step.style.opacity = '1';
step.style.transform = 'translateY(0)';
}, index * 200);
step.style.opacity = '0';
step.style.transform = 'translateY(20px)';
step.style.transition = 'all 0.5s ease';
});
});
</script>
</body>
</html>
|