Update app.py

app.py

@@ -156,31 +156,36 @@ def download_markdown(path: str) -> str:
 
 def make_story_card(story: dict) -> str:
     title = html.escape(story["title"])
-
-    # ✅ Convert timestamp → readable time
-    created_time = format_ts(story["timestamp"])
+    subtitle = html.escape(story["folder"])
+    created = html.escape(format_ts(story["timestamp"]))
 
     story_md = download_markdown(story["markdown_path"])
     story_md_html = gr.Markdown().postprocess(story_md)
 
-    # 🎬 Video
     video_html = ""
     if story["video_path"]:
         video_url = build_resolve_url(story["video_path"])
         video_html = f"""
-        <video class="story-video" controls preload="metadata">
-            <source src="{video_url}" type="video/mp4">
-        </video>
+        <div class="story-video-wrap">
+            <video class="story-video" controls preload="metadata">
+                <source src="{video_url}" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
         """
 
-    # 🖼 Images
     gallery_html = ""
     if story["image_paths"]:
         imgs = []
         for img_path in story["image_paths"]:
             img_url = build_resolve_url(img_path)
+            img_name = html.escape(os.path.basename(img_path))
             imgs.append(
-                f'<img src="{img_url}" class="story-image" loading="lazy">'
+                f"""
+                <a href="{img_url}" target="_blank" class="story-image-link">
+                    <img src="{img_url}" alt="{img_name}" class="story-image" loading="lazy">
+                </a>
+                """
             )
         gallery_html = f"""
         <div class="story-gallery">
@@ -188,29 +193,44 @@ def make_story_card(story: dict) -> str:
         </div>
         """
 
+    dataset_badge = ""
+    if story["csv_path"]:
+        csv_url = build_resolve_url(story["csv_path"])
+        dataset_badge = (
+            f'<a class="meta-pill" href="{csv_url}" target="_blank">dataset.csv</a>'
+        )
+
     return f"""
     <section class="story-card">
-        
-        <!-- ✅ TITLE -->
-        <h2 class="story-title">{title}</h2>
-
-        <!-- ✅ NEW: GENERATED TIME -->
-        <div class="story-time">Generated on: {created_time}</div>
+        <div class="story-header">
+            <div>
+                <h2>{title}</h2>
+                <div class="story-sub">{subtitle}</div>
+            </div>
+            <div class="story-meta">
+                <span class="meta-pill">{created}</span>
+                {dataset_badge}
+                <span class="meta-pill">{len(story["image_paths"])} images</span>
+            </div>
+        </div>
 
         {video_html}
 
         <div class="story-content">
             <div class="story-text">
-                {story_md_html}
+                <h3>Story</h3>
+                <div class="story-markdown">{story_md_html}</div>
             </div>
 
             <div class="story-visuals">
-                {gallery_html}
+                <h3>Images</h3>
+                {gallery_html or '<div class="empty-box">No images found.</div>'}
             </div>
         </div>
-
     </section>
     """
+
+
 def build_showcase_html():
     stories = collect_stories()
 
@@ -229,7 +249,7 @@ def build_showcase_html():
         <div class="hero">
             <div>
                 <div class="eyebrow">Story Showcase</div>
-                <h1>OhamLab Story Factory</h1>
+                <h1>LTX Story Factory</h1>
                 <p>Latest generated stories, images, and videos from the dataset repo.</p>
             </div>
             <div class="hero-stat">
@@ -254,176 +274,244 @@ def refresh_showcase():
 # =========================================================
 CUSTOM_CSS = """
 :root {
-  --bg: #f5f7fb;
-  --panel: #ffffff;
-  --panel-2: #f9fafc;
-  --border: rgba(0,0,0,0.08);
-  --text: #1a1f36;
-  --muted: #6b7280;
-  --accent: #2563eb;
-  --accent-2: #0ea5e9;
-  --shadow: 0 8px 24px rgba(0,0,0,0.06);
+  --bg: #0b1020;
+  --panel: #121a2b;
+  --panel-2: #182339;
+  --border: rgba(255,255,255,0.08);
+  --text: #eef2ff;
+  --muted: #a9b4d0;
+  --accent: #7c9cff;
+  --accent-2: #90e0ef;
+  --shadow: 0 10px 30px rgba(0,0,0,0.25);
+}
+
+.gradio-container {
+  max-width: 1500px !important;
 }
 
 body, .gradio-container {
-  background: var(--bg);
+  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 {
   padding: 6px 4px 30px 4px;
 }
 
-/* ================= HERO ================= */
 .hero {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
-  background: linear-gradient(135deg, #e8f0ff, #f0f9ff);
+  background: linear-gradient(135deg, rgba(124,156,255,0.18), rgba(144,224,239,0.10));
   border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 24px;
-  margin-bottom: 20px;
+  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.1em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
+  margin-bottom: 8px;
 }
 
 .hero h1 {
   margin: 0;
   color: var(--text);
-  font-size: 32px;
+  font-size: 36px;
+  line-height: 1.1;
 }
 
 .hero p {
-  margin: 8px 0 0 0;
+  margin: 10px 0 0 0;
   color: var(--muted);
+  font-size: 16px;
 }
 
 .hero-stat {
-  min-width: 120px;
+  min-width: 130px;
   text-align: center;
-  background: white;
+  background: rgba(255,255,255,0.04);
   border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 16px;
+  border-radius: 20px;
+  padding: 18px;
 }
 
 .stat-num {
-  font-size: 30px;
-  font-weight: 700;
   color: var(--text);
+  font-size: 34px;
+  font-weight: 800;
 }
 
 .stat-label {
   color: var(--muted);
-  font-size: 12px;
+  font-size: 13px;
+}
+
+.stories-list {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
 }
 
-/* ================= CARD ================= */
 .story-card {
-  background: white;
+  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
   border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 20px;
+  border-radius: 24px;
+  padding: 22px;
   box-shadow: var(--shadow);
+  backdrop-filter: blur(8px);
 }
 
 .story-header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 16px;
+  align-items: flex-start;
+  gap: 18px;
+  margin-bottom: 18px;
 }
 
 .story-header h2 {
   margin: 0;
   color: var(--text);
+  font-size: 28px;
+  line-height: 1.2;
 }
 
 .story-sub {
   color: var(--muted);
-  font-size: 12px;
+  font-size: 13px;
+  margin-top: 6px;
+  word-break: break-word;
 }
 
 .story-meta {
   display: flex;
-  gap: 6px;
   flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
 }
 
 .meta-pill {
-  background: #eef2ff;
-  border: 1px solid #dbeafe;
-  color: #1e3a8a;
+  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: 6px 10px;
-  font-size: 11px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.story-video-wrap {
+  margin-bottom: 20px;
 }
 
-/* ================= VIDEO ================= */
 .story-video {
   width: 100%;
-  border-radius: 14px;
+  max-height: 580px;
+  border-radius: 18px;
+  background: #000;
   border: 1px solid var(--border);
-  margin-bottom: 16px;
 }
 
-/* ================= CONTENT ================= */
 .story-content {
   display: grid;
-  grid-template-columns: 1.2fr 0.8fr;
-  gap: 16px;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 20px;
 }
 
 .story-text,
 .story-visuals {
-  background: var(--panel-2);
+  background: rgba(255,255,255,0.025);
   border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 16px;
+  border-radius: 20px;
+  padding: 18px;
 }
 
 .story-text h3,
 .story-visuals h3 {
-  margin: 0 0 10px 0;
+  margin: 0 0 14px 0;
+  color: var(--text);
+  font-size: 18px;
 }
 
 .story-markdown {
   color: var(--text);
-  line-height: 1.6;
+  line-height: 1.7;
+  font-size: 15px;
+}
+
+.story-markdown p,
+.story-markdown li,
+.story-markdown h1,
+.story-markdown h2,
+.story-markdown h3,
+.story-markdown h4,
+.story-markdown h5,
+.story-markdown h6,
+.story-markdown blockquote {
+  color: var(--text) !important;
 }
 
-/* ================= IMAGES ================= */
 .story-gallery {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 12px;
+}
+
+.story-image-link {
+  display: block;
+  text-decoration: none;
 }
 
 .story-image {
   width: 100%;
-  height: 140px;
+  height: 180px;
   object-fit: cover;
-  border-radius: 12px;
+  border-radius: 16px;
   border: 1px solid var(--border);
-  transition: 0.2s;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  background: rgba(255,255,255,0.02);
 }
 
 .story-image:hover {
-  transform: scale(1.03);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
+}
+
+.empty-box,
+.empty-state {
+  background: rgba(255,255,255,0.025);
+  border: 1px dashed var(--border);
+  border-radius: 18px;
+  padding: 22px;
+  color: var(--muted);
 }
 
-/* ================= MOBILE ================= */
-@media (max-width: 900px) {
+@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;
@@ -432,12 +520,11 @@ body, .gradio-container {
 """
 
 
-
 # =========================================================
 # UI
 # =========================================================
 with gr.Blocks(
-    title="Story Factory Showcase",
+    title="LTX Story Factory Showcase",
     theme=gr.themes.Soft(),
     css=CUSTOM_CSS,
 ) as demo: