Update src/streamlit_app.py

src/streamlit_app.py

@@ -94,8 +94,7 @@ def _display_images(urls, caption_prefix="", max_per_row=3, fixed_height_px=None
         st.write("No images found.")
         return
 
-    # 3 equal columns, pin to top so text doesn’t jiggle vertically
-    cols = st.columns([1, 1, 1], vertical_alignment="top")
+    cols = st.columns(max_per_row, vertical_alignment="top")
     for i, url in enumerate(urls):
         col = cols[i % max_per_row]
         with col:
@@ -118,31 +117,22 @@ def _display_images(urls, caption_prefix="", max_per_row=3, fixed_height_px=None
 # ──────────────────────────────────────────────────────────────────────────────
 # Global CSS to reduce “vibrating” / layout reflow
 # ──────────────────────────────────────────────────────────────────────────────
-def _inject_css(fixed_height_px: int | None):
-    css = f"""
+def _inject_css(_fixed_height_px: int | None):
+    css = """
     <style>
-      /* Keep base container tighter so jumps feel smaller */
-      .block-container {{ padding-top: 0.75rem; }}
-
-      /* Images rendered via st.image: constrain to container width and avoid overflow */
-      [data-testid="stImage"] img {{
+      .block-container { padding-top: 0.75rem; }
+      [data-testid="stImage"] img {
         width: 100%;
         height: auto;
         object-fit: contain;
         display: block;
-      }}
-
-      /* Smooth out font jank on Spaces (fonts can swap) */
-      html * {{
+      }
+      html * {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         text-rendering: optimizeLegibility;
-      }}
-
-      /* When using fixed frames (custom HTML), give them a subtle background so size is obvious */
-      .img-frame {{
-        background: rgba(0,0,0,0.03);
-      }}
+      }
+      .img-frame { background: rgba(0,0,0,0.03); }
     </style>
     """
     st.markdown(css, unsafe_allow_html=True)
@@ -154,25 +144,39 @@ def main():
     st.title("🖼️ ImagenHub2 Data Visualization")
     st.markdown("Each task starts with **10** items — click **Show more** to load **+10**.")
 
-    # Sidebar (put toggles before we render content)
+    # Load manifest first (to get topic list)
+    with st.spinner("Loading manifest…"):
+        per_task, _all_topics = load_manifest()
+
+    # Sidebar
     st.sidebar.header("Filters")
-    fixed_height_on = st.sidebar.toggle("Stabilize grid with fixed image height", value=True, help="Pre-allocate space for images to prevent page ‘vibrating’.")
-    fixed_height_px = st.sidebar.number_input("Fixed image height (px)", min_value=120, max_value=1200, value=320, step=20, disabled=not fixed_height_on)
+    fixed_height_on = st.sidebar.toggle(
+        "Stabilize grid with fixed image height",
+        value=True,
+        help="Pre-allocate space for images to prevent page ‘vibrating’."
+    )
+    fixed_height_px = st.sidebar.number_input(
+        "Fixed image height (px)",
+        min_value=120, max_value=1200, value=320, step=20,
+        disabled=not fixed_height_on
+    )
     _inject_css(fixed_height_px if fixed_height_on else None)
 
     selected_tasks = st.sidebar.multiselect("Select Tasks", DATA_DIRS, default=DATA_DIRS)
     search_query    = st.sidebar.text_input("🔍 Search in prompts", "")
-    topic_filter    = st.sidebar.text_input("Filter by topic id (exact match, optional)", "")
+    # Topic filter behaves like task filter (multiselect)
+    topic_filter    = st.sidebar.multiselect(
+        "Select Topics",
+        _all_topics,
+        default=[],
+        help="Filter items by one or more topic IDs."
+    )
     subtopic_filter = st.sidebar.text_input("Filter by subtopic (optional)", "")
 
     st.sidebar.header("Task Descriptions")
     for t in selected_tasks:
         st.sidebar.write(f"**{t}**: {TASK_DESCRIPTIONS.get(t, '')}")
 
-    # Load manifest
-    with st.spinner("Loading manifest…"):
-        per_task, _all_topics = load_manifest()
-
     # Tabs per selected task
     tabs = st.tabs(selected_tasks) if selected_tasks else []
     for task, tab in zip(selected_tasks, tabs):
@@ -187,7 +191,7 @@ def main():
                 if sq and (sq not in it.get("prompt", "").lower()
                            and sq not in it.get("prompt_refined", "").lower()):
                     return False
-                if topic_filter and it.get("topic", "") != topic_filter:
+                if topic_filter and it.get("topic", "") not in topic_filter:
                     return False
                 if subtopic_filter and it.get("subtopic", "") != subtopic_filter:
                     return False
@@ -222,10 +226,16 @@ def main():
 
                         if cond_urls:
                             st.write("**Condition Images:**")
-                            _display_images(cond_urls, "Condition", max_per_row=3, fixed_height_px=(fixed_height_px if fixed_height_on else None))
+                            _display_images(
+                                cond_urls, "Condition", max_per_row=3,
+                                fixed_height_px=(fixed_height_px if fixed_height_on else None)
+                            )
                         if model_urls:
                             st.write("**Model Output:**")
-                            _display_images(model_urls, "Model", max_per_row=3, fixed_height_px=(fixed_height_px if fixed_height_on else None))
+                            _display_images(
+                                model_urls, "Model", max_per_row=3,
+                                fixed_height_px=(fixed_height_px if fixed_height_on else None)
+                            )
                 st.divider()
 
             # Pagination controls