Update app.py

app.py

@@ -5,9 +5,10 @@ import streamlit.components.v1 as components
 from transformers import pipeline
 from gtts import gTTS
 import os
-import qrcode  # QR code generation
+import qrcode
+from io import BytesIO
 
-# Set up the Streamlit page
+# 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")
 
@@ -17,14 +18,14 @@ def load_model():
 
 summarizer = load_model()
 
-# In-browser code editor
+# 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 AST for functions and calls
+    # Parse code to extract functions and their calls
     tree = ast.parse(code)
 
     class FunctionCallVisitor(ast.NodeVisitor):
@@ -42,27 +43,26 @@ if code.strip():
     visitor = FunctionCallVisitor()
     visitor.visit(tree)
     call_graph = visitor.calls
-    all_functions = list(call_graph.keys())
 
+    # 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'}")
 
-    # Generate AI summary
+    # Generate AI Summary
     prompt = f"Explain the structure and purpose of the following functions and how they call each other: {call_graph}"
     summary = summarizer(prompt, max_length=60, min_length=15, do_sample=False)
     summary_text = summary[0]['summary_text']
     st.success(summary_text)
 
-    # Generate voice narration
+    # Voice narration using gTTS
     st.subheader("🔊 Voice Narration")
     tts = gTTS(text=summary_text)
     tts.save("summary.mp3")
     st.audio("summary.mp3", format="audio/mp3")
 
-    # A-Frame VR scene with interactivity and export
+    # Generate A-Frame HTML scene
     def generate_aframe(call_graph):
-        # Serialize function data to JSON format
         function_data = {
             "functions": [],
             "relationships": []
@@ -70,12 +70,10 @@ if code.strip():
 
         function_positions = {}
         spacing = 3
-        i = 0
-        for fn in call_graph:
+        for i, fn in enumerate(call_graph):
             x = i * spacing
             function_positions[fn] = (x, 1, -3)
             function_data["functions"].append({"name": fn, "position": [x, 1, -3]})
-            i += 1
 
         for caller, callees in call_graph.items():
             for callee in callees:
@@ -84,13 +82,10 @@ if code.strip():
                     x2, y2, z2 = function_positions[callee]
                     function_data["relationships"].append({"start": [x1, y1, z1], "end": [x2, y2, z2]})
 
-        # JavaScript to render the function data dynamically using JSON
         js = """
         <script>
-        // The JSON data will be passed as a global variable
         const functionData = """ + str(function_data).replace("'", '"') + """;
-        
-        // Render boxes dynamically based on function data
+
         functionData.functions.forEach(function(fn) {
             const el = document.createElement('a-box');
             el.setAttribute('id', fn.name);
@@ -105,7 +100,6 @@ if code.strip():
             el.setAttribute('onclick', `say('${fn.name}')`);
             document.querySelector('a-scene').appendChild(el);
 
-            // Add text for the function
             const text = document.createElement('a-text');
             text.setAttribute('value', fn.name);
             text.setAttribute('position', `${fn.position[0]} ${fn.position[1] + 1} ${fn.position[2]}`);
@@ -114,14 +108,12 @@ if code.strip():
             document.querySelector('a-scene').appendChild(text);
         });
 
-        // Render relationship lines dynamically based on function data
         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);
         });
-        
-        // Text-to-speech function for box click
+
         function say(text) {
             const utter = new SpeechSynthesisUtterance(text);
             speechSynthesis.speak(utter);
@@ -129,7 +121,6 @@ if code.strip():
         </script>
         """
 
-        # HTML structure for A-Frame scene
         html = f"""
         <!DOCTYPE html>
         <html>
@@ -159,19 +150,23 @@ if code.strip():
     st.subheader("🌐 Interactive 3D Function Visualizer")
     components.iframe(data_url, height=600)
 
-    # QR Code for AR View on Mobile
+    # Generate and display QR code for AR/VR view
+    st.subheader("📱 AR View on Mobile")
     qr = qrcode.QRCode(
         version=1,
         error_correction=qrcode.constants.ERROR_CORRECT_L,
         box_size=10,
         border=4,
     )
-    url = "https://huggingface.co/spaces/your-space-url"  # Replace with your Hugging Face Space URL
-    qr.add_data(url)
+
+    space_url = "https://huggingface.co/spaces/your-space-name"  # Replace with actual Hugging Face Space URL
+    qr.add_data(space_url)
     qr.make(fit=True)
 
-    # Create and display the QR Code
     img = qr.make_image(fill='black', back_color='white')
-    st.image(img, caption="Scan this QR code to view the VR scene in AR on your mobile!")
+    img_byte_arr = BytesIO()
+    img.save(img_byte_arr, format='PNG')
+    img_bytes = img_byte_arr.getvalue()
+    st.image(img_bytes, caption="Scan this QR code to view the VR scene in AR on your mobile!")
 else:
-    st.info("Write some Python code above to visualize, narrate, and explore it in VR.")
+    st.info("Write some Python code above to visualize, narrate, and explore it in 3D/AR.")