backup.pm.2.tilemap.app.py

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/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>
    <script>
    // 🕹️ Make objects draggable
    AFRAME.registerComponent('draggable', {
      // ... (draggable component code remains the same)
    });

    // 🦘 Make objects bounce
    AFRAME.registerComponent('bouncing', {
      // ... (bouncing component code remains the same)
    });

    // 💡 Create moving light sources
    AFRAME.registerComponent('moving-light', {
      // ... (moving-light component code remains the same)
    });

    // 📷 Move the camera
    function moveCamera(direction) {
      // ... (moveCamera function remains the same)
    }
    </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():
    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'}))
        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': 'center'}))
            st.button("⬇️", on_click=lambda: st.session_state.update({'camera_move': 'down'}))
        with col3:
            st.button("➡️", on_click=lambda: st.session_state.update({'camera_move': 'right'}))
        
        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("- Click and drag to move objects")
        st.write("- Use camera controls or WASD keys to navigate")
        st.write("- Objects bounce automatically")
        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")

    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]

    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 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>
    """

    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:
        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()