Create app.py

app.py

@@ -0,0 +1,127 @@
+import streamlit as st
+import os
+import base64
+from pathlib import Path
+import shutil
+
+def load_aframe_and_extras():
+    return """
+    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
+    <script>
+    AFRAME.registerComponent('draggable', {
+      init: function () {
+        this.el.setAttribute('cursor-listener', '');
+        this.dragHandler = e => this.dragMove(e);
+        this.el.sceneEl.addEventListener('mousemove', this.dragHandler);
+        this.el.setAttribute('event-set__mousedown', 'startDragging');
+        this.el.setAttribute('event-set__mouseup', 'stopDragging');
+      },
+      remove: function () {
+        this.el.removeAttribute('cursor-listener');
+        this.el.sceneEl.removeEventListener('mousemove', this.dragHandler);
+      },
+      startDragging: function () {
+        this.isDragging = true;
+      },
+      stopDragging: function () {
+        this.isDragging = false;
+      },
+      dragMove: function (evt) {
+        if (this.isDragging) {
+          var camera = this.el.sceneEl.camera;
+          var vector = new THREE.Vector3(evt.clientX / window.innerWidth * 2 - 1, -(evt.clientY / window.innerHeight) * 2 + 1, 0.5);
+          vector.unproject(camera);
+          var dir = vector.sub(camera.position).normalize();
+          var distance = -camera.position.y / dir.y;
+          var pos = camera.position.clone().add(dir.multiplyScalar(distance));
+          this.el.setAttribute('position', pos);
+        }
+      }
+    });
+    </script>
+    """
+
+def create_aframe_entity(file_path, file_type, position):
+    if file_type == 'obj':
+        return f'<a-entity position="{position}" obj-model="obj: #{Path(file_path).stem}" draggable></a-entity>'
+    elif file_type == 'glb':
+        return f'<a-entity position="{position}" gltf-model="#{Path(file_path).stem}" draggable></a-entity>'
+    elif file_type in ['webp', 'png']:
+        return f'<a-image position="{position}" src="#{Path(file_path).stem}" width="1" height="1" draggable></a-image>'
+    elif file_type == 'mp4':
+        return f'<a-video position="{position}" src="#{Path(file_path).stem}" width="1" height="1" draggable></a-video>'
+    return ''
+
+def encode_file(file_path):
+    with open(file_path, "rb") as file:
+        return base64.b64encode(file.read()).decode()
+
+def main():
+    st.set_page_config(layout="wide")
+    
+    with st.sidebar:
+        st.title("3D File Viewer 🌐")
+        
+        st.markdown("### 🎨 Create Assets")
+        st.markdown("[Open 3D Animation Toolkit](https://huggingface.co/spaces/awacke1/3d_animation_toolkit)", unsafe_allow_html=True)
+        
+        st.markdown("### 📁 Directory")
+        directory = st.text_input("Enter path:", ".", key="directory_input")
+        
+        st.markdown("### ⬆️ Upload")
+        uploaded_files = st.file_uploader("Add files:", accept_multiple_files=True, key="file_uploader")
+        
+        st.markdown("### ℹ️ Instructions")
+        st.write("- Click and drag to move objects")
+        st.write("- Use mouse wheel to zoom")
+        st.write("- Right-click and drag to rotate")
+
+    if not os.path.isdir(directory):
+        st.sidebar.error("Invalid directory path")
+        return
+
+    file_types = ['obj', 'glb', 'webp', 'png', 'mp4']
+    
+    # Handle uploaded files
+    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 = """
+    <a-scene embedded style="height: 600px; width: 100%;">
+      <a-entity camera="userHeight: 1.6" position="0 2 2" rotation="-45 0 0" cursor="rayOrigin: mouse"></a-entity>
+    """
+
+    assets = "<a-assets>"
+    entities = ""
+
+    for i, file in enumerate(files):
+        file_path = os.path.join(directory, file)
+        file_type = file.split('.')[-1]
+        encoded_file = encode_file(file_path)
+        
+        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}>'
+
+        position = f"{i} 0 {i}"
+        entities += create_aframe_entity(file_path, file_type, position)
+
+    assets += "</a-assets>"
+    aframe_scene += assets + entities + "</a-scene>"
+
+    st.components.v1.html(load_aframe_and_extras() + aframe_scene, height=600)
+
+if __name__ == "__main__":
+    main()