Update app.py

app.py

@@ -1,33 +1,6 @@
-# import streamlit as st
-# import json
-
-# with open("qwen2vl_50.json", "r") as file:
-#     qwen_data = json.load(file)
-# with open("gpt4o_50.json", "r") as file:
-#     gpt_data = json.load(file)
-
-# st.title("JSON Data Visualization")
-
-# columns_per_row = 4
-# columns = st.columns(columns_per_row)
-
-# for idx, (qwen, gpt) in enumerate(zip(qwen_data, gpt_data)):
-#     image_name, image_url, description, qwen_category = qwen
-#     _, _, _, gpt_category = gpt
-
-#     col = columns[idx % columns_per_row]  # 按列循环分配
-#     with col:
-#         st.subheader(f"{image_name}")
-#         st.image(image_url, caption=description, use_column_width=True)
-#         st.markdown(f"**Description:** {description}")
-#         st.markdown(f"**Qwen_Category:** {qwen_category}")
-#         st.markdown(f"**GPT_Category:** {gpt_category}")
-#         st.markdown("---")
-
 import streamlit as st
 import json
 
-# 加载数据
 with open("qwen2vl_50.json", "r") as file:
     qwen_data = json.load(file)
 with open("gpt4o_50.json", "r") as file:
@@ -35,49 +8,19 @@ with open("gpt4o_50.json", "r") as file:
 
 st.title("JSON Data Visualization")
 
-# 定义 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)
+columns_per_row = 4
+columns = st.columns(columns_per_row)
 
-# 渲染内容
-st.markdown('<div class="row">', unsafe_allow_html=True)
-for qwen, gpt in zip(qwen_data, gpt_data):
+for idx, (qwen, gpt) in enumerate(zip(qwen_data, gpt_data)):
     image_name, image_url, description, qwen_category = qwen
     _, _, _, gpt_category = gpt
 
-    content = f"""
-    <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>
-    """
-    st.markdown(content, unsafe_allow_html=True)
-st.markdown('</div>', unsafe_allow_html=True)
+    col = columns[idx % columns_per_row]  # 按列循环分配
+    with col:
+        st.subheader(f"{image_name}")
+        st.image(image_url, caption=description, use_column_width=True)
+        st.markdown(f"**Description:** {description}")
+        st.markdown(f"**Qwen_Category:** {qwen_category}")
+        st.markdown(f"**GPT_Category:** {gpt_category}")
+        st.markdown("---")
+