Update app.py

app.py

@@ -10,7 +10,7 @@ from huggingface_hub import HfApi, hf_hub_download
 # =========================================================
 REPO_ID = os.getenv("REPO_ID")
 REPO_TYPE = "dataset"
-HF_TOKEN = os.getenv("HF_TOKEN")  # required for private repos
+HF_TOKEN = os.getenv("HF_TOKEN")
 
 api = HfApi(token=HF_TOKEN)
 
@@ -19,8 +19,6 @@ if not REPO_ID:
 if not HF_TOKEN:
     raise RuntimeError("HF_TOKEN environment variable is not set")
 
-# IMPORTANT:
-# Gradio accepts files from /tmp, so force HF downloads there
 LOCAL_CACHE_DIR = "/tmp/story_showcase"
 os.makedirs(LOCAL_CACHE_DIR, exist_ok=True)
 
@@ -36,12 +34,10 @@ def format_ts(ts: int) -> str:
 
 
 def natural_story_title(folder_name: str) -> str:
-    # job_1775798146_Sunbeam_s_Secret -> Sunbeam s Secret
     m = re.match(r"job_(\d+)_(.+)$", folder_name)
     if not m:
         return folder_name.replace("_", " ")
-    raw = m.group(2).replace("_", " ").strip()
-    return raw
+    return m.group(2).replace("_", " ").strip()
 
 
 def extract_job_ts(folder_name: str) -> int:
@@ -50,23 +46,17 @@ def extract_job_ts(folder_name: str) -> int:
 
 
 def list_repo_files():
-    """
-    Return all file paths from the dataset repo.
-    """
     files = []
-
     tree = api.list_repo_tree(
         repo_id=REPO_ID,
         repo_type=REPO_TYPE,
         recursive=True,
         expand=True,
     )
-
     for item in tree:
         path = getattr(item, "path", None)
         if path and not path.endswith("/"):
             files.append(path)
-
     return files
 
 
@@ -105,7 +95,7 @@ def collect_stories():
         elif "/images/" in lower and lower.endswith((".png", ".jpg", ".jpeg", ".webp")):
             stories[folder]["image_paths"].append(path)
 
-    for _, story in stories.items():
+    for story in stories.values():
         story["image_paths"] = sorted(
             story["image_paths"],
             key=lambda p: [
@@ -114,36 +104,7 @@ def collect_stories():
             ]
         )
 
-    sorted_stories = sorted(
-        stories.values(),
-        key=lambda x: x["timestamp"],
-        reverse=True,
-    )
-
-    return sorted_stories
-
-
-def get_story_by_folder(folder_name: str):
-    stories = collect_stories()
-    return next((s for s in stories if s["folder"] == folder_name), None)
-
-
-def download_markdown(path: str) -> str:
-    if not path:
-        return "_No story markdown found._"
-
-    try:
-        local_path = hf_hub_download(
-            repo_id=REPO_ID,
-            filename=path,
-            repo_type=REPO_TYPE,
-            token=HF_TOKEN,
-            local_dir=LOCAL_CACHE_DIR,
-        )
-        with open(local_path, "r", encoding="utf-8") as f:
-            return f.read()
-    except Exception as e:
-        return f"_Failed to load markdown: {e}_"
+    return sorted(stories.values(), key=lambda x: x["timestamp"], reverse=True)
 
 
 def download_repo_file(path: str):
@@ -162,84 +123,88 @@ def download_repo_file(path: str):
         return None
 
 
-def download_repo_images(paths):
-    out = []
-    for path in paths:
+def download_markdown(path: str) -> str:
+    if not path:
+        return "_No story markdown found._"
+    try:
         local_path = download_repo_file(path)
-        if local_path:
-            out.append(local_path)
-    return out
-
-
-def load_story(folder_name: str):
-    story = get_story_by_folder(folder_name)
-
-    if not story:
-        return (
-            "Story not found.",
-            None,
-            [],
-            "Unknown",
-            "Unknown date",
-            "0 images • No Theme",
-        )
-
-    story_md = download_markdown(story["markdown_path"])
-    video_value = download_repo_file(story["video_path"]) if story["video_path"] else None
-    gallery_value = download_repo_images(story["image_paths"])
-    theme_text = "Theme" if story["csv_path"] else "No Theme"
-
-    return (
-        story_md,
-        video_value,
-        gallery_value,
-        story["title"],
-        format_ts(story["timestamp"]),
-        f"{len(story['image_paths'])} images • {theme_text}",
-    )
+        if not local_path:
+            return "_Failed to load markdown._"
+        with open(local_path, "r", encoding="utf-8") as f:
+            return f.read()
+    except Exception as e:
+        return f"_Failed to load markdown: {e}_"
 
 
-def initialize():
+# =========================================================
+# BUILD UI DATA
+# =========================================================
+def build_story_outputs():
     stories = collect_stories()
 
     if not stories:
-        return (
-            gr.update(choices=[], value=None),
-            "No stories found",
-            f"Last refreshed: {datetime.now().strftime('%d %b %Y, %I:%M:%S %p')}",
-            "No story found",
-            "Unknown",
-            "No content",
-            None,
-            [],
-        )
-
-    choices = [(story["title"], story["folder"]) for story in stories]
-    first_folder = stories[0]["folder"]
-
-    story_md, video_value, gallery_value, title, created, meta = load_story(first_folder)
-
-    return (
-        gr.update(choices=choices, value=first_folder),
-        f"Showing {len(stories)} stories",
-        f"Last refreshed: {datetime.now().strftime('%d %b %Y, %I:%M:%S %p')}",
-        title,
-        f"{created} • {meta}",
-        story_md,
-        video_value,
-        gallery_value,
-    )
-
+        return [
+            gr.update(value="<div class='page-wrap'><div class='empty-state'><h2>No stories found</h2><p>Could not find any <code>job_*</code> folders in the repo.</p></div></div>")
+        ]
+
+    hero_html = f"""
+    <div class="page-wrap">
+      <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">{len(stories)}</div>
+            <div class="stat-label">Stories</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    """
 
-def on_story_change(folder_name: str):
-    story_md, video_value, gallery_value, title, created, meta = load_story(folder_name)
-    return (
-        title,
-        f"{created} • {meta}",
-        story_md,
-        video_value,
-        gallery_value,
-    )
+    outputs = [gr.update(value=hero_html)]
+
+    max_cards = 20
+    for idx in range(max_cards):
+        if idx < len(stories):
+            story = 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),          # card container
+                gr.update(value=title_md),        # title
+                gr.update(value=sub_md),          # subtitle
+                gr.update(value=meta_html),       # meta
+                gr.update(value=video_path, visible=bool(video_path)),   # video
+                gr.update(value=story_md),        # story markdown
+                gr.update(value=image_paths, visible=bool(image_paths)), # gallery
+            ])
+        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
 
 
 # =========================================================
@@ -257,32 +222,188 @@ CUSTOM_CSS = """
   --accent-2: #0ea5e9;
   --shadow: 0 8px 24px rgba(0,0,0,0.06);
 }
-
 .gradio-container {
   max-width: 1500px !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);
 }
-
-.story-shell {
+.page-wrap {
+  padding: 6px 4px 30px 4px;
+}
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 28px;
+  margin-bottom: 24px;
+  box-shadow: var(--shadow);
+}
+.eyebrow {
+  color: var(--accent-2);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  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;
+}
+.hero-stat {
+  min-width: 130px;
+  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;
+}
+.stories-list {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.story-card {
   background: white;
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 22px;
   box-shadow: var(--shadow);
+  backdrop-filter: blur(8px);
+  margin-bottom: 22px;
 }
-
-.top-note {
-  color: white;
+.story-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 18px;
+  margin-bottom: 18px;
 }
-
-.meta-text {
-  color: #6b7280;
+.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;
+  justify-content: center;
+  text-decoration: none;
+  color: var(--text);
+  background: rgba(124,156,255,0.12);
+  border: 1px solid rgba(124,156,255,0.25);
+  border-radius: 999px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-right: 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);
+  border: 1px solid var(--border);
+  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,
+.story-markdown .prose h1,
+.story-markdown .prose h2,
+.story-markdown .prose h3,
+.story-markdown .prose h4,
+.story-markdown .prose h5,
+.story-markdown .prose h6,
+.story-markdown .prose blockquote {
+  color: var(--text) !important;
+}
+.story-video-wrap video {
+  width: 100% !important;
+  max-height: 580px !important;
+  border-radius: 18px !important;
+  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);
+  border-radius: 18px;
+  padding: 22px;
+  color: var(--muted);
+}
+@media (max-width: 1100px) {
+  .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;
+  }
 }
 """
 
@@ -295,70 +416,63 @@ with gr.Blocks(
     theme=gr.themes.Soft(),
     css=CUSTOM_CSS,
 ) as demo:
-    with gr.Row():
-        refresh_btn = gr.Button("Refresh Stories", variant="primary")
-        refreshed_at = gr.Markdown("Loading...", elem_classes=["top-note"])
-
-    status_md = gr.Markdown()
-
-    story_selector = gr.Dropdown(
-        label="Stories",
-        choices=[],
-        value=None,
-        interactive=True,
-    )
-
-    with gr.Column(elem_classes=["story-shell"]):
-        title_md = gr.Markdown("## Loading...")
-        meta_md = gr.Markdown("", elem_classes=["meta-text"])
-
-        with gr.Row():
-            with gr.Column(scale=6):
-                story_md = gr.Markdown(label="Story")
-
-            with gr.Column(scale=4):
-                video_comp = gr.Video(label="Video")
-                gallery_comp = gr.Gallery(
-                    label="Images",
-                    columns=3,
-                    height="auto",
-                    preview=True,
-                )
+    with gr.Column(elem_classes=["page-wrap"]):
+        with gr.Row(elem_classes=["refresh-row"]):
+            hero_html = gr.HTML()
+            refresh_btn = gr.Button("Refresh Stories", variant="primary", scale=0)
+
+        with gr.Column(elem_classes=["stories-list"]):
+            card_components = []
+
+            for _ in range(20):
+                with gr.Column(visible=False, elem_classes=["story-card"]) as card:
+                    with gr.Row(elem_classes=["story-header"]):
+                        with gr.Column(scale=6):
+                            title_md = gr.Markdown()
+                            sub_md = gr.Markdown(elem_classes=["story-sub"])
+                        with gr.Column(scale=4):
+                            meta_html = gr.HTML(elem_classes=["story-meta"])
+
+                    video_comp = gr.Video(label=None, visible=False, elem_classes=["story-video-wrap"])
+
+                    with gr.Row(elem_classes=["story-content"]):
+                        with gr.Column(elem_classes=["story-text"]):
+                            gr.Markdown("### Story")
+                            story_md = gr.Markdown(elem_classes=["story-markdown"])
+
+                        with gr.Column(elem_classes=["story-visuals"]):
+                            gr.Markdown("### Images")
+                            gallery_comp = gr.Gallery(
+                                label=None,
+                                columns=4,
+                                height="auto",
+                                preview=True,
+                                visible=False,
+                                elem_classes=["story-gallery"],
+                            )
+
+                card_components.extend([
+                    card,
+                    title_md,
+                    sub_md,
+                    meta_html,
+                    video_comp,
+                    story_md,
+                    gallery_comp,
+                ])
+
+    all_outputs = [hero_html] + card_components
 
     demo.load(
-        fn=initialize,
+        fn=build_story_outputs,
         inputs=[],
-        outputs=[
-            story_selector,
-            status_md,
-            refreshed_at,
-            title_md,
-            meta_md,
-            story_md,
-            video_comp,
-            gallery_comp,
-        ],
+        outputs=all_outputs,
     )
 
     refresh_btn.click(
-        fn=initialize,
+        fn=build_story_outputs,
         inputs=[],
-        outputs=[
-            story_selector,
-            status_md,
-            refreshed_at,
-            title_md,
-            meta_md,
-            story_md,
-            video_comp,
-            gallery_comp,
-        ],
-    )
-
-    story_selector.change(
-        fn=on_story_change,
-        inputs=[story_selector],
-        outputs=[title_md, meta_md, story_md, video_comp, gallery_comp],
+        outputs=all_outputs,
     )
 
 demo.launch()