Mkdm commited on
Commit
b302d18
·
verified ·
1 Parent(s): ea5a1bc

all servisc botton not work make it work to try ar - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +375 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ar
3
- emoji: 📉
4
- colorFrom: gray
5
- colorTo: red
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: ar
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,375 @@
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>AR Creator Studio</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6d28d9',
15
+ secondary: '#10b981',
16
+ dark: '#0f172a',
17
+ darker: '#020617',
18
+ light: '#f8fafc',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ .sidebar {
26
+ scrollbar-width: thin;
27
+ scrollbar-color: #6d28d9 #020617;
28
+ }
29
+ .sidebar::-webkit-scrollbar {
30
+ width: 6px;
31
+ }
32
+ .sidebar::-webkit-scrollbar-track {
33
+ background: #020617;
34
+ }
35
+ .sidebar::-webkit-scrollbar-thumb {
36
+ background-color: #6d28d9;
37
+ border-radius: 6px;
38
+ }
39
+ .ar-preview {
40
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
41
+ }
42
+ .floating-chat {
43
+ box-shadow: 0 10px 25px -5px rgba(109, 40, 217, 0.3);
44
+ }
45
+ .submenu {
46
+ transition: all 0.3s ease;
47
+ max-height: 0;
48
+ overflow: hidden;
49
+ }
50
+ .submenu.open {
51
+ max-height: 500px;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-darker text-light font-sans flex flex-col h-screen">
56
+ <!-- Top Bar -->
57
+ <div class="bg-dark border-b border-gray-800 p-4 flex justify-between items-center">
58
+ <div class="flex items-center space-x-4">
59
+ <h1 class="text-xl font-bold text-primary">AR Creator Studio</h1>
60
+ <div class="bg-gray-800 text-sm px-3 py-1 rounded-full">
61
+ <span class="text-primary">1</span> of <span class="text-secondary">2</span> AR Experiences Published
62
+ </div>
63
+ </div>
64
+ <div class="flex space-x-3">
65
+ <button class="px-4 py-2 rounded-md border border-gray-700 hover:bg-gray-800 transition">
66
+ Close
67
+ </button>
68
+ <button class="px-4 py-2 rounded-md bg-primary hover:bg-purple-800 transition font-medium">
69
+ Publish
70
+ </button>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Main Content -->
75
+ <div class="flex flex-1 overflow-hidden">
76
+ <!-- Sidebar -->
77
+ <div class="w-64 bg-dark border-r border-gray-800 flex flex-col sidebar overflow-y-auto">
78
+ <div class="p-4">
79
+ <h2 class="text-lg font-semibold mb-4">Create AR Experience</h2>
80
+
81
+ <!-- Add Experience Image -->
82
+ <div class="mb-6">
83
+ <button class="w-full flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition">
84
+ <span class="flex items-center">
85
+ <i class="fas fa-image mr-3 text-primary"></i>
86
+ Add Experience Image
87
+ </span>
88
+ <i class="fas fa-chevron-right text-xs text-gray-400"></i>
89
+ </button>
90
+ </div>
91
+
92
+ <!-- Add Element -->
93
+ <div class="mb-6">
94
+ <div class="mb-2">
95
+ <button id="elements-btn" class="w-full flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition">
96
+ <span class="flex items-center">
97
+ <i class="fas fa-cube mr-3 text-primary"></i>
98
+ Add Element
99
+ </span>
100
+ <i id="elements-arrow" class="fas fa-chevron-down text-xs text-gray-400"></i>
101
+ </button>
102
+ </div>
103
+ <div id="elements-submenu" class="submenu pl-8">
104
+ <div class="mb-2">
105
+ <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
106
+ <i class="fas fa-video mr-3 text-blue-400"></i>
107
+ Video
108
+ </button>
109
+ </div>
110
+ <div class="mb-2">
111
+ <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
112
+ <i class="fas fa-photo-film mr-3 text-green-400"></i>
113
+ GIF
114
+ </button>
115
+ </div>
116
+ <div class="mb-2">
117
+ <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
118
+ <i class="fas fa-cube mr-3 text-purple-400"></i>
119
+ 3D Object
120
+ </button>
121
+ </div>
122
+ <div class="mb-2">
123
+ <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
124
+ <i class="fas fa-images mr-3 text-yellow-400"></i>
125
+ Image Gallery
126
+ </button>
127
+ </div>
128
+ <div class="mb-2">
129
+ <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
130
+ <i class="fas fa-globe mr-3 text-red-400"></i>
131
+ 360° Media
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Add Buttons -->
138
+ <div class="mb-6">
139
+ <div class="mb-2">
140
+ <button id="buttons-btn" class="w-full flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition">
141
+ <span class="flex items-center">
142
+ <i class="fas fa-square-plus mr-3 text-primary"></i>
143
+ Add Buttons (Optional)
144
+ </span>
145
+ <i id="buttons-arrow" class="fas fa-chevron-down text-xs text-gray-400"></i>
146
+ </button>
147
+ </div>
148
+ <div id="buttons-submenu" class="submenu pl-8">
149
+ <div class="mb-2">
150
+ <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
151
+ <i class="fas fa-link mr-3 text-blue-400"></i>
152
+ URL Button
153
+ </button>
154
+ </div>
155
+ <div class="mb-2">
156
+ <button class="w-full text-left p-2 rounded hover:bg-gray-700 transition flex items-center">
157
+ <i class="fas fa-vr-cardboard mr-3 text-green-400"></i>
158
+ AR Button
159
+ </button>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Help Section -->
165
+ <div class="mt-8 pt-6 border-t border-gray-800">
166
+ <h3 class="text-sm font-medium text-gray-400 mb-3">Need Help?</h3>
167
+ <a href="#" class="flex items-center text-primary hover:text-purple-400 transition">
168
+ <i class="fas fa-circle-play mr-2"></i>
169
+ Quick Tutorial
170
+ </a>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Main Preview Area -->
176
+ <div class="flex-1 flex flex-col">
177
+ <div class="ar-preview flex-1 flex items-center justify-center p-8 relative">
178
+ <div class="max-w-2xl w-full h-full bg-gray-900 rounded-xl border-2 border-gray-700 flex items-center justify-center relative overflow-hidden">
179
+ <div id="ar-content" class="w-full h-full">
180
+ <div class="absolute inset-0 flex items-center justify-center">
181
+ <div class="text-center p-6">
182
+ <i class="fas fa-cube text-4xl text-gray-600 mb-4"></i>
183
+ <h3 class="text-xl font-medium mb-2">AR Experience Demo</h3>
184
+ <p class="text-gray-400 mb-4">Try our sample AR experience</p>
185
+ <button id="try-ar" class="px-4 py-2 bg-primary hover:bg-purple-800 rounded-md transition">
186
+ <i class="fas fa-vr-cardboard mr-2"></i> Try AR Now
187
+ </button>
188
+ </div>
189
+ </div>
190
+ <!-- Sample AR elements that appear when Try AR is clicked -->
191
+ <div id="ar-elements" class="hidden absolute inset-0">
192
+ <div class="ar-object" style="top: 30%; left: 40%;">
193
+ <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white">
194
+ <i class="fas fa-cube"></i>
195
+ </div>
196
+ </div>
197
+ <div class="ar-object" style="top: 50%; left: 60%;">
198
+ <div class="w-20 h-20 bg-green-500 rounded-lg flex items-center justify-center text-white">
199
+ <i class="fas fa-tree"></i>
200
+ </div>
201
+ </div>
202
+ <div class="ar-object" style="top: 70%; left: 30%;">
203
+ <div class="w-24 h-24 bg-purple-500 rounded-full flex items-center justify-center text-white">
204
+ <i class="fas fa-globe"></i>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Floating action buttons -->
212
+ <div class="absolute bottom-6 right-6 flex space-x-3">
213
+ <button class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition">
214
+ <i class="fas fa-undo text-gray-400"></i>
215
+ </button>
216
+ <button class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center transition">
217
+ <i class="fas fa-redo text-gray-400"></i>
218
+ </button>
219
+ <button class="w-10 h-10 rounded-full bg-primary hover:bg-purple-800 flex items-center justify-center transition">
220
+ <i class="fas fa-eye text-white"></i>
221
+ </button>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Footer -->
228
+ <footer class="bg-dark border-t border-gray-800 p-4">
229
+ <div class="flex flex-col md:flex-row justify-between items-center">
230
+ <div class="text-sm text-gray-400 mb-3 md:mb-0">
231
+ © 2023 AR Creator Studio. All rights reserved.
232
+ </div>
233
+ <div class="flex space-x-4">
234
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition">
235
+ <i class="fab fa-linkedin-in"></i>
236
+ </a>
237
+ <a href="#" class="text-gray-400 hover:text-red-400 transition">
238
+ <i class="fab fa-youtube"></i>
239
+ </a>
240
+ <a href="#" class="text-gray-400 hover:text-pink-400 transition">
241
+ <i class="fab fa-instagram"></i>
242
+ </a>
243
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition">
244
+ <i class="fab fa-twitter"></i>
245
+ </a>
246
+ </div>
247
+ <div class="flex space-x-4 mt-3 md:mt-0">
248
+ <a href="#" class="text-sm text-gray-400 hover:text-primary transition">Contact</a>
249
+ <a href="#" class="text-sm text-gray-400 hover:text-primary transition">Privacy</a>
250
+ <a href="#" class="text-sm text-gray-400 hover:text-primary transition">Terms</a>
251
+ </div>
252
+ </div>
253
+ </footer>
254
+
255
+ <!-- Floating Chat Button -->
256
+ <button class="floating-chat fixed bottom-6 right-6 w-14 h-14 rounded-full bg-primary hover:bg-purple-800 flex items-center justify-center transition shadow-lg">
257
+ <i class="fas fa-comment-dots text-white text-xl"></i>
258
+ </button>
259
+
260
+ <script>
261
+ // Toggle submenus
262
+ document.getElementById('elements-btn').addEventListener('click', function() {
263
+ const submenu = document.getElementById('elements-submenu');
264
+ const arrow = document.getElementById('elements-arrow');
265
+
266
+ submenu.classList.toggle('open');
267
+ arrow.classList.toggle('fa-chevron-down');
268
+ arrow.classList.toggle('fa-chevron-up');
269
+ });
270
+
271
+ document.getElementById('buttons-btn').addEventListener('click', function() {
272
+ const submenu = document.getElementById('buttons-submenu');
273
+ const arrow = document.getElementById('buttons-arrow');
274
+
275
+ submenu.classList.toggle('open');
276
+ arrow.classList.toggle('fa-chevron-down');
277
+ arrow.classList.toggle('fa-chevron-up');
278
+ });
279
+
280
+ // Simulate chat button click
281
+ document.querySelector('.floating-chat').addEventListener('click', function() {
282
+ alert('Chat support is available 24/7 for any AR creation questions!');
283
+ });
284
+
285
+ // AR Element Types
286
+ const arElements = {
287
+ video: { icon: 'fa-video', color: 'bg-blue-500', content: '<i class="fas fa-video"></i>' },
288
+ gif: { icon: 'fa-photo-film', color: 'bg-green-500', content: '<i class="fas fa-photo-film"></i>' },
289
+ '3d': { icon: 'fa-cube', color: 'bg-purple-500', content: '<i class="fas fa-cube"></i>' },
290
+ gallery: { icon: 'fa-images', color: 'bg-yellow-500', content: '<i class="fas fa-images"></i>' },
291
+ '360': { icon: 'fa-globe', color: 'bg-red-500', content: '<i class="fas fa-globe"></i>' }
292
+ };
293
+
294
+ // Initialize AR Experience
295
+ function initAR(elementType = null) {
296
+ const arContent = document.getElementById('ar-content');
297
+ const arElementsContainer = document.getElementById('ar-elements');
298
+
299
+ // Hide initial content
300
+ arContent.querySelector('div').classList.add('hidden');
301
+ arElementsContainer.classList.remove('hidden');
302
+
303
+ // Clear previous elements
304
+ arElementsContainer.innerHTML = '';
305
+
306
+ // Add specific element if specified
307
+ if (elementType && arElements[elementType]) {
308
+ const element = arElements[elementType];
309
+ const arObject = document.createElement('div');
310
+ arObject.className = `ar-object absolute w-24 h-24 ${element.color} rounded-lg flex items-center justify-center text-white text-2xl`;
311
+ arObject.style.top = '50%';
312
+ arObject.style.left = '50%';
313
+ arObject.style.transform = 'translate(-50%, -50%)';
314
+ arObject.innerHTML = element.content;
315
+ arElementsContainer.appendChild(arObject);
316
+ } else {
317
+ // Add default demo elements
318
+ const defaultElements = [
319
+ { type: '3d', top: '30%', left: '40%', size: 'w-16 h-16', shape: 'rounded-full' },
320
+ { type: 'gif', top: '50%', left: '60%', size: 'w-20 h-20', shape: 'rounded-lg' },
321
+ { type: '360', top: '70%', left: '30%', size: 'w-24 h-24', shape: 'rounded-full' }
322
+ ];
323
+
324
+ defaultElements.forEach(el => {
325
+ const element = arElements[el.type];
326
+ const arObject = document.createElement('div');
327
+ arObject.className = `ar-object absolute ${el.size} ${element.color} ${el.shape} flex items-center justify-center text-white text-2xl`;
328
+ arObject.style.top = el.top;
329
+ arObject.style.left = el.left;
330
+ arObject.innerHTML = element.content;
331
+ arElementsContainer.appendChild(arObject);
332
+ });
333
+ }
334
+
335
+ // Show AR instructions
336
+ alert('Point your camera at a flat surface to view AR objects. On mobile, this would launch your camera.');
337
+ }
338
+
339
+ // Try AR functionality
340
+ document.getElementById('try-ar').addEventListener('click', initAR);
341
+
342
+ // Make all element buttons work with AR
343
+ document.querySelectorAll('#elements-submenu button').forEach((button, index) => {
344
+ button.addEventListener('click', function() {
345
+ const elementTypes = ['video', 'gif', '3d', 'gallery', '360'];
346
+ initAR(elementTypes[index]);
347
+ });
348
+ });
349
+
350
+ // Make AR button in buttons submenu work
351
+ document.querySelector('#buttons-submenu button:nth-child(2)').addEventListener('click', initAR);
352
+
353
+ // Make publish button functional
354
+ document.querySelector('button:contains("Publish")').addEventListener('click', function() {
355
+ alert('Your AR experience has been published! Share the link with others to try it.');
356
+ });
357
+
358
+ // Make AR objects interactive
359
+ function setupARInteractions() {
360
+ document.querySelectorAll('.ar-object').forEach(obj => {
361
+ obj.addEventListener('click', function() {
362
+ alert('In a real AR experience, you could move and interact with this object!');
363
+ });
364
+ });
365
+ }
366
+
367
+ // Re-run setup whenever new AR elements are added
368
+ const observer = new MutationObserver(setupARInteractions);
369
+ observer.observe(document.getElementById('ar-elements'), {
370
+ childList: true,
371
+ subtree: true
372
+ });
373
+ </script>
374
+ <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=Mkdm/ar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
375
+ </html>