Update app.py

app.py

@@ -3,6 +3,7 @@ import sys
 import faiss
 import numpy as np
 import streamlit as st
+import pandas as pd
 from text2vec import SentenceModel
 from src.jsonl_Indexer import JSONLIndexer
 
@@ -32,8 +33,6 @@ DEFAULT_CONFIG = {
 # 合并默认配置和命令行参数
 config = DEFAULT_CONFIG.copy()
 config.update(cli_args)
-
-# 将 vector_size 转换为整数
 config['vector_size'] = int(config['vector_size'])
 
 @st.cache_resource
@@ -68,24 +67,55 @@ st.title("JSONL Data Retrieval Visualization")
 st.write("该应用基于预计算的 JSONL 文件 embedding，输入查询后将检索相似记录。")
 
 # 查询输入
-query = st.text_input("Enter a search query:")
-top_k = st.slider("Select number of results to display", min_value=1, max_value=100, value=5)
-
+query = st.text_input("请输入搜索查询：")
+top_k = st.slider("选择展示的结果数量", min_value=1, max_value=100, value=5)
+# 创建两列布局
+col1, col2 = st.columns([2.5, 1])
+with col1:
+    # 搜索输入框
+    query = st.text_input(
+        "请输入搜索查询：", placeholder="your query", help=""
+    )
+with col2:
+    # TopK选择滑块
+    topk = st.slider(
+        "Top K", 1, 100, 50, help="choose the number of results to display"
+    )
 # 检索并展示结果
-if st.button("Search") and query:
-    # 注意：JSONLIndexer 提供的是 search_return_id 方法，返回的是 JSON 中 id 字段
+if st.button("query") and query:
+    # 调用检索方法，返回JSON中id字段和对应的相似度得分
     rec_ids, scores = retriever.search_return_id(query, top_k)
-
-    st.write("### Results:")
-
-    with st.expander("Retrieval Results (click to expand)"):
-        for j, rec_id in enumerate(rec_ids):
-            st.markdown(
-                f"""
-                <div style="border:1px solid #ccc; padding:10px; border-radius:5px; margin-bottom:10px; background-color:#f9f9f9;">
-                    <p><b>Record {j+1} ID:</b> {rec_id}</p>
-                    <p><b>Score:</b> {scores[j]:.4f}</p>
-                </div>
-                """,
-                unsafe_allow_html=True
+    
+    # 将检索结果构造成 DataFrame
+    results_df = pd.DataFrame({
+        "tool": rec_ids,
+        "relevance": scores
+    })
+    
+    st.subheader("🗂️ 检索结果详情")
+    
+    # 为 DataFrame 添加样式（交替行背景色）
+    styled_results = results_df.style.apply(
+        lambda x: [
+            "background-color: #F7F7F7" if i % 2 == 0 else "background-color: #FFFFFF"
+            for i in range(len(x))
+        ],
+        axis=0,
+    ).format({"relevance": "{:.4f}"})
+    
+    # 使用交互式数据表格展示结果，并配置列样式
+    st.dataframe(
+        styled_results,
+        column_config={
+            "tool": st.column_config.TextColumn("tool", help="检索到的tool", width="medium"),
+            "relevance": st.column_config.ProgressColumn(
+                "relevance",
+                help="记录与查询的匹配程度",
+                format="%.4f",
+                min_value=0,
+                max_value=float(max(scores)) if len(scores) > 0 else 1,
             )
+        },
+        hide_index=True,
+        use_container_width=True,
+    )