feat: fix layout

app.py

@@ -11,17 +11,22 @@ def get_article_text():
     article = re.sub(r"^---.+---\s+", "", article, flags=re.MULTILINE + re.DOTALL)
     return article
 
-
+STYLE = """
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs=" crossorigin="anonymous">
+"""
 
 def find_matching_images(input_img, n_matches: int = 10):
+    
     results = analyze_image(input_img, annoy_index, n_matches=n_matches)
     
 
     indexes = results[0]
-    # scores = results[1]
+    scores = results[1]
 
     images = []
 
+    HTML = ""
+
     for i in range(len(indexes)):
         index = str(indexes[i])
 
@@ -31,7 +36,23 @@ def find_matching_images(input_img, n_matches: int = 10):
         if url != "":
           images.append(url)
 
-    return images
+          score = round(100 - scores[i], 1)
+
+          HTML += f"""<div class="card mb-3">
+                <div class="row g-0">
+                    <div class="col-md-4 text-center">
+                        <img style="max-height: 150px" src="{url}" alt="{mapping["name"]}">
+                    </div>
+                    <div class="col-md-8">
+                        <div class="card-body">
+                            <h5 class="card-title">{mapping["name"]}</h5>
+                            <p class="card-text">{score} %</p>
+                        </div>
+                    </div>
+                </div>
+            </div>"""
+
+    return f"""{STYLE} <div style="height: 600px; overflow-y: auto;">{HTML}</div>"""
 
 iface = gr.Interface(
     find_matching_images,
@@ -44,7 +65,8 @@ iface = gr.Interface(
     inputs=[
         gr.inputs.Image(shape=None, label="Your image"),
     ],
-    outputs=gr.Gallery(label="類似する貼り込み資料"),
+    # outputs=gr.Gallery(label="類似する貼り込み資料").style(height="100px"),
+    outputs=gr.HTML(label="類似する貼り込み資料"),
     examples=[
         ["images/025_0085.jpg"],
         ["images/046_0051.jpg"],