Spaces:

privateuserh
/

AR-City-Explorer

Running

App Files Files Community

privateuserh commited on Jun 12

Commit

1353374

verified ·

1 Parent(s): b01f4a3

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -672

index.html DELETED Viewed

@@ -1,672 +0,0 @@
-<!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>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mindar-image-aframe.prod.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/speech-recognition@latest/dist/speech-recognition.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        @keyframes pulse {
-            0% { opacity: 0.6; }
-            50% { opacity: 1; }
-            100% { opacity: 0.6; }
-        }
-        .pulse {
-            animation: pulse 2s infinite;
-        }
-        .ar-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.8);
-            z-index: 9999;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            color: white;
-        }
-        .ar-object {
-            position: absolute;
-            background-color: rgba(255,255,255,0.2);
-            border: 2px solid rgba(255,255,255,0.5);
-            border-radius: 8px;
-            padding: 10px;
-            color: white;
-            font-size: 14px;
-            pointer-events: all;
-            transition: all 0.3s ease;
-        }
-        .ar-object:hover {
-            background-color: rgba(255,255,255,0.3);
-            transform: scale(1.05);
-        }
-        .ai-message {
-            max-width: 80%;
-            margin-bottom: 10px;
-            padding: 12px;
-            border-radius: 18px;
-            position: relative;
-        }
-        .user-message {
-            background-color: #3b82f6;
-            color: white;
-            align-self: flex-end;
-            border-bottom-right-radius: 4px;
-        }
-        .assistant-message {
-            background-color: #f3f4f6;
-            color: #111827;
-            align-self: flex-start;
-            border-bottom-left-radius: 4px;
-        }
-        .glasses-pairing {
-            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
-        }
-        .object-highlight {
-            box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.7);
-        }
-        #arViewport {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            overflow: hidden;
-        }
-        .loading-spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(255,255,255,0.3);
-            border-radius: 50%;
-            border-top-color: #fff;
-            animation: spin 1s ease-in-out infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-    </style>
-</head>
-<body class="bg-gray-100 font-sans">
-    <!-- Main App Container -->
-    <div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden min-h-screen flex flex-col">
-        <!-- Header -->
-        <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 Content Area -->
-        <main class="flex-1 overflow-hidden">
-            <!-- AR Viewport (hidden by default) -->
-            <div id="arViewport" class="hidden relative">
-                <div id="arScene" class="absolute inset-0"></div>
-                <div id="arOverlay" class="ar-overlay hidden">
-                    <div class="loading-spinner"></div>
-                    <p class="mt-4">Initializing AR environment...</p>
-                    <p class="text-sm text-gray-300 mt-2">Point your device at objects to scan</p>
-                </div>
-                <div id="arObjects" class="absolute inset-0"></div>
-            </div>
-            <!-- Normal View (shown by default) -->
-            <div id="normalView" class="h-full flex flex-col">
-                <!-- AI Assistant Chat -->
-                <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! I'm your AR assistant. How can I help you explore the city today?</p>
-                            <div class="mt-2 flex flex-wrap gap-2">
-                                <button class="quick-action bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs">
-                                    Nearby landmarks
-                                </button>
-                                <button class="quick-action bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs">
-                                    Find restaurants
-                                </button>
-                                <button class="quick-action bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs">
-                                    History tour
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- User Input -->
-                <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, history, or services..."
-                               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>
-    <script>
-        // DOM Elements
-        const arToggle = document.getElementById('arToggle');
-        const arViewport = document.getElementById('arViewport');
-        const normalView = document.getElementById('normalView');
-        const arOverlay = document.getElementById('arOverlay');
-        const glassesModal = document.getElementById('glassesModal');
-        const pairBtn = document.getElementById('pairBtn');
-        const pairingStatus = document.getElementById('pairingStatus');
-        const closeGlassesModal = document.getElementById('closeGlassesModal');
-        const glassesBtn = document.getElementById('glassesBtn');
-        const objectModal = document.getElementById('objectModal');
-        const closeObjectModal = document.getElementById('closeObjectModal');
-        const settingsBtn = document.getElementById('settingsBtn');
-        const settingsModal = document.getElementById('settingsModal');
-        const closeSettingsModal = document.getElementById('closeSettingsModal');
-        const manageGlassesBtn = document.getElementById('manageGlassesBtn');
-        const userInput = document.getElementById('userInput');
-        const sendBtn = document.getElementById('sendBtn');
-        const voiceBtn = document.getElementById('voiceBtn');
-        const aiAssistant = document.getElementById('aiAssistant');
-        // Sample AR objects data (in a real app, this would come from an API)
-        const arObjects = [
-            {
-                id: 'landmark-1',
-                type: 'landmark',
-                title: 'Old Town Hall',
-                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.',
-                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',
-                position: { x: 30, y: 40 },
-                vendors: []
-            },
-            {
-                id: 'landmark-2',
-                type: 'landmark',
-                title: 'Liberty Statue',
-                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.',
-                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',
-                position: { x: 70, y: 60 },
-                vendors: []
-            },
-            {
-                id: 'sign-1',
-                type: 'sign',
-                title: 'Historic District Sign',
-                description: 'Marks the boundary of the city\'s historic preservation area. The district contains over 50 buildings from the 19th century.',
-                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',
-                position: { x: 50, y: 20 },
-                vendors: []
-            },
-            {
-                id: 'vendor-1',
-                type: 'vendor',
-                title: 'Heritage Café',
-                description: 'A charming café housed in a restored 19th-century building. Known for its artisanal coffee and homemade pastries.',
-                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',
-                position: { x: 40, y: 70 },
-                vendors: [
-                    { id: 'item-1', name: 'Artisan Coffee', price: '$4.50', description: 'Locally roasted coffee beans' },
-                    { id: 'item-2', name: 'Croissant', price: '$3.25', description: 'Freshly baked butter croissant' },
-                    { id: 'item-3', name: 'Sandwich', price: '$7.50', description: 'Daily special with local ingredients' }
-                ]
-            },
-            {
-                id: 'vendor-2',
-                type: 'vendor',
-                title: 'Souvenir Shop',
-                description: 'Offers locally made crafts, postcards, and memorabilia that celebrate the city\'s history.',
-                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',
-                position: { x: 60, y: 50 },
-                vendors: [
-                    { id: 'item-4', name: 'City Guidebook', price: '$12.99', description: 'Detailed history and walking tours' },
-                    { id: 'item-5', name: 'Postcard Set', price: '$5.50', description: '6 vintage-style postcards' },
-                    { id: 'item-6', name: 'Handmade Mug', price: '$15.00', description: 'Ceramic mug with city skyline' }
-                ]
-            }
-        ];
-        // Sample AI responses
-        const aiResponses = [
-            "The Old Town Hall is located about 200 meters north of your current position. It was built in 1892 and features remarkable Victorian architecture.",
-            "The Liberty Statue commemorates the city's role in the independence movement. It's a popular photo spot for visitors.",
-            "You're currently in the historic district which contains over 50 preserved buildings from the 19th century.",
-            "The Heritage Café is known for its artisanal coffee and homemade pastries. Would you like to see their menu?",
-            "The Souvenir Shop offers locally made crafts and memorabilia. They have guidebooks, postcards, and handmade items."
-        ];
-        // Initialize AR
-        let arActive = false;
-        let glassesPaired = false;
-        // Toggle AR Mode
-        arToggle.addEventListener('click', () => {
-            if (!glassesPaired) {
-                showGlassesModal();
-                return;
-            }
-            arActive = !arActive;
-            if (arActive) {
-                // Enter AR Mode
-                normalView.classList.add('hidden');
-                arViewport.classList.remove('hidden');
-                arOverlay.classList.remove('hidden');
-                arToggle.innerHTML = '<i class="fas fa-times mr-1"></i> Exit AR';
-                // Simulate AR initialization
-                setTimeout(() => {
-                    arOverlay.classList.add('hidden');
-                    initializeARScene();
-                }, 2000);
-            } else {
-                // Exit AR Mode
-                normalView.classList.remove('hidden');
-                arViewport.classList.add('hidden');
-                arToggle.innerHTML = '<i class="fas fa-vr-cardboard mr-1"></i> AR Mode';
-                clearARScene();
-            }
-        });
-        // Initialize AR Scene
-        function initializeARScene() {
-            const arObjectsContainer = document.getElementById('arObjects');
-            // Clear previous objects
-            arObjectsContainer.innerHTML = '';
-            // Create AR objects
-            arObjects.forEach(obj => {
-                const arElement = document.createElement('div');
-                arElement.className = 'ar-object';
-                arElement.style.left = `${obj.position.x}%`;
-                arElement.style.top = `${obj.position.y}%`;
-                arElement.dataset.id = obj.id;
-                // Set icon based on type
-                let icon, bgColor;
-                if (obj.type === 'landmark') {
-                    icon = '<i class="fas fa-landmark mr-1"></i>';
-                    bgColor = 'rgba(220, 38, 38, 0.7)';
-                } else if (obj.type === 'sign') {
-                    icon = '<i class="fas fa-sign mr-1"></i>';
-                    bgColor = 'rgba(234, 88, 12, 0.7)';
-                } else if (obj.type === 'vendor') {
-                    icon = '<i class="fas fa-store mr-1"></i>';
-                    bgColor = 'rgba(22, 163, 74, 0.7)';
-                }
-                arElement.style.backgroundColor = bgColor;
-                arElement.innerHTML = `${icon} ${obj.title}`;
-                // Add click event
-                arElement.addEventListener('click', () => showObjectInfo(obj));
-                arObjectsContainer.appendChild(arElement);
-            });
-          // --- Modal Functionality ---
-const objectModal = document.getElementById('objectModal');
-const objectTitle = document.getElementById('objectTitle');
-const objectDescription = document.getElementById('objectDescription');
-const objectImage = document.getElementById('objectImage');
-const closeObjectModal = document.getElementById('closeObjectModal');
-function showObjectInfo(poiId) {
-    // Find the specific POI from our data array using its ID
-    const poi = poisData.find(p => p.id === poiId);
-    if (!poi) {
-        console.error("Could not find POI data for ID:", poiId);
-        return;
-    }
-    console.log("Showing info for:", poi.name);
-    // Populate the modal with data from the POI object
-    objectTitle.textContent = poi.name;
-    objectDescription.textContent = poi.description || "No description available.";
-    // Use a placeholder image if no asset_url is provided
-    // In a real app, your 'asset_url' might point to a specific image for the landmark
-    objectImage.src = `https://via.placeholder.com/300x200?text=${encodeURIComponent(poi.name)}`;
-    // --- Future Vendor Logic ---
-    // This is where you would check for vendor info from your POI data
-    // and show/hide the vendorSection just like your original code intended.
-    // For now, we'll keep it hidden.
-    document.getElementById('vendorSection').classList.add('hidden');
-    // Display the modal by removing the 'hidden' class
-    objectModal.classList.remove('hidden');
-}
-// Add an event listener to the modal's close button
-closeObjectModal.addEventListener('click', () => {
-    objectModal.classList.add('hidden');
-});
-// Also close the modal if the user clicks on the dark background
-objectModal.addEventListener('click', (e) => {
-    if (e.target === objectModal) {
-        objectModal.classList.add('hidden');
-    }
-});
-            // Simulate object recognition highlighting
-            setTimeout(() => {
-                const firstObject = document.querySelector('.ar-object');
-                if (firstObject) {
-                    firstObject.classList.add('object-highlight');
-                    setTimeout(() => {
-                        firstObject.classList.remove('object-highlight');
-                    }, 3000);
-                }
-            }, 1000);
-        }
-        // Clear AR Scene
-        function clearARScene() {
-            const arObjectsContainer = document.getElementById('arObjects');
-            arObjectsContainer.innerHTML = '';
-        }
-        // Show object info modal
-        function showObjectInfo(obj) {
-            document.getElementById('objectTitle').textContent = obj.title;
-            document.getElementById('objectImage').src = obj.image;
-            document.getElementById('objectDescription').textContent = obj.description;
-            // Show vendor section if applicable
-            const vendorSection = document.getElementById('vendorSection');
-            if (obj.vendors && obj.vendors.length > 0) {
-                vendorSection.classList.remove('hidden');
-                const vendorItemsContainer = vendorSection.querySelector('.space-y-2');
-                vendorItemsContainer.innerHTML = '';
-                obj.vendors.forEach(vendor => {
-                    const itemElement = document.createElement('div');
-                    itemElement.className = 'flex justify-between items-center p-2 bg-gray-100 rounded';
-                    itemElement.innerHTML = `
-                        <div>
-                            <div class="font-medium">${vendor.name}</div>
-                            <div class="text-sm text-gray-600">${vendor.description}</div>
-                        </div>
-                        <div class="font-bold">${vendor.price}</div>
-                    `;
-                    vendorItemsContainer.appendChild(itemElement);
-                });
-            } else {
-                vendorSection.classList.add('hidden');
-            }
-            objectModal.classList.remove('hidden');
-        }
-        // Glasses pairing functionality
-        function showGlassesModal() {
-            glassesModal.classList.remove('hidden');
-        }
-        closeGlassesModal.addEventListener('click', () => {
-            glassesModal.classList.add('hidden');
-        });
-        pairBtn.addEventListener('click', () => {
-            pairingStatus.classList.remove('hidden');
-            pairBtn.disabled = true;
-            // Simulate pairing process
-            setTimeout(() => {
-                pairingStatus.innerHTML = '<div class="flex items-center justify-center text-green-300"><i class="fas fa-check-circle mr-2"></i> Successfully paired!</div>';
-                setTimeout(() => {
-                    glassesModal.classList.add('hidden');
-                    pairingStatus.classList.add('hidden');
-                    pairBtn.disabled = false;
-                    glassesPaired = true;
-                    // Update glasses button
-                    const glassesIcon = glassesBtn.querySelector('i');
-                    glassesIcon.classList.remove('text-gray-500');
-                    glassesIcon.classList.add('text-indigo-600');
-                    // Show success message
-                    addAIMessage("Your AR glasses have been successfully paired! You can now enter AR mode.");
-                }, 1000);
-            }, 2000);
-        });
-        glassesBtn.addEventListener('click', showGlassesModal);
-        // Settings modal
-        settingsBtn.addEventListener('click', () => {
-            settingsModal.classList.remove('hidden');
-        });
-        closeSettingsModal.addEventListener('click', () => {
-            settingsModal.classList.add('hidden');
-        });
-<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">
-      </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: false;'>
-            <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
-        </a-scene>
-        <div id="arOverlay" class="ar-overlay hidden">
-          </div>
-      </div>
-      <div id="normalView" class="h-full flex flex-col">
-        </div>
-    </main>
-    <nav class="bg-white border-t border-gray-200 p-2 flex justify-around">
-        </nav>
-  </div>
-  <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>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      // --- CONFIGURATION ---
-      const config = {
-          // FIX: USE YOUR FULL AND CORRECT CLOUDFLARE URL HERE
-          backendUrl: 'https://ar-city-explorer-backend.<your-subdomain>.workers.dev'
-      };
-      // --- ELEMENT SELECTORS ---
-      const arViewport = document.getElementById('arViewport');
-      const normalView = document.getElementById('normalView');
-      const arToggle = document.getElementById('arToggle');
-      const aiAssistant = document.getElementById('aiAssistant');
-      const userInput = document.getElementById('userInput');
-      const sendBtn = document.getElementById('sendBtn');
-      // ... (add all your other getElementById selectors here for modals, buttons etc.)
-      let poisData = []; // To store data from the backend
-      // --- CORE FUNCTIONS ---
-      function toggleARView(showAR) {
-          if (showAR) {
-              normalView.classList.add('hidden');
-              arViewport.classList.remove('hidden');
-              // Only fetch data if we don't have it already
-              if (poisData.length === 0) {
-                  fetchPoisAndCreateAREntities();
-              }
-          } else {
-              arViewport.classList.add('hidden');
-              normalView.classList.remove('hidden');
-          }
-      }
-      function fetchPoisAndCreateAREntities() {
-          console.log('Fetching POIs from backend...');
-          fetch(`${config.backendUrl}/api/pois`)
-              .then(response => {
-                  if (!response.ok) {
-                      throw new Error(`Network response was not ok: ${response.statusText}`);
-                  }
-                  return response.json();
-              })
-              .then(pois => {
-                  console.log('POIs received:', pois);
-                  poisData = pois; // Store the data
-                  const scene = document.querySelector('a-scene');
-                  if (!scene) {
-                      console.error('Could not find <a-scene> element.');
-                      return;
-                  }
-                  pois.forEach(poi => {
-                      const entity = document.createElement('a-entity');
-                      entity.setAttribute('gps-new-entity-place', {
-                          latitude: poi.latitude,
-                          longitude: poi.longitude
-                      });
-                      // Add visual components (e.g., a box)
-                      const box = document.createElement('a-box');
-                      box.setAttribute('material', 'color: red');
-                      box.setAttribute('scale', '10 10 10');
-                      box.setAttribute('position', '0 5 0');
-                      // Make the box clickable
-                      box.setAttribute('data-poi-id', poi.id); // Store poi id on the box
-                      entity.appendChild(box);
-                      const text = document.createElement('a-text');
-                      text.setAttribute('value', poi.name);
-                      text.setAttribute('look-at', '[gps-new-camera]');
-                      text.setAttribute('scale', '50 50 50');
-                      text.setAttribute('position', '0 15 0');
-                      entity.appendChild(text);
-                      scene.appendChild(entity);
-                  });
-              })
-              .catch(error => {
-                  console.error('Failed to load or process POIs:', error);
-                  alert('Could not load city data. Please check your connection and try again.');
-                  toggleARView(false); // Switch back to normal view on error
-              });
-      }
-      function showObjectInfo(poiId) {
-        const poi = poisData.find(p => p.id === poiId);
-        if(!poi) return;
-        console.log("Showing info for:", poi.name);
-        // This is where you would populate and show your objectModal
-        // document.getElementById('objectTitle').textContent = poi.name;
-        // document.getElementById('objectDescription').textContent = poi.description;
-        // ... etc.
-      }
-      // --- EVENT LISTENERS ---
-      arToggle.addEventListener('click', () => toggleARView(true));
-      // Add a listener for clicks within the AR scene
-      document.querySelector('a-scene').addEventListener('click', (event) => {
-        // Check if the clicked element is one of our boxes
-        if (event.target.hasAttribute('data-poi-id')) {
-          const poiId = parseInt(event.target.getAttribute('data-poi-id'), 10);
-          showObjectInfo(poiId);
-        }
-      });
-      // Add all your other event listeners for the UI here
-      // sendBtn.addEventListener('click', () => { ... });
-      // voiceBtn.addEventListener('click', () => { ... });
-// --- AI Assistant and Search Functionality ---
-function addUserMessage(message) {
-    const chatContainer = aiAssistant.querySelector('.flex-col');
-    const messageElement = document.createElement('div');
-    messageElement.className = 'ai-message user-message';
-    messageElement.innerHTML = `<p>${message}</p>`;
-    chatContainer.appendChild(messageElement);
-    aiAssistant.scrollTop = aiAssistant.scrollHeight; // Auto-scroll
-}
-function addAIMessage(message) {
-    const chatContainer = aiAssistant.querySelector('.flex-col');
-    const messageElement = document.createElement('div');
-    messageElement.className = 'ai-message assistant-message';
-    messageElement.innerHTML = `
-      <div class="font-bold text-indigo-800 mb-1">AR Guide</div>
-      <p>${message}</p>
-    `;
-    chatContainer.appendChild(messageElement);
-    aiAssistant.scrollTop = aiAssistant.scrollHeight; // Auto-scroll
-}
-// Event listener for the send button
-sendBtn.addEventListener('click', () => {
-    const searchTerm = userInput.value.trim();
-    if (!searchTerm) return;
-    addUserMessage(searchTerm);
-    userInput.value = '';
-    // --- NEW SEARCH LOGIC ---
-    // Make the search case-insensitive
-    const lowerCaseSearchTerm = searchTerm.toLowerCase();
-    // Filter the POI data we got from the backend
-    const results = poisData.filter(poi =>
-        poi.name.toLowerCase().includes(lowerCaseSearchTerm) ||
-        (poi.description && poi.description.toLowerCase().includes(lowerCaseSearchTerm))
-    );
-    // Respond based on the search results
-    if (results.length > 0) {
-        let responseMessage = `I found ${results.length} location(s) matching your search:<ul>`;
-        results.forEach(poi => {
-            responseMessage += `<li class="mt-2 list-disc list-inside">${poi.name}</li>`;
-        });
-        responseMessage += "</ul>";
-        addAIMessage(responseMessage);
-    } else {
-        addAIMessage(`Sorry, I couldn't find any locations matching "${searchTerm}". Try searching for something else.`);
-    }
-});
-// Also allow pressing Enter to search
-userInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
-        sendBtn.click();
-    }
-});
-    });
-  </script>
-</body>
-</html>
-</body>
-</html>
-<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>
-</html>