Update app.py

app.py

@@ -4,12 +4,11 @@ import base64
 import streamlit.components.v1 as components
 from transformers import pipeline
 from gtts import gTTS
-from io import BytesIO
 import qrcode
+from io import BytesIO
 
-# Page config
 st.set_page_config(page_title="AR/VR Code Visualizer", layout="wide")
-st.title("👓 AR/VR Code Visualizer with Editing, Interaction, and Export")
+st.title("👓 AR/VR Code Visualizer with Interaction, Narration, and AR View")
 
 @st.cache_resource
 def load_model():
@@ -17,14 +16,13 @@ def load_model():
 
 summarizer = load_model()
 
-# Code input area
 st.subheader("📝 Write or Paste Your Python Code")
 code = st.text_area("Enter your Python code here", height=300)
 
 if code.strip():
     st.code(code, language="python")
 
-    # Parse code to extract functions and their calls
+    # AST parsing to get function call relationships
     tree = ast.parse(code)
 
     class FunctionCallVisitor(ast.NodeVisitor):
@@ -43,13 +41,12 @@ if code.strip():
     visitor.visit(tree)
     call_graph = visitor.calls
 
-    # Display call relationships
     st.subheader("📊 Function Calls")
     for fn, callees in call_graph.items():
         st.write(f"🔹 `{fn}` calls: {', '.join(callees) if callees else 'None'}")
 
-    # AI Summary
-    prompt = f"Explain the structure and purpose of the following functions and how they call each other: {call_graph}"
+    # AI summary
+    prompt = f"Explain this call graph structure: {call_graph}"
     summary = summarizer(prompt, max_length=60, min_length=15, do_sample=False)
     summary_text = summary[0]['summary_text']
     st.success(summary_text)
@@ -60,7 +57,7 @@ if code.strip():
     tts.save("summary.mp3")
     st.audio("summary.mp3", format="audio/mp3")
 
-    # A-Frame scene generation
+    # A-Frame 3D HTML generator
     def generate_aframe(call_graph):
         function_data = {
             "functions": [],
@@ -85,39 +82,39 @@ if code.strip():
         <script>
         const functionData = {str(function_data).replace("'", '"')};
 
-        AFRAME.registerComponent('dynamic-creator', {{
-            init: function () {{
-                functionData.functions.forEach(function(fn) {{
-                    const box = document.createElement('a-box');
-                    box.setAttribute('position', fn.position.join(' '));
-                    box.setAttribute('depth', '0.5');
-                    box.setAttribute('height', '0.5');
-                    box.setAttribute('width', '2');
-                    box.setAttribute('color', '#FFC65D');
-                    box.setAttribute('class', 'clickable');
-                    box.setAttribute('onclick', `say('${fn.name}')`);
-                    this.el.appendChild(box);
-
-                    const text = document.createElement('a-text');
-                    text.setAttribute('value', fn.name);
-                    text.setAttribute('position', `${fn.position[0]} ${fn.position[1] + 1} ${fn.position[2]}`);
-                    text.setAttribute('align', 'center');
-                    text.setAttribute('color', '#000');
-                    this.el.appendChild(text);
-                }}.bind(this));
-
-                functionData.relationships.forEach(function(rel) {{
-                    const line = document.createElement('a-entity');
-                    line.setAttribute('line', `start: ${rel.start.join(' ')}; end: ${rel.end.join(' ')}; color: red`);
-                    this.el.appendChild(line);
-                }}.bind(this));
-            }}
-        }});
-
         function say(text) {{
             const utter = new SpeechSynthesisUtterance(text);
             speechSynthesis.speak(utter);
         }}
+
+        document.addEventListener('DOMContentLoaded', () => {{
+            functionData.functions.forEach(function(fn) {{
+                const box = document.createElement('a-box');
+                box.setAttribute('position', fn.position.join(' '));
+                box.setAttribute('depth', '0.5');
+                box.setAttribute('height', '0.5');
+                box.setAttribute('width', '2');
+                box.setAttribute('color', '#FFC65D');
+                box.setAttribute('class', 'clickable');
+                box.setAttribute('event-set__enter', '_event: mouseenter; color: #00CED1');
+                box.setAttribute('event-set__leave', '_event: mouseleave; color: #FFC65D');
+                box.setAttribute('onclick', 'say(\"' + fn.name + '\")');
+                document.querySelector('a-scene').appendChild(box);
+
+                const text = document.createElement('a-text');
+                text.setAttribute('value', fn.name);
+                text.setAttribute('position', `${{fn.position[0]}} ${{fn.position[1] + 1}} ${{fn.position[2]}}`);
+                text.setAttribute('align', 'center');
+                text.setAttribute('color', '#000');
+                document.querySelector('a-scene').appendChild(text);
+            }});
+
+            functionData.relationships.forEach(function(rel) {{
+                const el = document.createElement('a-entity');
+                el.setAttribute('line', `start: ${{rel.start.join(' ')}}; end: ${{rel.end.join(' ')}}; color: red`);
+                document.querySelector('a-scene').appendChild(el);
+            }});
+        }});
         </script>
         """
 
@@ -125,18 +122,20 @@ if code.strip():
         <!DOCTYPE html>
         <html>
         <head>
+            <meta charset="utf-8">
             <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+            <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@6.1.1/dist/aframe-extras.min.js"></script>
+            <script src="https://unpkg.com/aframe-screenshot-component@3.3.0/dist/aframe-screenshot-component.min.js"></script>
+            {js}
         </head>
         <body>
-            <a-scene>
-                <a-entity dynamic-creator position="0 0 0"></a-entity>
-                <a-entity position="0 1.6 4">
-                    <a-camera></a-camera>
+            <a-scene screenshot>
+                <a-entity position="0 1.6 3">
+                    <a-camera wasd-controls-enabled="true" look-controls-enabled="true"></a-camera>
                 </a-entity>
                 <a-light type="ambient" color="#FFF"></a-light>
                 <a-plane rotation="-90 0 0" width="40" height="40" color="#7BC8A4"></a-plane>
             </a-scene>
-            {js}
         </body>
         </html>
         """
@@ -149,12 +148,18 @@ if code.strip():
     st.subheader("🌐 Interactive 3D Function Visualizer")
     components.iframe(data_url, height=600)
 
-    # QR code for Hugging Face Space
+    # QR Code
     st.subheader("📱 AR View on Mobile")
-    space_url = "https://huggingface.co/spaces/your-space-name"  # Replace with actual URL
-    qr = qrcode.make(space_url)
-    buf = BytesIO()
-    qr.save(buf, format="PNG")
-    st.image(buf.getvalue(), caption="Scan this QR code to view the VR scene in AR on your mobile!")
+    qr = qrcode.QRCode(version=1, box_size=10, border=5)
+    space_url = "https://huggingface.co/spaces/your-username/your-space-name"  # Replace this
+    qr.add_data(space_url)
+    qr.make(fit=True)
+
+    img = qr.make_image(fill_color="black", back_color="white")
+    img_byte_arr = BytesIO()
+    img.save(img_byte_arr, format='PNG')
+    img_bytes = img_byte_arr.getvalue()
+    st.image(img_bytes, caption="Scan to view in AR on mobile")
+
 else:
     st.info("Write some Python code above to visualize, narrate, and explore it in 3D/AR.")