pagination fix

app.py

@@ -208,7 +208,13 @@ def build_story_outputs():
 
 
 # =========================================================
-# CUSTOM CSS
+# PAGINATION CONFIG
+# =========================================================
+STORIES_PER_PAGE = 20
+
+
+# =========================================================
+# CSS
 # =========================================================
 CUSTOM_CSS = """
 :root {
@@ -222,21 +228,53 @@ CUSTOM_CSS = """
   --accent-2: #0ea5e9;
   --shadow: 0 8px 24px rgba(0,0,0,0.06);
 }
+
+html, body {
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+  overflow-x: hidden !important;
+}
+
 .gradio-container {
   max-width: 100% !important;
   width: 100% !important;
+  margin: 0 !important;
   padding-left: 16px !important;
   padding-right: 16px !important;
 }
+
+.gradio-container > .main,
+.gradio-container .main {
+  max-width: 100% !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
 body, .gradio-container {
   background:
     radial-gradient(circle at top left, rgba(124,156,255,0.16), transparent 25%),
     radial-gradient(circle at top right, rgba(144,224,239,0.10), transparent 20%),
     linear-gradient(180deg, #0a0f1d, #0e1422 45%, #0b1020);
 }
+
 .page-wrap {
+  width: 100%;
+  max-width: 100%;
   padding: 6px 4px 30px 4px;
+  box-sizing: border-box;
 }
+
+.hero-shell {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 14px;
+  align-items: stretch;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
 .hero {
   display: flex;
   align-items: center;
@@ -246,9 +284,11 @@ body, .gradio-container {
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 28px;
-  margin-bottom: 24px;
   box-shadow: var(--shadow);
+  width: 100%;
+  box-sizing: border-box;
 }
+
 .eyebrow {
   color: var(--accent-2);
   font-size: 12px;
@@ -257,48 +297,91 @@ body, .gradio-container {
   text-transform: uppercase;
   margin-bottom: 8px;
 }
+
 .hero h1 {
   margin: 0;
   color: var(--text);
   font-size: 36px;
   line-height: 1.1;
 }
+
 .hero p {
   margin: 10px 0 0 0;
   color: var(--muted);
   font-size: 16px;
 }
+
 .hero-actions {
-  display:flex;
-  align-items:center;
-  gap:14px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
 }
+
 .hero-stat {
-  min-width: 130px;
+  min-width: 170px;
   text-align: center;
   background: rgba(255,255,255,0.04);
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: 18px;
 }
+
 .stat-num {
   color: var(--text);
   font-size: 34px;
   font-weight: 800;
 }
+
 .stat-label {
   color: var(--muted);
   font-size: 13px;
 }
-.refresh-row button {
-  height: 54px !important;
-  border-radius: 18px !important;
+
+.hero-refresh,
+.hero-refresh button,
+.hero-refresh > button {
+  min-width: 60px !important;
+  width: 60px !important;
+  height: 60px !important;
+  border-radius: 20px !important;
+  padding: 0 !important;
+  font-size: 24px !important;
 }
+
+.pagination-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin: 0 0 22px 0;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.page-indicator {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 10px 16px;
+  box-shadow: var(--shadow);
+  color: var(--text);
+  font-weight: 600;
+}
+
+.page-btn button,
+.page-btn > button {
+  border-radius: 16px !important;
+  min-width: 120px !important;
+  height: 44px !important;
+}
+
 .stories-list {
   display: flex;
   flex-direction: column;
   gap: 22px;
+  width: 100%;
 }
+
 .story-card {
   background: white;
   border: 1px solid var(--border);
@@ -307,7 +390,10 @@ body, .gradio-container {
   box-shadow: var(--shadow);
   backdrop-filter: blur(8px);
   margin-bottom: 22px;
+  width: 100%;
+  box-sizing: border-box;
 }
+
 .story-header {
   display: flex;
   justify-content: space-between;
@@ -315,18 +401,22 @@ body, .gradio-container {
   gap: 18px;
   margin-bottom: 18px;
 }
-.story-sub .prose, .story-sub p {
+
+.story-sub .prose,
+.story-sub p {
   margin: 0 !important;
   color: var(--muted) !important;
   font-size: 13px !important;
   word-break: break-word;
 }
+
 .story-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
 }
+
 .meta-pill {
   display: inline-flex;
   align-items: center;
@@ -340,12 +430,15 @@ body, .gradio-container {
   font-size: 12px;
   font-weight: 600;
   margin-right: 8px;
+  margin-bottom: 8px;
 }
+
 .story-content {
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   gap: 20px;
 }
+
 .story-text,
 .story-visuals {
   background: rgba(255,255,255,0.025);
@@ -353,12 +446,14 @@ body, .gradio-container {
   border-radius: 20px;
   padding: 18px;
 }
+
 .story-text h3,
 .story-visuals h3 {
   margin: 0 0 14px 0;
   color: var(--text);
   font-size: 18px;
 }
+
 .story-markdown .prose,
 .story-markdown .prose p,
 .story-markdown .prose li,
@@ -371,6 +466,7 @@ body, .gradio-container {
 .story-markdown .prose blockquote {
   color: var(--text) !important;
 }
+
 .story-video-wrap video {
   width: 100% !important;
   max-height: 580px !important;
@@ -378,14 +474,17 @@ body, .gradio-container {
   background: #000 !important;
   border: 1px solid var(--border) !important;
 }
+
 .story-gallery {
   min-height: 80px;
 }
+
 .story-gallery .grid-wrap,
 .story-gallery .grid-container,
 .story-gallery .gallery {
   border-radius: 16px !important;
 }
+
 .empty-state {
   background: rgba(255,255,255,0.025);
   border: 1px dashed var(--border);
@@ -393,24 +492,196 @@ body, .gradio-container {
   padding: 22px;
   color: var(--muted);
 }
+
 @media (max-width: 1100px) {
+  .hero-shell {
+    grid-template-columns: 1fr;
+  }
+
   .story-content {
     grid-template-columns: 1fr;
   }
+
   .story-header {
     flex-direction: column;
   }
+
   .story-meta {
     justify-content: flex-start;
   }
+
   .hero {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .hero-refresh,
+  .hero-refresh button,
+  .hero-refresh > button {
+    width: 100% !important;
+  }
 }
 """
 
 
+# =========================================================
+# OUTPUT BUILDER
+# =========================================================
+def build_story_outputs(page=1):
+    stories = collect_stories()
+    total_stories = len(stories)
+    total_pages = max(1, (total_stories + STORIES_PER_PAGE - 1) // STORIES_PER_PAGE)
+
+    try:
+        page = int(page)
+    except Exception:
+        page = 1
+
+    page = max(1, min(page, total_pages))
+
+    start_idx = (page - 1) * STORIES_PER_PAGE
+    end_idx = start_idx + STORIES_PER_PAGE
+    page_stories = stories[start_idx:end_idx]
+
+    if not stories:
+        hero_html = """
+        <div class="hero">
+          <div>
+            <div class="eyebrow">OhamLab Story Showcase</div>
+            <h1>OhamLab Enabled</h1>
+            <p>No stories found in the dataset repo.</p>
+          </div>
+          <div class="hero-actions">
+            <div class="hero-stat">
+              <div class="stat-num">0</div>
+              <div class="stat-label">Stories Rendered</div>
+            </div>
+          </div>
+        </div>
+        """
+
+        outputs = [
+            gr.update(value=hero_html),
+
+            gr.update(value="Page 1 of 1"),
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+
+            gr.update(value="Page 1 of 1"),
+            gr.update(interactive=False),
+            gr.update(interactive=False),
+        ]
+
+        for _ in range(STORIES_PER_PAGE):
+            outputs.extend([
+                gr.update(visible=False),
+                gr.update(value=""),
+                gr.update(value=""),
+                gr.update(value=""),
+                gr.update(value=None, visible=False),
+                gr.update(value=""),
+                gr.update(value=[], visible=False),
+            ])
+
+        return outputs
+
+    hero_html = f"""
+    <div class="hero">
+      <div>
+        <div class="eyebrow">OhamLab Story Showcase</div>
+        <h1>OhamLab Enabled</h1>
+        <p>Latest generated stories, images, and videos from the dataset repo.</p>
+      </div>
+      <div class="hero-actions">
+        <div class="hero-stat">
+          <div class="stat-num">{total_stories}</div>
+          <div class="stat-label">Stories Rendered</div>
+        </div>
+      </div>
+    </div>
+    """
+
+    outputs = [
+        gr.update(value=hero_html),
+
+        # Top pagination
+        gr.update(value=f"Page {page} of {total_pages}"),
+        gr.update(interactive=page > 1),
+        gr.update(interactive=page < total_pages),
+
+        # Bottom pagination
+        gr.update(value=f"Page {page} of {total_pages}"),
+        gr.update(interactive=page > 1),
+        gr.update(interactive=page < total_pages),
+    ]
+
+    for idx in range(STORIES_PER_PAGE):
+        if idx < len(page_stories):
+            story = page_stories[idx]
+            story_md = download_markdown(story["markdown_path"])
+            video_path = download_repo_file(story["video_path"]) if story["video_path"] else None
+            image_paths = [download_repo_file(p) for p in story["image_paths"]]
+            image_paths = [p for p in image_paths if p]
+
+            title_md = f"## {story['title']}"
+            sub_md = story["folder"]
+            meta_html = (
+                f"<span class='meta-pill'>{format_ts(story['timestamp'])}</span>"
+                f"<span class='meta-pill'>{len(story['image_paths'])} images</span>"
+                f"<span class='meta-pill'>{'Theme' if story['csv_path'] else 'No Theme'}</span>"
+            )
+
+            outputs.extend([
+                gr.update(visible=True),
+                gr.update(value=title_md),
+                gr.update(value=sub_md),
+                gr.update(value=meta_html),
+                gr.update(value=video_path, visible=bool(video_path)),
+                gr.update(value=story_md),
+                gr.update(value=image_paths, visible=bool(image_paths)),
+            ])
+        else:
+            outputs.extend([
+                gr.update(visible=False),
+                gr.update(value=""),
+                gr.update(value=""),
+                gr.update(value=""),
+                gr.update(value=None, visible=False),
+                gr.update(value=""),
+                gr.update(value=[], visible=False),
+            ])
+
+    return outputs
+
+
+def load_first_page():
+    return [gr.update(value=1)] + build_story_outputs(1)
+
+
+def refresh_to_first_page():
+    return [gr.update(value=1)] + build_story_outputs(1)
+
+
+def go_prev_page(page):
+    try:
+        page = int(page)
+    except Exception:
+        page = 1
+    new_page = max(1, page - 1)
+    return [gr.update(value=new_page)] + build_story_outputs(new_page)
+
+
+def go_next_page(page):
+    stories = collect_stories()
+    total_pages = max(1, (len(stories) + STORIES_PER_PAGE - 1) // STORIES_PER_PAGE)
+    try:
+        page = int(page)
+    except Exception:
+        page = 1
+    new_page = min(total_pages, page + 1)
+    return [gr.update(value=new_page)] + build_story_outputs(new_page)
+
+
 # =========================================================
 # UI
 # =========================================================
@@ -419,15 +690,23 @@ with gr.Blocks(
     theme=gr.themes.Soft(),
     css=CUSTOM_CSS,
 ) as demo:
+    page_state = gr.State(1)
+
     with gr.Column(elem_classes=["page-wrap"]):
-        with gr.Row(elem_classes=["refresh-row"]):
+        with gr.Row(elem_classes=["hero-shell"]):
             hero_html = gr.HTML()
-            refresh_btn = gr.Button("Refresh Stories", variant="primary", scale=0)
+            refresh_btn = gr.Button("↻", variant="secondary", elem_classes=["hero-refresh"], scale=0)
+
+        # TOP pagination
+        with gr.Row(elem_classes=["pagination-wrap"]):
+            prev_btn = gr.Button("← Previous", variant="secondary", elem_classes=["page-btn"], scale=0)
+            page_info = gr.Markdown("Page 1 of 1", elem_classes=["page-indicator"])
+            next_btn = gr.Button("Next →", variant="secondary", elem_classes=["page-btn"], scale=0)
 
         with gr.Column(elem_classes=["stories-list"]):
             card_components = []
 
-            for _ in range(20):
+            for _ in range(STORIES_PER_PAGE):
                 with gr.Column(visible=False, elem_classes=["story-card"]) as card:
                     with gr.Row(elem_classes=["story-header"]):
                         with gr.Column(scale=6):
@@ -464,18 +743,58 @@ with gr.Blocks(
                     gallery_comp,
                 ])
 
-    all_outputs = [hero_html] + card_components
+        # BOTTOM pagination
+        with gr.Row(elem_classes=["pagination-wrap"]):
+            prev_btn_bottom = gr.Button("← Previous", variant="secondary", elem_classes=["page-btn"], scale=0)
+            page_info_bottom = gr.Markdown("Page 1 of 1", elem_classes=["page-indicator"])
+            next_btn_bottom = gr.Button("Next →", variant="secondary", elem_classes=["page-btn"], scale=0)
+
+    all_outputs = [
+        hero_html,
+
+        page_info,
+        prev_btn,
+        next_btn,
+
+        page_info_bottom,
+        prev_btn_bottom,
+        next_btn_bottom,
+    ] + card_components
 
     demo.load(
-        fn=build_story_outputs,
+        fn=load_first_page,
         inputs=[],
-        outputs=all_outputs,
+        outputs=[page_state] + all_outputs,
     )
 
     refresh_btn.click(
-        fn=build_story_outputs,
+        fn=refresh_to_first_page,
         inputs=[],
-        outputs=all_outputs,
+        outputs=[page_state] + all_outputs,
+    )
+
+    prev_btn.click(
+        fn=go_prev_page,
+        inputs=[page_state],
+        outputs=[page_state] + all_outputs,
+    )
+
+    next_btn.click(
+        fn=go_next_page,
+        inputs=[page_state],
+        outputs=[page_state] + all_outputs,
+    )
+
+    prev_btn_bottom.click(
+        fn=go_prev_page,
+        inputs=[page_state],
+        outputs=[page_state] + all_outputs,
+    )
+
+    next_btn_bottom.click(
+        fn=go_next_page,
+        inputs=[page_state],
+        outputs=[page_state] + all_outputs,
     )
 
-demo.launch(share=True )
+demo.launch(share=True)