Update app.py

app.py

@@ -45,36 +45,31 @@ def load_json(file_name):
 # 修改 Context 渲染逻辑，添加 CSS 控制布局
 def display_dict(data):
     st.write("### 文件信息")
-    st.write(f"**Path:** {data['path']}")
-    st.write(f"**Table ID:** {data['table_id']}")  # 确保换行清晰
-    st.write(f"**Section:** {data['section']}")
-
-    # 渲染表格
-    st.write("### Table")
-    st.markdown(data['table_html'], unsafe_allow_html=True)
-
-    # 添加自定义 CSS 以避免重叠问题
-    st.write("""
-    <style>
-    .context span { color: red; font-weight: bold; }
-    .context p { margin-bottom: 15px; }
-    </style>
-    """, unsafe_allow_html=True)
-
-    st.write("### Context")
-    # 拼接 all_context，并用 CSS 渲染 target_context_ids 和 perturb_sentence_id 的高亮
-    all_context = data["all_context"]
-    highlighted_context = '<div class="context">'
-    for idx, sentence in enumerate(all_context):
-        if idx == data["perturb_sentence_id"]:
-            highlighted_context += f"<span>{sentence}</span> "
-        elif idx in data["target_context_ids"]:
-            highlighted_context += f"<b>{sentence}</b> "
-        else:
-            highlighted_context += f"<p>{sentence}</p> "
-    highlighted_context += '</div>'
-    st.markdown(highlighted_context, unsafe_allow_html=True)
-
+    st.write(f"**Path:** {data['path']} | **Table ID:** {data['table_id']} | **Section:** {data['section']}")
+
+    # 使用两个列来分隔内容
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.write("### Table")
+        st.markdown(data['table_html'], unsafe_allow_html=True)
+
+    with col2:
+        st.write("### Context")
+        # 拼接 all_context，并高亮特定部分
+        all_context = data["all_context"]
+        highlighted_context = '<div class="context">'
+        for idx, sentence in enumerate(all_context):
+            if idx == data["perturb_sentence_id"]:
+                highlighted_context += f"<span style='color:red;'>{sentence}</span> "
+            elif idx in data["target_context_ids"]:
+                highlighted_context += f"<b>{sentence}</b> "
+            else:
+                highlighted_context += sentence + " "
+        highlighted_context += '</div>'
+        st.markdown(highlighted_context, unsafe_allow_html=True)
+
+    # 单独分离的内容
     st.write("### Selected Paragraphs")
     for paragraph in data["selected_paragraphs"]:
         st.write(paragraph)
@@ -85,6 +80,7 @@ def display_dict(data):
     st.write("**Perturbed Explanation:**")
     st.write(data["output"]["perturbed_explanation"])
 
+
 # 主程序
 def main():
     st.title("Perturb For Table")