Spaces:
Runtime error
Rev2
Ok with this new version it works but as you click add player etc its not automatically refreshing the scene for everyone. Make some changes to track additions in session state and refactor it so as users add objjects they stay persistent in the html which is reloaded every time. Add markers in comments inside the scene on where to add objects and create a set of emoji labeled buttons that can add different shapes annotated by text input you can also submit from streamlit app to contribute to shared active aframe scene.
import streamlit as st
import streamlit.components.v1 as components
import random
import json
import os
Initialize session state
if "entities" not in st.session_state:
st.session_state.entities = []
Load the initial HTML5 app
if not os.path.exists("chofko_ecosystem.html"):
with open("chofko_ecosystem.html", "w") as f:
f.write('''
<a-sky src="#sky"></a-sky>
<a-plane position="0 0 -4" rotation="-90 0 0" width="100" height="100" color="#7BC8A4"></a-plane>
<a-entity id="entities">
<!-- ENTITY_PLACEHOLDER -->
</a-entity>
<a-entity id="camera" camera look-controls position="0 40 0" rotation="-90 0 0"></a-entity>
</a-scene>
<div id="score">Score: 0</div>
<div class="controls">
<button onmousedown="startMove('left')" onmouseup="stopMove('left')" ontouchstart="startMove('left')" ontouchend="stopMove('left')">Left</button>
<button onmousedown="startMove('right')" onmouseup="stopMove('right')" ontouchstart="startMove('right')" ontouchend="stopMove('right')">Right</button>
<button onmousedown="startMove('up')" onmouseup="stopMove('up')" ontouchstart="startMove('up')" ontouchend="stopMove('up')">Up</button>
<button onmousedown="startMove('down')" onmouseup="stopMove('down')" ontouchstart="startMove('down')" ontouchend="stopMove('down')">Down</button>
<button onclick="toggleSpeed()">Toggle Speed</button>
</div>
<script>
// ... (Include the entire JavaScript code from the original HTML file here)
// Modify the createEntities function to accept new entities
function createEntities(newEntities) {
for (let entity of newEntities) {
new Entity(
entity.x,
entity.z,
false,
entity.type,
entity.gender,
entity.radius,
entity.text
);
}
}
// Call createEntities with the initial entities
createEntities(JSON.parse(document.getElementById('entities').getAttribute('data-entities')));
</script>
''')
with open("chofko_ecosystem.html", "r") as f:
initial_html = f.read()
Function to add a new entity to the scene
def add_entity(entity_type, text):
new_entity = {
'x': random.uniform(-50, 50),
'z': random.uniform(-50, 50),
'type': entity_type,
'gender': random.choice(['male', 'female']),
'radius': 1,
'text': text
}
st.session_state.entities.append(new_entity)
Function to generate HTML for entities
def generate_entities_html():
entities_json = json.dumps(st.session_state.entities)
return f'<a-entity id="entities" data-entities='{entities_json}'>\n'
Streamlit app
def main():
st.set_page_config(page_title="Chofko's Diverse Ecosystem Simulator", layout="wide")
st.title("Chofko's Diverse Ecosystem Simulator")
# Add entity buttons with emojis
col1, col2, col3, col4 = st.columns(4)
with col1:
if st.button("๐ข Add Sphere"):
add_entity('a-sphere', "Sphere")
with col2:
if st.button("๐ฅ Add Box"):
add_entity('a-box', "Box")
with col3:
if st.button("๐บ Add Cone"):
add_entity('a-cone', "Cone")
with col4:
if st.button("๐ข๏ธ Add Cylinder"):
add_entity('a-cylinder', "Cylinder")
# Text input for custom annotation
custom_text = st.text_input("Enter custom text for the next entity:")
if st.button("โ Add Custom Entity"):
entity_type = random.choice(['a-sphere', 'a-box', 'a-cone', 'a-cylinder'])
add_entity(entity_type, custom_text)
# Generate updated HTML content
updated_html = initial_html.replace("<!-- ENTITY_PLACEHOLDER -->", generate_entities_html())
# Display the HTML5 app
components.html(updated_html, height=800)
# Display current entities
st.subheader("Current Entities")
st.json(st.session_state.entities)
# Clear all entities button
if st.button("๐๏ธ Clear All Entities"):
st.session_state.entities = []
st.experimental_rerun()
if name == "main":
main()