Update src/streamlit_app.py

src/streamlit_app.py

@@ -31,6 +31,8 @@ TASK_DESCRIPTIONS = {
 }
 
 DEFAULT_CHUNK = 10
+FIXED_HEIGHT_PX = 320  # always stabilized
+
 if "show_counts" not in st.session_state:
     st.session_state.show_counts = {task: DEFAULT_CHUNK for task in DATA_DIRS}
 
@@ -41,13 +43,7 @@ _num_re = re.compile(r"(\d+)")
 
 def _natural_key(s: str):
     parts = _num_re.split(s)
-    out = []
-    for p in parts:
-        if p.isdigit():
-            out.append(int(p))
-        else:
-            out.append(p.lower())
-    return out
+    return [int(p) if p.isdigit() else p.lower() for p in parts]
 
 def _basename_from_url(url: str) -> str:
     try:
@@ -59,7 +55,7 @@ def _sorted_urls(urls):
     return sorted(urls, key=lambda u: _natural_key(_basename_from_url(u)))
 
 # ──────────────────────────────────────────────────────────────────────────────
-# Load manifest (local file or baked into Space)
+# Load manifest
 # ──────────────────────────────────────────────────────────────────────────────
 @st.cache_data(show_spinner=False)
 def load_manifest():
@@ -70,7 +66,6 @@ def load_manifest():
     topics = set()
 
     for it in items:
-        # sort the image url lists inside each item for determinism
         if it.get("cond_image_urls"):
             it["cond_image_urls"] = _sorted_urls(it["cond_image_urls"])
         if it.get("model_output_urls"):
@@ -80,16 +75,14 @@ def load_manifest():
         if it.get("topic"):
             topics.add(it["topic"])
 
-    # sort items within each task by item_id (natural order)
     for t, lst in per_task.items():
         lst.sort(key=lambda it: _natural_key(str(it.get("item_id", ""))))
-
     return per_task, sorted(list(topics))
 
 # ──────────────────────────────────────────────────────────────────────────────
 # Stable image grid
 # ──────────────────────────────────────────────────────────────────────────────
-def _display_images(urls, caption_prefix="", max_per_row=3, fixed_height_px=None):
+def _display_images(urls, caption_prefix="", max_per_row=3):
     if not urls:
         st.write("No images found.")
         return
@@ -98,26 +91,22 @@ def _display_images(urls, caption_prefix="", max_per_row=3, fixed_height_px=None
     for i, url in enumerate(urls):
         col = cols[i % max_per_row]
         with col:
-            if fixed_height_px:
-                # Reserve space and avoid reflow while image loads
-                st.markdown(
-                    f"""
-                    <div class="img-frame" style="height:{fixed_height_px}px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px;">
-                      <img src="{url}" alt="{_basename_from_url(url)}" style="max-height:100%; width:100%; object-fit:contain;" />
-                    </div>
-                    <div class="img-cap" style="font-size:0.85rem; opacity:0.8; margin-top:4px;">
-                      {caption_prefix} {_basename_from_url(url)}
-                    </div>
-                    """,
-                    unsafe_allow_html=True,
-                )
-            else:
-                st.image(url, caption=f"{caption_prefix} {_basename_from_url(url)}", use_container_width=True)
+            st.markdown(
+                f"""
+                <div class="img-frame" style="height:{FIXED_HEIGHT_PX}px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px;">
+                  <img src="{url}" alt="{_basename_from_url(url)}" style="max-height:100%; width:100%; object-fit:contain;" />
+                </div>
+                <div class="img-cap" style="text-align:center; font-size:0.9rem; opacity:0.8; margin-top:6px;">
+                  {caption_prefix} {_basename_from_url(url)}
+                </div>
+                """,
+                unsafe_allow_html=True,
+            )
 
 # ──────────────────────────────────────────────────────────────────────────────
-# Global CSS to reduce “vibrating” / layout reflow
+# Global CSS
 # ──────────────────────────────────────────────────────────────────────────────
-def _inject_css(_fixed_height_px: int | None):
+def _inject_css():
     css = """
     <style>
       .block-container { padding-top: 0.75rem; }
@@ -143,41 +132,23 @@ def _inject_css(_fixed_height_px: int | None):
 def main():
     st.title("🖼️ ImagenHub2 Data Visualization")
     st.markdown("Each task starts with **10** items — click **Show more** to load **+10**.")
+    _inject_css()
 
-    # Load manifest first (to get topic list)
     with st.spinner("Loading manifest…"):
         per_task, _all_topics = load_manifest()
 
-    # Sidebar
+    # Sidebar filters
     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
-    )
-    _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 behaves like task filter (multiselect)
-    topic_filter    = st.sidebar.multiselect(
-        "Select Topics",
-        _all_topics,
-        default=[],
-        help="Filter items by one or more topic IDs."
-    )
+    search_query = st.sidebar.text_input("🔍 Search in prompts", "")
+    topic_filter = st.sidebar.multiselect("Select Topics", _all_topics, default=[])
     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, '')}")
 
-    # Tabs per selected task
+    # Tabs per task
     tabs = st.tabs(selected_tasks) if selected_tasks else []
     for task, tab in zip(selected_tasks, tabs):
         with tab:
@@ -185,7 +156,6 @@ def main():
             limit = st.session_state.show_counts.get(task, DEFAULT_CHUNK)
             all_items = per_task.get(task, [])
 
-            # Apply filters
             def _match(it):
                 sq = search_query.strip().lower()
                 if sq and (sq not in it.get("prompt", "").lower()
@@ -226,16 +196,10 @@ 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")
                         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")
                 st.divider()
 
             # Pagination controls