dev-Rachitgarg commited on
Commit
971c47a
·
verified ·
1 Parent(s): 5eafc36

vibe codding platform with ai bug detector , bug fixer and code explainer and doccumentation maker and auto commentor

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +314 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codegenius Ai Smart Coding Companion
3
- emoji:
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeGenius AI - Smart Coding Companion
3
+ colorFrom: red
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,314 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeGenius AI - Smart Coding Companion</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ dark: '#0f172a',
17
+ light: '#f8fafc'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <script src="https://unpkg.com/feather-icons"></script>
24
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
27
+ body {
28
+ font-family: 'Fira Code', monospace;
29
+ }
30
+ .code-editor {
31
+ background-color: #1e293b;
32
+ border-radius: 0.75rem;
33
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
34
+ }
35
+ .gradient-text {
36
+ background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
37
+ -webkit-background-clip: text;
38
+ background-clip: text;
39
+ color: transparent;
40
+ }
41
+ .vanta-container {
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ width: 100%;
46
+ height: 100%;
47
+ z-index: -1;
48
+ }
49
+ .feature-card:hover {
50
+ transform: translateY(-5px);
51
+ transition: all 0.3s ease;
52
+ }
53
+ .glow {
54
+ box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-dark text-light min-h-screen">
59
+ <div id="vanta-bg" class="vanta-container"></div>
60
+
61
+ <!-- Navigation -->
62
+ <nav class="bg-dark/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50">
63
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
64
+ <div class="flex items-center justify-between h-16">
65
+ <div class="flex items-center">
66
+ <div class="flex-shrink-0 flex items-center">
67
+ <i data-feather="code" class="text-primary h-6 w-6"></i>
68
+ <span class="ml-2 text-xl font-bold gradient-text">CodeGenius AI</span>
69
+ </div>
70
+ </div>
71
+ <div class="hidden md:block">
72
+ <div class="ml-10 flex items-baseline space-x-4">
73
+ <a href="#" class="text-primary px-3 py-2 rounded-md text-sm font-medium">Home</a>
74
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a>
75
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
76
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Docs</a>
77
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
78
+ </div>
79
+ </div>
80
+ <div class="hidden md:block">
81
+ <div class="ml-4 flex items-center md:ml-6">
82
+ <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
83
+ <i data-feather="log-in" class="mr-2 h-4 w-4"></i> Sign In
84
+ </button>
85
+ </div>
86
+ </div>
87
+ <div class="-mr-2 flex md:hidden">
88
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
89
+ <i data-feather="menu"></i>
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </nav>
95
+
96
+ <!-- Hero Section -->
97
+ <div class="relative pt-32 pb-20 px-4 sm:px-6 lg:pt-40 lg:pb-28 lg:px-8">
98
+ <div class="max-w-7xl mx-auto">
99
+ <div class="text-center">
100
+ <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
101
+ <span class="block">AI-Powered</span>
102
+ <span class="block gradient-text">Coding Companion</span>
103
+ </h1>
104
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
105
+ Supercharge your development workflow with our AI-powered tools that detect bugs, fix code, explain logic, and generate documentation automatically.
106
+ </p>
107
+ <div class="mt-10 sm:flex sm:justify-center">
108
+ <div class="rounded-md shadow">
109
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10">
110
+ Get Started
111
+ </a>
112
+ </div>
113
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
114
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
115
+ Live Demo
116
+ </a>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Features Section -->
124
+ <div class="py-12 bg-dark/50 backdrop-blur-sm">
125
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
126
+ <div class="lg:text-center">
127
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Features</h2>
128
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
129
+ Everything you need to code smarter
130
+ </p>
131
+ </div>
132
+
133
+ <div class="mt-10">
134
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
135
+ <!-- Feature 1 -->
136
+ <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">
137
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
138
+ <i data-feather="bug"></i>
139
+ </div>
140
+ <h3 class="text-lg font-medium text-white mb-2">AI Bug Detector</h3>
141
+ <p class="text-gray-300">
142
+ Real-time scanning and detection of bugs, errors, and vulnerabilities in your code with detailed reports.
143
+ </p>
144
+ </div>
145
+
146
+ <!-- Feature 2 -->
147
+ <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">
148
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
149
+ <i data-feather="check-circle"></i>
150
+ </div>
151
+ <h3 class="text-lg font-medium text-white mb-2">AI Bug Fixer</h3>
152
+ <p class="text-gray-300">
153
+ Automated suggestions and fixes for identified bugs, with options to apply changes instantly.
154
+ </p>
155
+ </div>
156
+
157
+ <!-- Feature 3 -->
158
+ <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">
159
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
160
+ <i data-feather="book-open"></i>
161
+ </div>
162
+ <h3 class="text-lg font-medium text-white mb-2">AI Code Explainer</h3>
163
+ <p class="text-gray-300">
164
+ In-depth breakdowns of complex code segments, simplifying logic and functionality for better understanding.
165
+ </p>
166
+ </div>
167
+
168
+ <!-- Feature 4 -->
169
+ <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">
170
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
171
+ <i data-feather="file-text"></i>
172
+ </div>
173
+ <h3 class="text-lg font-medium text-white mb-2">AI Documentation Maker</h3>
174
+ <p class="text-gray-300">
175
+ Auto-generates comprehensive, well-structured documentation for projects in various formats.
176
+ </p>
177
+ </div>
178
+
179
+ <!-- Feature 5 -->
180
+ <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">
181
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
182
+ <i data-feather="message-square"></i>
183
+ </div>
184
+ <h3 class="text-lg font-medium text-white mb-2">AI Auto-Commentor</h3>
185
+ <p class="text-gray-300">
186
+ Intelligently adds descriptive comments to code, improving readability and maintainability.
187
+ </p>
188
+ </div>
189
+
190
+ <!-- Feature 6 -->
191
+ <div class="feature-card bg-gray-800/50 p-6 rounded-lg border border-gray-700 hover:border-primary">
192
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
193
+ <i data-feather="users"></i>
194
+ </div>
195
+ <h3 class="text-lg font-medium text-white mb-2">Real-time Collaboration</h3>
196
+ <p class="text-gray-300">
197
+ Work together with your team in real-time with built-in collaboration tools and version control.
198
+ </p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Code Editor Demo -->
206
+ <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
207
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
208
+ <div class="mb-8 lg:mb-0">
209
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
210
+ <span class="block">See the magic in</span>
211
+ <span class="block gradient-text">action</span>
212
+ </h2>
213
+ <p class="mt-3 text-lg text-gray-300">
214
+ Our AI analyzes your code as you type, providing instant feedback and suggestions to improve your code quality and efficiency.
215
+ </p>
216
+ <div class="mt-8">
217
+ <div class="inline-flex rounded-md shadow">
218
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90">
219
+ Try it yourself
220
+ </a>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ <div class="code-editor p-4 glow">
225
+ <div class="flex items-center mb-4">
226
+ <div class="flex space-x-2 mr-4">
227
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
228
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
229
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
230
+ </div>
231
+ <div class="text-sm text-gray-400">example.js</div>
232
+ </div>
233
+ <pre class="text-gray-300 text-sm font-mono overflow-x-auto">
234
+ <span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(items) {
235
+ <span class="text-gray-500">// AI suggests adding parameter validation</span>
236
+ <span class="text-green-400">if</span> (!Array.isArray(items)) {
237
+ <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must be an array'</span>);
238
+ }
239
+
240
+ <span class="text-purple-400">let</span> total = <span class="text-blue-400">0</span>;
241
+ items.forEach(item => {
242
+ <span class="text-gray-500">// AI detects potential NaN issue</span>
243
+ <span class="text-purple-400">const</span> price = <span class="text-blue-400">Number</span>(item.price) || <span class="text-blue-400">0</span>;
244
+ total += price * (item.quantity || <span class="text-blue-400">1</span>);
245
+ });
246
+
247
+ <span class="text-gray-500">// AI suggests adding return type annotation</span>
248
+ <span class="text-green-400">return</span> total;
249
+ }</pre>
250
+ <div class="mt-4 p-3 bg-gray-800 rounded text-sm text-gray-300">
251
+ <div class="flex items-start">
252
+ <i data-feather="alert-circle" class="text-yellow-400 mr-2 mt-0.5 flex-shrink-0"></i>
253
+ <div>
254
+ <span class="font-medium">AI Suggestion:</span> Consider adding JSDoc comments for better documentation.
255
+ <button class="ml-2 text-primary text-xs">Apply suggestion</button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- CTA Section -->
264
+ <div class="bg-gradient-to-r from-primary/20 to-secondary/20 py-16 px-4 sm:px-6 lg:px-8">
265
+ <div class="max-w-3xl mx-auto text-center">
266
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
267
+ Ready to revolutionize your coding workflow?
268
+ </h2>
269
+ <p class="mt-3 text-xl text-gray-300">
270
+ Join thousands of developers who are coding smarter with AI assistance.
271
+ </p>
272
+ <div class="mt-10 sm:flex sm:justify-center">
273
+ <div class="rounded-md shadow">
274
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10">
275
+ Start free trial
276
+ </a>
277
+ </div>
278
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
279
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
280
+ See pricing
281
+ </a>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Footer -->
288
+ <footer class="bg-gray-900/80 backdrop-blur-md border-t border-gray-800 mt-20">
289
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
290
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
291
+ <div>
292
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
293
+ <ul class="mt-4 space-y-4">
294
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
295
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
296
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
297
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li>
298
+ </ul>
299
+ </div>
300
+ <div>
301
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
302
+ <ul class="mt-4 space-y-4">
303
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
304
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
305
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
306
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Support</a></li>
307
+ </ul>
308
+ </div>
309
+ <div>
310
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
311
+ <ul class="mt-4 space-y-4">
312
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li
313
+ </body>
314
+ </html>