Hugging Face's logo

Spaces:
broadfield-dev
/
parse_py
Running

App Files Community
broadfield-dev commited on
Commit
e1e8a7c
·
verified ·
1 Parent(s): 470905d

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +25 -128
templates/index.html CHANGED
@@ -3,23 +3,20 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Python Code Parser</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/[email protected]"></script>
9
- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
10
  <style>
11
  .table-container { overflow-x: auto; }
12
  pre { white-space: pre-wrap; word-wrap: break-word; }
13
- #point-cloud { display: none; width: 100%; height: 400px; }
14
- #point-details { width: 100%; min-height: 100px; background: #1f2937; padding: 1rem; border-radius: 0.5rem; }
15
  </style>
16
  </head>
17
  <body class="bg-gray-900 text-gray-200 min-h-screen p-8 font-sans">
18
  <div class="max-w-7xl mx-auto bg-gray-800 p-6 rounded-xl shadow-2xl">
19
- <h1 class="text-3xl font-bold text-blue-400 mb-6">Python Code Parser</h1>
20
 
21
- <!-- Form -->
22
- <form hx-post="/" hx-target="#results" hx-swap="innerHTML" class="space-y-6">
23
  <div>
24
  <label class="block text-sm font-medium text-gray-300 mb-2">Upload a Python File</label>
25
  <input type="file" name="file" accept=".py" class="w-full p-2 border rounded-lg bg-gray-700 text-gray-200">
@@ -29,135 +26,35 @@
29
  <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>
30
  <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 '' }}">
31
  </div>
32
- <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition">Parse</button>
 
 
 
 
 
 
 
 
 
33
  </form>
34
 
35
  <!-- Results Section -->
36
  <div id="results" class="mt-8">
37
  {% if parts %}
38
  {% include 'results_partial.html' %}
 
 
 
 
 
 
 
 
 
 
 
39
  {% endif %}
40
  </div>
41
  </div>
42
-
43
- <!-- Three.js Point Cloud Script -->
44
- <script>
45
- let scene, camera, renderer, points, raycaster, mouse, hoveredPoint = null;
46
- let isDragging = false, previousMousePosition = { x: 0, y: 0 };
47
- const pointDetails = document.getElementById('point-details');
48
-
49
- function initPointCloud(parts) {
50
- const canvas = document.getElementById('point-cloud');
51
- scene = new THREE.Scene();
52
- camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth / 400, 0.1, 1000);
53
- renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
54
- renderer.setSize(canvas.offsetWidth, 400);
55
-
56
- const positions = [];
57
- const colors = [];
58
- parts.forEach((part, index) => {
59
- const vector = part.vector;
60
- const x = vector[0] * 10; // category_id
61
- const y = vector[1] * 10; // level
62
- const z = vector[2] * 100; // center_pos
63
- positions.push(x, y, z);
64
- // Color by category (e.g., variables in blue, others in orange)
65
- let color;
66
- if (['input_variable', 'assigned_variable', 'returned_variable'].includes(part.category)) {
67
- color = [0, 0, 1]; // Blue for variables
68
- } else {
69
- color = [1, 0.5, 0]; // Orange for non-variables
70
- }
71
- colors.push(...color);
72
- part.pointIndex = index * 3; // Store index for lookup
73
- });
74
-
75
- const geometry = new THREE.BufferGeometry();
76
- geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
77
- geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
78
- const material = new THREE.PointsMaterial({ size: 5, vertexColors: true });
79
- points = new THREE.Points(geometry, material);
80
- scene.add(points);
81
-
82
- camera.position.z = 100;
83
- raycaster = new THREE.Raycaster();
84
- raycaster.params.Points.threshold = 5; // Increase sensitivity
85
- mouse = new THREE.Vector2();
86
-
87
- canvas.addEventListener('mousedown', onMouseDown);
88
- canvas.addEventListener('mousemove', onMouseMove);
89
- canvas.addEventListener('mouseup', onMouseUp);
90
- }
91
-
92
- function animate() {
93
- requestAnimationFrame(animate);
94
- renderer.render(scene, camera);
95
- }
96
-
97
- function onMouseDown(event) {
98
- isDragging = true;
99
- previousMousePosition = { x: event.clientX, y: event.clientY };
100
- }
101
-
102
- function onMouseMove(event) {
103
- const rect = renderer.domElement.getBoundingClientRect();
104
- mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
105
- mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
106
-
107
- if (isDragging) {
108
- const deltaX = event.clientX - previousMousePosition.x;
109
- const deltaY = event.clientY - previousMousePosition.y;
110
- points.rotation.y += deltaX * 0.005;
111
- points.rotation.x += deltaY * 0.005;
112
- previousMousePosition = { x: event.clientX, y: event.clientY };
113
- } else {
114
- raycaster.setFromCamera(mouse, camera);
115
- const intersects = raycaster.intersectObject(points);
116
- if (intersects.length > 0) {
117
- const index = intersects[0].index;
118
- const part = window.parts.find(p => p.pointIndex === index * 3);
119
- if (part && hoveredPoint !== part) {
120
- hoveredPoint = part;
121
- const variableRole = part.category in ['input_variable', 'assigned_variable', 'returned_variable'] ?
122
- part.category.replace('_variable', '').capitalize() : '-';
123
- pointDetails.innerHTML = `
124
- <div class="text-gray-200">
125
- <strong>Category:</strong> ${part.category}<br>
126
- <strong>Node ID:</strong> ${part.node_id}<br>
127
- <strong>Parent Path:</strong> ${part.parent_path}<br>
128
- <strong>Level:</strong> ${part.level}<br>
129
- <strong>Location:</strong> Lines ${part.location[0]} to ${part.location[1]}<br>
130
- <strong>Variable Role:</strong> ${variableRole}<br>
131
- <strong>Vector:</strong> [${part.vector.join(', ')}]<br>
132
- <strong>Code:</strong><pre class="text-xs text-gray-300">${part.source}</pre>
133
- </div>
134
- `;
135
- }
136
- } else {
137
- hoveredPoint = null;
138
- pointDetails.innerHTML = '<p class="text-gray-400">Hover over a point to see details</p>';
139
- }
140
- }
141
- }
142
-
143
- function onMouseUp() {
144
- isDragging = false;
145
- }
146
-
147
- function togglePointCloud() {
148
- const canvas = document.getElementById('point-cloud');
149
- const table = document.getElementById('results-table');
150
- if (canvas.style.display === 'none') {
151
- canvas.style.display = 'block';
152
- table.style.display = 'none';
153
- if (!scene && window.parts) {
154
- initPointCloud(window.parts);
155
- }
156
- } else {
157
- canvas.style.display = 'none';
158
- table.style.display = 'block';
159
- }
160
- }
161
- </script>
162
  </body>
163
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Python Code Parser & Program Retrieval</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/[email protected]"></script>
 
9
  <style>
10
  .table-container { overflow-x: auto; }
11
  pre { white-space: pre-wrap; word-wrap: break-word; }
 
 
12
  </style>
13
  </head>
14
  <body class="bg-gray-900 text-gray-200 min-h-screen p-8 font-sans">
15
  <div class="max-w-7xl mx-auto bg-gray-800 p-6 rounded-xl shadow-2xl">
16
+ <h1 class="text-3xl font-bold text-blue-400 mb-6">Python Code Parser & Program Retrieval</h1>
17
 
18
+ <!-- Parsing Form -->
19
+ <form hx-post="/" hx-target="#results" hx-swap="innerHTML" class="space-y-6 mb-8">
20
  <div>
21
  <label class="block text-sm font-medium text-gray-300 mb-2">Upload a Python File</label>
22
  <input type="file" name="file" accept=".py" class="w-full p-2 border rounded-lg bg-gray-700 text-gray-200">
 
26
  <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>
27
  <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 '' }}">
28
  </div>
29
+ <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition">Parse & Store</button>
30
+ </form>
31
+
32
+ <!-- Query Form -->
33
+ <form hx-post="/" hx-target="#results" hx-swap="innerHTML" class="space-y-4 mb-8">
34
+ <div>
35
+ <label class="block text-sm font-medium text-gray-300 mb-2">Query Programs (e.g., function,assignment,return)</label>
36
+ <input type="text" name="query_ops" class="w-full p-2 border rounded-lg bg-gray-700 text-gray-200" placeholder="Enter operations (comma-separated)">
37
+ </div>
38
+ <button type="submit" class="w-full bg-green-500 text-white p-2 rounded-lg hover:bg-green-600 transition">Find Programs</button>
39
  </form>
40
 
41
  <!-- Results Section -->
42
  <div id="results" class="mt-8">
43
  {% if parts %}
44
  {% include 'results_partial.html' %}
45
+ {% elif query_results %}
46
+ <h2 class="text-2xl font-bold text-blue-400 mb-4">Matching Programs</h2>
47
+ <div class="space-y-4">
48
+ {% for result in query_results %}
49
+ <div class="bg-gray-700 p-4 rounded-lg">
50
+ <h3 class="text-lg font-semibold text-blue-300">Program ID: {{ result.id }}</h3>
51
+ <p class="text-gray-200">Similarity: {{ result.similarity | round(3) }}</p>
52
+ <pre class="bg-gray-800 p-2 rounded mt-2 text-gray-300">{{ result.code }}</pre>
53
+ </div>
54
+ {% endfor %}
55
+ </div>
56
  {% endif %}
57
  </div>
58
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  </body>
60
  </html>