Create app.py

app.py

@@ -0,0 +1,161 @@
+import streamlit as st
+import os, base64, shutil, random
+from pathlib import Path
+
+@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/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
+    <script>
+    let score = 0;
+    AFRAME.registerComponent('draggable', {
+      // ... (previous draggable component code)
+    });
+    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', {
+      // ... (previous moving-light component code)
+    });
+    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').innerText = '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>
+    """
+
+# ... (previous helper functions remain the same)
+
+def main():
+    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")
+    
+    # ... (rest of the main function remains mostly the same)
+
+    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, entities = generate_tilemap(files, directory, grid_width, grid_height, max_unique_models=5)
+    aframe_scene += assets + entities + "</a-scene>"
+    camera_move = st.session_state.get('camera_move', None)
+    if camera_move:
+        if camera_move == 'fire':
+            aframe_scene += "<script>fireRaycast();</script>"
+        else:
+            aframe_scene += f"<script>moveCamera('{camera_move}');</script>"
+        st.session_state.pop('camera_move')
+    st.components.v1.html(load_aframe_and_extras() + aframe_scene, height=600)
+
+if __name__ == "__main__":
+    main()