Update app.py

app.py

@@ -1,4 +1,231 @@
-# ... (previous code remains the same)
+import streamlit as st
+import os
+import base64
+from pathlib import Path
+import shutil
+import random
+
+# 🌈 Load A-Frame and custom components
+@st.cache_data
+def load_aframe_and_extras():
+    return """
+    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
+    <script>
+    // 🕹️ Make objects draggable
+    AFRAME.registerComponent('draggable', {
+      init: function () {
+        this.el.setAttribute('class', 'raycastable');
+        this.el.setAttribute('cursor-listener', '');
+        this.dragHandler = this.dragMove.bind(this);
+        this.el.sceneEl.addEventListener('mousemove', this.dragHandler);
+        this.el.addEventListener('mousedown', this.onDragStart.bind(this));
+        this.el.addEventListener('mouseup', this.onDragEnd.bind(this));
+        this.camera = document.querySelector('[camera]');
+      },
+      remove: function () {
+        this.el.removeAttribute('cursor-listener');
+        this.el.sceneEl.removeEventListener('mousemove', this.dragHandler);
+      },
+      onDragStart: function (evt) {
+        this.isDragging = true;
+        this.el.emit('dragstart');
+      },
+      onDragEnd: function (evt) {
+        this.isDragging = false;
+        this.el.emit('dragend');
+      },
+      dragMove: function (evt) {
+        if (!this.isDragging) return;
+        var camera = this.camera;
+        var vector = new THREE.Vector3(evt.clientX / window.innerWidth * 2 - 1, -(evt.clientY / window.innerHeight) * 2 + 1, 0.5);
+        vector.unproject(camera);
+        var dir = vector.sub(camera.position).normalize();
+        var distance = -camera.position.y / dir.y;
+        var pos = camera.position.clone().add(dir.multiplyScalar(distance));
+        this.el.setAttribute('position', pos);
+      }
+    });
+
+    // 🦘 Make objects bounce
+    AFRAME.registerComponent('bouncing', {
+      schema: {
+        speed: {type: 'vec3', default: {x: 0.1, y: 0.1, z: 0.1}},
+        dist: {type: 'vec3', default: {x: 0.5, y: 0.5, z: 0.5}}
+      },
+      init: function () {
+        this.originalPos = this.el.getAttribute('position');
+        this.dir = {x: 1, y: 1, z: 1};
+      },
+      tick: function (time, timeDelta) {
+        var currentPos = this.el.getAttribute('position');
+        var speed = this.data.speed;
+        var dist = this.data.dist;
+        
+        ['x', 'y', 'z'].forEach(axis => {
+          currentPos[axis] += speed[axis] * this.dir[axis] * (timeDelta / 1000);
+          if (Math.abs(currentPos[axis] - this.originalPos[axis]) > dist[axis]) {
+            this.dir[axis] *= -1;
+          }
+        });
+        
+        this.el.setAttribute('position', currentPos);
+      }
+    });
+
+    // 💡 Create moving light sources
+    AFRAME.registerComponent('moving-light', {
+      schema: {
+        color: {type: 'color', default: '#FFF'},
+        speed: {type: 'vec3', default: {x: 0.1, y: 0.1, z: 0.1}},
+        bounds: {type: 'vec3', default: {x: 5, y: 5, z: 5}}
+      },
+      init: function () {
+        this.dir = {x: 1, y: 1, z: 1};
+        this.light = document.createElement('a-light');
+        this.light.setAttribute('type', 'point');
+        this.light.setAttribute('color', this.data.color);
+        this.light.setAttribute('intensity', '0.75');
+        this.el.appendChild(this.light);
+      },
+      tick: function (time, timeDelta) {
+        var currentPos = this.el.getAttribute('position');
+        var speed = this.data.speed;
+        var bounds = this.data.bounds;
+        
+        ['x', 'y', 'z'].forEach(axis => {
+          currentPos[axis] += speed[axis] * this.dir[axis] * (timeDelta / 1000);
+          if (Math.abs(currentPos[axis]) > bounds[axis]) {
+            this.dir[axis] *= -1;
+          }
+        });
+        
+        this.el.setAttribute('position', currentPos);
+      }
+    });
+
+    // 📷 Camera controls
+    function moveCamera(direction) {
+      var camera = document.querySelector('[camera]');
+      var rig = document.querySelector('#rig');
+      var pos = rig.getAttribute('position');
+      var rot = rig.getAttribute('rotation');
+      var speed = 0.5;
+      var rotationSpeed = 5;
+      
+      switch(direction) {
+        case 'up':
+          pos.z -= speed;
+          break;
+        case 'down':
+          pos.z += speed;
+          break;
+        case 'left':
+          pos.x -= speed;
+          break;
+        case 'right':
+          pos.x += speed;
+          break;
+        case 'rotateLeft':
+          rot.y += rotationSpeed;
+          break;
+        case 'rotateRight':
+          rot.y -= rotationSpeed;
+          break;
+        case 'reset':
+          pos = {x: 0, y: 10, z: 0};
+          rot = {x: -90, y: 0, z: 0};
+          break;
+        case 'ground':
+          pos = {x: 0, y: 1.6, z: 0};
+          rot = {x: 0, y: 0, z: 0};
+          break;
+      }
+      
+      rig.setAttribute('position', pos);
+      rig.setAttribute('rotation', rot);
+    }
+
+    // ⌨️ Keyboard controls
+    document.addEventListener('keydown', function(event) {
+      switch(event.key.toLowerCase()) {
+        case 'q':
+          moveCamera('rotateLeft');
+          break;
+        case 'e':
+          moveCamera('rotateRight');
+          break;
+        case 'z':
+          moveCamera('reset');
+          break;
+        case 'c':
+          moveCamera('ground');
+          break;
+      }
+    });
+    </script>
+    """
+
+# 🏗️ Create A-Frame entities for each file type
+def create_aframe_entity(file_stem, file_type, position):
+    rotation = f"0 {random.uniform(0, 360)} 0"
+    bounce_speed = f"{random.uniform(0.05, 0.1)} {random.uniform(0.05, 0.1)} {random.uniform(0.05, 0.1)}"
+    bounce_dist = f"0.1 0.1 0.1"
+    
+    if file_type == 'obj':
+        return f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" obj-model="obj: #{file_stem}" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-entity>'
+    elif file_type == 'glb':
+        return f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" gltf-model="#{file_stem}" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-entity>'
+    elif file_type in ['webp', 'png']:
+        return f'<a-image position="{position}" rotation="-90 0 0" src="#{file_stem}" width="0.5" height="0.5" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-image>'
+    elif file_type == 'mp4':
+        return f'<a-video position="{position}" rotation="-90 0 0" src="#{file_stem}" width="0.5" height="0.5" class="raycastable" draggable bouncing="speed: {bounce_speed}; dist: {bounce_dist}"></a-video>'
+    return ''
+
+# 🔐 Encode file contents to base64
+@st.cache_data
+def encode_file(file_path):
+    with open(file_path, "rb") as file:
+        return base64.b64encode(file.read()).decode()
+
+# 🗺️ Generate tilemap grid
+@st.cache_data
+def generate_tilemap(files, directory, grid_width, grid_height, max_unique_models=5):
+    assets = "<a-assets>"
+    entities = ""
+    tile_size = 1
+    start_x = -(grid_width * tile_size) / 2
+    start_z = -(grid_height * tile_size) / 2
+
+    # Limit the number of unique models
+    unique_files = random.sample(files, min(len(files), max_unique_models))
+    encoded_files = {}
+
+    for file in unique_files:
+        file_path = os.path.join(directory, file)
+        file_type = file.split('.')[-1]
+        encoded_file = encode_file(file_path)
+        encoded_files[file] = encoded_file
+        
+        if file_type in ['obj', 'glb']:
+            assets += f'<a-asset-item id="{Path(file).stem}" src="data:application/octet-stream;base64,{encoded_file}"></a-asset-item>'
+        elif file_type in ['webp', 'png', 'mp4']:
+            mime_type = f"image/{file_type}" if file_type in ['webp', 'png'] else "video/mp4"
+            assets += f'<{file_type} id="{Path(file).stem}" src="data:{mime_type};base64,{encoded_file}"></{file_type}>'
+
+    for i in range(grid_width):
+        for j in range(grid_height):
+            x = start_x + (i * tile_size)
+            z = start_z + (j * tile_size)
+            position = f"{x} 0 {z}"
+            
+            if unique_files:
+                file = random.choice(unique_files)
+                file_type = file.split('.')[-1]
+                entities += create_aframe_entity(Path(file).stem, file_type, position)
+
+    assets += "</a-assets>"
+    return assets, entities
 
 # 🎭 Main function to run the Streamlit app
 def main():