Update app.py

app.py

@@ -1,204 +1,291 @@
 import streamlit as st
-import os
-import random
+import os, base64, shutil, random
+from pathlib import Path
 
 @st.cache_data
-def scan_assets():
-    """Discover textures, bump maps, glTF models, and OBJ(+MTL) pairs."""
-    files = [f for f in os.listdir() if os.path.isfile(f)]
-    img_exts = (".jpg", ".jpeg", ".png", ".gif")
-
-    # Textures (exclude bump/normal)
-    textures = [
-        f for f in files
-        if f.lower().endswith(img_exts)
-        and not any(tag in f.lower() for tag in ("bump", "normal"))
-    ]
-
-    # Bump/NORMAL map (take the first one, if any)
-    bump_maps = [
-        f for f in files
-        if f.lower().endswith(img_exts)
-        and any(tag in f.lower() for tag in ("bump", "normal"))
-    ]
-
-    # glTF models
-    gltf_models = [f for f in files if f.lower().endswith((".glb", ".gltf"))]
-
-    # OBJ models + their MTL partners
-    obj_models = [f for f in files if f.lower().endswith(".obj")]
-    mtl_files  = {
-        os.path.splitext(f)[0]: f
-        for f in files
-        if f.lower().endswith(".mtl")
+def load_aframe_and_extras():
+    return """
+    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
+    <script>
+    let score = 0;
+    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);
+      }
+    });
+    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);
+      },
+      boost: function() {
+        var speed = this.data.speed;
+        ['x', 'y', 'z'].forEach(axis => {
+          speed[axis] *= 1.5;
+        });
+        this.data.speed = speed;
+        this.dir = {
+          x: Math.random() > 0.5 ? 1 : -1,
+          y: Math.random() > 0.5 ? 1 : -1,
+          z: Math.random() > 0.5 ? 1 : -1
+        };
+      }
+    });
+    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);
+      }
+    });
+    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.y += speed; break;
+        case 'down': pos.y -= speed; break;
+        case 'forward': 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);
     }
+    function fireRaycast() {
+      var camera = document.querySelector('[camera]');
+      var direction = new THREE.Vector3();
+      camera.object3D.getWorldDirection(direction);
+      var raycaster = new THREE.Raycaster();
+      raycaster.set(camera.object3D.position, direction);
+      var intersects = raycaster.intersectObjects(document.querySelectorAll('.raycastable').map(el => el.object3D), true);
+      if (intersects.length > 0) {
+        var hitObject = intersects[0].object.el;
+        if (hitObject.components.bouncing) {
+          hitObject.components.bouncing.boost();
+          score += 10;
+          document.getElementById('score').setAttribute('value', 'Score: ' + score);
+        }
+      }
+    }
+    document.addEventListener('keydown', function(event) {
+      switch(event.key.toLowerCase()) {
+        case 'w': moveCamera('up'); break;
+        case 's': moveCamera('forward'); break;
+        case 'x': moveCamera('down'); break;
+        case 'q': moveCamera('rotateLeft'); break;
+        case 'e': moveCamera('rotateRight'); break;
+        case 'z': moveCamera('reset'); break;
+        case 'c': moveCamera('ground'); break;
+        case ' ': fireRaycast(); break;
+      }
+    });
+    </script>
+    """
 
-    models = []
-    idx = 0
-
-    # Register glTF entries
-    for gltf in gltf_models:
-        models.append({
-            "type":     "gltf",
-            "asset_id": f"model{idx}",
-            "src":      gltf
-        })
-        idx += 1
+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 ''
 
-    # Register OBJ entries
-    for obj in obj_models:
-        base = os.path.splitext(obj)[0]
-        mtl = mtl_files.get(base)
-        entry = {
-            "type":    "obj",
-            "obj_id":  f"model{idx}-obj",
-            "obj":     obj,
-            "mtl_id":  f"model{idx}-mtl" if mtl else None,
-            "mtl":     mtl
-        }
-        models.append(entry)
-        idx += 1
+@st.cache_data
+def encode_file(file_path):
+    with open(file_path, "rb") as file:
+        return base64.b64encode(file.read()).decode()
 
-    return textures, bump_maps, models
+@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
+    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']:
+            assets += f'<img id="{Path(file).stem}" src="data:image/{file_type};base64,{encoded_file}">'
+        elif file_type == 'mp4':
+            assets += f'<video id="{Path(file).stem}" src="data:video/mp4;base64,{encoded_file}"></video>'
+    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
 
 def main():
-    st.title("🔳 A-Frame Tilemap with Mixed 3D Models")
-    grid_size = st.sidebar.slider("Grid Size", 1, 20, 10)
-
-    textures, bump_maps, models = scan_assets()
-    if not textures or not models:
-        st.warning("⚠️ Drop at least one .jpg/.png and one .glb/.obj (with optional .mtl) in this folder.")
+    st.set_page_config(layout="wide")
+    with st.sidebar:
+        st.markdown("### 🤖 3D AI Using Claude 3.5 Sonnet for AI Pair Programming")
+        st.markdown("[Open 3D Animation Toolkit](https://huggingface.co/spaces/awacke1/3d_animation_toolkit)", unsafe_allow_html=True)
+        st.markdown("### ⬆️ Upload")
+        uploaded_files = st.file_uploader("Add files:", accept_multiple_files=True, key="file_uploader")
+        st.markdown("### 🎮 Camera Controls")
+        col1, col2, col3 = st.columns(3)
+        with col1:
+            st.button("⬅️", on_click=lambda: st.session_state.update({'camera_move': 'left'}))
+            st.button("🔄↺", on_click=lambda: st.session_state.update({'camera_move': 'rotateLeft'}))
+            st.button("🔝", on_click=lambda: st.session_state.update({'camera_move': 'reset'}))
+        with col2:
+            st.button("⬆️", on_click=lambda: st.session_state.update({'camera_move': 'up'}))
+            st.button("👀", on_click=lambda: st.session_state.update({'camera_move': 'ground'}))
+            st.button("🔫", on_click=lambda: st.session_state.update({'camera_move': 'fire'}))
+        with col3:
+            st.button("➡️", on_click=lambda: st.session_state.update({'camera_move': 'right'}))
+            st.button("⬇️", on_click=lambda: st.session_state.update({'camera_move': 'down'}))
+            st.button("⏩", on_click=lambda: st.session_state.update({'camera_move': 'forward'}))
+        st.markdown("### 🗺️ Grid Size")
+        grid_width = st.slider("Grid Width", 1, 8, 8)
+        grid_height = st.slider("Grid Height", 1, 5, 5)
+        st.markdown("### ℹ️ Instructions")
+        st.write("- W: Camera up\n- S: Move forward\n- X: Camera down\n- Q/E: Rotate camera left/right\n- Z: Reset camera to top view\n- C: Move camera to ground level\n- Spacebar: Fire raycast\n- Click and drag to move objects\n- Mouse wheel to zoom\n- Right-click and drag to rotate view")
+        st.markdown("### 📁 Directory")
+        directory = st.text_input("Enter path:", ".", key="directory_input")
+    
+    if not os.path.isdir(directory):
+        st.sidebar.error("Invalid directory path")
         return
+    file_types = ['obj', 'glb', 'webp', 'png', 'mp4']
+    if uploaded_files:
+        for uploaded_file in uploaded_files:
+            file_extension = Path(uploaded_file.name).suffix.lower()[1:]
+            if file_extension in file_types:
+                with open(os.path.join(directory, uploaded_file.name), "wb") as f:
+                    shutil.copyfileobj(uploaded_file, f)
+                st.sidebar.success(f"Uploaded: {uploaded_file.name}")
+            else:
+                st.sidebar.warning(f"Skipped unsupported file: {uploaded_file.name}")
+    files = [f for f in os.listdir(directory) if f.split('.')[-1] in file_types]
 
-    # --- Build <a-assets> ---
-    asset_tags = []
-    for i, tex in enumerate(textures):
-        asset_tags.append(f'<img id="tex{i}" src="{tex}">')
-
-    if bump_maps:
-        asset_tags.append(f'<img id="bump0" src="{bump_maps[0]}">')
-
-    for m in models:
-        if m["type"] == "gltf":
-            asset_tags.append(
-                f'<a-asset-item id="{m["asset_id"]}" src="{m["src"]}"></a-asset-item>'
-            )
-        else:
-            asset_tags.append(
-                f'<a-asset-item id="{m["obj_id"]}" src="{m["obj"]}"></a-asset-item>'
-            )
-            if m["mtl_id"]:
-                asset_tags.append(
-                    f'<a-asset-item id="{m["mtl_id"]}" src="{m["mtl"]}"></a-asset-item>'
-                )
+    aframe_scene = f"""
+    <a-scene embedded style="height: 600px; width: 100%;">
+      <a-entity id="rig" position="0 {max(grid_width, grid_height)} 0" rotation="-90 0 0">
+        <a-camera fov="60" look-controls wasd-controls="enabled: false" cursor="rayOrigin: mouse" raycaster="objects: .raycastable"></a-camera>
+      </a-entity>
+      <a-sky color="#87CEEB"></a-sky>
+      <a-entity moving-light="color: #FFD700; speed: 0.07 0.05 0.06; bounds: 4 3 4" position="2 2 -2"></a-entity>
+      <a-entity moving-light="color: #FF6347; speed: 0.06 0.08 0.05; bounds: 4 3 4" position="-2 1 2"></a-entity>
+      <a-entity moving-light="color: #00CED1; speed: 0.05 0.06 0.07; bounds: 4 3 4" position="0 3 0"></a-entity>
+      <a-text id="score" value="Score: 0" position="-1.5 1 -2" scale="0.5 0.5 0.5" color="white"></a-text>
+    """
 
-    assets_html = "\n          ".join(asset_tags)
+    assets, entities = generate_tilemap(files, directory, grid_width, grid_height, max_unique_models=5)
+    aframe_scene += assets + entities + "</a-scene>"
 
-    # JS arrays for textures & models
-    tex_js = ", ".join(f'"#tex{i}"' for i in range(len(textures)))
-    models_js_elems = []
-    for m in models:
-        if m["type"] == "gltf":
-            models_js_elems.append(f'{{type:"gltf", id:"#{m["asset_id"]}"}}')
+    camera_move = st.session_state.get('camera_move', None)
+    if camera_move:
+        if camera_move == 'fire':
+            aframe_scene += "<script>fireRaycast();</script>"
         else:
-            if m["mtl_id"]:
-                models_js_elems.append(
-                    f'{{type:"obj", obj:"#{m["obj_id"]}", mtl:"#{m["mtl_id"]}"}}'
-                )
-            else:
-                models_js_elems.append(
-                    f'{{type:"obj", obj:"#{m["obj_id"]}"}}'
-                )
-    models_js = ", ".join(models_js_elems)
+            aframe_scene += f"<script>moveCamera('{camera_move}');</script>"
+        st.session_state.pop('camera_move')
 
-    # Ground material (with optional bump)
-    if bump_maps:
-        ground_mat = "ground.setAttribute('material','color:#228B22; bumpMap:#bump0; bumpScale:0.2');"
-    else:
-        ground_mat = "ground.setAttribute('material','color:#228B22');"
-
-    # --- Final HTML ---
-    html = f"""
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Tilemap Scene</title>
-    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+    # ────────────────────────────────────────────────────────────────────────────
+    # ADDITION: include the A-Frame extras loader so OBJ/GLTF actually render
+    loader_script = """
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-extras.loaders.min.js"></script>
-  </head>
-  <body>
-    <a-scene>
-      <a-assets>
-          {assets_html}
-      </a-assets>
-
-      <!-- Lights -->
-      <a-entity light="type: ambient; color: #BBB"></a-entity>
-      <a-entity light="type: directional; color: #FFF; intensity:0.6" position="1 1 0"></a-entity>
-      <a-entity light="type: point; intensity:0.6" position="0 5 0"></a-entity>
-
-      <!-- Camera -->
-      <a-entity camera look-controls position="0 {grid_size} {grid_size}"></a-entity>
-
-      <!-- Tiles & Models -->
-      <a-entity id="tilemap"></a-entity>
-    </a-scene>
-
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {{
-        var scene   = document.querySelector('a-scene');
-        var tilemap = document.querySelector('#tilemap');
-        var textures = [{tex_js}];
-        var models   = [{models_js}];
-        var grid     = {grid_size};
-
-        for (var i = 0; i < grid; i++) {{
-          for (var j = 0; j < grid; j++) {{
-            var x = i - grid/2;
-            var z = j - grid/2;
-
-            // Base tile
-            var tile = document.createElement('a-box');
-            tile.setAttribute('width', 1);
-            tile.setAttribute('height', 0.1);
-            tile.setAttribute('depth', 1);
-            var tidx = Math.floor(Math.random() * textures.length);
-            tile.setAttribute('material', 'src:' + textures[tidx] + '; repeat:1 1');
-            tile.setAttribute('position', x + ' 0 ' + z);
-            tilemap.appendChild(tile);
-
-            // Random model
-            var m = models[Math.floor(Math.random() * models.length)];
-            var ent = document.createElement('a-entity');
-            if (m.type === 'gltf') {{
-              ent.setAttribute('gltf-model', m.id);
-            }} else {{
-              var cmd = 'obj: ' + m.obj;
-              if (m.mtl) cmd += '; mtl: ' + m.mtl;
-              ent.setAttribute('obj-model', cmd);
-            }}
-            ent.setAttribute('scale', '0.5 0.5 0.5');
-            ent.setAttribute('position', x + ' 0.5 ' + z);
-            tilemap.appendChild(ent);
-          }}
-        }}
-
-        // Ground plane
-        var ground = document.createElement('a-plane');
-        ground.setAttribute('width', grid * 2);
-        ground.setAttribute('height', grid * 2);
-        ground.setAttribute('rotation', '-90 0 0');
-        {ground_mat}
-        ground.setAttribute('position', '0 -0.05 0');
-        scene.insertBefore(ground, scene.firstChild);
-      }});
-    </script>
-  </body>
-</html>
     """
+    # ───────────────────────────────────────��────────────────────────────────────
 
-    st.components.v1.html(html, height=600, scrolling=False)
+    st.components.v1.html(
+        load_aframe_and_extras() 
+        + loader_script 
+        + aframe_scene, 
+        height=600
+    )
 
 if __name__ == "__main__":
     main()