S-Dreamer commited on
Commit
124f884
Β·
verified Β·
1 Parent(s): 6950ef7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +5 -3
  2. index.html +313 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Codegenai
3
- emoji: πŸ¦€
4
  colorFrom: pink
5
  colorTo: gray
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: codegenai
3
+ emoji: 🐳
4
  colorFrom: pink
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,313 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeGen AI - Your AI Coding Assistant</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .code-editor {
14
+ background-color: #1e293b;
15
+ border-radius: 0.5rem;
16
+ }
17
+ .tab-active {
18
+ border-bottom: 3px solid #a777e3;
19
+ color: #a777e3;
20
+ font-weight: 600;
21
+ }
22
+ .response-area {
23
+ min-height: 200px;
24
+ transition: all 0.3s ease;
25
+ }
26
+ .loading-dots::after {
27
+ content: '.';
28
+ animation: dots 1.5s steps(5, end) infinite;
29
+ }
30
+ @keyframes dots {
31
+ 0%, 20% { content: '.'; }
32
+ 40% { content: '..'; }
33
+ 60% { content: '...'; }
34
+ 80%, 100% { content: ''; }
35
+ }
36
+ .feature-card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-50 min-h-screen font-sans">
43
+ <!-- Header -->
44
+ <header class="gradient-bg text-white shadow-lg">
45
+ <div class="container mx-auto px-4 py-6">
46
+ <div class="flex justify-between items-center">
47
+ <div class="flex items-center space-x-2">
48
+ <i class="fas fa-code text-2xl"></i>
49
+ <h1 class="text-2xl font-bold">CodeGen AI</h1>
50
+ </div>
51
+ <nav class="hidden md:block">
52
+ <ul class="flex space-x-6">
53
+ <li><a href="#" class="hover:text-gray-200 transition">Features</a></li>
54
+ <li><a href="#" class="hover:text-gray-200 transition">Pricing</a></li>
55
+ <li><a href="#" class="hover:text-gray-200 transition">Docs</a></li>
56
+ <li><a href="#" class="hover:text-gray-200 transition">Contact</a></li>
57
+ </ul>
58
+ </nav>
59
+ <button class="md:hidden text-xl">
60
+ <i class="fas fa-bars"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </header>
65
+
66
+ <!-- Hero Section -->
67
+ <section class="gradient-bg text-white py-16">
68
+ <div class="container mx-auto px-4 text-center">
69
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Your AI-Powered Coding Assistant</h2>
70
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Generate, refactor, debug, and document code with natural language. Supercharge your development workflow.</p>
71
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
72
+ <button class="bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition shadow-lg">
73
+ Get Started - It's Free
74
+ </button>
75
+ <button class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition">
76
+ Watch Demo
77
+ </button>
78
+ </div>
79
+ </div>
80
+ </section>
81
+
82
+ <!-- Main App Section -->
83
+ <main class="container mx-auto px-4 py-12">
84
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
85
+ <!-- Features Sidebar -->
86
+ <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6 h-fit">
87
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Quick Actions</h3>
88
+ <div class="space-y-3">
89
+ <button onclick="setActiveTab('generate')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left">
90
+ <div class="bg-purple-100 p-2 rounded-lg text-purple-700">
91
+ <i class="fas fa-magic"></i>
92
+ </div>
93
+ <span>Generate Code</span>
94
+ </button>
95
+ <button onclick="setActiveTab('refactor')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left">
96
+ <div class="bg-blue-100 p-2 rounded-lg text-blue-700">
97
+ <i class="fas fa-refresh"></i>
98
+ </div>
99
+ <span>Refactor Code</span>
100
+ </button>
101
+ <button onclick="setActiveTab('debug')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left">
102
+ <div class="bg-red-100 p-2 rounded-lg text-red-700">
103
+ <i class="fas fa-bug"></i>
104
+ </div>
105
+ <span>Debug Code</span>
106
+ </button>
107
+ <button onclick="setActiveTab('document')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left">
108
+ <div class="bg-green-100 p-2 rounded-lg text-green-700">
109
+ <i class="fas fa-file-alt"></i>
110
+ </div>
111
+ <span>Document Code</span>
112
+ </button>
113
+ <button onclick="setActiveTab('question')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left">
114
+ <div class="bg-yellow-100 p-2 rounded-lg text-yellow-700">
115
+ <i class="fas fa-question-circle"></i>
116
+ </div>
117
+ <span>Ask Questions</span>
118
+ </button>
119
+ <button onclick="setActiveTab('automate')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left">
120
+ <div class="bg-indigo-100 p-2 rounded-lg text-indigo-700">
121
+ <i class="fas fa-robot"></i>
122
+ </div>
123
+ <span>Automate Tasks</span>
124
+ </button>
125
+ <button onclick="setActiveTab('project')" class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 transition text-left">
126
+ <div class="bg-pink-100 p-2 rounded-lg text-pink-700">
127
+ <i class="fas fa-folder-plus"></i>
128
+ </div>
129
+ <span>New Project</span>
130
+ </button>
131
+ </div>
132
+
133
+ <div class="mt-8">
134
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Recent Files</h3>
135
+ <div class="space-y-2">
136
+ <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded cursor-pointer">
137
+ <div class="flex items-center space-x-2">
138
+ <i class="fas fa-file-code text-blue-500"></i>
139
+ <span>app.js</span>
140
+ </div>
141
+ <span class="text-xs text-gray-500">2 min ago</span>
142
+ </div>
143
+ <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded cursor-pointer">
144
+ <div class="flex items-center space-x-2">
145
+ <i class="fas fa-file-code text-green-500"></i>
146
+ <span>styles.css</span>
147
+ </div>
148
+ <span class="text-xs text-gray-500">15 min ago</span>
149
+ </div>
150
+ <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded cursor-pointer">
151
+ <div class="flex items-center space-x-2">
152
+ <i class="fas fa-file-code text-purple-500"></i>
153
+ <span>index.html</span>
154
+ </div>
155
+ <span class="text-xs text-gray-500">1 hour ago</span>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Main Content Area -->
162
+ <div class="lg:col-span-2 space-y-6">
163
+ <!-- Tabs -->
164
+ <div class="flex overflow-x-auto border-b border-gray-200">
165
+ <button onclick="setActiveTab('generate')" id="generate-tab" class="tab-active px-4 py-2 font-medium text-sm focus:outline-none">
166
+ Generate Code
167
+ </button>
168
+ <button onclick="setActiveTab('refactor')" id="refactor-tab" class="px-4 py-2 font-medium text-sm focus:outline-none">
169
+ Refactor
170
+ </button>
171
+ <button onclick="setActiveTab('debug')" id="debug-tab" class="px-4 py-2 font-medium text-sm focus:outline-none">
172
+ Debug
173
+ </button>
174
+ <button onclick="setActiveTab('document')" id="document-tab" class="px-4 py-2 font-medium text-sm focus:outline-none">
175
+ Document
176
+ </button>
177
+ <button onclick="setActiveTab('question')" id="question-tab" class="px-4 py-2 font-medium text-sm focus:outline-none">
178
+ Q&A
179
+ </button>
180
+ </div>
181
+
182
+ <!-- Input Area -->
183
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
184
+ <div class="p-4 border-b border-gray-200">
185
+ <div class="flex items-center justify-between">
186
+ <h4 class="font-semibold">Describe what you want to generate</h4>
187
+ <div class="flex space-x-2">
188
+ <select class="bg-gray-100 border-0 rounded text-sm px-2 py-1 focus:ring-2 focus:ring-purple-500">
189
+ <option>JavaScript</option>
190
+ <option>Python</option>
191
+ <option>HTML</option>
192
+ <option>CSS</option>
193
+ <option>TypeScript</option>
194
+ <option>Java</option>
195
+ </select>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ <div class="p-4">
200
+ <textarea id="prompt-input" class="w-full h-32 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Example: Create a React component that displays a list of products with images, names, and prices..."></textarea>
201
+ <div class="mt-4 flex justify-between items-center">
202
+ <div class="flex space-x-2">
203
+ <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded text-sm">
204
+ <i class="fas fa-lightbulb mr-1"></i> Examples
205
+ </button>
206
+ <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded text-sm">
207
+ <i class="fas fa-history mr-1"></i> History
208
+ </button>
209
+ </div>
210
+ <button onclick="generateCode()" class="gradient-bg text-white px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition flex items-center">
211
+ <i class="fas fa-bolt mr-2"></i> Generate
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Response Area -->
218
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
219
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
220
+ <h4 class="font-semibold">Generated Code</h4>
221
+ <div class="flex space-x-2">
222
+ <button class="text-gray-500 hover:text-purple-700">
223
+ <i class="fas fa-copy"></i>
224
+ </button>
225
+ <button class="text-gray-500 hover:text-purple-700">
226
+ <i class="fas fa-download"></i>
227
+ </button>
228
+ <button class="text-gray-500 hover:text-purple-700">
229
+ <i class="fas fa-expand"></i>
230
+ </button>
231
+ </div>
232
+ </div>
233
+ <div id="response-area" class="response-area p-4 code-editor text-gray-200">
234
+ <div id="loading-indicator" class="hidden text-center py-10">
235
+ <div class="loading-dots text-xl">Generating</div>
236
+ </div>
237
+ <pre id="code-output" class="hidden overflow-auto"><code id="generated-code"></code></pre>
238
+ <div id="empty-state" class="text-center py-10 text-gray-400">
239
+ <i class="fas fa-code text-4xl mb-3"></i>
240
+ <p>Your generated code will appear here</p>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </main>
247
+
248
+ <!-- Features Section -->
249
+ <section class="bg-gray-50 py-16">
250
+ <div class="container mx-auto px-4">
251
+ <h2 class="text-3xl font-bold text-center mb-12">Powerful Features for Developers</h2>
252
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
253
+ <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300">
254
+ <div class="text-purple-600 mb-4">
255
+ <i class="fas fa-magic text-3xl"></i>
256
+ </div>
257
+ <h3 class="text-xl font-bold mb-3">Code Generation</h3>
258
+ <p class="text-gray-600">Turn natural language descriptions into functional code across multiple programming languages.</p>
259
+ </div>
260
+ <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300">
261
+ <div class="text-blue-600 mb-4">
262
+ <i class="fas fa-refresh text-3xl"></i>
263
+ </div>
264
+ <h3 class="text-xl font-bold mb-3">Smart Refactoring</h3>
265
+ <p class="text-gray-600">Improve your code quality with AI-powered refactoring suggestions and optimizations.</p>
266
+ </div>
267
+ <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300">
268
+ <div class="text-red-600 mb-4">
269
+ <i class="fas fa-bug text-3xl"></i>
270
+ </div>
271
+ <h3 class="text-xl font-bold mb-3">Debugging Assistant</h3>
272
+ <p class="text-gray-600">Identify and fix bugs in your code with intelligent error detection and solutions.</p>
273
+ </div>
274
+ <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300">
275
+ <div class="text-green-600 mb-4">
276
+ <i class="fas fa-file-alt text-3xl"></i>
277
+ </div>
278
+ <h3 class="text-xl font-bold mb-3">Documentation</h3>
279
+ <p class="text-gray-600">Automatically generate comprehensive documentation for your codebase.</p>
280
+ </div>
281
+ <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300">
282
+ <div class="text-yellow-600 mb-4">
283
+ <i class="fas fa-question-circle text-3xl"></i>
284
+ </div>
285
+ <h3 class="text-xl font-bold mb-3">Code Q&A</h3>
286
+ <p class="text-gray-600">Get instant answers to questions about your codebase and programming concepts.</p>
287
+ </div>
288
+ <div class="feature-card bg-white rounded-xl shadow-md p-6 transition duration-300">
289
+ <div class="text-indigo-600 mb-4">
290
+ <i class="fas fa-robot text-3xl"></i>
291
+ </div>
292
+ <h3 class="text-xl font-bold mb-3">Task Automation</h3>
293
+ <p class="text-gray-600">Automate repetitive coding tasks and boilerplate generation to save time.</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </section>
298
+
299
+ <!-- Footer -->
300
+ <footer class="bg-gray-800 text-white py-12">
301
+ <div class="container mx-auto px-4">
302
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
303
+ <div>
304
+ <h3 class="text-xl font-bold mb-4">CodeGen AI</h3>
305
+ <p class="text-gray-400">Your AI-powered coding assistant for faster, better development.</p>
306
+ </div>
307
+ <div>
308
+ <h4 class="font-bold mb-4">Product</h4>
309
+ <ul class="space-y-2">
310
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
311
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
312
+ <li><a href="#" class
313
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ I want a web-based application that can: πŸš€ Generate Code from natural language descriptions πŸ”§ Refactor & Debug existing code πŸ“ Write & Update documentation πŸ€” Answer Questions about your codebase πŸ”„ Automate repetitive tasks πŸ—οΈ Create new files and projects Quick Start