3DWorldBuilder

Running

App Files Files Community

awacke1 commited on 6 days ago

Commit

cc49b29

verified ·

1 Parent(s): 6dcce46

Update app.py

Browse files

Files changed (1) hide show

app.py +441 -349

app.py CHANGED Viewed

@@ -1,349 +1,441 @@
-import streamlit as st
-import streamlit.components.v1 as components
-# --------------------------
-# Mermaid Renderer Function
-# --------------------------
-def render_mermaid(mermaid_code, height=300):
-    """Render a mermaid diagram using an HTML snippet in a Streamlit component."""
-    html_code = f"""
-    <html>
-      <head>
-        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
-        <style>
-          body {{
-            background-color: white;
-            font-family: sans-serif;
-          }}
-        </style>
-      </head>
-      <body>
-        <div class="mermaid">
-{mermaid_code}
-        </div>
-        <script>
-          mermaid.initialize({{startOnLoad:true}});
-        </script>
-      </body>
-    </html>
-    """
-    components.html(html_code, height=height)
-# --------------------------
-# Markdown Outlines for Each Area
-# --------------------------
-markdown_areas = {
-    "1. 👥 Leadership Management Collaboration LeCo": r'''
-1. 👥 Leadership Management Collaboration LeCo
-''',
-    "2. 🔒 Security Compliance Reliability SeCo": r'''
-2. 🔒 Security Compliance Reliability SeCo
-''',
-    "3. 📊 Data Engineering Analytics Data Governance DaEn": r'''
-3. 📊 Data Engineering Analytics Data Governance DaEn
-''',
-    "4. 📢 Community OpenSource Communication CoOS": r'''
-4. 📢 Community OpenSource Communication CoOS
-''',
-    "5. 📱 FullStack UI Mobile Product Development FuMo": r'''
-5. 📱 FullStack UI Mobile Product Development FuMo
-''',
-    "6. 💻 Software Cloud MLOps Infrastructure SCMI": r'''
-6. 💻 Software Cloud MLOps Infrastructure SCMI
-''',
-    "7. 🤖 Machine Learning AI Model Development MLAI": r'''
-7. 🤖 Machine Learning AI Model Development MLAI
-''',
-    "8. 🔧 Systems Infrastructure LowLevel Engineering SyIn": r'''
-8. 🔧 Systems Infrastructure LowLevel Engineering SyIn
-''',
-    "9. 🎯 Specialized Domains Emerging Technologies SpDo": r'''
-9. 🎯 Specialized Domains Emerging Technologies SpDo
-'''
-}
-# --------------------------
-# Mermaid Diagrams for Each Area
-# --------------------------
-mermaid_areas = {
-    "1. 👥 Leadership Management Collaboration LeCo": r'''
-graph LR
-  LeCo["🗼LeCo👥 Leadership and Collaboration"]
-  LeCo -->|🚀 Guides| LeCo1a["1. 🚀 Strategic and Cross-Functional Leadership - Global strategy, team coordination and vendor management"]
-  LeCo -->|🤝 Supports| LeCo1b["2. 🤝 Team Building and Agile Collaboration - Coaching, agile processes and stakeholder management"]
-  LeCo -->|💡 Innovates| LeCo1c["3. 💡 Domain Expertise and Innovation - Deep AI knowledge and product strategy"]
-    ''',
-    "2. 🔒 Security Compliance Reliability SeCo": r'''
-graph LR
-  SeCo["👓SeCo🔒 Security and Compliance"]
-  SeCo -->|🛡️ Protects| SeCo1["1. 🛡️ Security Operations and Incident Response - Incident management, pen testing and vulnerability assessment"]
-  SeCo -->|✅ Regulates| SeCo2["2. ✅ Compliance and Governance - Data quality, compliance policies and IAM"]
-  SeCo -->|🔒 Secures| SeCo3["3. 🔒 System Hardening and Automation - Secure HPC, ML, Python, Bash automation and cost optimization"]
-    ''',
-    "3. 📊 Data Engineering Analytics Data Governance DaEn": r'''
-graph LR
-  DaEn["🪑DaEn📊 Data Engineering"]
-  DaEn -->|💧 Processes| DaEn1["1. 💧 Data Processing and Ingestion - Multi-modal data, event handling and ETL"]
-  DaEn -->|📊 Analyzes| DaEn2["2. 📊 Analytics, Forecasting and Visualization - BI, dashboards and forecasting"]
-  DaEn -->|📝 Governs| DaEn3["3. 📝 Data Governance and Quality - Modeling, warehousing and stakeholder communications"]
-    ''',
-    "4. 📢 Community OpenSource Communication CoOS": r'''
-graph LR
-  CoOS["🪟CoOS📢 Community OpenSource"]
-  CoOS -->|📚 Documents| CoOS1["1. 📚 Technical Documentation and Demos - Code examples, demos and notebooks"]
-  CoOS -->|💬 Engages| CoOS2["2. 💬 Community Engagement and Collaboration - Public speaking, social media and collaborations"]
-    ''',
-    "5. 📱 FullStack UI Mobile Product Development FuMo": r'''
-graph LR
-  FuMo["✋FuMo📱 FullStack UI Mobile"]
-  FuMo -->|📱 Develops| FuMo1["1. 📱 Mobile and Web App Development - Full stack development, CI/CD and API design"]
-  FuMo -->|🎨 Designs| FuMo2["2. 🎨 UI, UX and Frontend Integration - React, Next.js, TypeScript and intuitive design"]
-  FuMo -->|🔌 Connects| FuMo3["3. 🔌 Backend and Cross-Platform Tools - Python, Node, cloud microservices and ML bridging"]
-    ''',
-    "6. 💻 Software Cloud MLOps Infrastructure SCMI": r'''
-graph LR
-  SoCM["🎲SoCM💻 Software Cloud MLOps"]
-  SoCM -->|🛠️ Optimizes| SCMI1["1. 🛠️ Developer Tooling and Observability - Full stack dev, debugging and SRE practices"]
-  SoCM -->|🤖 Automates| SCMI2["2. 🤖 ML Frameworks and Automation - Python APIs, PyTorch, Keras and Ray, Horovod"]
-  SoCM -->|🔄 Pipelines| SCMI3["3. 🔄 Data Pipelines and Processing - Spark, Airflow and ETL pipelines"]
-  SoCM -->|☁️ Deploys| SCMI4["4. ☁️ Cloud and Infrastructure Provisioning - Kubernetes, Docker, Terraform and cloud integration"]
-    ''',
-    "7. 🤖 Machine Learning AI Model Development MLAI": r'''
-graph LR
-  AIML["☁️AIML🤖 AI Machine Learning"]
-  AIML -->|🏛️ Structures| MLAI1["1. 🏛️ Large-Scale Architectures and Retrieval - Transformers, RAG and vector DBs"]
-  AIML -->|⚗️ Experiments| MLAI2["2. ⚗️ Experimentation and Distributed Training - RL, quantization and ablation studies"]
-  AIML -->|📡 Deploys| MLAI3["3. 📡 Application and API Development - Agentic AI, LLM inference and microservices"]
-  AIML -->|📈 Optimizes| MLAI4["4. 📈 Optimization and Monitoring - Performance tuning, scaling and reliability"]
-    ''',
-    "8. 🔧 Systems Infrastructure LowLevel Engineering SyIn": r'''
-graph LR
-  SyIn["🚪SyIn🔧 Systems Infrastructure"]
-  SyIn -->|🐧 Integrates| SyIn1["1. 🐧 Hardware and OS Integration - Linux, embedded, C, C++"]
-  SyIn -->|⚙️ Tunes| SyIn2["2. ⚙️ Performance and Tuning - Cross-layer tuning, throughput and load balancing"]
-  SyIn -->|🤖 Enhances| SyIn3["3. 🤖 Advanced ML and Automation - Cross-team innovation, observability and ServiceNow"]
-  SyIn -->|🚀 Scales| SyIn4["4. 🚀 Distributed and HPC Deployment - Data center HPC, ML, GPU orchestration and multi-GPU pipelines"]
-    ''',
-    "9. 🎯 Specialized Domains Emerging Technologies SpDo": r'''
-graph LR
-  SpDo["🐱SpDo🎯 Specialized Domains"]
-  SpDo -->|🎥 Visualizes| SpDo1["1. 🎥 Advanced CV and 3D Graphics - Neural rendering, reconstruction and graphics engines"]
-  SpDo -->|🚗 Automates| SpDo2["2. 🚗 Robotics and Autonomous Systems - Autonomous vehicles, sensor fusion and path planning"]
-  SpDo -->|💻 Computes| SpDo3["3. 💻 HPC and Hardware Integration - GPU, SoC modeling, HPC networking and prototyping"]
-  SpDo -->|🔢 Quantizes| SpDo4["4. 🔢 AI Quantization and Inference - Quantization, in-browser inference and neural sparse models"]
-    '''
-}
-# --------------------------
-# Markdown Sections
-# --------------------------
-md_combined_outline = r'''
-# 📚 Hands On ML App. Dev. with Mixture of Experts and Multiagent Skills and State of Art ML Architecture
-1. 🗼LeCo👥 Leadership and Collaboration :  Strategic leadership and team management.
-2. 👓SeCo🔒 Security and Compliance :  Security operations, compliance, and system hardening.
-3. 🪑DaEn📊 Data Engineering :  Data processing, analytics, and governance.
-4. 🪟CoOS📢 Community OpenSource :  Community engagement, documentation, and collaboration.
-5. ✋FuMo📱 FullStack UI Mobile :  Mobile and web app development with ML integration.
-6. 🎲SoCM💻 Software Cloud MLOps :  Cloud infrastructure, ML frameworks, and automation.
-7. ☁️AIML🤖 AI Machine Learning :  Large–scale architectures, distributed training, and inference.
-8. 🚪SyIn🔧 Systems Infrastructure :  Hardware, OS, and distributed HPC deployments.
-9. 🐱SpDo🎯 Specialized Domains :  Advanced CV, robotics, HPC, and AI quantization.
-'''
-md_submodels_outline = r'''
-## 1. 👥 Leadership Management Collaboration LeCo
-1. **🚀 Strategic and Cross-Functional Leadership - Global strategy, team coordination and vendor management**
-2. **🤝 Team Building and Agile Collaboration - Coaching, agile processes and stakeholder management**
-3. **💡 Domain Expertise and Innovation - Deep AI framework knowledge and product strategy**
-## 2. 🔒 Security Compliance Reliability SeCo
-1. **🛡️ Security Operations and Incident Response - Incident management, pen testing and vulnerability assessment**
-2. **✅ Compliance and Governance - Data quality standards, compliance policies and IAM solutions**
-3. **🔒 System Hardening and Automation - Secure HPC, ML, Python, Bash automation and cost optimization**
-## 3. 📊 Data Engineering Analytics Data Governance DaEn
-1. **💧 Data Processing and Ingestion - Multi, modal data, event handling and ETL pipelines**
-2. **📊 Analytics, Forecasting and Visualization - BI, dashboards and forecasting**
-3. **📝 Data Governance and Quality - Modeling, warehousing and stakeholder comms**
-## 4. 📢 Community OpenSource Communication CoOS
-1. **📚 Technical Documentation and Demos - Code examples, demos and notebooks**
-2. **💬 Community Engagement and Collaboration - Public speaking, social media and collabs**
-## 5. 📱 FullStack UI Mobile Product Development FuMo
-1. **📱 Mobile and Web App Development - Full stack development, CI/CD and API design**
-2. **🎨 UI, UX and Frontend Integration - React, Next.js, TypeScript and intuitive design**
-3. **🔌 Backend and Cross-Platform Tools - Python, Node, cloud microservices and ML bridging**
-## 6. 💻 Software Cloud MLOps Infrastructure SoCM
-1. **🛠️ Developer Tooling and Observability - Full stack dev, debugging and SRE practices**
-2. **🤖 ML Frameworks and Automation - Python APIs, PyTorch, Keras and Ray, Horovod**
-3. **🔄 Data Pipelines and Processing - Spark, Airflow and ETL pipelines**
-4. **☁️ Cloud and Infrastructure Provisioning - Kubernetes, Docker, Terraform and cloud integration**
-## 7. 🤖 AI Machine Learning Model Development AIML
-1. **🏛️ Large-Scale Architectures and Retrieval - Transformers, RAG and vector DBs**
-2. **⚗️ Experimentation and Distributed Training - RL, quantization and ablation studies**
-3. **📡 Application and API Development - Agentic AI, LLM inference and microservices**
-4. **📈 Optimization and Monitoring - Performance tuning, scaling and reliability**
-## 8. 🔧 Systems Infrastructure LowLevel Engineering SyIn
-1. **🐧 Hardware and OS Integration - Linux, embedded, C, C++**
-2. **⚙️ Performance and Tuning - Cross-layer tuning, throughput and load balancing**
-3. **🤖 Advanced ML and Automation - Cross-team innovation, observability and ServiceNow**
-4. **🚀 Distributed and HPC Deployment - Data center HPC, ML, GPU orchestration and multi-GPU pipelines**
-## 9. 🎯 Specialized Domains Emerging Technologies SpDo
-1. **🎥 Advanced CV and 3D Graphics - Neural rendering, reconstruction and graphics engines**
-2. **🚗 Robotics and Autonomous Systems - Autonomous vehicles, sensor fusion and path planning**
-3. **💻 HPC and Hardware Integration - GPU, SoC modeling, HPC networking and prototyping**
-4. **🔢 AI Quantization and Inference - Quantization, in-browser inference and neural sparse models**
-'''
-md_glossary = r'''
-# 📖 Glossary
-1. **🔧 Systems Infrastructure SyIn:** Hardware and OS, level operations enabling computing environments.
-2. **💻 Software Cloud MLOps SCMI:** Tools and processes for managing ML workflows and cloud infrastructures.
-3. **🤖 Machine Learning AI MLAI:** Techniques and architectures for developing and deploying AI models.
-4. **📊 Data Engineering DaEn:** Methods for processing, analyzing and governing data.
-5. **🔒 Security and Compliance SeCo:** Practices ensuring system security and adherence to regulations.
-6. **👥 Leadership and Collaboration LeCo:** Strategies for effective team management and cross-functional coordination.
-7. **📱 FullStack UI Mobile FuMo:** End-to-end development of mobile and web interfaces integrating ML.
-8. **🎯 Specialized Domains SpDo:** Focus areas in advanced tech such as computer vision, robotics and HPC.
-9. **📢 Community OpenSource CoOS:** Engagement with open-source communities and technical education.
-10. **HPC:** High Performance Computing; large-scale computational systems and clusters.
-11. **LLM:** Large Language Models; deep learning models for natural language processing.
-12. **MLOps:** Machine Learning Operations; practices for deploying and managing ML systems.
-'''
-md_python_libraries = r'''
-# 🐍 Python Libraries Guide
-1. **🔥 TensorFlow (tensorflow) -** Deep learning library for research and production.
-2. **🤗 Huggingface Hub (huggingface_hub) -** Platform for sharing and accessing pre-trained models.
-3. **🔄 Transformers (transformers) -** Library for NLP and model inference.
-4. **🔥 Torch (torch) -** PyTorch library for dynamic deep learning.
-5. **🚀 Streamlit (streamlit) -** Rapidly build interactive ML web apps.
-6. **🎙️ Gradio (gradio) -** Create customizable web interfaces for ML models.
-7. **🐼 Pandas (pandas) -** Data manipulation and analysis.
-8. **🔢 NumPy (numpy) -** Numerical computing and array operations.
-9. **💬 LangChain (langchain) -** Framework for building applications with language models.
-10. **🤖 OpenAI (openai) -** API for accessing GPT models and AI services.
-11. **🔑 Azure MSAL (msal) -** Authentication library for Azure services.
-12. **⚙️ Scikit-learn (scikit-learn) -** Machine learning tools for data mining and analysis.
-13. **📈 Matplotlib (matplotlib) -** Plotting library for data visualization.
-14. **🔍 Seaborn (seaborn) -** Statistical data visualization.
-15. **📊 Plotly (plotly) -** Interactive graphing library.
-16. **📚 NLTK (nltk) -** Natural language processing toolkit.
-17. **🧪 SciPy (scipy) -** Scientific and technical computing.
-18. **⚡ FastAPI (fastapi) -** Build fast APIs for ML applications.
-19. **🛠 Dask (dask) -** Parallel computing with task scheduling.
-20. **🔗 Requests (requests) -** HTTP library for Python.
-'''
-md_js_libraries = r'''
-# 💻 JavaScript Libraries Guide
-1. **🔥 React (react) -** Library for building UI components.
-2. **⚛️ Redux (redux) -** Predictable state container for JavaScript apps.
-3. **🌐 Node.js (node) -** JavaScript runtime for building server-side applications.
-4. **💻 Express (express) -** Web framework for Node.js.
-5. **🔗 D3.js (d3) -** Library for dynamic, interactive data visualizations.
-6. **📊 Chart.js (chart.js) -** Simple yet flexible charting library.
-7. **🛠 Webpack (webpack) -** Module bundler for JavaScript applications.
-8. **⚙️ Babel (babel) -** Transpiler for next-generation JavaScript.
-9. **🚀 Next.js (next) -** React framework for server-side rendering.
-10. **🎨 Tailwind CSS (tailwindcss) -** Utility-first CSS framework for rapid UI development.
-11. **🌀 jQuery (jquery) -** DOM manipulation library.
-12. **🔍 Lodash (lodash) -** Utility library for JavaScript.
-13. **⏰ Moment.js (moment) -** Date library for parsing, validating and formatting dates.
-14. **📡 Axios (axios) -** Promise-based HTTP client.
-15. **💬 Socket.io (socket.io) -** Real-time communication library.
-16. **🖼 Vue.js (vue) -** Progressive framework for building user interfaces.
-17. **🅰️ Angular (angular) -** Platform for building mobile and desktop web applications.
-18. **🔥 Ember.js (ember) -** Framework for creating ambitious web applications.
-19. **📊 Mermaid.js (mermaid) -** Library for generating diagrams and flowcharts.
-20. **🎇 Three.js (three) -** Library for creating 3D graphics in the browser.
-'''
-md_picture_mnemonic = r'''
-# 🖼 Picture Mnemonic Outline
-1. **🗼 Lighthouse -** Represents #1, a beacon of guidance.
-2. **👓 Eyeglasses -** Symbolizes #2, two lenses for clarity.
-3. **🪑 Stool -** Denotes #3, three legs for stability.
-4. **🪟 Window -** Four panes, representing #4.
-5. **✋ Hand -** Five fingers for #5.
-6. **🎲 Dice -** Six sides symbolizing #6.
-7. **☁️ Cloud -** For #7, light and airy.
-8. **🚪 Gate -** Represents #8, opening new paths.
-9. **🐱 Cat -** Nine lives, symbolic of #9.
-**Mnemonic:** A mnemonic is a memory aid using patterns or associations to enhance recall. Here, we apply the pegword technique by pairing each number with a vivid image to quickly remember complex information.
-*(Adapted from McCarthy, M. J. 2007. Mastering the INFORMATION AGE - A Course in Working Smarter, Thinking Better, and Learning Faster. [1])*
-[1] McCarthy, M. J. 2007. *Mastering the INFORMATION AGE - A Course in Working Smarter, Thinking Better, and Learning Faster*. Retrieved from https://www.example.com/reference
-'''
-md_tweet = r'''
-# 🐦 Tweet Summary
-Unlock your AI mastery with our densified skill tree - from LC to SD - each node paired with powerful mnemonics and vivid visuals (🗼👓🪑🪟✋🎲☁️🚪🐱) to boost memory and innovation. #AI #ML #Learning #Innovation
-'''
-# --------------------------
-# Combined Mermaid Diagram (Overview)
-# --------------------------
-combined_mermaid = r'''
-graph TD
-  LeCo["1. 👥 Leadership and Collaboration - LeCo"]
-  SeCo["2. 🔒 Security and Compliance - SeCo"]
-  DaEn["3. 📊 Data Engineering - DaEn"]
-  CoOS["4. 📢 Community Open Source - CoOS"]
-  FuMo["5. 📱 FullStack UI Mobile - FuMo"]
-  SoCM["6. 💻 Software Cloud MLOps - SoCM"]
-  AIML["7. 🤖 AI Machine Learning - AIML"]
-  SyIn["8. 🔧 Systems Infrastructure - SyIn"]
-  SpDo["9. 🎯 Specialized Domains - SpDo"]
-  LeCo -->|🧭 guides| SeCo
-  LeCo -->|👑 leads| AIML
-  LeCo -->|🤝 supports| SyIn
-  SeCo ---|🔒 secures| AIML
-  SeCo ---|🛡️ protects| SoCM
-  AIML -->|💧 feeds| DaEn
-  SoCM -->|⚡ powers| AIML
-  FuMo ---|🔌 integrates with| SoCM
-  FuMo -->|➕ extends to| SpDo
-  SpDo ---|✨ enhances| AIML
-  LeCo ---|👁️ oversees| SoCM
-  CoOS ---|🤝 collaborates with| LeCo
-  CoOS ---|🗣️ informs| DaEn
-  SpDo ---|🔄 shares with| CoOS
-'''
-# --------------------------
-# Streamlit App Layout
-# --------------------------
-def main():
-    st.set_page_config(page_title="Densified Skill Tree", layout="wide")
-    # Optionally render combined outlines and submodels if desired:
-    st.markdown(md_combined_outline, unsafe_allow_html=True)
-    #st.markdown(md_submodels_outline, unsafe_allow_html=True)
-    # For each numbered area, display its markdown outline first, then its mermaid diagram.
-    for key in sorted(markdown_areas.keys(), key=lambda k: int(k.split('.')[0])):
-        st.markdown(markdown_areas[key], unsafe_allow_html=True)
-        if key in mermaid_areas:
-            render_mermaid(mermaid_areas[key], height=350)
-    # Render the combined mermaid diagram for an overview
-    render_mermaid(combined_mermaid, height=850)
-    # Display additional markdown sections
-    st.markdown(md_glossary, unsafe_allow_html=True)
-    st.markdown(md_python_libraries, unsafe_allow_html=True)
-    st.markdown(md_js_libraries, unsafe_allow_html=True)
-    st.markdown(md_picture_mnemonic, unsafe_allow_html=True)
-    st.markdown(md_tweet, unsafe_allow_html=True)
-if __name__ == "__main__":
-    main()

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Three.js Infinite World</title>
+    <style>
+        body { margin: 0; overflow: hidden; }
+        canvas { display: block; }
+    </style>
+    <!-- New: Polling function for game state -->
+    <script>
+        // Poll the shared game state every 5 seconds (for demonstration)
+        function pollGameState() {
+            console.log("Polling updated game state:", window.GAME_STATE);
+            // Here you could update the scene based on the new state.
+        }
+        setInterval(pollGameState, 5000);
+    </script>
+</head>
+<body>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+            }
+        }
+    </script>
+    <script type="module">
+        import * as THREE from 'three';
+        let scene, camera, renderer, playerMesh;
+        let raycaster, mouse;
+        const keysPressed = {};
+        const playerSpeed = 0.15;
+        let newlyPlacedObjects = []; // Track objects added THIS session for saving
+        const placeholderPlots = new Set();
+        const groundMeshes = {}; // Store ground mesh references
+        // --- Session Storage Key ---
+        const SESSION_STORAGE_KEY = 'unsavedInfiniteWorldState';
+        // --- Injected State from Streamlit ---
+        const allInitialObjects = window.ALL_INITIAL_OBJECTS || [];
+        const plotsMetadata = window.PLOTS_METADATA || [];
+        const selectedObjectType = window.SELECTED_OBJECT_TYPE || "None";
+        const plotWidth = window.PLOT_WIDTH || 50.0;
+        const plotDepth = window.PLOT_DEPTH || 50.0;
+        const groundMaterial = new THREE.MeshStandardMaterial({
+            color: 0x55aa55, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide
+        });
+        const placeholderGroundMaterial = new THREE.MeshStandardMaterial({
+            color: 0x448844, roughness: 0.95, metalness: 0.1, side: THREE.DoubleSide
+        });
+        function init() {
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0xabcdef);
+            const aspect = window.innerWidth / window.innerHeight;
+            camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 4000);
+            camera.position.set(0, 15, 20);
+            camera.lookAt(0, 0, 0);
+            scene.add(camera);
+            setupLighting();
+            setupInitialGround();
+            setupPlayer();
+            raycaster = new THREE.Raycaster();
+            mouse = new THREE.Vector2();
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            document.body.appendChild(renderer.domElement);
+            loadInitialObjects();
+            restoreUnsavedState();
+            // Event Listeners
+            document.addEventListener('mousemove', onMouseMove, false);
+            document.addEventListener('click', onDocumentClick, false);
+            window.addEventListener('resize', onWindowResize, false);
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('keyup', onKeyUp);
+            // Define functions callable by Streamlit
+            window.teleportPlayer = teleportPlayer;
+            window.getSaveDataAndPosition = getSaveDataAndPosition;
+            window.resetNewlyPlacedObjects = resetNewlyPlacedObjects;
+            console.log("Three.js Initialized. World ready.");
+            animate();
+        }
+        function setupLighting() {
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+            directionalLight.position.set(50, 150, 100);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 4096;
+            directionalLight.shadow.mapSize.height = 4096;
+            directionalLight.shadow.camera.near = 0.5;
+            directionalLight.shadow.camera.far = 500;
+            directionalLight.shadow.camera.left = -150;
+            directionalLight.shadow.camera.right = 150;
+            directionalLight.shadow.camera.top = 150;
+            directionalLight.shadow.camera.bottom = -150;
+            directionalLight.shadow.bias = -0.001;
+            scene.add(directionalLight);
+        }
+        function setupInitialGround() {
+            console.log(`Setting up initial ground for ${plotsMetadata.length} plots.`);
+            plotsMetadata.forEach(plot => {
+                createGroundPlane(plot.grid_x, plot.grid_z, false);
+            });
+            if (plotsMetadata.length === 0) {
+                createGroundPlane(0, 0, false);
+            }
+        }
+        function createGroundPlane(gridX, gridZ, isPlaceholder) {
+            const gridKey = `${gridX}_${gridZ}`;
+            if (groundMeshes[gridKey]) return;
+            console.log(`Creating ${isPlaceholder ? 'placeholder' : 'initial'} ground at ${gridX}, ${gridZ}`);
+            const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth);
+            const material = isPlaceholder ? placeholderGroundMaterial : groundMaterial;
+            const groundMesh = new THREE.Mesh(groundGeometry, material);
+            groundMesh.rotation.x = -Math.PI / 2;
+            groundMesh.position.y = -0.05;
+            groundMesh.position.x = gridX * plotWidth + plotWidth / 2.0;
+            groundMesh.position.z = gridZ * plotDepth + plotDepth / 2.0;
+            groundMesh.receiveShadow = true;
+            groundMesh.userData.gridKey = gridKey;
+            scene.add(groundMesh);
+            groundMeshes[gridKey] = groundMesh;
+            if (isPlaceholder) placeholderPlots.add(gridKey);
+        }
+        function setupPlayer() {
+            const playerGeo = new THREE.CapsuleGeometry(0.4, 0.8, 4, 8);
+            const playerMat = new THREE.MeshStandardMaterial({ color: 0x0000ff, roughness: 0.6 });
+            playerMesh = new THREE.Mesh(playerGeo, playerMat);
+            playerMesh.position.set(plotWidth / 2, 0.4 + 0.8/2, plotDepth/2);
+            playerMesh.castShadow = true;
+            playerMesh.receiveShadow = true;
+            scene.add(playerMesh);
+        }
+        function loadInitialObjects() {
+            console.log(`Loading ${allInitialObjects.length} initial objects from Python.`);
+            allInitialObjects.forEach(objData => { createAndPlaceObject(objData, false); });
+            console.log("Finished loading initial objects.");
+        }
+        function createAndPlaceObject(objData, isNewObject) {
+            let loadedObject = null;
+            switch (objData.type) {
+                case "Simple House": loadedObject = createSimpleHouse(); break;
+                case "Tree": loadedObject = createTree(); break;
+                case "Rock": loadedObject = createRock(); break;
+                case "Fence Post": loadedObject = createFencePost(); break;
+                default: console.warn("Unknown object type in data:", objData.type); break;
+            }
+            if (loadedObject) {
+                if (objData.position && objData.position.x !== undefined) {
+                    loadedObject.position.set(objData.position.x, objData.position.y, objData.position.z);
+                } else if (objData.pos_x !== undefined) {
+                    loadedObject.position.set(objData.pos_x, objData.pos_y, objData.pos_z);
+                }
+                if (objData.rotation) {
+                    loadedObject.rotation.set(objData.rotation._x, objData.rotation._y, objData.rotation._z, objData.rotation._order || 'XYZ');
+                } else if (objData.rot_x !== undefined) {
+                    loadedObject.rotation.set(objData.rot_x, objData.rot_y, objData.rot_z, objData.rot_order || 'XYZ');
+                }
+                loadedObject.userData.obj_id = objData.obj_id || loadedObject.userData.obj_id;
+                scene.add(loadedObject);
+                if (isNewObject) newlyPlacedObjects.push(loadedObject);
+                return loadedObject;
+            }
+            return null;
+        }
+        function saveUnsavedState() {
+            try {
+                const stateToSave = newlyPlacedObjects.map(obj => ({
+                    obj_id: obj.userData.obj_id,
+                    type: obj.userData.type,
+                    position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
+                    rotation: { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order }
+                }));
+                sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
+                console.log(`Saved ${stateToSave.length} unsaved objects to sessionStorage.`);
+            } catch (e) {
+                console.error("Error saving state to sessionStorage:", e);
+            }
+        }
+        function restoreUnsavedState() {
+            try {
+                const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
+                if (savedState) {
+                    console.log("Found unsaved state in sessionStorage. Restoring...");
+                    const objectsToRestore = JSON.parse(savedState);
+                    if (Array.isArray(objectsToRestore)) {
+                        newlyPlacedObjects = [];
+                        let count = 0;
+                        objectsToRestore.forEach(objData => {
+                            if(createAndPlaceObject(objData, true)) { count++; }
+                        });
+                        console.log(`Restored ${count} objects.`);
+                    }
+                } else {
+                    console.log("No unsaved state found in sessionStorage.");
+                }
+            } catch (e) {
+                console.error("Error restoring state from sessionStorage:", e);
+                sessionStorage.removeItem(SESSION_STORAGE_KEY);
+            }
+        }
+        function clearUnsavedState() {
+            sessionStorage.removeItem(SESSION_STORAGE_KEY);
+            newlyPlacedObjects = [];
+            console.log("Cleared unsaved state from memory and sessionStorage.");
+        }
+        function createObjectBase(type) {
+            return { userData: { type: type, obj_id: THREE.MathUtils.generateUUID() } };
+        }
+        function createSimpleHouse() {
+            const base = createObjectBase("Simple House");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            const mat1 = new THREE.MeshStandardMaterial({color:0xffccaa, roughness:0.8});
+            const mat2 = new THREE.MeshStandardMaterial({color:0xaa5533, roughness:0.7});
+            const m1 = new THREE.Mesh(new THREE.BoxGeometry(2,1.5,2.5), mat1);
+            m1.position.y = 1.5/2;
+            m1.castShadow = true;
+            m1.receiveShadow = true;
+            group.add(m1);
+            const m2 = new THREE.Mesh(new THREE.ConeGeometry(1.8,1,4), mat2);
+            m2.position.y = 1.5+1/2;
+            m2.rotation.y = Math.PI/4;
+            m2.castShadow = true;
+            m2.receiveShadow = true;
+            group.add(m2);
+            return group;
+        }
+        function createTree() {
+            const base = createObjectBase("Tree");
+            const group = new THREE.Group();
+            Object.assign(group, base);
+            const mat1 = new THREE.MeshStandardMaterial({color:0x8B4513, roughness:0.9});
+            const mat2 = new THREE.MeshStandardMaterial({color:0x228B22, roughness:0.8});
+            const m1 = new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.4,2,8), mat1);
+            m1.position.y = 1;
+            m1.castShadow = true;
+            m1.receiveShadow = true;
+            group.add(m1);
+            const m2 = new THREE.Mesh(new THREE.IcosahedronGeometry(1.2,0), mat2);
+            m2.position.y = 2.8;
+            m2.castShadow = true;
+            m2.receiveShadow = true;
+            group.add(m2);
+            return group;
+        }
+        function createRock() {
+            const base = createObjectBase("Rock");
+            const mat = new THREE.MeshStandardMaterial({color:0xaaaaaa, roughness:0.8, metalness:0.1});
+            const rock = new THREE.Mesh(new THREE.IcosahedronGeometry(0.7,0), mat);
+            Object.assign(rock, base);
+            rock.position.y = 0.35;
+            rock.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0);
+            rock.castShadow = true;
+            rock.receiveShadow = true;
+            return rock;
+        }
+        function createFencePost() {
+            const base = createObjectBase("Fence Post");
+            const mat = new THREE.MeshStandardMaterial({color:0xdeb887, roughness:0.9});
+            const post = new THREE.Mesh(new THREE.BoxGeometry(0.2,1.5,0.2), mat);
+            Object.assign(post, base);
+            post.position.y = 0.75;
+            post.castShadow = true;
+            post.receiveShadow = true;
+            return post;
+        }
+        function onMouseMove(event) {
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+        }
+        function onDocumentClick(event) {
+            if (selectedObjectType === "None") return;
+            const groundCandidates = Object.values(groundMeshes);
+            if (groundCandidates.length === 0) return;
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(groundCandidates);
+            if (intersects.length > 0) {
+                const intersectPoint = intersects[0].point;
+                let newObjectToPlace = null;
+                switch (selectedObjectType) {
+                    case "Simple House": newObjectToPlace = createSimpleHouse(); break;
+                    case "Tree": newObjectToPlace = createTree(); break;
+                    case "Rock": newObjectToPlace = createRock(); break;
+                    case "Fence Post": newObjectToPlace = createFencePost(); break;
+                    default: return;
+                }
+                if (newObjectToPlace) {
+                    newObjectToPlace.position.copy(intersectPoint);
+                    newObjectToPlace.position.y += 0.01;
+                    scene.add(newObjectToPlace);
+                    newlyPlacedObjects.push(newObjectToPlace);
+                    saveUnsavedState();
+                    console.log(`Placed new ${selectedObjectType}. Total unsaved: ${newlyPlacedObjects.length}`);
+                }
+            }
+        }
+        function onKeyDown(event) { keysPressed[event.code] = true; }
+        function onKeyUp(event) { keysPressed[event.code] = false; }
+        function teleportPlayer(targetX, targetZ) {
+            console.log(`JS teleportPlayer called with targetX: ${targetX}, targetZ: ${targetZ}`);
+            if (playerMesh) {
+                playerMesh.position.x = targetX;
+                playerMesh.position.z = targetZ;
+                const offset = new THREE.Vector3(0, 15, 20);
+                const targetPosition = playerMesh.position.clone().add(offset);
+                camera.position.copy(targetPosition);
+                camera.lookAt(playerMesh.position);
+                console.log("Player teleported to:", playerMesh.position);
+            } else {
+                console.error("Player mesh not found for teleport.");
+            }
+        }
+        function getSaveDataAndPosition() {
+            console.log(`JS getSaveDataAndPosition called. Found ${newlyPlacedObjects.length} new objects.`);
+            const objectsToSave = newlyPlacedObjects.map(obj => {
+                if (!obj.userData || !obj.userData.type) { return null; }
+                const rotation = { _x: obj.rotation.x, _y: obj.rotation.y, _z: obj.rotation.z, _order: obj.rotation.order };
+                return {
+                    obj_id: obj.userData.obj_id, type: obj.userData.type,
+                    position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
+                    rotation: rotation
+                };
+            }).filter(obj => obj !== null);
+            const playerPos = playerMesh ? { x: playerMesh.position.x, y: playerMesh.position.y, z: playerMesh.position.z } : {x:0, y:0, z:0};
+            const payload = {
+                playerPosition: playerPos,
+                objectsToSave: objectsToSave
+            };
+            console.log("Prepared payload for saving:", payload);
+            return JSON.stringify(payload);
+        }
+        function resetNewlyPlacedObjects() {
+            console.log(`JS resetNewlyPlacedObjects called.`);
+            clearUnsavedState();
+        }
+        function updatePlayerMovement() {
+            if (!playerMesh) return;
+            const moveDirection = new THREE.Vector3(0, 0, 0);
+            if (keysPressed['KeyW'] || keysPressed['ArrowUp']) moveDirection.z -= 1;
+            if (keysPressed['KeyS'] || keysPressed['ArrowDown']) moveDirection.z += 1;
+            if (keysPressed['KeyA'] || keysPressed['ArrowLeft']) moveDirection.x -= 1;
+            if (keysPressed['KeyD'] || keysPressed['ArrowRight']) moveDirection.x += 1;
+            if (moveDirection.lengthSq() > 0) {
+                moveDirection.normalize().multiplyScalar(playerSpeed);
+                const forward = new THREE.Vector3();
+                camera.getWorldDirection(forward);
+                forward.y = 0;
+                forward.normalize();
+                const right = new THREE.Vector3().crossVectors(camera.up, forward).normalize();
+                const worldMove = new THREE.Vector3();
+                worldMove.add(forward.multiplyScalar(-moveDirection.z));
+                worldMove.add(right.multiplyScalar(-moveDirection.x));
+                worldMove.normalize().multiplyScalar(playerSpeed);
+                playerMesh.position.add(worldMove);
+                playerMesh.position.y = Math.max(playerMesh.position.y, 0.4 + 0.8/2);
+                checkAndExpandGround();
+            }
+        }
+        function checkAndExpandGround() {
+            if (!playerMesh) return;
+            const currentGridX = Math.floor(playerMesh.position.x / plotWidth);
+            const currentGridZ = Math.floor(playerMesh.position.z / plotDepth);
+            for (let dx = -1; dx <= 1; dx++) {
+                for (let dz = -1; dz <= 1; dz++) {
+                    if (dx === 0 && dz === 0) continue;
+                    const checkX = currentGridX + dx;
+                    const checkZ = currentGridZ + dz;
+                    const gridKey = `${checkX}_${checkZ}`;
+                    if (!groundMeshes[gridKey]) {
+                        const isSavedPlot = plotsMetadata.some(plot => plot.grid_x === checkX && plot.grid_z === checkZ);
+                        if (!isSavedPlot) {
+                            createGroundPlane(checkX, checkZ, true);
+                        }
+                    }
+                }
+            }
+        }
+        function updateCamera() {
+            if (!playerMesh) return;
+            const offset = new THREE.Vector3(0, 15, 20);
+            const targetPosition = playerMesh.position.clone().add(offset);
+            camera.position.lerp(targetPosition, 0.08);
+            camera.lookAt(playerMesh.position);
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            updatePlayerMovement();
+            updateCamera();
+            renderer.render(scene, camera);
+        }
+        init();
+    </script>
+</body>
+</html>