Update app.py

app.py

@@ -62,26 +62,19 @@ if code.strip():
 
     # A-Frame VR scene with interactivity and export
     def generate_aframe(call_graph):
-        spacing = 3
-        boxes = []
-        lines = []
-        positions = []
+        # Serialize function data to JSON format
+        function_data = {
+            "functions": [],
+            "relationships": []
+        }
 
         function_positions = {}
+        spacing = 3
         i = 0
         for fn in call_graph:
             x = i * spacing
             function_positions[fn] = (x, 1, -3)
-            positions.append(fn)
-            boxes.append(f"""
-                <a-box id="{fn}" position="{x} 1 -3" depth="0.5" height="0.5" width="2" color="#FFC65D"
-                    class="clickable"
-                    event-set__enter="_event: mouseenter; color: #00CED1"
-                    event-set__leave="_event: mouseleave; color: #FFC65D"
-                    onclick="say('{fn}')">
-                </a-box>
-                <a-text value="{fn}" position="{x} 2 -3" align="center" color="#000"></a-text>
-            """)
+            function_data["functions"].append({"name": fn, "position": [x, 1, -3]})
             i += 1
 
         for caller, callees in call_graph.items():
@@ -89,30 +82,54 @@ if code.strip():
                 if callee in function_positions:
                     x1, y1, z1 = function_positions[caller]
                     x2, y2, z2 = function_positions[callee]
-                    lines.append(f"""
-                        <a-entity line="start: {x1} {y1} {z1}; end: {x2} {y2} {z2}; color: red"></a-entity>
-                    """)
+                    function_data["relationships"].append({"start": [x1, y1, z1], "end": [x2, y2, z2]})
 
-        # JavaScript for text-to-speech on click + screenshot
+        # 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);
+            el.setAttribute('position', fn.position.join(' '));
+            el.setAttribute('depth', '0.5');
+            el.setAttribute('height', '0.5');
+            el.setAttribute('width', '2');
+            el.setAttribute('color', '#FFC65D');
+            el.setAttribute('class', 'clickable');
+            el.setAttribute('event-set__enter', '_event: mouseenter; color: #00CED1');
+            el.setAttribute('event-set__leave', '_event: mouseleave; color: #FFC65D');
+            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]}`);
+            text.setAttribute('align', 'center');
+            text.setAttribute('color', '#000');
+            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);
         }
-        function downloadScreenshot() {
-            const scene = document.querySelector('a-scene');
-            scene.components.screenshot.capture('perspective');
-            setTimeout(() => {
-                const a = document.createElement('a');
-                a.href = scene.components.screenshot.canvas.toDataURL();
-                a.download = 'scene.png';
-                a.click();
-            }, 500);
-        }
         </script>
         """
 
+        # HTML structure for A-Frame scene
         html = f"""
         <!DOCTYPE html>
         <html>
@@ -123,15 +140,12 @@ if code.strip():
             {js}
         </head>
         <body>
-            <button onclick="downloadScreenshot()" style="position: absolute; z-index: 9999; top: 10px; left: 10px; font-size: 16px;">📸 Download Screenshot</button>
             <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>
-                {''.join(boxes)}
-                {''.join(lines)}
             </a-scene>
         </body>
         </html>