Update app.py

app.py

@@ -7,7 +7,6 @@ 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 src="https://cdn.jsdelivr.net/npm/aframe-volumetric-fog@latest/dist/aframe-volumetric-fog.min.js"></script>
     <script>
     let score = 0;
     AFRAME.registerComponent('draggable', {
@@ -34,147 +33,97 @@ def load_aframe_and_extras():
       },
       dragMove: function (evt) {
         if (!this.isDragging) return;
-        var camera = this.camera.getObject3D('camera');
-        var worldPos = new THREE.Vector3();
-        camera.getWorldPosition(worldPos);
-        var worldDir = new THREE.Vector3();
-        camera.getWorldDirection(worldDir);
-        var camX = worldPos.x;
-        var camY = worldPos.y;
-        var camZ = worldPos.z;
-        var dirX = worldDir.x;
-        var dirY = worldDir.y;
-        var dirZ = worldDir.z;
-        var t = -camY / dirY;
-        var moveX = camX + t * dirX;
-        var moveZ = camZ + t * dirZ;
-        this.el.setAttribute('position', moveX + " " + 0.0 + " " + moveZ);
+        let mouseX = evt.clientX / window.innerWidth * 2 - 1;
+        let mouseY = -(evt.clientY / window.innerHeight * 2) + 1;
+        let position = new THREE.Vector3(mouseX, mouseY, -5);
+        position.unproject(this.camera.components.camera.camera);
+        let direction = position.sub(this.camera.object3D.position).normalize();
+        let distance = -this.camera.object3D.position.z / direction.z;
+        let newPosition = this.camera.object3D.position.clone().add(direction.multiplyScalar(distance));
+        this.el.setAttribute('position', {x: newPosition.x, y: newPosition.y, z: this.el.getAttribute('position').z});
       }
     });
-
-    AFRAME.registerComponent('undulating-rotation', {
-      schema: {
-        speed: { type: 'number', default: 1 }, // Base rotation speed
-        amplitude: { type: 'number', default: 20 }, // Maximum rotation in degrees
-        frequency: { type: 'number', default: 0.5 } // Speed of undulation
-      },
+    AFRAME.registerComponent('cursor-listener', {
       init: function () {
-        this.initialRotation = Math.random() * 360; // Random initial rotation
-        this.time = 0;
-      },
-      tick: function (time, deltaTime) {
-        this.time += deltaTime / 1000;
-        const rotationAmount = Math.sin(this.time * this.data.frequency) * this.data.amplitude;
-        this.el.setAttribute('rotation', { x: 0, y: this.initialRotation + rotationAmount, z: 0 });
+        this.el.addEventListener('mouseenter', function (evt) {
+          this.setAttribute('material', {color: 'red'});
+        });
+        this.el.addEventListener('mouseleave', function (evt) {
+          this.setAttribute('material', {color: 'blue'});
+        });
+        this.el.addEventListener('click', function (evt) {
+          score++;
+          document.getElementById('score').setAttribute('value', 'Score: ' + score);
+        });
       }
     });
     </script>
     """
 
-@st.cache_data
-def encode_file(file_path):
-    with open(file_path, "rb") as file:
-        return base64.b64encode(file.read()).decode()
-
-@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
-    available_models = [f for f in files if f.endswith(('.obj', '.glb'))]
-    available_images = [f for f in files if f.endswith(('.webp', '.png'))]
-    encoded_files = {}
+def create_environment(scene):
+    sky = scene.entity(
+        geometry="primitive: sphere; radius: 5000",
+        material="color: #ADD8E6; shader: flat; side: back" # Light blue sky
+    )
+    ground = scene.entity(
+        geometry="primitive: plane; width: 100; height: 100",
+        material="color: #7CFC00; side: double", # Lawn green ground
+        rotation="-90 0 0"
+    )
+    return sky, ground
 
-    unique_files = random.sample(files, min(len(files), max_unique_models))
+def create_drag_target(scene, x, y, z, color='blue'):
+    target = scene.entity(
+        geometry=f"primitive: box; width: 1; height: 1; depth: 1",
+        material=f"color: {color}",
+        position=f"{x} {y} {z}",
+        draggable=""
+    )
+    return target
 
-    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']:
-            mime_type = f"image/{file_type}"
-            assets += f'<img id="{Path(file).stem}" src="data:{mime_type};base64,{encoded_file}" />'
+def main():
+    st.title("Interactive A-Frame Scene")
 
-    assets += "</a-assets>"
+    html_string = f"""
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="utf-8">
+            <title>A-Frame Example</title>
+            {load_aframe_and_extras()}
+          </head>
+          <body>
+            <a-scene cursor="rayOrigin: mouse" raycaster="objects: .raycastable">
+              <a-camera position="0 1.6 0"></a-camera>
+              <a-entity id="environment"></a-entity>
+              <a-text id="score" value="Score: 0" position="-2 2 -3" color="black"></a-text>
+              <a-entity id="drag-targets"></a-entity>
+            </a-scene>
+          </body>
+        </html>
+        """
 
-    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}"
+    st.components.v1.html(html_string, height=600, scrolling=False)
 
-            chosen_file = random.choice(files)
-            file_type = chosen_file.split('.')[-1]
-            file_stem = Path(chosen_file).stem
-            rotation = f"0 {random.uniform(0, 360)} 0"
-            bounce_speed = f"{random.uniform(0.01, 0.03)} {random.uniform(0.01, 0.03)} {random.uniform(0.01, 0.03)}"
-            amplitude = random.uniform(5, 15)
-            frequency = random.uniform(0.1, 0.5)
+    with st.sidebar:
+        st.header("Scene Controls")
+        num_targets = st.slider("Number of Drag Targets", min_value=1, max_value=10, value=3)
 
-            if file_type == 'obj':
-                entities += f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" obj-model="obj: #{file_stem}" class="raycastable" draggable undulating-rotation="amplitude: {amplitude}; frequency: {frequency}"></a-entity>'
-            elif file_type == 'glb':
-                entities += f'<a-entity position="{position}" rotation="{rotation}" scale="0.5 0.5 0.5" gltf-model="#{file_stem}" class="raycastable" draggable undulating-rotation="amplitude: {amplitude}; frequency: {frequency}"></a-entity>'
-            elif file_type in ['webp', 'png']:
-                if available_images:
-                    random_image = random.choice(available_images)
-                    image_stem = Path(random_image).stem
-                    entities += f'<a-plane position="{position}" rotation="-90 0 0" width="{tile_size}" height="{tile_size}" material="src: #{image_stem}" class="raycastable" draggable></a-plane>'
+        scene = st.components.v1 # This won't work as expected for direct A-Frame manipulation
 
-    return assets, entities
+        environment = scene.get("environment") # This also won't work
 
-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("### 🗺️ Grid Size")
-        grid_width = st.slider("Grid Width", 1, 10, 8)
-        grid_height = st.slider("Grid Height", 1, 10, 5)
-        st.markdown("### ℹ️ Instructions")
-        st.write("- Click and drag to move objects")
-        st.write("- Mouse wheel to zoom")
-        st.write("- Right-click and drag to rotate view")
-        st.markdown("### 📁 Directory")
-        directory = st.text_input("Enter path:", ".", key="directory_input")
+        drag_targets = scene.get("drag-targets") # And this won't work
 
-    if not os.path.isdir(directory):
-        st.sidebar.error("Invalid directory path")
-        return
-    file_types = ['obj', 'glb', 'webp', 'png']
-    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]
+        if environment is not None:
+            create_environment(environment) # This will likely cause errors
 
-    aframe_scene = f"""
-    <a-scene embedded style="height: 600px; width: 100%;">
-        {load_aframe_and_extras()}
-        <a-entity id="rig" movement-controls="fly: true; speed: 0.3" position="0 1.6 0">
-            <a-camera id="camera" position="0 1.6 10"></a-camera>
-        </a-entity>
-        <a-entity light="type: ambient; color: #EEE"></a-entity>
-        <a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 1 1"></a-entity>
-        <a-sky color="#ECF0F1"></a-sky>
-        <a-entity id="tilemap">
-            {''.join(generate_tilemap(files, directory, grid_width, grid_height))}
-        </a-entity>
-    </a-scene>
-    """
-    st.components.v1.html(aframe_scene, height=600)
+        if drag_targets is not None:
+            for i in range(num_targets):
+                x = random.uniform(-5, 5)
+                y = 1
+                z = random.uniform(-5, -2)
+                create_drag_target(drag_targets, x, y, z) # Potential error here too
 
 if __name__ == "__main__":
     main()