Hugging Face's logo

Spaces:
privateuserh
/
AR-City-Explorer
Running

App Files Community
privateuserh commited on
Commit
65e75b8
·
verified ·
1 Parent(s): 66ef908

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +684 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Smarar
3
- emoji: 🐠
4
- colorFrom: indigo
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: smarar
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,684 @@
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 City Explorer | Smart Glasses Companion</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mindar-image-aframe.prod.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/speech-recognition@latest/dist/speech-recognition.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ @keyframes pulse {
14
+ 0% { opacity: 0.6; }
15
+ 50% { opacity: 1; }
16
+ 100% { opacity: 0.6; }
17
+ }
18
+ .pulse {
19
+ animation: pulse 2s infinite;
20
+ }
21
+ .ar-overlay {
22
+ position: fixed;
23
+ top: 0;
24
+ left: 0;
25
+ width: 100%;
26
+ height: 100%;
27
+ background-color: rgba(0,0,0,0.8);
28
+ z-index: 9999;
29
+ display: flex;
30
+ flex-direction: column;
31
+ justify-content: center;
32
+ align-items: center;
33
+ color: white;
34
+ }
35
+ .ar-object {
36
+ position: absolute;
37
+ background-color: rgba(255,255,255,0.2);
38
+ border: 2px solid rgba(255,255,255,0.5);
39
+ border-radius: 8px;
40
+ padding: 10px;
41
+ color: white;
42
+ font-size: 14px;
43
+ pointer-events: all;
44
+ transition: all 0.3s ease;
45
+ }
46
+ .ar-object:hover {
47
+ background-color: rgba(255,255,255,0.3);
48
+ transform: scale(1.05);
49
+ }
50
+ .ai-message {
51
+ max-width: 80%;
52
+ margin-bottom: 10px;
53
+ padding: 12px;
54
+ border-radius: 18px;
55
+ position: relative;
56
+ }
57
+ .user-message {
58
+ background-color: #3b82f6;
59
+ color: white;
60
+ align-self: flex-end;
61
+ border-bottom-right-radius: 4px;
62
+ }
63
+ .assistant-message {
64
+ background-color: #f3f4f6;
65
+ color: #111827;
66
+ align-self: flex-start;
67
+ border-bottom-left-radius: 4px;
68
+ }
69
+ .glasses-pairing {
70
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
71
+ }
72
+ .object-highlight {
73
+ box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.7);
74
+ }
75
+ #arViewport {
76
+ width: 100%;
77
+ height: 100%;
78
+ position: relative;
79
+ overflow: hidden;
80
+ }
81
+ .loading-spinner {
82
+ width: 50px;
83
+ height: 50px;
84
+ border: 5px solid rgba(255,255,255,0.3);
85
+ border-radius: 50%;
86
+ border-top-color: #fff;
87
+ animation: spin 1s ease-in-out infinite;
88
+ }
89
+ @keyframes spin {
90
+ to { transform: rotate(360deg); }
91
+ }
92
+ </style>
93
+ </head>
94
+ <body class="bg-gray-100 font-sans">
95
+ <!-- Main App Container -->
96
+ <div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden min-h-screen flex flex-col">
97
+ <!-- Header -->
98
+ <header class="bg-indigo-900 text-white p-4 flex justify-between items-center">
99
+ <div class="flex items-center space-x-2">
100
+ <i class="fas fa-glasses text-2xl"></i>
101
+ <h1 class="text-xl font-bold">AR City Explorer</h1>
102
+ </div>
103
+ <div class="flex space-x-3">
104
+ <button id="arToggle" class="bg-indigo-700 hover:bg-indigo-600 px-3 py-1 rounded-full text-sm flex items-center">
105
+ <i class="fas fa-vr-cardboard mr-1"></i> AR Mode
106
+ </button>
107
+ <button id="settingsBtn" class="bg-indigo-700 hover:bg-indigo-600 px-3 py-1 rounded-full text-sm">
108
+ <i class="fas fa-cog"></i>
109
+ </button>
110
+ </div>
111
+ </header>
112
+
113
+ <!-- Main Content Area -->
114
+ <main class="flex-1 overflow-hidden">
115
+ <!-- AR Viewport (hidden by default) -->
116
+ <div id="arViewport" class="hidden relative">
117
+ <div id="arScene" class="absolute inset-0"></div>
118
+ <div id="arOverlay" class="ar-overlay hidden">
119
+ <div class="loading-spinner"></div>
120
+ <p class="mt-4">Initializing AR environment...</p>
121
+ <p class="text-sm text-gray-300 mt-2">Point your device at objects to scan</p>
122
+ </div>
123
+ <div id="arObjects" class="absolute inset-0"></div>
124
+ </div>
125
+
126
+ <!-- Normal View (shown by default) -->
127
+ <div id="normalView" class="h-full flex flex-col">
128
+ <!-- AI Assistant Chat -->
129
+ <div id="aiAssistant" class="flex-1 overflow-y-auto p-4 bg-gray-50">
130
+ <div class="flex flex-col space-y-2">
131
+ <div class="ai-message assistant-message">
132
+ <div class="font-bold text-indigo-800 mb-1">AR Guide</div>
133
+ <p>Hello! I'm your AR assistant. How can I help you explore the city today?</p>
134
+ <div class="mt-2 flex flex-wrap gap-2">
135
+ <button class="quick-action bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs">
136
+ Nearby landmarks
137
+ </button>
138
+ <button class="quick-action bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs">
139
+ Find restaurants
140
+ </button>
141
+ <button class="quick-action bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs">
142
+ History tour
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- User Input -->
150
+ <div class="p-4 border-t border-gray-200 bg-white">
151
+ <div class="flex space-x-2">
152
+ <input type="text" id="userInput" placeholder="Ask about places, history, or services..."
153
+ class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
154
+ <button id="sendBtn" class="bg-indigo-600 text-white rounded-full w-10 h-10 flex items-center justify-center">
155
+ <i class="fas fa-paper-plane"></i>
156
+ </button>
157
+ <button id="voiceBtn" class="bg-gray-200 text-gray-700 rounded-full w-10 h-10 flex items-center justify-center">
158
+ <i class="fas fa-microphone"></i>
159
+ </button>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </main>
164
+
165
+ <!-- Navigation -->
166
+ <nav class="bg-white border-t border-gray-200 p-2 flex justify-around">
167
+ <button class="p-2 text-indigo-600 flex flex-col items-center">
168
+ <i class="fas fa-compass text-xl"></i>
169
+ <span class="text-xs mt-1">Explore</span>
170
+ </button>
171
+ <button class="p-2 text-gray-500 flex flex-col items-center">
172
+ <i class="fas fa-map-marked-alt text-xl"></i>
173
+ <span class="text-xs mt-1">Map</span>
174
+ </button>
175
+ <button id="glassesBtn" class="p-2 text-gray-500 flex flex-col items-center">
176
+ <i class="fas fa-glasses text-xl"></i>
177
+ <span class="text-xs mt-1">Glasses</span>
178
+ </button>
179
+ <button class="p-2 text-gray-500 flex flex-col items-center">
180
+ <i class="fas fa-shopping-bag text-xl"></i>
181
+ <span class="text-xs mt-1">Shop</span>
182
+ </button>
183
+ <button class="p-2 text-gray-500 flex flex-col items-center">
184
+ <i class="fas fa-user text-xl"></i>
185
+ <span class="text-xs mt-1">Profile</span>
186
+ </button>
187
+ </nav>
188
+ </div>
189
+
190
+ <!-- Modals -->
191
+ <!-- Glasses Pairing Modal -->
192
+ <div id="glassesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
193
+ <div class="glasses-pairing rounded-xl p-6 max-w-sm w-full text-white">
194
+ <div class="flex justify-between items-center mb-4">
195
+ <h3 class="text-xl font-bold">Pair Smart Glasses</h3>
196
+ <button id="closeGlassesModal" class="text-white">
197
+ <i class="fas fa-times"></i>
198
+ </button>
199
+ </div>
200
+ <div class="mb-6">
201
+ <div class="flex items-center justify-center mb-4">
202
+ <div class="bg-white bg-opacity-20 rounded-full p-4">
203
+ <i class="fas fa-glasses text-4xl"></i>
204
+ </div>
205
+ </div>
206
+ <p class="text-center mb-4">Enable Bluetooth and pair your AR glasses for hands-free navigation</p>
207
+ <div class="bg-white bg-opacity-10 rounded-lg p-4 mb-4">
208
+ <div class="flex items-center justify-between mb-2">
209
+ <span class="font-medium">AR Vision Pro</span>
210
+ <span class="text-xs bg-indigo-500 px-2 py-1 rounded">Available</span>
211
+ </div>
212
+ <div class="text-xs text-gray-300">ID: ARVP-5X2B9C</div>
213
+ </div>
214
+ </div>
215
+ <button id="pairBtn" class="w-full bg-white text-indigo-900 py-3 rounded-lg font-bold flex items-center justify-center">
216
+ <i class="fas fa-link mr-2"></i> Pair Device
217
+ </button>
218
+ <div id="pairingStatus" class="mt-3 text-center text-sm hidden">
219
+ <div class="flex items-center justify-center">
220
+ <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
221
+ <span>Pairing...</span>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- AR Object Info Modal -->
228
+ <div id="objectModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
229
+ <div class="bg-white rounded-xl p-6 max-w-sm w-full">
230
+ <div class="flex justify-between items-center mb-4">
231
+ <h3 id="objectTitle" class="text-xl font-bold text-gray-800">Historic Landmark</h3>
232
+ <button id="closeObjectModal" class="text-gray-500">
233
+ <i class="fas fa-times"></i>
234
+ </button>
235
+ </div>
236
+ <img id="objectImage" src="https://via.placeholder.com/300x200?text=Landmark+Image" alt="Landmark" class="w-full h-48 object-cover rounded-lg mb-4">
237
+ <div id="objectDescription" class="text-gray-700 mb-4">
238
+ Loading information about this location...
239
+ </div>
240
+ <div class="flex space-x-2">
241
+ <button class="object-action bg-indigo-600 text-white px-4 py-2 rounded-lg flex-1 text-center">
242
+ <i class="fas fa-directions mr-2"></i> Navigate
243
+ </button>
244
+ <button class="object-action bg-gray-200 text-gray-800 px-4 py-2 rounded-lg flex-1 text-center">
245
+ <i class="fas fa-bookmark mr-2"></i> Save
246
+ </button>
247
+ </div>
248
+ <div id="vendorSection" class="mt-4 hidden">
249
+ <h4 class="font-bold text-gray-800 mb-2">Available Here</h4>
250
+ <div class="space-y-2">
251
+ <!-- Vendor items will be added here dynamically -->
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Settings Modal -->
258
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
259
+ <div class="bg-white rounded-xl p-6 max-w-sm w-full">
260
+ <div class="flex justify-between items-center mb-6">
261
+ <h3 class="text-xl font-bold text-gray-800">Settings</h3>
262
+ <button id="closeSettingsModal" class="text-gray-500">
263
+ <i class="fas fa-times"></i>
264
+ </button>
265
+ </div>
266
+ <div class="space-y-4">
267
+ <div>
268
+ <h4 class="font-medium text-gray-800 mb-2">AR Preferences</h4>
269
+ <div class="space-y-2">
270
+ <label class="flex items-center space-x-2">
271
+ <input type="checkbox" class="rounded text-indigo-600" checked>
272
+ <span>Show historical information</span>
273
+ </label>
274
+ <label class="flex items-center space-x-2">
275
+ <input type="checkbox" class="rounded text-indigo-600" checked>
276
+ <span>Show restaurant menus</span>
277
+ </label>
278
+ <label class="flex items-center space-x-2">
279
+ <input type="checkbox" class="rounded text-indigo-600">
280
+ <span>Show AR navigation guides</span>
281
+ </label>
282
+ </div>
283
+ </div>
284
+ <div>
285
+ <h4 class="font-medium text-gray-800 mb-2">AI Assistant</h4>
286
+ <div class="space-y-2">
287
+ <label class="flex items-center space-x-2">
288
+ <input type="checkbox" class="rounded text-indigo-600" checked>
289
+ <span>Voice responses</span>
290
+ </label>
291
+ <label class="flex items-center space-x-2">
292
+ <input type="checkbox" class="rounded text-indigo-600">
293
+ <span>Detailed explanations</span>
294
+ </label>
295
+ </div>
296
+ </div>
297
+ <div>
298
+ <h4 class="font-medium text-gray-800 mb-2">Device Settings</h4>
299
+ <button id="manageGlassesBtn" class="w-full text-left py-2 px-3 bg-gray-100 rounded-lg">
300
+ Manage AR Glasses
301
+ </button>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <script>
308
+ // DOM Elements
309
+ const arToggle = document.getElementById('arToggle');
310
+ const arViewport = document.getElementById('arViewport');
311
+ const normalView = document.getElementById('normalView');
312
+ const arOverlay = document.getElementById('arOverlay');
313
+ const glassesModal = document.getElementById('glassesModal');
314
+ const pairBtn = document.getElementById('pairBtn');
315
+ const pairingStatus = document.getElementById('pairingStatus');
316
+ const closeGlassesModal = document.getElementById('closeGlassesModal');
317
+ const glassesBtn = document.getElementById('glassesBtn');
318
+ const objectModal = document.getElementById('objectModal');
319
+ const closeObjectModal = document.getElementById('closeObjectModal');
320
+ const settingsBtn = document.getElementById('settingsBtn');
321
+ const settingsModal = document.getElementById('settingsModal');
322
+ const closeSettingsModal = document.getElementById('closeSettingsModal');
323
+ const manageGlassesBtn = document.getElementById('manageGlassesBtn');
324
+ const userInput = document.getElementById('userInput');
325
+ const sendBtn = document.getElementById('sendBtn');
326
+ const voiceBtn = document.getElementById('voiceBtn');
327
+ const aiAssistant = document.getElementById('aiAssistant');
328
+
329
+ // Sample AR objects data (in a real app, this would come from an API)
330
+ const arObjects = [
331
+ {
332
+ id: 'landmark-1',
333
+ type: 'landmark',
334
+ title: 'Old Town Hall',
335
+ description: 'Built in 1892, this historic building served as the city hall until 1978. Notable for its Victorian architecture and the clock tower that still keeps perfect time.',
336
+ image: 'https://images.unsplash.com/photo-1564501049412-61c2a3083791?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
337
+ position: { x: 30, y: 40 },
338
+ vendors: []
339
+ },
340
+ {
341
+ id: 'landmark-2',
342
+ type: 'landmark',
343
+ title: 'Liberty Statue',
344
+ description: 'Erected in 1921 to commemorate the city\'s role in the independence movement. The statue stands 15 meters tall and is made of bronze.',
345
+ image: 'https://images.unsplash.com/photo-1582721478829-efeab1c87aec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
346
+ position: { x: 70, y: 60 },
347
+ vendors: []
348
+ },
349
+ {
350
+ id: 'sign-1',
351
+ type: 'sign',
352
+ title: 'Historic District Sign',
353
+ description: 'Marks the boundary of the city\'s historic preservation area. The district contains over 50 buildings from the 19th century.',
354
+ image: 'https://images.unsplash.com/photo-1614624532983-4fe9c6aff2f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
355
+ position: { x: 50, y: 20 },
356
+ vendors: []
357
+ },
358
+ {
359
+ id: 'vendor-1',
360
+ type: 'vendor',
361
+ title: 'Heritage Café',
362
+ description: 'A charming café housed in a restored 19th-century building. Known for its artisanal coffee and homemade pastries.',
363
+ image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
364
+ position: { x: 40, y: 70 },
365
+ vendors: [
366
+ { id: 'item-1', name: 'Artisan Coffee', price: '$4.50', description: 'Locally roasted coffee beans' },
367
+ { id: 'item-2', name: 'Croissant', price: '$3.25', description: 'Freshly baked butter croissant' },
368
+ { id: 'item-3', name: 'Sandwich', price: '$7.50', description: 'Daily special with local ingredients' }
369
+ ]
370
+ },
371
+ {
372
+ id: 'vendor-2',
373
+ type: 'vendor',
374
+ title: 'Souvenir Shop',
375
+ description: 'Offers locally made crafts, postcards, and memorabilia that celebrate the city\'s history.',
376
+ image: 'https://images.unsplash.com/photo-1607083206869-4c767bc49c4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
377
+ position: { x: 60, y: 50 },
378
+ vendors: [
379
+ { id: 'item-4', name: 'City Guidebook', price: '$12.99', description: 'Detailed history and walking tours' },
380
+ { id: 'item-5', name: 'Postcard Set', price: '$5.50', description: '6 vintage-style postcards' },
381
+ { id: 'item-6', name: 'Handmade Mug', price: '$15.00', description: 'Ceramic mug with city skyline' }
382
+ ]
383
+ }
384
+ ];
385
+
386
+ // Sample AI responses
387
+ const aiResponses = [
388
+ "The Old Town Hall is located about 200 meters north of your current position. It was built in 1892 and features remarkable Victorian architecture.",
389
+ "The Liberty Statue commemorates the city's role in the independence movement. It's a popular photo spot for visitors.",
390
+ "You're currently in the historic district which contains over 50 preserved buildings from the 19th century.",
391
+ "The Heritage Café is known for its artisanal coffee and homemade pastries. Would you like to see their menu?",
392
+ "The Souvenir Shop offers locally made crafts and memorabilia. They have guidebooks, postcards, and handmade items."
393
+ ];
394
+
395
+ // Initialize AR
396
+ let arActive = false;
397
+ let glassesPaired = false;
398
+
399
+ // Toggle AR Mode
400
+ arToggle.addEventListener('click', () => {
401
+ if (!glassesPaired) {
402
+ showGlassesModal();
403
+ return;
404
+ }
405
+
406
+ arActive = !arActive;
407
+
408
+ if (arActive) {
409
+ // Enter AR Mode
410
+ normalView.classList.add('hidden');
411
+ arViewport.classList.remove('hidden');
412
+ arOverlay.classList.remove('hidden');
413
+ arToggle.innerHTML = '<i class="fas fa-times mr-1"></i> Exit AR';
414
+
415
+ // Simulate AR initialization
416
+ setTimeout(() => {
417
+ arOverlay.classList.add('hidden');
418
+ initializeARScene();
419
+ }, 2000);
420
+ } else {
421
+ // Exit AR Mode
422
+ normalView.classList.remove('hidden');
423
+ arViewport.classList.add('hidden');
424
+ arToggle.innerHTML = '<i class="fas fa-vr-cardboard mr-1"></i> AR Mode';
425
+ clearARScene();
426
+ }
427
+ });
428
+
429
+ // Initialize AR Scene
430
+ function initializeARScene() {
431
+ const arObjectsContainer = document.getElementById('arObjects');
432
+
433
+ // Clear previous objects
434
+ arObjectsContainer.innerHTML = '';
435
+
436
+ // Create AR objects
437
+ arObjects.forEach(obj => {
438
+ const arElement = document.createElement('div');
439
+ arElement.className = 'ar-object';
440
+ arElement.style.left = `${obj.position.x}%`;
441
+ arElement.style.top = `${obj.position.y}%`;
442
+ arElement.dataset.id = obj.id;
443
+
444
+ // Set icon based on type
445
+ let icon, bgColor;
446
+ if (obj.type === 'landmark') {
447
+ icon = '<i class="fas fa-landmark mr-1"></i>';
448
+ bgColor = 'rgba(220, 38, 38, 0.7)';
449
+ } else if (obj.type === 'sign') {
450
+ icon = '<i class="fas fa-sign mr-1"></i>';
451
+ bgColor = 'rgba(234, 88, 12, 0.7)';
452
+ } else if (obj.type === 'vendor') {
453
+ icon = '<i class="fas fa-store mr-1"></i>';
454
+ bgColor = 'rgba(22, 163, 74, 0.7)';
455
+ }
456
+
457
+ arElement.style.backgroundColor = bgColor;
458
+ arElement.innerHTML = `${icon} ${obj.title}`;
459
+
460
+ // Add click event
461
+ arElement.addEventListener('click', () => showObjectInfo(obj));
462
+
463
+ arObjectsContainer.appendChild(arElement);
464
+ });
465
+
466
+ // Simulate object recognition highlighting
467
+ setTimeout(() => {
468
+ const firstObject = document.querySelector('.ar-object');
469
+ if (firstObject) {
470
+ firstObject.classList.add('object-highlight');
471
+ setTimeout(() => {
472
+ firstObject.classList.remove('object-highlight');
473
+ }, 3000);
474
+ }
475
+ }, 1000);
476
+ }
477
+
478
+ // Clear AR Scene
479
+ function clearARScene() {
480
+ const arObjectsContainer = document.getElementById('arObjects');
481
+ arObjectsContainer.innerHTML = '';
482
+ }
483
+
484
+ // Show object info modal
485
+ function showObjectInfo(obj) {
486
+ document.getElementById('objectTitle').textContent = obj.title;
487
+ document.getElementById('objectImage').src = obj.image;
488
+ document.getElementById('objectDescription').textContent = obj.description;
489
+
490
+ // Show vendor section if applicable
491
+ const vendorSection = document.getElementById('vendorSection');
492
+ if (obj.vendors && obj.vendors.length > 0) {
493
+ vendorSection.classList.remove('hidden');
494
+ const vendorItemsContainer = vendorSection.querySelector('.space-y-2');
495
+ vendorItemsContainer.innerHTML = '';
496
+
497
+ obj.vendors.forEach(vendor => {
498
+ const itemElement = document.createElement('div');
499
+ itemElement.className = 'flex justify-between items-center p-2 bg-gray-100 rounded';
500
+ itemElement.innerHTML = `
501
+ <div>
502
+ <div class="font-medium">${vendor.name}</div>
503
+ <div class="text-sm text-gray-600">${vendor.description}</div>
504
+ </div>
505
+ <div class="font-bold">${vendor.price}</div>
506
+ `;
507
+ vendorItemsContainer.appendChild(itemElement);
508
+ });
509
+ } else {
510
+ vendorSection.classList.add('hidden');
511
+ }
512
+
513
+ objectModal.classList.remove('hidden');
514
+ }
515
+
516
+ // Glasses pairing functionality
517
+ function showGlassesModal() {
518
+ glassesModal.classList.remove('hidden');
519
+ }
520
+
521
+ closeGlassesModal.addEventListener('click', () => {
522
+ glassesModal.classList.add('hidden');
523
+ });
524
+
525
+ pairBtn.addEventListener('click', () => {
526
+ pairingStatus.classList.remove('hidden');
527
+ pairBtn.disabled = true;
528
+
529
+ // Simulate pairing process
530
+ setTimeout(() => {
531
+ pairingStatus.innerHTML = '<div class="flex items-center justify-center text-green-300"><i class="fas fa-check-circle mr-2"></i> Successfully paired!</div>';
532
+ setTimeout(() => {
533
+ glassesModal.classList.add('hidden');
534
+ pairingStatus.classList.add('hidden');
535
+ pairBtn.disabled = false;
536
+ glassesPaired = true;
537
+
538
+ // Update glasses button
539
+ const glassesIcon = glassesBtn.querySelector('i');
540
+ glassesIcon.classList.remove('text-gray-500');
541
+ glassesIcon.classList.add('text-indigo-600');
542
+
543
+ // Show success message
544
+ addAIMessage("Your AR glasses have been successfully paired! You can now enter AR mode.");
545
+ }, 1000);
546
+ }, 2000);
547
+ });
548
+
549
+ glassesBtn.addEventListener('click', showGlassesModal);
550
+
551
+ // Settings modal
552
+ settingsBtn.addEventListener('click', () => {
553
+ settingsModal.classList.remove('hidden');
554
+ });
555
+
556
+ closeSettingsModal.addEventListener('click', () => {
557
+ settingsModal.classList.add('hidden');
558
+ });
559
+
560
+ manageGlassesBtn.addEventListener('click', () => {
561
+ settingsModal.classList.add('hidden');
562
+ setTimeout(() => {
563
+ showGlassesModal();
564
+ }, 300);
565
+ });
566
+
567
+ // AI Assistant functionality
568
+ function addAIMessage(message) {
569
+ const chatContainer = aiAssistant.querySelector('.flex-col');
570
+ const messageElement = document.createElement('div');
571
+ messageElement.className = 'ai-message assistant-message';
572
+ messageElement.innerHTML = `
573
+ <div class="font-bold text-indigo-800 mb-1">AR Guide</div>
574
+ <p>${message}</p>
575
+ `;
576
+ chatContainer.appendChild(messageElement);
577
+ aiAssistant.scrollTop = aiAssistant.scrollHeight;
578
+ }
579
+
580
+ function addUserMessage(message) {
581
+ const chatContainer = aiAssistant.querySelector('.flex-col');
582
+ const messageElement = document.createElement('div');
583
+ messageElement.className = 'ai-message user-message';
584
+ messageElement.innerHTML = `
585
+ <p>${message}</p>
586
+ `;
587
+ chatContainer.appendChild(messageElement);
588
+ aiAssistant.scrollTop = aiAssistant.scrollHeight;
589
+ }
590
+
591
+ sendBtn.addEventListener('click', () => {
592
+ const message = userInput.value.trim();
593
+ if (message) {
594
+ addUserMessage(message);
595
+ userInput.value = '';
596
+
597
+ // Simulate AI response
598
+ setTimeout(() => {
599
+ const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
600
+ addAIMessage(randomResponse);
601
+ }, 1000);
602
+ }
603
+ });
604
+
605
+ userInput.addEventListener('keypress', (e) => {
606
+ if (e.key === 'Enter') {
607
+ sendBtn.click();
608
+ }
609
+ });
610
+
611
+ // Voice recognition
612
+ voiceBtn.addEventListener('click', () => {
613
+ voiceBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
614
+ voiceBtn.classList.add('bg-indigo-600', 'text-white');
615
+
616
+ // Simulate voice recognition
617
+ setTimeout(() => {
618
+ const sampleQuestions = [
619
+ "Tell me about nearby landmarks",
620
+ "Where can I get coffee?",
621
+ "What's the history of this area?",
622
+ "Show me souvenir shops"
623
+ ];
624
+ const randomQuestion = sampleQuestions[Math.floor(Math.random() * sampleQuestions.length)];
625
+
626
+ userInput.value = randomQuestion;
627
+ voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
628
+ voiceBtn.classList.remove('bg-indigo-600', 'text-white');
629
+
630
+ // Auto-send the question
631
+ setTimeout(() => {
632
+ sendBtn.click();
633
+ }, 500);
634
+ }, 1500);
635
+ });
636
+
637
+ // Quick action buttons
638
+ document.querySelectorAll('.quick-action').forEach(button => {
639
+ button.addEventListener('click', () => {
640
+ const action = button.textContent.trim();
641
+ addUserMessage(action);
642
+
643
+ // Simulate AI response
644
+ setTimeout(() => {
645
+ let response;
646
+ if (action.includes('landmark')) {
647
+ response = "Here are some notable landmarks nearby: Old Town Hall (200m north), Liberty Statue (150m east), and the Historic District (all around you).";
648
+ } else if (action.includes('restaurant')) {
649
+ response = "Nearby dining options include Heritage Café (artisanal coffee and pastries), Riverside Bistro (fine dining), and The Market (casual food hall).";
650
+ } else if (action.includes('history')) {
651
+ response = "This area was founded in 1847 as a trading post. Many buildings date from the late 1800s when the city became a manufacturing center. The historic district preserves this heritage.";
652
+ }
653
+ addAIMessage(response);
654
+ }, 1000);
655
+ });
656
+ });
657
+
658
+ // Object modal actions
659
+ document.querySelectorAll('.object-action').forEach(button => {
660
+ button.addEventListener('click', () => {
661
+ const action = button.textContent.trim();
662
+ if (action.includes('Navigate')) {
663
+ addAIMessage("I'll guide you to this location. Please put on your AR glasses for navigation assistance.");
664
+ objectModal.classList.add('hidden');
665
+ } else if (action.includes('Save')) {
666
+ addAIMessage("Location saved to your favorites. You can access it later from your profile.");
667
+ }
668
+ });
669
+ });
670
+
671
+ // Close object modal when clicking outside
672
+ objectModal.addEventListener('click', (e) => {
673
+ if (e.target === objectModal) {
674
+ objectModal.classList.add('hidden');
675
+ }
676
+ });
677
+
678
+ // Initial welcome message
679
+ setTimeout(() => {
680
+ addAIMessage("I can help you discover historical sites, find local businesses, and even order from vendors through your AR glasses. Try asking about nearby landmarks or services!");
681
+ }, 1500);
682
+ </script>
683
+ <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=privateuserh/smarar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
684
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create an advanced AR site in geometry compatible with AR Glasses and WebAR add an AI Assistant and image recognition for things like historic street signs landmarks and local vendor ordering also make a way to pair the glasses with the smart phone for Internet access