add expandable results

app.py

@@ -31,10 +31,13 @@ def search_kbli(text: str):
 
     response = supabase.rpc(
         "search_kbli",
-        {"query_embedding": embedding, "match_count": 10}
+        {"query_embedding": embedding, "match_count": 25}
     ).execute()
 
     results = response.data if response.data else []
+    
+    if not results:
+        return "<p>Tidak ditemukan hasil.</p>"
 
     html = """
     <style>
@@ -57,44 +60,66 @@ def search_kbli(text: str):
             color: #4b5563;
             margin-top: 4px;
         }
+        details {
+            margin-top: 16px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 8px;
+        }
+        details summary {
+            cursor: pointer;
+            font-weight: 600;
+            color: #2563eb;
+        }
         
         @media (prefers-color-scheme: dark) {
-            .kbli-item {
-                border: 1px solid #374151; /* abu gelap */
-            }
-            .kbli-item:hover {
-                background: #1f2937;
-            }
-            .kbli-title {
-                color: #f3f4f6;
-            }
-            .kbli-desc {
-                color: #d1d5db;
-            }
-            .kbli-item:hover .kbli-title {
-                color: #93c5fd;
-            }
-            .kbli-item:hover .kbli-desc {
-                color: #e5e7eb;
-            }
+            .kbli-item { border: 1px solid #374151; }
+            .kbli-item:hover { background: #1f2937; }
+            .kbli-title { color: #f3f4f6; }
+            .kbli-desc { color: #d1d5db; }
+            .kbli-item:hover .kbli-title { color: #93c5fd; }
+            .kbli-item:hover .kbli-desc { color: #e5e7eb; }
+            details { border: 1px solid #374151; }
+            details summary { color: #60a5fa; }
         }
     </style>
     <div>
     """
-    for r in results:
+
+    # Top 10 == // for r in results
+    top_10 = results[:10]
+    for r in top_10:
         html += f"""
         <div class="kbli-item">
             <p class="kbli-title">{r['kode']} – {r['judul']}</p>
             <p class="kbli-desc">{r['deskripsi']}</p>
         </div>
         """
+
+    # Expandable for
+    others = results[10:]
+    if others:
+        html += "<details><summary>Lihat hasil lainnya</summary><div style='margin-top:10px;'>"
+        for r in others:
+            html += f"""
+            <div class="kbli-item">
+                <p class="kbli-title">{r['kode']} – {r['judul']}</p>
+                <p class="kbli-desc">{r['deskripsi']}</p>
+            </div>
+            """
+        html += "</div></details>"
+    # End
+
     html += "</div>"
     return html
 
 with gr.Blocks(css="""
     .title {font-size: 22px; font-weight: 700; color: #111827; margin-bottom: 4px;}
     .desc {font-size: 14px; color: #6b7280; margin-bottom: 16px;}
-    .btn-primary, .btn-clear {
+    button.gr-button {
+        border-radius: 6px;
+    }
+    button.gr-button-primary, button.gr-button-secondary {
         border-radius: 6px;
     }
     
@@ -122,8 +147,8 @@ with gr.Blocks(css="""
                 inp1 = gr.Textbox(label="Masukkan teks")
 
                 with gr.Row(elem_classes="btn-row"):
-                    btn_clear1 = gr.Button("Clear", elem_classes="btn-clear")
-                    btn_submit1 = gr.Button("Submit", elem_classes="btn-primary")
+                    btn_clear1 = gr.Button("Clear", variant="secondary")
+                    btn_submit1 = gr.Button("Submit", variant="primary")
 
             with gr.Column(scale=1):
                 out1 = gr.JSON(label="Embedding Vector")
@@ -136,8 +161,8 @@ with gr.Blocks(css="""
         inp2 = gr.Textbox(label="Masukkan teks")
 
         with gr.Row(elem_classes="btn-row-search"):
-            btn_clear2 = gr.Button("Clear", elem_classes="btn-clear")
-            btn_submit2 = gr.Button("Submit", elem_classes="btn-primary")
+            btn_clear2 = gr.Button("Clear", variant="secondary")
+            btn_submit2 = gr.Button("Submit", variant="primary")
         
         out2 = gr.HTML(label="Hasil Pencarian Semantic")