Hugging Face's logo

Spaces:
privateuserh
/
AR-City-Explorer
Running

App Files Community
AR-City-Explorer
File size: 7,911 Bytes 
74e7a9d
 
 
 
 
 
1005640
74e7a9d
 
 
 
 
1005640
74e7a9d
 
 
1005640
74e7a9d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f87ca77
e96cec8
74e7a9d
 
 
 
e1b6662
74e7a9d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70ee402
 
 
 
74e7a9d
 
 
1005640
 
74e7a9d
 
1005640
74e7a9d
 
1005640
6b8c31c
1005640
6b8c31c
 
 
 
1005640
 
 
6b8c31c
36d85f4
 
 
 
 
 
 
 
 
 
 
 
473815f
36d85f4
 
 
 
 
 
473815f
 
 
36d85f4
 
6b8c31c
 
 
1005640
6b8c31c
 
 
 
1005640
6b8c31c
74e7a9d
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR City Explorer | Smart Glasses Companion</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

    <link rel="stylesheet" href="style.css">
</head>

<body class="bg-gray-100 font-sans">
    
    <div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden min-h-screen flex flex-col">
        <header class="bg-indigo-900 text-white p-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-glasses text-2xl"></i>
                <h1 class="text-xl font-bold">AR City Explorer</h1>
            </div>
            <div class="flex space-x-3">
                <button id="arToggle" class="bg-indigo-700 hover:bg-indigo-600 px-3 py-1 rounded-full text-sm flex items-center">
                    <i class="fas fa-vr-cardboard mr-1"></i> AR Mode
                </button>
                <button id="settingsBtn" class="bg-indigo-700 hover:bg-indigo-600 px-3 py-1 rounded-full text-sm">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </header>

        <main class="flex-1 overflow-hidden">
            <div id="arViewport" class="hidden relative">
                <a-scene id="arScene" vr-mode-ui="enabled: false" arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: true;'>
                    <a-camera gps-new-camera='gpsMinDistance: 0'></a-camera>
                </a-scene>
            </div>

            <div id="normalView" class="h-full flex flex-col">
              <div id="aiAssistant" class="flex-1 overflow-y-auto p-4 bg-gray-50">
                    <div class="flex flex-col space-y-2">
                        <div class="ai-message assistant-message">
                            <div class="font-bold text-indigo-800 mb-1">AR Guide</div>
                            <p>Hello! Ask me about nearby landmarks, or switch to AR mode to explore.</p>
                        </div>
                    </div>
                </div>
                <div class="p-4 border-t border-gray-200 bg-white">
                    <div class="flex space-x-2">
                        <input type="text" id="userInput" placeholder="Ask about places..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <button id="sendBtn" class="bg-indigo-600 text-white rounded-full w-10 h-10 flex items-center justify-center">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                        <button id="voiceBtn" class="bg-gray-200 text-gray-700 rounded-full w-10 h-10 flex items-center justify-center">
                            <i class="fas fa-microphone"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>
        <nav class="bg-white border-t border-gray-200 p-2 flex justify-around">
     <button class="p-2 text-indigo-600 flex flex-col items-center"><i class="fas fa-compass text-xl"></i><span class="text-xs mt-1">Explore</span></button>
     <button id="mapBtn" class="p-2 text-gray-500 flex flex-col items-center"><i class="fas fa-map-marked-alt text-xl"></i><span class="text-xs mt-1">Map</span></button>
     <button id="glassesBtn" class="p-2 text-gray-500 flex flex-col items-center"><i class="fas fa-glasses text-xl"></i><span class="text-xs mt-1">Glasses</span></button>
</nav>
    </div>

    <div id="objectModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4">
            <div class="flex justify-between items-center mb-4"><h3 id="objectTitle" class="text-xl font-bold text-gray-800"></h3><button id="closeObjectModal" class="text-gray-500 hover:text-gray-800"><i class="fas fa-times"></i></button></div>
            <img id="objectImage" src="" alt="Landmark" class="w-full h-48 object-cover rounded-lg mb-4">
            <div id="objectDescription" class="text-gray-700 mb-4"></div>
            <div id="aerodeckSection" class="mt-4 hidden"><h4 class="font-bold text-gray-800 mb-2">AeroDeck Network</h4><div id="aerodeckList" class="space-y-2"></div></div>
        </div>
    </div>
    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4">
            <div class="flex justify-between items-center mb-6"><h3 class="text-xl font-bold text-gray-800">Settings</h3><button id="closeSettingsModal" class="text-gray-500 hover:text-gray-800"><i class="fas fa-times"></i></button></div>
            <div class="space-y-4">
                <div>
                    <h4 class="font-medium text-gray-800 mb-2">AR Preferences</h4>
                    <div class="space-y-2">
                        <label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showHistorical" checked><span>Show historical information</span></label>
                        <label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showMenus" checked><span>Show restaurant menus</span></label>
                        <label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="showNavigation"><span>Show AR navigation guides</span></label>
                    </div>
                  <div id="glassesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-gradient-to-br from-blue-900 to-indigo-700 rounded-xl p-6 max-w-sm w-full mx-4 text-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">Pair Smart Glasses</h3>
                <button id="closeGlassesModal" class="text-white hover:text-gray-300">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="text-center mb-6">
                <div class="inline-block bg-white bg-opacity-20 rounded-full p-4 mb-4">
                    <i class="fas fa-glasses text-4xl"></i>
                </div>
                <p>Enable Bluetooth and select your device for hands-free AR navigation.</p>
            </div>
            <button id="pairBtn" class="w-full bg-white text-indigo-900 py-3 rounded-lg font-bold flex items-center justify-center hover:bg-gray-200">
                <i class="fas fa-link mr-2"></i> Find and Pair Device
            </button>
        </div>
    </div>
    <script src="main.js" defer></script>
                </body>
    </div>
    <script src="main.js" defer></script>
                </body>
                </div>
                <div>
                    <h4 class="font-medium text-gray-800 mb-2">AI Assistant</h4>
                    <div class="space-y-2"><label class="flex items-center space-x-3 cursor-pointer"><input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" data-setting="voiceResponses" checked><span>Voice responses</span></label></div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="main.js" defer></script>
</body>
</html>