Spaces:

broadfield-dev
/

parse_py

Running

App Files Files Community

broadfield-dev commited on Mar 4

Commit

085e4f6

verified ·

1 Parent(s): 7c98d00

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +119 -16

templates/index.html CHANGED Viewed

@@ -3,29 +3,132 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Python Parser</title>
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-100 min-h-screen flex items-center justify-center">
-    <div class="bg-white p-8 rounded-lg shadow-lg max-w-2xl w-full">
-        <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">Python Code Parser</h1>
-        <!-- File Upload -->
-        <form method="post" enctype="multipart/form-data" class="space-y-6">
             <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Upload a Python File</label>
-                <input type="file" name="file" accept=".py" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
             </div>
-            <!-- Paste Code -->
             <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Or Paste Your Code</label>
-                <textarea name="code" rows="6" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Paste Python code here..."></textarea>
-                <input type="text" name="filename" class="mt-2 w-full p-2 border rounded-lg" placeholder="Enter filename (e.g., script.py)">
             </div>
-            <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 transition">Parse</button>
         </form>
     </div>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Python Code Parser</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/[email protected]"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+    <style>
+        .table-container { overflow-x: auto; }
+        pre { white-space: pre-wrap; word-wrap: break-word; }
+        #point-cloud { display: none; width: 100%; height: 400px; }
+        #point-details { width: 100%; min-height: 100px; background: #1f2937; padding: 1rem; border-radius: 0.5rem; }
+    </style>
 </head>
+<body class="bg-gray-900 text-gray-200 min-h-screen p-8 font-sans">
+    <div class="max-w-7xl mx-auto bg-gray-800 p-6 rounded-xl shadow-2xl">
+        <h1 class="text-3xl font-bold text-blue-400 mb-6">Python Code Parser</h1>
+        <!-- Form -->
+        <form hx-post="/" hx-target="#results" hx-swap="innerHTML" class="space-y-6">
             <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Upload a Python File</label>
+                <input type="file" name="file" accept=".py" class="w-full p-2 border rounded-lg bg-gray-700 text-gray-200">
             </div>
             <div>
+                <label class="block text-sm font-medium text-gray-300 mb-2">Or Paste Your Code</label>
+                <textarea name="code" rows="6" class="w-full p-2 border rounded-lg bg-gray-700 text-gray-200" placeholder="Paste Python code here...">{{ code_input or '' }}</textarea>
+                <input type="text" name="filename" class="mt-2 w-full p-2 border rounded-lg bg-gray-700 text-gray-200" placeholder="Enter filename (e.g., script.py)" value="{{ filename or '' }}">
             </div>
+            <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition">Parse</button>
         </form>
+        <!-- Results Section -->
+        <div id="results" class="mt-8">
+            {% if parts %}
+                {% include 'results_partial.html' %}
+            {% endif %}
+        </div>
     </div>
+    <!-- Three.js Point Cloud Script -->
+    <script>
+        let scene, camera, renderer, points, raycaster, mouse, hoveredPoint = null;
+        const pointDetails = document.getElementById('point-details');
+        function initPointCloud(parts) {
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / 400, 0.1, 1000);
+            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('point-cloud') });
+            renderer.setSize(window.innerWidth * 0.9, 400);
+            const positions = [];
+            const colors = [];
+            parts.forEach((part, index) => {
+                const vector = part.vector;
+                const x = vector[0] * 10; // category_id
+                const y = vector[1] * 10; // level
+                const z = vector[2] * 100; // center_pos
+                positions.push(x, y, z);
+                colors.push(1, 0.5, 0); // Orange points
+                part.pointIndex = index * 3; // Store index for lookup
+            });
+            const geometry = new THREE.BufferGeometry();
+            geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+            const material = new THREE.PointsMaterial({ size: 5, vertexColors: true });
+            points = new THREE.Points(geometry, material);
+            scene.add(points);
+            camera.position.z = 100;
+            raycaster = new THREE.Raycaster();
+            mouse = new THREE.Vector2();
+            animate();
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            points.rotation.y += 0.005;
+            renderer.render(scene, camera);
+        }
+        function onMouseMove(event) {
+            const rect = renderer.domElement.getBoundingClientRect();
+            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObject(points);
+            if (intersects.length > 0) {
+                const index = intersects[0].index;
+                const part = window.parts.find(p => p.pointIndex === index * 3);
+                if (part && hoveredPoint !== part) {
+                    hoveredPoint = part;
+                    pointDetails.innerHTML = `
+                        <div class="text-gray-200">
+                            <strong>Category:</strong> ${part.category}<br>
+                            <strong>Node ID:</strong> ${part.node_id}<br>
+                            <strong>Parent Path:</strong> ${part.parent_path}<br>
+                            <strong>Level:</strong> ${part.level}<br>
+                            <strong>Location:</strong> Lines ${part.location[0]} to ${part.location[1]}<br>
+                            <strong>Vector:</strong> [${part.vector.join(', ')}]<br>
+                            <strong>Code:</strong><pre class="text-xs text-gray-300">${part.source}</pre>
+                        </div>
+                    `;
+                }
+            } else {
+                hoveredPoint = null;
+                pointDetails.innerHTML = '<p class="text-gray-400">Hover over a point to see details</p>';
+            }
+        }
+        function togglePointCloud() {
+            const canvas = document.getElementById('point-cloud');
+            const table = document.getElementById('results-table');
+            if (canvas.style.display === 'none') {
+                canvas.style.display = 'block';
+                table.style.display = 'none';
+                if (!scene && window.parts) {
+                    initPointCloud(window.parts);
+                    document.addEventListener('mousemove', onMouseMove);
+                }
+            } else {
+                canvas.style.display = 'none';
+                table.style.display = 'block';
+                document.removeEventListener('mousemove', onMouseMove);
+            }
+        }
+    </script>
 </body>
 </html>