return results as html

app.py

@@ -68,7 +68,7 @@ def process_image(image):
     # Read the index file and perform search of top 50 images
     index = faiss.read_index("vector.index")
     distances, indices = index.search(vector, 50)
-    matches = []
+    matches = ""
     for idx, matching_gamerpic in enumerate(indices[0]):
         gamerpic = images[matching_gamerpic]
         # Return the corresponding title with only the matched gamerpic
@@ -76,13 +76,29 @@ def process_image(image):
             {"gamerpics.cdn": gamerpic},
             {"name": 1, "type": 1, "url": 1, "gamerpics.$": 1},
         )
-
+        print(title["name"])
         title["rank"] = idx
         title["score"] = str(round((1 / (distances[0][idx] + 1) * 100), 2)) + "%"
-        matches.append(title)
 
-    print(matches)
-    return "<h1>GG BRO ! </h1>"
+        html = f"""
+        <h3 class="mr-4 inline align-middle text-3xl hover:underline">Matching gamerpics: Top 50 results</h3>
+        <div class="mt-8 flex flex-wrap gap-x-2">
+            <a href="{title['url']}" alt="{title['name']}" class="min-w-[130px] grow">
+                <div id="{title['_id']}" hx-swap="morph:innerHTML" class="mb-4 rounded-xl border border-black/5 p-2 hover:border-transparent hover:bg-black/5">
+                    <div class="flex-grow items-center text-center">
+                        <img src="https://assets.xboxgamer.pics{title['gamerpics'][0]['cdn']}" width="64" height="64" class="mx-auto" alt="Gamerpic" />
+                        <span class="text-center align-middle text-lg">{title["name"]}</span>
+                        <div class="inline-block rounded-2xl border border-stone-200 bg-white px-2 py-1 text-xs font-bold uppercase">
+                            Score: {title["score"]}
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </div>
+        """
+        matches.append(html)
+
+    return matches
 
 
 # Create a Gradio interface