Update app.py

app.py

@@ -35,32 +35,49 @@ with open("gpt4o_50.json", "r") as file:
 
 st.title("JSON Data Visualization")
 
-columns_per_row = 4
-columns = st.columns(columns_per_row)
+# 定义 CSS 样式
+st.markdown("""
+    <style>
+    .row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+    .column {
+        flex: 1 1 calc(25% - 20px); /* 固定为 4 列，每列占 25% 减去间距 */
+        max-width: calc(25% - 20px);
+        margin: 10px;
+        box-sizing: border-box;
+    }
+    .content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background-color: #f9f9f9;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+    }
+    </style>
+""", unsafe_allow_html=True)
 
-# 用于存储每列的内容高度
-heights = [0] * columns_per_row
-content_list = [[] for _ in range(columns_per_row)]  # 每列内容占位
-
-# 遍历数据并将内容分配到列
-for idx, (qwen, gpt) in enumerate(zip(qwen_data, gpt_data)):
+# 渲染内容
+st.markdown('<div class="row">', unsafe_allow_html=True)
+for qwen, gpt in zip(qwen_data, gpt_data):
     image_name, image_url, description, qwen_category = qwen
     _, _, _, gpt_category = gpt
 
-    # 将内容添加到对应列的内容列表中
-    col_idx = idx % columns_per_row
     content = f"""
-    ### {image_name}
-    ![]({image_url})
-    **Description:** {description}  
-    **Qwen_Category:** {qwen_category}  
-    **GPT_Category:** {gpt_category}  
-    ---
+    <div class="column">
+        <div class="content">
+            <h4>{image_name}</h4>
+            <img src="{image_url}" style="width:100%;" alt="{description}">
+            <p><strong>Description:</strong> {description}</p>
+            <p><strong>Qwen_Category:</strong> {qwen_category}</p>
+            <p><strong>GPT_Category:</strong> {gpt_category}</p>
+        </div>
+    </div>
     """
-    content_list[col_idx].append(content)
-
-# 渲染每列内容
-for col_idx, col_content in enumerate(content_list):
-    with columns[col_idx]:
-        for item in col_content:
-            st.markdown(item)
+    st.markdown(content, unsafe_allow_html=True)
+st.markdown('</div>', unsafe_allow_html=True)