create a website called "algorithmic garden" that uses webxr or xr.js plus three.js to display a list of .glb models that can overlayed over whatever a cellphone camera sees (AR). There should be pinch to zoom and rotate commands on the phone interface.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Algorithmic Arboretum
-emoji: 🔥
-colorFrom: gray
-colorTo: blue
+title: Algorithmic ARboretum 🌿
+colorFrom: yellow
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,52 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                
+                footer {
+                    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.1) 100%);
+                }
+                
+                .footer-link {
+                    transition: all 0.2s ease;
+                }
+                
+                .footer-link:hover {
+                    transform: translateY(-2px);
+                    color: #10b981;
+                }
+            </style>
+            <footer class="py-8 px-6 border-t border-emerald-200 dark:border-gray-700 mt-12">
+                <div class="container mx-auto">
+                    <div class="flex flex-col md:flex-row justify-between items-center">
+                        <div class="mb-4 md:mb-0">
+                            <p class="text-sm text-gray-600 dark:text-gray-300">
+                                &copy; ${new Date().getFullYear()} Algorithmic ARboretum. All rights reserved.
+                            </p>
+                        </div>
+                        <div class="flex gap-4">
+                            <a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-emerald-500">
+                                <i data-feather="github"></i>
+                            </a>
+                            <a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-emerald-500">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-emerald-500">
+                                <i data-feather="mail"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+        
+        feather.replace();
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,64 @@
+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                }
+                
+                header {
+                    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.2) 100%);
+                    backdrop-filter: blur(10px);
+                }
+                
+                .theme-toggle {
+                    transition: all 0.3s ease;
+                }
+                
+                .theme-toggle:hover {
+                    transform: rotate(30deg);
+                }
+                
+                @media (max-width: 640px) {
+                    .logo-text {
+                        display: none;
+                    }
+                }
+            </style>
+            <header class="py-4 px-6 border-b border-emerald-200 dark:border-gray-700">
+                <div class="container mx-auto flex justify-between items-center">
+                    <a href="/" class="flex items-center gap-2">
+                        <i data-feather="leaf" class="text-emerald-600 dark:text-emerald-400"></i>
+                        <span class="logo-text text-xl font-bold text-emerald-800 dark:text-emerald-200">Algorithmic ARboretum</span>
+                    </a>
+                    
+                    <div class="flex items-center gap-4">
+                        <button class="theme-toggle p-2 rounded-full bg-emerald-100 dark:bg-gray-700 text-emerald-600 dark:text-emerald-300">
+                            <i data-feather="moon" class="dark:hidden"></i>
+                            <i data-feather="sun" class="hidden dark:block"></i>
+                        </button>
+                    </div>
+                </div>
+            </header>
+        `;
+        
+        // Theme toggle functionality
+        const toggleBtn = this.shadowRoot.querySelector('.theme-toggle');
+        toggleBtn.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+            feather.replace();
+        });
+        
+        // Check for saved theme preference
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        }
+        
+        feather.replace();
+    }
+}
+
+customElements.define('custom-header', CustomHeader);

index.html

@@ -1,19 +1,72 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Algorithmic ARboretum - An immersive AR garden experience">
+    <title>Algorithmic ARboretum 🌿</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/WebXR.js"></script>
+</head>
+<body class="bg-emerald-50 dark:bg-gray-900 text-gray-900 dark:text-emerald-50 min-h-screen flex flex-col">
+    <custom-header></custom-header>
+
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <div id="ar-container" class="relative rounded-xl overflow-hidden shadow-xl">
+            <!-- AR Viewport will be inserted here -->
+            <div id="xr-button" class="absolute top-4 right-4 z-10">
+                <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-full flex items-center gap-2 transition-all">
+                    <i data-feather="eye"></i> Enter AR
+                </button>
+            </div>
+            <div id="loading" class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center text-white">
+                <div class="text-center">
+                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-emerald-500 mx-auto mb-4"></div>
+                    <p>Loading AR experience...</p>
+                </div>
+            </div>
+            <canvas id="ar-viewport" class="w-full h-full min-h-[60vh]"></canvas>
+        </div>
+
+        <section class="mt-12">
+            <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
+                <i data-feather="grid"></i> Available Plants
+            </h2>
+            
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="model-gallery">
+                <!-- Models will be loaded here -->
+            </div>
+        </section>
+
+        <div id="ar-controls" class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg p-4 flex justify-center gap-6 hidden">
+            <button id="rotate-btn" class="bg-emerald-500 hover:bg-emerald-600 text-white p-3 rounded-full">
+                <i data-feather="rotate-cw"></i>
+            </button>
+            <button id="scale-btn" class="bg-emerald-500 hover:bg-emerald-600 text-white p-3 rounded-full">
+                <i data-feather="maximize-2"></i>
+            </button>
+            <button id="place-btn" class="bg-emerald-500 hover:bg-emerald-600 text-white p-3 rounded-full">
+                <i data-feather="map-pin"></i>
+            </button>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <!-- Web Components -->
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,259 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Three.js scene
+    let scene, camera, renderer, controls;
+    let currentModel = null;
+    let isARSupported = false;
+    let isInARMode = false;
+    
+    // Model gallery data
+    const modelData = [
+        {
+            id: 'bamboo',
+            title: 'Bamboo Cluster',
+            description: 'A peaceful cluster of bamboo stalks',
+            thumbnail: 'https://static.photos/nature/640x360/1',
+            path: 'https://cdn.glitch.global/8e8b5d9a-7e4d-4a8b-9e8f-8f8e8f8e8f8e/bamboo.glb'
+        },
+        {
+            id: 'bonsai',
+            title: 'Zen Bonsai',
+            description: 'A meticulously crafted bonsai tree',
+            thumbnail: 'https://static.photos/nature/640x360/2',
+            path: 'https://cdn.glitch.global/8e8b5d9a-7e4d-4a8b-9e8f-8f8e8f8e8f8e/bonsai.glb'
+        },
+        {
+            id: 'fern',
+            title: 'Lush Fern',
+            description: 'A vibrant green fern plant',
+            thumbnail: 'https://static.photos/nature/640x360/3',
+            path: 'https://cdn.glitch.global/8e8b5d9a-7e4d-4a8b-9e8f-8f8e8f8e8f8e/fern.glb'
+        },
+        {
+            id: 'lotus',
+            title: 'Floating Lotus',
+            description: 'A beautiful water lotus flower',
+            thumbnail: 'https://static.photos/nature/640x360/4',
+            path: 'https://cdn.glitch.global/8e8b5d9a-7e4d-4a8b-9e8f-8f8e8f8e8f8e/lotus.glb'
+        },
+        {
+            id: 'palm',
+            title: 'Tropical Palm',
+            description: 'A tall tropical palm tree',
+            thumbnail: 'https://static.photos/nature/640x360/5',
+            path: 'https://cdn.glitch.global/8e8b5d9a-7e4d-4a8b-9e8f-8f8e8f8e8f8e/palm.glb'
+        },
+        {
+            id: 'sakura',
+            title: 'Cherry Blossom',
+            description: 'A delicate cherry blossom tree',
+            thumbnail: 'https://static.photos/nature/640x360/6',
+            path: 'https://cdn.glitch.global/8e8b5d9a-7e4d-4a8b-9e8f-8f8e8f8e8f8e/sakura.glb'
+        }
+    ];
+
+    // Check for WebXR support
+    function checkXRSupport() {
+        if ('xr' in navigator) {
+            navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
+                isARSupported = supported;
+                document.getElementById('xr-button').style.display = supported ? 'block' : 'none';
+            });
+        }
+    }
+
+    // Initialize Three.js scene
+    function initScene() {
+        const canvas = document.getElementById('ar-viewport');
+        
+        // Scene
+        scene = new THREE.Scene();
+        
+        // Camera
+        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(0, 1.6, 3);
+        
+        // Renderer
+        renderer = new THREE.WebGLRenderer({
+            canvas: canvas,
+            antialias: true,
+            alpha: true
+        });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.xr.enabled = true;
+        
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
+        scene.add(ambientLight);
+        
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
+        directionalLight.position.set(0, 10, 5);
+        scene.add(directionalLight);
+        
+        // Controls (for non-AR mode)
+        controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.25;
+        
+        // Load default model
+        loadModel(modelData[0].path);
+        
+        // Check XR support
+        checkXRSupport();
+        
+        // Start animation loop
+        animate();
+        
+        // Hide loading screen
+        setTimeout(() => {
+            document.getElementById('loading').style.display = 'none';
+        }, 1500);
+    }
+
+    // Load 3D model
+    function loadModel(path) {
+        const loader = new THREE.GLTFLoader();
+        
+        if (currentModel) {
+            scene.remove(currentModel);
+        }
+        
+        loader.load(path, (gltf) => {
+            currentModel = gltf.scene;
+            currentModel.scale.set(0.5, 0.5, 0.5);
+            currentModel.position.set(0, 0, 0);
+            scene.add(currentModel);
+        }, undefined, (error) => {
+            console.error('Error loading model:', error);
+        });
+    }
+
+    // Animation loop
+    function animate() {
+        requestAnimationFrame(animate);
+        
+        if (!isInARMode) {
+            controls.update();
+        }
+        
+        renderer.render(scene, camera);
+    }
+
+    // Initialize AR session
+    function startARSession() {
+        if (!isARSupported) return;
+        
+        const sessionInit = { optionalFeatures: ['dom-overlay', 'dom-overlay-for-handheld-ar'] };
+        
+        navigator.xr.requestSession('immersive-ar', sessionInit).then((session) => {
+            isInARMode = true;
+            document.getElementById('ar-controls').classList.remove('hidden');
+            
+            renderer.xr.setSession(session);
+            
+            // Add reticle for placing objects
+            const reticle = new THREE.Mesh(
+                new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
+                new THREE.MeshBasicMaterial({ color: 0xffffff })
+            );
+            reticle.matrixAutoUpdate = false;
+            reticle.visible = false;
+            scene.add(reticle);
+            
+            // Handle session end
+            session.addEventListener('end', () => {
+                isInARMode = false;
+                document.getElementById('ar-controls').classList.add('hidden');
+                currentModel.position.set(0, 0, 0);
+            });
+            
+            // Handle select events (placing objects)
+            session.addEventListener('select', () => {
+                if (currentModel && reticle.visible) {
+                    currentModel.position.setFromMatrixPosition(reticle.matrix);
+                }
+            });
+        });
+    }
+
+    // Event listeners
+    document.getElementById('xr-button').addEventListener('click', startARSession);
+    
+    document.getElementById('rotate-btn').addEventListener('click', () => {
+        if (currentModel) {
+            currentModel.rotation.y += Math.PI / 4;
+        }
+    });
+    
+    document.getElementById('scale-btn').addEventListener('touchstart', (e) => {
+        if (e.touches.length === 2 && currentModel) {
+            const touch1 = e.touches[0];
+            const touch2 = e.touches[1];
+            const dist1 = Math.hypot(
+                touch2.pageX - touch1.pageX,
+                touch2.pageY - touch1.pageY
+            );
+            
+            function handleMove(e) {
+                const touch1 = e.touches[0];
+                const touch2 = e.touches[1];
+                const dist2 = Math.hypot(
+                    touch2.pageX - touch1.pageX,
+                    touch2.pageY - touch1.pageY
+                );
+                
+                const scale = dist2 / dist1;
+                currentModel.scale.set(scale, scale, scale);
+            }
+            
+            function handleEnd() {
+                document.removeEventListener('touchmove', handleMove);
+                document.removeEventListener('touchend', handleEnd);
+            }
+            
+            document.addEventListener('touchmove', handleMove);
+            document.addEventListener('touchend', handleEnd);
+        }
+    });
+    
+    document.getElementById('place-btn').addEventListener('click', () => {
+        // In AR mode, this would place the object at the reticle position
+        if (isInARMode && currentModel) {
+            currentModel.position.set(0, 0, -1);
+        }
+    });
+
+    // Populate model gallery
+    function populateModelGallery() {
+        const gallery = document.getElementById('model-gallery');
+        
+        modelData.forEach((model) => {
+            const card = document.createElement('div');
+            card.className = 'model-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md cursor-pointer transition-all';
+            card.innerHTML = `
+                <div class="h-48 overflow-hidden">
+                    <img src="${model.thumbnail}" alt="${model.title}" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-lg mb-1">${model.title}</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">${model.description}</p>
+                    <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-3 py-1 rounded-full text-sm transition-colors">
+                        View in AR
+                    </button>
+                </div>
+            `;
+            
+            card.addEventListener('click', () => loadModel(model.path));
+            gallery.appendChild(card);
+        });
+    }
+
+    // Initialize everything
+    populateModelGallery();
+    initScene();
+    window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+});

style.css

@@ -1,28 +1,52 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    transition: background-color 0.3s ease;
+}
+
+h1, h2, h3 {
+    font-family: 'Playfair Display', serif;
+}
+
+#ar-viewport {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-color: #f0fdf4;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.model-card {
+    transition: all 0.3s ease;
+    transform: translateY(0);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.model-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* AR controls animation */
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+#ar-controls button {
+    animation: pulse 2s infinite;
 }
+
+/* Dark mode transitions */
+.dark #ar-viewport {
+    background-color: #1a2e05;
+}
+
+/* Loading spinner */
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.animate-spin {
+    animation: spin 1s linear infinite;
+}