Update templates/index.html

templates/index.html

@@ -29,14 +29,24 @@
             <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition">Parse & Store</button>
         </form>
 
-        <!-- Query Form -->
-        <form hx-post="/" hx-target="#results" hx-swap="innerHTML" class="space-y-4 mb-8">
-            <div>
-                <label class="block text-sm font-medium text-gray-300 mb-2">Query Programs (e.g., function,assignment,return)</label>
-                <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)">
-            </div>
-            <button type="submit" class="w-full bg-green-500 text-white p-2 rounded-lg hover:bg-green-600 transition">Find Programs</button>
-        </form>
+        <!-- Query Forms -->
+        <div class="space-y-4 mb-8">
+            <form hx-post="/" hx-target="#results" hx-swap="innerHTML" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Query Programs by Operations (e.g., function,assignment,return)</label>
+                    <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)">
+                </div>
+                <button type="submit" class="w-full bg-green-500 text-white p-2 rounded-lg hover:bg-green-600 transition">Find Programs by Operations</button>
+            </form>
+
+            <form hx-post="/" hx-target="#results" hx-swap="innerHTML" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Query Programs by Description (e.g., "function that adds numbers")</label>
+                    <input type="text" name="semantic_query" class="w-full p-2 border rounded-lg bg-gray-700 text-gray-200" placeholder="Enter description">
+                </div>
+                <button type="submit" class="w-full bg-purple-500 text-white p-2 rounded-lg hover:bg-purple-600 transition">Find Programs by Description</button>
+            </form>
+        </div>
 
         <!-- Results Section -->
         <div id="results" class="mt-8">
@@ -49,6 +59,7 @@
                     <div class="bg-gray-700 p-4 rounded-lg">
                         <h3 class="text-lg font-semibold text-blue-300">Program ID: {{ result.id }}</h3>
                         <p class="text-gray-200">Similarity: {{ result.similarity | round(3) }}</p>
+                        <p class="text-gray-300">Description Tokens: {{ result.description }}</p>
                         <pre class="bg-gray-800 p-2 rounded mt-2 text-gray-300">{{ result.code }}</pre>
                     </div>
                     {% endfor %}