Hugging Face's logo

Spaces:
Holycanolies123
/
Test10
Running

App Files Community
Holycanolies123 commited on
Commit
153831b
·
verified ·
1 Parent(s): 77357c2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +149 -252
index.html CHANGED
@@ -1,267 +1,164 @@
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>AI App Builder</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
  <script>
9
- tailwind.config = {
10
- darkMode: 'class',
11
- theme: {
12
- extend: {
13
- colors: {
14
- primary: {
15
- DEFAULT: '#5D5CDE',
16
- dark: '#6E6DFF',
17
- },
18
- dark: {
19
- DEFAULT: '#181818',
20
- lighter: '#232323',
21
- card: '#2A2A2A',
22
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  },
24
- animation: {
25
- 'bounce-slow': 'bounce 2s infinite',
26
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
- }
29
- }
30
 
31
- // Check for dark mode preference
32
- if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
33
- document.documentElement.classList.add('dark');
34
- }
35
-
36
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
37
- if (event.matches) {
38
- document.documentElement.classList.add('dark');
39
- } else {
40
- document.documentElement.classList.remove('dark');
 
 
 
 
 
 
 
41
  }
42
- });
43
- </script>
44
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
45
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" rel="stylesheet" />
46
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
47
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
48
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script>
49
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-css.min.js"></script>
50
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-html.min.js"></script>
51
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-python.min.js"></script>
52
- <style>
53
- .code-container {
54
- max-height: 400px;
55
- overflow-y: auto;
56
- }
57
-
58
- .code-container pre {
59
- margin: 0;
60
- border-radius: 0.5rem;
61
- }
62
-
63
- /* Custom scrollbar for code blocks */
64
- .code-container::-webkit-scrollbar {
65
- width: 8px;
66
- height: 8px;
67
- }
68
-
69
- .code-container::-webkit-scrollbar-track {
70
- background: #2d2d2d;
71
- border-radius: 4px;
72
- }
73
-
74
- .code-container::-webkit-scrollbar-thumb {
75
- background: #5D5CDE;
76
- border-radius: 4px;
77
- }
78
-
79
- .code-container::-webkit-scrollbar-thumb:hover {
80
- background: #6E6DFF;
81
  }
82
 
83
- /* Animation for loading */
84
- @keyframes pulse {
85
- 0%, 100% {
86
- opacity: 1;
 
 
 
87
  }
88
- 50% {
89
- opacity: 0.5;
90
- }
91
- }
92
-
93
- .loading-pulse {
94
- animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
95
- }
96
- </style>
97
- </head>
98
- <body class="bg-white dark:bg-dark text-gray-900 dark:text-gray-100 min-h-screen">
99
- <div class="container mx-auto px-4 py-8 max-w-5xl">
100
- <header class="mb-8">
101
- <div class="flex items-center justify-between">
102
- <h1 class="text-3xl font-bold text-primary dark:text-primary-dark flex items-center">
103
- <i class="fas fa-rocket mr-3"></i>AI App Builder
104
- </h1>
105
- <div class="hidden sm:block text-sm text-gray-500 dark:text-gray-400 italic">Build and deploy without limits</div>
106
- </div>
107
- <p class="text-gray-600 dark:text-gray-300 mt-2">Create, customize, and deploy apps powered by AI</p>
108
- </header>
109
-
110
- <main>
111
- <div id="app-selection" class="mb-8">
112
- <h2 class="text-xl font-semibold mb-4">
113
- <i class="fas fa-list-ul text-primary dark:text-primary-dark mr-2"></i>
114
- Choose Your App Type
115
- </h2>
116
- <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
117
- <button class="app-type-btn p-4 bg-gray-100 dark:bg-dark-card rounded-lg text-center hover:shadow-md transition-all border border-transparent hover:border-primary dark:hover:border-primary-dark" data-type="website">
118
- <i class="fas fa-globe text-2xl mb-2 text-primary dark:text-primary-dark"></i>
119
- <div>Website</div>
120
- </button>
121
- <button class="app-type-btn p-4 bg-gray-100 dark:bg-dark-card rounded-lg text-center hover:shadow-md transition-all border border-transparent hover:border-primary dark:hover:border-primary-dark" data-type="image-generator">
122
- <i class="fas fa-image text-2xl mb-2 text-primary dark:text-primary-dark"></i>
123
- <div>Image Generator</div>
124
- </button>
125
- <button class="app-type-btn p-4 bg-gray-100 dark:bg-dark-card rounded-lg text-center hover:shadow-md transition-all border border-transparent hover:border-primary dark:hover:border-primary-dark" data-type="video-generator">
126
- <i class="fas fa-video text-2xl mb-2 text-primary dark:text-primary-dark"></i>
127
- <div>Video Generator</div>
128
- </button>
129
- <button class="app-type-btn p-4 bg-gray-100 dark:bg-dark-card rounded-lg text-center hover:shadow-md transition-all border border-transparent hover:border-primary dark:hover:border-primary-dark" data-type="game">
130
- <i class="fas fa-gamepad text-2xl mb-2 text-primary dark:text-primary-dark"></i>
131
- <div>Game</div>
132
- </button>
133
- <button class="app-type-btn p-4 bg-gray-100 dark:bg-dark-card rounded-lg text-center hover:shadow-md transition-all border border-transparent hover:border-primary dark:hover:border-primary-dark" data-type="music-maker">
134
- <i class="fas fa-music text-2xl mb-2 text-primary dark:text-primary-dark"></i>
135
- <div>Music Maker</div>
136
- </button>
137
- <button class="app-type-btn p-4 bg-gray-100 dark:bg-dark-card rounded-lg text-center hover:shadow-md transition-all border border-transparent hover:border-primary dark:hover:border-primary-dark" data-type="chat-bot">
138
- <i class="fas fa-comments text-2xl mb-2 text-primary dark:text-primary-dark"></i>
139
- <div>Chat Bot</div>
140
- </button>
141
- <button class="app-type-btn p-4 bg-gray-100 dark:bg-dark-card rounded-lg text-center hover:shadow-md transition-all border border-transparent hover:border-primary dark:hover:border-primary-dark" data-type="data-viz">
142
- <i class="fas fa-chart-bar text-2xl mb-2 text-primary dark:text-primary-dark"></i>
143
- <div>Data Visualization</div>
144
- </button>
145
- <button class="app-type-btn p-4 bg-gray-100 dark:bg-dark-card rounded-lg text-center hover:shadow-md transition-all border border-transparent hover:border-primary dark:hover:border-primary-dark" data-type="other">
146
- <i class="fas fa-ellipsis-h text-2xl mb-2 text-primary dark:text-primary-dark"></i>
147
- <div>Other</div>
148
- </button>
149
- </div>
150
- </div>
151
-
152
- <div id="app-requirements" class="hidden mb-8">
153
- <h2 class="text-xl font-semibold mb-4">
154
- <i class="fas fa-pencil-alt text-primary dark:text-primary-dark mr-2"></i>
155
- <span id="requirements-title">Describe Your App</span>
156
- </h2>
157
- <div class="bg-gray-100 dark:bg-dark-card p-6 rounded-lg">
158
- <form id="requirements-form">
159
- <div class="mb-4">
160
- <label for="app-name" class="block mb-2 font-medium">App Name</label>
161
- <input type="text" id="app-name" placeholder="Enter a name for your app" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark-lighter text-base dark:text-white">
162
- </div>
163
- <div class="mb-4">
164
- <label for="app-description" class="block mb-2 font-medium">Detailed Requirements</label>
165
- <textarea id="app-description" rows="5" placeholder="Describe your app in detail, including features, functionality, and design preferences..." class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark-lighter text-base dark:text-white"></textarea>
166
- </div>
167
- <div class="mb-4" id="technology-select">
168
- <label class="block mb-2 font-medium">Preferred Technologies</label>
169
- <div class="flex flex-wrap gap-2" id="technology-options">
170
- </div>
171
- </div>
172
- <div class="flex justify-between">
173
- <button type="button" id="back-to-app-types" class="px-4 py-2 bg-gray-300 dark:bg-gray-700 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors">
174
- <i class="fas fa-arrow-left mr-2"></i>Back
175
- </button>
176
- <button type="submit" id="generate-app-btn" class="px-4 py-2 bg-primary dark:bg-primary-dark text-white rounded-lg hover:bg-opacity-90 transition-colors">
177
- <i class="fas fa-magic mr-2"></i>Generate App
178
- </button>
179
- </div>
180
- </form>
181
- </div>
182
- </div>
183
-
184
- <div id="code-generation" class="hidden">
185
- <div id="generation-loading" class="text-center py-12">
186
- <div class="inline-block p-4">
187
- <i class="fas fa-spinner fa-spin text-4xl text-primary dark:text-primary-dark mb-4"></i>
188
- <p class="text-lg font-medium loading-pulse">Generating your app...</p>
189
- <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">This may take a minute</p>
190
- </div>
191
- </div>
192
-
193
- <div id="generation-results" class="hidden">
194
- <div class="flex justify-between items-center mb-4">
195
- <h2 class="text-xl font-semibold">
196
- <i class="fas fa-code text-primary dark:text-primary-dark mr-2"></i>Your Generated App
197
- </h2>
198
- <div class="flex gap-2">
199
- <button id="modify-app-btn" class="px-3 py-1.5 bg-primary dark:bg-primary-dark text-white rounded-lg hover:bg-opacity-90 transition-colors text-sm">
200
- <i class="fas fa-edit mr-1"></i>Modify
201
- </button>
202
- <button id="new-app-btn" class="px-3 py-1.5 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors text-sm">
203
- <i class="fas fa-plus mr-1"></i>New App
204
- </button>
205
- </div>
206
- </div>
207
-
208
- <div id="app-preview-container" class="mb-6 hidden">
209
- <h3 class="text-lg font-medium mb-3">Preview</h3>
210
- <div id="app-preview" class="border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark-lighter p-4 h-[300px] overflow-auto">
211
- </div>
212
- </div>
213
-
214
- <div class="mb-6">
215
- <div class="flex justify-between items-center mb-3">
216
- <h3 class="text-lg font-medium">Generated Code</h3>
217
- <button id="copy-code-btn" class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 text-sm transition-colors">
218
- <i class="fas fa-copy mr-1"></i>Copy Code
219
- </button>
220
- </div>
221
- <div class="relative">
222
- <div id="code-display" class="code-container border border-gray-300 dark:border-gray-600 rounded-lg bg-[#2d2d2d] text-white p-1">
223
- </div>
224
- <div id="copy-notification" class="hidden absolute top-2 right-2 bg-green-500 text-white px-3 py-1 rounded-lg text-sm">
225
- Copied!
226
- </div>
227
- </div>
228
- </div>
229
 
230
- <div class="mb-6">
231
- <h3 class="text-lg font-medium mb-3">Deployment Instructions</h3>
232
- <div class="border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark-lighter p-4">
233
- <div id="deployment-instructions">
234
- </div>
235
- </div>
236
- </div>
237
 
238
- <div id="modification-form" class="hidden mb-6">
239
- <h3 class="text-lg font-medium mb-3">Modify Your App</h3>
240
- <div class="border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark-lighter p-4">
241
- <div class="mb-4">
242
- <label for="modification-request" class="block mb-2 font-medium">Describe Your Changes</label>
243
- <textarea id="modification-request" rows="3" placeholder="Describe what changes you'd like to make to your app..." class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-dark-lighter text-base dark:text-white"></textarea>
244
- </div>
245
- <button id="submit-modification" class="px-4 py-2 bg-primary dark:bg-primary-dark text-white rounded-lg hover:bg-opacity-90 transition-colors">
246
- <i class="fas fa-sync-alt mr-2"></i>Update App
247
- </button>
248
- </div>
249
- </div>
250
- </div>
251
- </div>
252
- </main>
253
 
254
- <footer class="mt-12 text-center text-sm text-gray-500 dark:text-gray-400">
255
- <p>AI App Builder &copy; 2023 - Use it to build amazing applications with the power of AI</p>
256
- </footer>
257
- </div>
258
 
259
- <script>
260
- // Global state
261
- const state = {
262
- appType: null,
263
- appName: '',
264
- appDescription: '',
265
- technologies: [],
266
- generatedCode: '',
267
- currentView: 'app-selection',
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <!-- ... (previous head content remains the same) -->
5
+ </head>
6
+ <body class="bg-white dark:bg-dark text-gray-900 dark:text-gray-100 min-h-screen">
7
+ <!-- ... (previous body content remains the same until the script section) -->
8
  <script>
9
+ // ... (previous code remains the same until the generateCode function)
10
+
11
+ async function generateCode() {
12
+ try {
13
+ // Show loading state
14
+ appRequirements.classList.add('hidden');
15
+ codeGeneration.classList.remove('hidden');
16
+ generationLoading.classList.remove('hidden');
17
+ generationResults.classList.add('hidden');
18
+ state.currentView = 'code-generation';
19
+
20
+ // Build the prompt
21
+ const techList = state.technologies.length > 0
22
+ ? `using ${state.technologies.join(', ')}`
23
+ : '';
24
+
25
+ const appTypeText = Array.from(appTypeButtons)
26
+ .find(btn => btn.getAttribute('data-type') === state.appType)
27
+ .textContent.trim();
28
+
29
+ state.originalPrompt = `
30
+ Create a ${appTypeText} application named "${state.appName}" ${techList}.
31
+ Requirements: ${state.appDescription}
32
+
33
+ Respond with:
34
+ 1. Complete, ready-to-run code that works in a browser
35
+ 2. Only use technologies that work in a standard web browser without backend dependencies
36
+ 3. Make the code visually appealing with good UI/UX
37
+ 4. Include detailed comments
38
+ 5. Return ONLY the complete code, no explanations or additional text
39
+ `;
40
+
41
+ // Get API key from user
42
+ const apiKey = prompt('Please enter your DeepSeek API key:');
43
+ if (!apiKey) return;
44
+
45
+ // Make API call to DeepSeek
46
+ const response = await fetch('https://api.boldapps.ai/v1/chat/completions', {
47
+ method: 'POST',
48
+ headers: {
49
+ 'Content-Type': 'application/json',
50
+ 'Authorization': `Bearer ${apiKey}`
51
  },
52
+ body: JSON.stringify({
53
+ model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B',
54
+ messages: [{
55
+ role: 'user',
56
+ content: state.originalPrompt
57
+ }],
58
+ temperature: 0.7,
59
+ max_tokens: 4096
60
+ })
61
+ });
62
+
63
+ const data = await response.json();
64
+
65
+ if (data.error) {
66
+ showError(data.error.message);
67
+ return;
68
  }
 
 
69
 
70
+ const code = data.choices[0].message.content;
71
+
72
+ // Display code and preview
73
+ displayGeneratedCode(code);
74
+
75
+ // Create deployment instructions
76
+ createDeploymentInstructions();
77
+
78
+ // Show results
79
+ generationLoading.classList.add('hidden');
80
+ generationResults.classList.remove('hidden');
81
+
82
+ // Try to create a preview
83
+ tryCreatePreview(code);
84
+
85
+ } catch (error) {
86
+ showError("An error occurred: " + error.message);
87
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  }
89
 
90
+ // Modify submitModification function to use DeepSeek API
91
+ submitModification.addEventListener('click', async () => {
92
+ const modificationRequest = document.getElementById('modification-request').value.trim();
93
+
94
+ if (!modificationRequest) {
95
+ alert('Please describe the changes you want to make');
96
+ return;
97
  }
98
+
99
+ // Show loading
100
+ modificationForm.classList.add('hidden');
101
+ generationResults.classList.add('hidden');
102
+ generationLoading.classList.remove('hidden');
103
+
104
+ try {
105
+ // Get API key from user
106
+ const apiKey = prompt('Please enter your DeepSeek API key:');
107
+ if (!apiKey) return;
108
+
109
+ // Make API call to DeepSeek
110
+ const response = await fetch('https://api.boldapps.ai/v1/chat/completions', {
111
+ method: 'POST',
112
+ headers: {
113
+ 'Content-Type': 'application/json',
114
+ 'Authorization': `Bearer ${apiKey}`
115
+ },
116
+ body: JSON.stringify({
117
+ model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B',
118
+ messages: [{
119
+ role: 'user',
120
+ content: `
121
+ I have the following code for a ${state.appType} app named "${state.appName}":
122
+
123
+ \`\`\`
124
+ ${state.generatedCode}
125
+ \`\`\`
126
+
127
+ Please modify the code according to this request: "${modificationRequest}"
128
+
129
+ Return ONLY the complete modified code, no explanations or additional text.
130
+ `
131
+ }],
132
+ temperature: 0.7,
133
+ max_tokens: 4096
134
+ })
135
+ });
136
+
137
+ const data = await response.json();
138
+
139
+ if (data.error) {
140
+ showError(data.error.message);
141
+ return;
142
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
 
144
+ const modifiedCode = data.choices[0].message.content;
 
 
 
 
 
 
145
 
146
+ // Display code and preview
147
+ displayGeneratedCode(modifiedCode);
148
+
149
+ // Try to create a preview
150
+ tryCreatePreview(modifiedCode);
151
+
152
+ // Show results
153
+ generationLoading.classList.add('hidden');
154
+ generationResults.classList.remove('hidden');
 
 
 
 
 
 
155
 
156
+ } catch (error) {
157
+ showError("An error occurred: " + error.message);
158
+ }
159
+ });
160
 
161
+ // ... (rest of the code remains the same)
162
+ </script>
163
+ </body>
164
+ </html>