Hugging Face's logo

Spaces:
hharris928
/
html-to-react
Running

App Files Community
hharris928 commited on
Commit
f8b1f67
·
verified ·
1 Parent(s): 9dd1b23

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +423 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Html To React
3
- emoji: 🌖
4
  colorFrom: red
5
- colorTo: blue
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: html-to-react
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: pink
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,423 @@
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>HTML to React Converter</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
+ .dropzone {
11
+ border: 2px dashed #9CA3AF;
12
+ transition: all 0.3s ease;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #3B82F6;
16
+ background-color: #EFF6FF;
17
+ }
18
+ .code-block {
19
+ font-family: 'Courier New', monospace;
20
+ background-color: #1E293B;
21
+ color: #F8FAFC;
22
+ border-radius: 0.5rem;
23
+ overflow-x: auto;
24
+ }
25
+ .tab-button {
26
+ transition: all 0.2s ease;
27
+ }
28
+ .tab-button.active {
29
+ border-bottom: 2px solid #3B82F6;
30
+ color: #3B82F6;
31
+ }
32
+ .spinner {
33
+ animation: spin 1s linear infinite;
34
+ }
35
+ @keyframes spin {
36
+ 0% { transform: rotate(0deg); }
37
+ 100% { transform: rotate(360deg); }
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-50 min-h-screen">
42
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
43
+ <!-- Header -->
44
+ <header class="mb-10 text-center">
45
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">
46
+ <span class="text-blue-600">HTML</span> to <span class="text-cyan-500">React</span> Converter
47
+ </h1>
48
+ <p class="text-gray-600 max-w-2xl mx-auto">
49
+ Transform your HTML, CSS, and JavaScript files into fully functional React components using AI.
50
+ Upload your files and let our system generate clean, modern React code.
51
+ </p>
52
+ </header>
53
+
54
+ <!-- Main Content -->
55
+ <main>
56
+ <!-- Upload Section -->
57
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
58
+ <div class="flex flex-col items-center">
59
+ <div
60
+ id="dropzone"
61
+ class="dropzone w-full max-w-3xl rounded-lg p-12 text-center cursor-pointer mb-4"
62
+ >
63
+ <div class="flex flex-col items-center justify-center">
64
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
65
+ <h3 class="text-lg font-medium text-gray-700 mb-2">
66
+ Drag & drop your files here
67
+ </h3>
68
+ <p class="text-gray-500 text-sm mb-4">
69
+ Or click to browse your files (HTML, CSS, JS)
70
+ </p>
71
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition">
72
+ Select Files
73
+ </button>
74
+ </div>
75
+ <input
76
+ type="file"
77
+ id="fileInput"
78
+ class="hidden"
79
+ multiple
80
+ accept=".html,.css,.js,.jsx,.ts,.tsx"
81
+ >
82
+ </div>
83
+ <div id="fileList" class="w-full max-w-3xl space-y-2 hidden"></div>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Configuration Options -->
88
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
89
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Conversion Options</h2>
90
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
91
+ <div>
92
+ <label class="block text-sm font-medium text-gray-700 mb-1">React Version</label>
93
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
94
+ <option>React 18 (Latest)</option>
95
+ <option>React 17</option>
96
+ <option>React 16</option>
97
+ </select>
98
+ </div>
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-700 mb-1">JavaScript Type</label>
101
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
102
+ <option>JavaScript (ES6+)</option>
103
+ <option>TypeScript</option>
104
+ </select>
105
+ </div>
106
+ <div>
107
+ <label class="block text-sm font-medium text-gray-700 mb-1">CSS Handling</label>
108
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
109
+ <option>CSS Modules</option>
110
+ <option>Styled Components</option>
111
+ <option>Tailwind CSS</option>
112
+ <option>Plain CSS</option>
113
+ </select>
114
+ </div>
115
+ <div>
116
+ <label class="block text-sm font-medium text-gray-700 mb-1">Component Type</label>
117
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
118
+ <option>Functional Components</option>
119
+ <option>Class Components</option>
120
+ </select>
121
+ </div>
122
+ </div>
123
+ <div class="mt-6">
124
+ <label class="inline-flex items-center">
125
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50">
126
+ <span class="ml-2 text-sm text-gray-700">Include React Router setup</span>
127
+ </label>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Processing Section -->
132
+ <div id="processingSection" class="hidden bg-white rounded-xl shadow-md p-6 mb-8">
133
+ <div class="flex flex-col items-center justify-center py-8">
134
+ <div class="spinner text-4xl text-blue-600 mb-4">
135
+ <i class="fas fa-cog"></i>
136
+ </div>
137
+ <h3 class="text-xl font-medium text-gray-800 mb-2">Processing your files</h3>
138
+ <p class="text-gray-600 mb-4">Our AI is analyzing your code and generating React components...</p>
139
+ <div class="w-full max-w-md bg-gray-200 rounded-full h-2.5">
140
+ <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
141
+ </div>
142
+ <p id="progressText" class="text-sm text-gray-500 mt-2">0% complete</p>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Results Section -->
147
+ <div id="resultsSection" class="hidden bg-white rounded-xl shadow-md p-6">
148
+ <div class="flex justify-between items-center mb-6">
149
+ <h2 class="text-xl font-semibold text-gray-800">Generated React Application</h2>
150
+ <button id="downloadAll" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm flex items-center">
151
+ <i class="fas fa-download mr-2"></i> Download All
152
+ </button>
153
+ </div>
154
+
155
+ <div class="border-b border-gray-200 mb-4">
156
+ <nav class="-mb-px flex space-x-8">
157
+ <button class="tab-button active py-4 px-1 border-b-2 font-medium text-sm">
158
+ Components
159
+ </button>
160
+ <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm">
161
+ App.js
162
+ </button>
163
+ <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm">
164
+ Styles
165
+ </button>
166
+ <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm">
167
+ Package.json
168
+ </button>
169
+ </nav>
170
+ </div>
171
+
172
+ <div class="mb-4 flex justify-between items-center">
173
+ <div class="flex space-x-2">
174
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md text-sm">
175
+ <i class="fas fa-copy mr-1"></i> Copy
176
+ </button>
177
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded-md text-sm">
178
+ <i class="fas fa-download mr-1"></i> Download
179
+ </button>
180
+ </div>
181
+ <div class="text-sm text-gray-500">
182
+ <span class="font-medium">File:</span> MainComponent.jsx
183
+ </div>
184
+ </div>
185
+
186
+ <div class="code-block p-4 mb-6">
187
+ <pre id="generatedCode" class="text-sm"><code class="language-javascript">// Generated code will appear here</code></pre>
188
+ </div>
189
+
190
+ <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
191
+ <div class="flex">
192
+ <div class="flex-shrink-0">
193
+ <i class="fas fa-info-circle text-blue-400"></i>
194
+ </div>
195
+ <div class="ml-3">
196
+ <h3 class="text-sm font-medium text-blue-800">AI Suggestions</h3>
197
+ <div class="mt-2 text-sm text-blue-700">
198
+ <p>
199
+ The AI detected that your HTML includes form elements. Consider using React Hook Form
200
+ for better form management. Would you like to add this dependency to your package.json?
201
+ </p>
202
+ </div>
203
+ <div class="mt-4">
204
+ <button class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
205
+ Add React Hook Form
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="bg-gray-50 p-4 rounded-md">
213
+ <h3 class="text-sm font-medium text-gray-800 mb-2">Project Structure</h3>
214
+ <div class="text-sm text-gray-700 font-mono">
215
+ <div class="pl-4">├── src/</div>
216
+ <div class="pl-8">├── components/</div>
217
+ <div class="pl-12">├── MainComponent.jsx</div>
218
+ <div class="pl-12">├── Header.jsx</div>
219
+ <div class="pl-12">└── Footer.jsx</div>
220
+ <div class="pl-8">├── styles/</div>
221
+ <div class="pl-12">└── main.module.css</div>
222
+ <div class="pl-8">├── App.js</div>
223
+ <div class="pl-8">└── index.js</div>
224
+ <div class="pl-4">├── public/</div>
225
+ <div class="pl-4">├── package.json</div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </main>
230
+
231
+ <!-- Footer -->
232
+ <footer class="mt-12 text-center text-gray-500 text-sm">
233
+ <p>Powered by AI technology. This tool uses open-source LLMs to analyze and convert your code.</p>
234
+ <p class="mt-1">Not affiliated with Facebook or the React team.</p>
235
+ </footer>
236
+ </div>
237
+
238
+ <script>
239
+ document.addEventListener('DOMContentLoaded', function() {
240
+ const dropzone = document.getElementById('dropzone');
241
+ const fileInput = document.getElementById('fileInput');
242
+ const fileList = document.getElementById('fileList');
243
+ const processingSection = document.getElementById('processingSection');
244
+ const resultsSection = document.getElementById('resultsSection');
245
+ const progressBar = document.getElementById('progressBar');
246
+ const progressText = document.getElementById('progressText');
247
+ const generatedCode = document.getElementById('generatedCode');
248
+ const downloadAll = document.getElementById('downloadAll');
249
+
250
+ // Tab switching
251
+ const tabButtons = document.querySelectorAll('.tab-button');
252
+ tabButtons.forEach(button => {
253
+ button.addEventListener('click', () => {
254
+ tabButtons.forEach(btn => btn.classList.remove('active'));
255
+ button.classList.add('active');
256
+ });
257
+ });
258
+
259
+ // Dropzone highlight
260
+ ['dragenter', 'dragover'].forEach(eventName => {
261
+ dropzone.addEventListener(eventName, highlight, false);
262
+ });
263
+
264
+ ['dragleave', 'drop'].forEach(eventName => {
265
+ dropzone.addEventListener(eventName, unhighlight, false);
266
+ });
267
+
268
+ function highlight(e) {
269
+ e.preventDefault();
270
+ e.stopPropagation();
271
+ dropzone.classList.add('active');
272
+ }
273
+
274
+ function unhighlight(e) {
275
+ e.preventDefault();
276
+ e.stopPropagation();
277
+ dropzone.classList.remove('active');
278
+ }
279
+
280
+ // Handle dropped files
281
+ dropzone.addEventListener('drop', handleDrop, false);
282
+ dropzone.addEventListener('click', () => fileInput.click());
283
+ fileInput.addEventListener('change', handleFiles);
284
+
285
+ function handleDrop(e) {
286
+ const dt = e.dataTransfer;
287
+ const files = dt.files;
288
+ handleFiles({ target: { files } });
289
+ }
290
+
291
+ function handleFiles(e) {
292
+ const files = e.target.files;
293
+ if (files.length === 0) return;
294
+
295
+ fileList.innerHTML = '';
296
+ fileList.classList.remove('hidden');
297
+
298
+ for (let i = 0; i < files.length; i++) {
299
+ const file = files[i];
300
+ const fileItem = document.createElement('div');
301
+ fileItem.className = 'flex items-center p-3 bg-gray-50 rounded-md';
302
+ fileItem.innerHTML = `
303
+ <i class="fas ${getFileIcon(file.name)} text-gray-500 mr-3"></i>
304
+ <div class="flex-1">
305
+ <div class="text-sm font-medium text-gray-800">${file.name}</div>
306
+ <div class="text-xs text-gray-500">${formatFileSize(file.size)}</div>
307
+ </div>
308
+ <button class="text-red-500 hover:text-red-700">
309
+ <i class="fas fa-times"></i>
310
+ </button>
311
+ `;
312
+ fileList.appendChild(fileItem);
313
+
314
+ // Remove file handler
315
+ fileItem.querySelector('button').addEventListener('click', () => {
316
+ fileItem.remove();
317
+ if (fileList.children.length === 0) {
318
+ fileList.classList.add('hidden');
319
+ }
320
+ });
321
+ }
322
+
323
+ // Show process button if not already showing
324
+ if (!document.getElementById('processBtn')) {
325
+ const processBtn = document.createElement('button');
326
+ processBtn.id = 'processBtn';
327
+ processBtn.className = 'bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md transition mt-4 flex items-center justify-center w-full max-w-xs mx-auto';
328
+ processBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Convert to React';
329
+ processBtn.addEventListener('click', processFiles);
330
+ dropzone.parentNode.insertBefore(processBtn, dropzone.nextSibling);
331
+ }
332
+ }
333
+
334
+ function getFileIcon(filename) {
335
+ const ext = filename.split('.').pop().toLowerCase();
336
+ if (['html', 'htm'].includes(ext)) return 'fa-file-code';
337
+ if (['css'].includes(ext)) return 'fa-file-alt';
338
+ if (['js', 'jsx', 'ts', 'tsx'].includes(ext)) return 'fa-file-code';
339
+ return 'fa-file';
340
+ }
341
+
342
+ function formatFileSize(bytes) {
343
+ if (bytes === 0) return '0 Bytes';
344
+ const k = 1024;
345
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
346
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
347
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
348
+ }
349
+
350
+ function processFiles() {
351
+ processingSection.classList.remove('hidden');
352
+
353
+ // Simulate processing with progress updates
354
+ let progress = 0;
355
+ const interval = setInterval(() => {
356
+ progress += Math.random() * 10;
357
+ if (progress > 100) progress = 100;
358
+
359
+ progressBar.style.width = `${progress}%`;
360
+ progressText.textContent = `${Math.round(progress)}% complete`;
361
+
362
+ if (progress === 100) {
363
+ clearInterval(interval);
364
+ setTimeout(showResults, 500);
365
+ }
366
+ }, 500);
367
+ }
368
+
369
+ function showResults() {
370
+ processingSection.classList.add('hidden');
371
+ resultsSection.classList.remove('hidden');
372
+
373
+ // Scroll to results
374
+ resultsSection.scrollIntoView({ behavior: 'smooth' });
375
+
376
+ // Generate sample React code (in a real app, this would come from the AI)
377
+ generatedCode.innerHTML = `
378
+ import React from 'react';
379
+ import styles from './MainComponent.module.css';
380
+
381
+ const MainComponent = () => {
382
+ const [count, setCount] = React.useState(0);
383
+
384
+ const handleClick = () => {
385
+ setCount(prev => prev + 1);
386
+ };
387
+
388
+ return (
389
+ <div className={styles.container}>
390
+ <h1 className={styles.title}>Converted to React!</h1>
391
+ <p className={styles.description}>
392
+ This component was automatically generated from your HTML.
393
+ </p>
394
+ <button
395
+ onClick={handleClick}
396
+ className={styles.button}
397
+ >
398
+ Click me: {count}
399
+ </button>
400
+ </div>
401
+ );
402
+ };
403
+
404
+ export default MainComponent;
405
+ `.trim();
406
+
407
+ // Highlight code (in a real app, you'd use a proper syntax highlighter)
408
+ generatedCode.innerHTML = generatedCode.innerHTML
409
+ .replace(/\/\/.*$/gm, '<span class="text-gray-400">$&</span>')
410
+ .replace(/(['"])(?:(?=(\\?))\2.)*?\1/g, '<span class="text-green-400">$&</span>')
411
+ .replace(/\b(import|from|export|default|const|return|React\.useState)\b/g, '<span class="text-purple-400">$&</span>')
412
+ .replace(/\b(div|h1|p|button)\b/g, '<span class="text-blue-400">$&</span>')
413
+ .replace(/\b(className|onClick)\b/g, '<span class="text-yellow-400">$&</span>');
414
+ }
415
+
416
+ // Download all handler
417
+ downloadAll.addEventListener('click', () => {
418
+ alert('In a real implementation, this would download a zip file with all generated React files.');
419
+ });
420
+ });
421
+ </script>
422
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hharris928/html-to-react" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
423
+ </html>