Update app.py

app.py

@@ -125,12 +125,18 @@ def recommend(image):
     # Display images with matplotlib
     display_images(recommended_images, recommended_model_names, recommended_distances)
     
-    # Prepare text output for copying
-    text_output = ""
-    for model_name, distance in zip(recommended_model_names, recommended_distances):
-        text_output += f"Model Name: {model_name}, Distance: {distance:.2f}\n"
+    # Prepare HTML output for Gradio
+    html_output = ""
+    for img_path, model_name, distance in zip(recommended_images, recommended_model_names, recommended_distances):
+        html_output += f"""
+        <div style='display:inline-block; text-align:center; margin:10px;'>
+            <img src='file://{img_path}' style='width:200px; height:200px;'><br>
+            <b>Model Name:</b> {model_name}<br>
+            <b>Distance:</b> {distance:.2f}<br>
+        </div>
+        """
     
-    return text_output
+    return html_output
 
 def display_images(image_paths, model_names, distances):
     plt.figure(figsize=(20, 10))
@@ -145,9 +151,9 @@ def display_images(image_paths, model_names, distances):
 interface = gr.Interface(
     fn=recommend,
     inputs=gr.Image(type="pil"),
-    outputs=gr.Textbox(),
+    outputs=gr.HTML(),  # Use HTML output for better formatting
     title="Image Recommendation System",
     description="Upload an image and get 5 recommended similar images with model names and distances."
 )
 
-interface.launch()
+interface.launch()