Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,6 +1,8 @@
 # app.py
 import json
+import re
 from pathlib import Path
+from urllib.parse import urlparse
 import streamlit as st
 
 # ──────────────────────────────────────────────────────────────────────────────
@@ -33,32 +35,117 @@ if "show_counts" not in st.session_state:
     st.session_state.show_counts = {task: DEFAULT_CHUNK for task in DATA_DIRS}
 
 # ──────────────────────────────────────────────────────────────────────────────
-# Load manifest (GitHub RAW URLs)
+# Helpers: natural sorting for ids and filenames
+# ──────────────────────────────────────────────────────────────────────────────
+_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
+
+def _basename_from_url(url: str) -> str:
+    try:
+        return Path(urlparse(url).path).name
+    except Exception:
+        return url
+
+def _sorted_urls(urls):
+    return sorted(urls, key=lambda u: _natural_key(_basename_from_url(u)))
+
+# ──────────────────────────────────────────────────────────────────────────────
+# Load manifest (local file or baked into Space)
 # ──────────────────────────────────────────────────────────────────────────────
 @st.cache_data(show_spinner=False)
 def load_manifest():
     with open(MANIFEST_PATH, "r", encoding="utf-8") as f:
         man = json.load(f)
-    items = man["items"]
+    items = man.get("items", [])
     per_task = {t: [] for t in DATA_DIRS}
     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"):
+            it["model_output_urls"] = _sorted_urls(it["model_output_urls"])
+
         per_task.setdefault(it.get("task", "Unknown"), []).append(it)
         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))
 
 # ──────────────────────────────────────────────────────────────────────────────
-# Image grid
+# Stable image grid
 # ──────────────────────────────────────────────────────────────────────────────
-def _display_images(urls, caption_prefix="", max_per_row=3):
+def _display_images(urls, caption_prefix="", max_per_row=3, fixed_height_px=None):
     if not urls:
         st.write("No images found.")
         return
-    cols = st.columns(min(len(urls), max_per_row))
+
+    # 3 equal columns, pin to top so text doesn’t jiggle vertically
+    cols = st.columns([1, 1, 1], vertical_alignment="top")
     for i, url in enumerate(urls):
-        with cols[i % max_per_row]:
-            st.image(url, caption=f"{caption_prefix} {Path(url).name}", use_container_width=True)
+        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)
+
+# ──────────────────────────────────────────────────────────────────────────────
+# Global CSS to reduce “vibrating” / layout reflow
+# ──────────────────────────────────────────────────────────────────────────────
+def _inject_css(fixed_height_px: int | None):
+    css = f"""
+    <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 {{
+        width: 100%;
+        height: auto;
+        object-fit: contain;
+        display: block;
+      }}
+
+      /* Smooth out font jank on Spaces (fonts can swap) */
+      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);
+      }}
+    </style>
+    """
+    st.markdown(css, unsafe_allow_html=True)
 
 # ──────────────────────────────────────────────────────────────────────────────
 # App
@@ -67,21 +154,25 @@ def main():
     st.title("🖼️ ImagenHub2 Data Visualization")
     st.markdown("Each task starts with **10** items — click **Show more** to load **+10**.")
 
-    # Load manifest first to extract available topics
-    with st.spinner("Loading manifest…"):
-        per_task, all_topics = load_manifest()
-
-    # Sidebar
+    # Sidebar (put toggles before we render content)
     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    = st.sidebar.multiselect("Select Topics", all_topics, default=[])
+    topic_filter    = st.sidebar.text_input("Filter by topic id (exact match, optional)", "")
     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):
@@ -92,11 +183,11 @@ def main():
 
             # Apply filters
             def _match(it):
-                sq = search_query.lower()
-                if search_query and (sq not in it.get("prompt", "").lower()
-                                     and sq not in it.get("prompt_refined", "").lower()):
+                sq = search_query.strip().lower()
+                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", "") not in topic_filter:
+                if topic_filter and it.get("topic", "") != topic_filter:
                     return False
                 if subtopic_filter and it.get("subtopic", "") != subtopic_filter:
                     return False
@@ -113,7 +204,7 @@ def main():
                 for it in batch:
                     header = f"**{it.get('item_id','?')}** — {it.get('topic','Unknown')} / {it.get('subtopic','Unknown')}"
                     with st.expander(header, expanded=False):
-                        c1, c2, c3 = st.columns(3)
+                        c1, c2, c3 = st.columns([1,1,1], vertical_alignment="top")
                         with c1: st.write(f"**Task:** {it.get('task','Unknown')}")
                         with c2: st.write(f"**Topic:** {it.get('topic','Unknown')}")
                         with c3: st.write(f"**Subtopic:** {it.get('subtopic','Unknown')}")
@@ -131,10 +222,10 @@ def main():
 
                         if cond_urls:
                             st.write("**Condition Images:**")
-                            _display_images(cond_urls, "Condition")
+                            _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")
+                            _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