Enhance image search results display by adding distance metadata and updating the results table. Introduced MetadataQuery for distance calculation and modified the HTML table to include a new column for distance.

.gitignore

@@ -0,0 +1 @@
+.env

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 from sentence_transformers import SentenceTransformer
 import weaviate
+from weaviate.classes.query import MetadataQuery
 from weaviate.classes.init import Auth
 from dotenv import load_dotenv
 import os
@@ -27,13 +28,15 @@ def search_images(query):
     query_vector = model.encode(query)
     results = lux_collection.query.near_vector(
         near_vector=query_vector.tolist(),
-        limit=20
+        limit=20,
+        return_metadata=MetadataQuery(distance=True)
     )
     
     # Format results for display
     formatted_results = []
     for result in results.objects:
         formatted_results.append({
+            "distance": round(result.metadata.distance, 2),
             "label": result.properties['label'],
             "lux_url": result.properties['lux_url'],
             "image_url": result.properties.get('image_url', "No image available")
@@ -61,6 +64,7 @@ def create_interface():
             html = """
             <table style="width:100%; border-collapse: collapse;">
                 <tr>
+                    <th style="border: 1px solid #ddd; padding: 8px;">Distance</th>
                     <th style="border: 1px solid #ddd; padding: 8px;">Label</th>
                     <th style="border: 1px solid #ddd; padding: 8px;">Lux URL</th>
                     <th style="border: 1px solid #ddd; padding: 8px;">Image</th>
@@ -71,6 +75,7 @@ def create_interface():
                 image_cell = f'<img src="{r["image_url"]}" style="max-width:200px; max-height:200px;">' if r["image_url"] and r["image_url"] != "No image available" else "No image available"
                 html += f"""
                 <tr>
+                    <td style="border: 1px solid #ddd; padding: 8px;">{r["distance"]}</td>
                     <td style="border: 1px solid #ddd; padding: 8px;">{r["label"]}</td>
                     <td style="border: 1px solid #ddd; padding: 8px;"><a href="{r["lux_url"]}" target="_blank">{r["lux_url"]}</a></td>
                     <td style="border: 1px solid #ddd; padding: 8px;">{image_cell}</td>