Spaces:
Running
Running
Delete backup.pm.0626-lookgd.app.py
Browse files- backup.pm.0626-lookgd.app.py +0 -312
backup.pm.0626-lookgd.app.py
DELETED
@@ -1,312 +0,0 @@
|
|
1 |
-
import streamlit as st
|
2 |
-
import os
|
3 |
-
import base64
|
4 |
-
from pathlib import Path
|
5 |
-
import shutil
|
6 |
-
import random
|
7 |
-
|
8 |
-
# 🌈 Load A-Frame and custom components
|
9 |
-
@st.cache_data
|
10 |
-
def load_aframe_and_extras():
|
11 |
-
return """
|
12 |
-
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
|
13 |
-
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
|
14 |
-
<script>
|
15 |
-
// 🕹️ Make objects draggable
|
16 |
-
AFRAME.registerComponent('draggable', {
|
17 |
-
init: function () {
|
18 |
-
this.el.setAttribute('class', 'raycastable');
|
19 |
-
this.el.setAttribute('cursor-listener', '');
|
20 |
-
this.dragHandler = this.dragMove.bind(this);
|
21 |
-
this.el.sceneEl.addEventListener('mousemove', this.dragHandler);
|
22 |
-
this.el.addEventListener('mousedown', this.onDragStart.bind(this));
|
23 |
-
this.el.addEventListener('mouseup', this.onDragEnd.bind(this));
|
24 |
-
this.camera = document.querySelector('[camera]');
|
25 |
-
},
|
26 |
-
remove: function () {
|
27 |
-
this.el.removeAttribute('cursor-listener');
|
28 |
-
this.el.sceneEl.removeEventListener('mousemove', this.dragHandler);
|
29 |
-
},
|
30 |
-
onDragStart: function (evt) {
|
31 |
-
this.isDragging = true;
|
32 |
-
this.el.emit('dragstart');
|
33 |
-
},
|
34 |
-
onDragEnd: function (evt) {
|
35 |
-
this.isDragging = false;
|
36 |
-
this.el.emit('dragend');
|
37 |
-
},
|
38 |
-
dragMove: function (evt) {
|
39 |
-
if (!this.isDragging) return;
|
40 |
-
var camera = this.camera;
|
41 |
-
var vector = new THREE.Vector3(evt.clientX / window.innerWidth * 2 - 1, -(evt.clientY / window.innerHeight) * 2 + 1, 0.5);
|
42 |
-
vector.unproject(camera);
|
43 |
-
var dir = vector.sub(camera.position).normalize();
|
44 |
-
var distance = -camera.position.y / dir.y;
|
45 |
-
var pos = camera.position.clone().add(dir.multiplyScalar(distance));
|
46 |
-
this.el.setAttribute('position', pos);
|
47 |
-
}
|
48 |
-
});
|
49 |
-
|
50 |
-
// 🦘 Make objects bounce
|
51 |
-
AFRAME.registerComponent('bouncing', {
|
52 |
-
schema: {
|
53 |
-
speed: {type: 'vec3', default: {x: 0.1, y: 0.1, z: 0.1}},
|
54 |
-
dist: {type: 'vec3', default: {x: 0.5, y: 0.5, z: 0.5}}
|
55 |
-
},
|
56 |
-
init: function () {
|
57 |
-
this.originalPos = this.el.getAttribute('position');
|
58 |
-
this.dir = {x: 1, y: 1, z: 1};
|
59 |
-
},
|
60 |
-
tick: function (time, timeDelta) {
|
61 |
-
var currentPos = this.el.getAttribute('position');
|
62 |
-
var speed = this.data.speed;
|
63 |
-
var dist = this.data.dist;
|
64 |
-
|
65 |
-
['x', 'y', 'z'].forEach(axis => {
|
66 |
-
currentPos[axis] += speed[axis] * this.dir[axis] * (timeDelta / 1000);
|
67 |
-
if (Math.abs(currentPos[axis] - this.originalPos[axis]) > dist[axis]) {
|
68 |
-
this.dir[axis] *= -1;
|
69 |
-
}
|
70 |
-
});
|
71 |
-
|
72 |
-
this.el.setAttribute('position', currentPos);
|
73 |
-
}
|
74 |
-
});
|
75 |
-
|
76 |
-
// 💡 Create moving light sources
|
77 |
-
AFRAME.registerComponent('moving-light', {
|
78 |
-
schema: {
|
79 |
-
color: {type: 'color', default: '#FFF'},
|
80 |
-
speed: {type: 'vec3', default: {x: 0.1, y: 0.1, z: 0.1}},
|
81 |
-
bounds: {type: 'vec3', default: {x: 5, y: 5, z: 5}}
|
82 |
-
},
|
83 |
-
init: function () {
|
84 |
-
this.dir = {x: 1, y: 1, z: 1};
|
85 |
-
this.light = document.createElement('a-light');
|
86 |
-
this.light.setAttribute('type', 'point');
|
87 |
-
this.light.setAttribute('color', this.data.color);
|
88 |
-
this.light.setAttribute('intensity', '0.75');
|
89 |
-
this.el.appendChild(this.light);
|
90 |
-
},
|
91 |
-
tick: function (time, timeDelta) {
|
92 |
-
var currentPos = this.el.getAttribute('position');
|
93 |
-
var speed = this.data.speed;
|
94 |
-
var bounds = this.data.bounds;
|
95 |
-
|
96 |
-
['x', 'y', 'z'].forEach(axis => {
|
97 |
-
currentPos[axis] += speed[axis] * this.dir[axis] * (timeDelta / 1000);
|
98 |
-
if (Math.abs(currentPos[axis]) > bounds[axis]) {
|
99 |
-
this.dir[axis] *= -1;
|
100 |
-
}
|
101 |
-
});
|
102 |
-
|
103 |
-
this.el.setAttribute('position', currentPos);
|
104 |
-
}
|
105 |
-
});
|
106 |
-
|
107 |
-
// 📷 Camera controls
|
108 |
-
function moveCamera(direction) {
|
109 |
-
var camera = document.querySelector('[camera]');
|
110 |
-
var rig = document.querySelector('#rig');
|
111 |
-
var pos = rig.getAttribute('position');
|
112 |
-
var rot = rig.getAttribute('rotation');
|
113 |
-
var speed = 0.5;
|
114 |
-
var rotationSpeed = 5;
|
115 |
-
|
116 |
-
switch(direction) {
|
117 |
-
case 'up':
|
118 |
-
pos.z -= speed;
|
119 |
-
break;
|
120 |
-
case 'down':
|
121 |
-
pos.z += speed;
|
122 |
-
break;
|
123 |
-
case 'left':
|
124 |
-
pos.x -= speed;
|
125 |
-
break;
|
126 |
-
case 'right':
|
127 |
-
pos.x += speed;
|
128 |
-
break;
|
129 |
-
case 'rotateLeft':
|
130 |
-
rot.y += rotationSpeed;
|
131 |
-
break;
|
132 |
-
case 'rotateRight':
|
133 |
-
rot.y -= rotationSpeed;
|
134 |
-
break;
|
135 |
-
case 'reset':
|
136 |
-
pos = {x: 0, y: 10, z: 0};
|
137 |
-
rot = {x: -90, y: 0, z: 0};
|
138 |
-
break;
|
139 |
-
case 'ground':
|
140 |
-
pos = {x: 0, y: 1.6, z: 0};
|
141 |
-
rot = {x: 0, y: 0, z: 0};
|
142 |
-
break;
|
143 |
-
}
|
144 |
-
|
145 |
-
rig.setAttribute('position', pos);
|
146 |
-
rig.setAttribute('rotation', rot);
|
147 |
-
}
|
148 |
-
|
149 |
-
// ⌨️ Keyboard controls
|
150 |
-
document.addEventListener('keydown', function(event) {
|
151 |
-
switch(event.key.toLowerCase()) {
|
152 |
-
case 'q':
|
153 |
-
moveCamera('rotateLeft');
|
154 |
-
break;
|
155 |
-
case 'e':
|
156 |
-
moveCamera('rotateRight');
|
157 |
-
break;
|
158 |
-
case 'z':
|
159 |
-
moveCamera('reset');
|
160 |
-
break;
|
161 |
-
case 'c':
|
162 |
-
moveCamera('ground');
|
163 |
-
break;
|
164 |
-
}
|
165 |
-
});
|
166 |
-
</script>
|
167 |
-
"""
|
168 |
-
|
169 |
-
# 🏗️ Create A-Frame entities for each file type
|
170 |
-
def create_aframe_entity(file_stem, file_type, position):
|
171 |
-
rotation = f"0 {random.uniform(0, 360)} 0"
|
172 |
-
bounce_speed = f"{random.uniform(0.05, 0.1)} {random.uniform(0.05, 0.1)} {random.uniform(0.05, 0.1)}"
|
173 |
-
bounce_dist = f"0.1 0.1 0.1"
|
174 |
-
|
175 |
-
if file_type == 'obj':
|
176 |
-
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>'
|
177 |
-
elif file_type == 'glb':
|
178 |
-
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>'
|
179 |
-
elif file_type in ['webp', 'png']:
|
180 |
-
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>'
|
181 |
-
elif file_type == 'mp4':
|
182 |
-
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>'
|
183 |
-
return ''
|
184 |
-
|
185 |
-
# 🔐 Encode file contents to base64
|
186 |
-
@st.cache_data
|
187 |
-
def encode_file(file_path):
|
188 |
-
with open(file_path, "rb") as file:
|
189 |
-
return base64.b64encode(file.read()).decode()
|
190 |
-
|
191 |
-
# 🗺️ Generate tilemap grid
|
192 |
-
@st.cache_data
|
193 |
-
def generate_tilemap(files, directory, grid_width, grid_height, max_unique_models=5):
|
194 |
-
assets = "<a-assets>"
|
195 |
-
entities = ""
|
196 |
-
tile_size = 1
|
197 |
-
start_x = -(grid_width * tile_size) / 2
|
198 |
-
start_z = -(grid_height * tile_size) / 2
|
199 |
-
|
200 |
-
# Limit the number of unique models
|
201 |
-
unique_files = random.sample(files, min(len(files), max_unique_models))
|
202 |
-
encoded_files = {}
|
203 |
-
|
204 |
-
for file in unique_files:
|
205 |
-
file_path = os.path.join(directory, file)
|
206 |
-
file_type = file.split('.')[-1]
|
207 |
-
encoded_file = encode_file(file_path)
|
208 |
-
encoded_files[file] = encoded_file
|
209 |
-
|
210 |
-
if file_type in ['obj', 'glb']:
|
211 |
-
assets += f'<a-asset-item id="{Path(file).stem}" src="data:application/octet-stream;base64,{encoded_file}"></a-asset-item>'
|
212 |
-
elif file_type in ['webp', 'png', 'mp4']:
|
213 |
-
mime_type = f"image/{file_type}" if file_type in ['webp', 'png'] else "video/mp4"
|
214 |
-
assets += f'<{file_type} id="{Path(file).stem}" src="data:{mime_type};base64,{encoded_file}"></{file_type}>'
|
215 |
-
|
216 |
-
for i in range(grid_width):
|
217 |
-
for j in range(grid_height):
|
218 |
-
x = start_x + (i * tile_size)
|
219 |
-
z = start_z + (j * tile_size)
|
220 |
-
position = f"{x} 0 {z}"
|
221 |
-
|
222 |
-
if unique_files:
|
223 |
-
file = random.choice(unique_files)
|
224 |
-
file_type = file.split('.')[-1]
|
225 |
-
entities += create_aframe_entity(Path(file).stem, file_type, position)
|
226 |
-
|
227 |
-
assets += "</a-assets>"
|
228 |
-
return assets, entities
|
229 |
-
|
230 |
-
# 🎭 Main function to run the Streamlit app
|
231 |
-
def main():
|
232 |
-
st.set_page_config(layout="wide")
|
233 |
-
|
234 |
-
with st.sidebar:
|
235 |
-
st.markdown("### 🤖 3D AI Using Claude 3.5 Sonnet for AI Pair Programming")
|
236 |
-
|
237 |
-
st.markdown("[Open 3D Animation Toolkit](https://huggingface.co/spaces/awacke1/3d_animation_toolkit)", unsafe_allow_html=True)
|
238 |
-
|
239 |
-
st.markdown("### ⬆️ Upload")
|
240 |
-
uploaded_files = st.file_uploader("Add files:", accept_multiple_files=True, key="file_uploader")
|
241 |
-
|
242 |
-
st.markdown("### 🎮 Camera Controls")
|
243 |
-
col1, col2, col3 = st.columns(3)
|
244 |
-
with col1:
|
245 |
-
st.button("⬅️", on_click=lambda: st.session_state.update({'camera_move': 'left'}))
|
246 |
-
st.button("🔄↺", on_click=lambda: st.session_state.update({'camera_move': 'rotateLeft'}))
|
247 |
-
st.button("🔝", on_click=lambda: st.session_state.update({'camera_move': 'reset'}))
|
248 |
-
with col2:
|
249 |
-
st.button("⬆️", on_click=lambda: st.session_state.update({'camera_move': 'up'}))
|
250 |
-
st.button("🔄↻", on_click=lambda: st.session_state.update({'camera_move': 'rotateRight'}))
|
251 |
-
st.button("👀", on_click=lambda: st.session_state.update({'camera_move': 'ground'}))
|
252 |
-
with col3:
|
253 |
-
st.button("➡️", on_click=lambda: st.session_state.update({'camera_move': 'right'}))
|
254 |
-
st.button("⬇️", on_click=lambda: st.session_state.update({'camera_move': 'down'}))
|
255 |
-
|
256 |
-
st.markdown("### 🗺️ Grid Size")
|
257 |
-
grid_width = st.slider("Grid Width", 1, 8, 8)
|
258 |
-
grid_height = st.slider("Grid Height", 1, 5, 5)
|
259 |
-
|
260 |
-
st.markdown("### ℹ️ Instructions")
|
261 |
-
st.write("- WASD: Move camera")
|
262 |
-
st.write("- Q/E: Rotate camera left/right")
|
263 |
-
st.write("- Z: Reset camera to top view")
|
264 |
-
st.write("- C: Move camera to ground level")
|
265 |
-
st.write("- Click and drag to move objects")
|
266 |
-
st.write("- Mouse wheel to zoom")
|
267 |
-
st.write("- Right-click and drag to rotate view")
|
268 |
-
|
269 |
-
st.markdown("### 📁 Directory")
|
270 |
-
directory = st.text_input("Enter path:", ".", key="directory_input")
|
271 |
-
|
272 |
-
if not os.path.isdir(directory):
|
273 |
-
st.sidebar.error("Invalid directory path")
|
274 |
-
return
|
275 |
-
|
276 |
-
file_types = ['obj', 'glb', 'webp', 'png', 'mp4']
|
277 |
-
|
278 |
-
if uploaded_files:
|
279 |
-
for uploaded_file in uploaded_files:
|
280 |
-
file_extension = Path(uploaded_file.name).suffix.lower()[1:]
|
281 |
-
if file_extension in file_types:
|
282 |
-
with open(os.path.join(directory, uploaded_file.name), "wb") as f:
|
283 |
-
shutil.copyfileobj(uploaded_file, f)
|
284 |
-
st.sidebar.success(f"Uploaded: {uploaded_file.name}")
|
285 |
-
else:
|
286 |
-
st.sidebar.warning(f"Skipped unsupported file: {uploaded_file.name}")
|
287 |
-
|
288 |
-
files = [f for f in os.listdir(directory) if f.split('.')[-1] in file_types]
|
289 |
-
|
290 |
-
aframe_scene = f"""
|
291 |
-
<a-scene embedded style="height: 600px; width: 100%;">
|
292 |
-
<a-entity id="rig" position="0 {max(grid_width, grid_height)} 0" rotation="-90 0 0">
|
293 |
-
<a-camera fov="60" look-controls wasd-controls cursor="rayOrigin: mouse" raycaster="objects: .raycastable"></a-camera>
|
294 |
-
</a-entity>
|
295 |
-
<a-sky color="#87CEEB"></a-sky>
|
296 |
-
<a-entity moving-light="color: #FFD700; speed: 0.07 0.05 0.06; bounds: 4 3 4" position="2 2 -2"></a-entity>
|
297 |
-
<a-entity moving-light="color: #FF6347; speed: 0.06 0.08 0.05; bounds: 4 3 4" position="-2 1 2"></a-entity>
|
298 |
-
<a-entity moving-light="color: #00CED1; speed: 0.05 0.06 0.07; bounds: 4 3 4" position="0 3 0"></a-entity>
|
299 |
-
"""
|
300 |
-
|
301 |
-
assets, entities = generate_tilemap(files, directory, grid_width, grid_height, max_unique_models=5)
|
302 |
-
aframe_scene += assets + entities + "</a-scene>"
|
303 |
-
|
304 |
-
camera_move = st.session_state.get('camera_move', None)
|
305 |
-
if camera_move:
|
306 |
-
aframe_scene += f"<script>moveCamera('{camera_move}');</script>"
|
307 |
-
st.session_state.pop('camera_move')
|
308 |
-
|
309 |
-
st.components.v1.html(load_aframe_and_extras() + aframe_scene, height=600)
|
310 |
-
|
311 |
-
if __name__ == "__main__":
|
312 |
-
main()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|