Spaces:
Running
Running
| import streamlit as st | |
| from streamlit.components.v1 import html | |
| import streamlit as st | |
| # Embed custom HTML and JS for 3D rendering (Three.js example) | |
| html_code = """ | |
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="threejs-container" style="width: 100%; height: 500px;"></div> | |
| <script> | |
| // Three.js rendering code here | |
| var scene = new THREE.Scene(); | |
| var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| var renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('threejs-container').appendChild(renderer.domElement); | |
| // Your 3D model or scene setup goes here | |
| var geometry = new THREE.BoxGeometry(); | |
| var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); | |
| var cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube); | |
| camera.position.z = 5; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| cube.rotation.x += 0.01; | |
| cube.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # Display the HTML/JS in the Streamlit app | |
| html(html_code) | |
| # User Inputs | |
| wall_height = st.slider("Wall Height (meters)", min_value=2, max_value=5, value=3) | |
| room_length = st.number_input("Room Length (meters)", value=5) | |
| room_width = st.number_input("Room Width (meters)", value=4) | |
| # Action Button for Floor Plan Update | |
| if st.button("Generate Floor Plan"): | |
| st.write(f"Generating floor plan for {room_length}m x {room_width}m with walls {wall_height}m high") | |
| # Call a function here that updates the floor plan based on user input | |
| update_floor_plan(room_length, room_width, wall_height) | |