add free play video

app.py

@@ -1,6 +1,7 @@
 import os
 import math
 import time
+import random
 import gradio as gr
 import pandas as pd
 from datasets import load_dataset
@@ -15,13 +16,11 @@ usage = {}      # session_hash -> (count, start_time)
 
 def quota_guard(fn):
     def wrapper(*args, request: gr.Request = None, **kwargs):
-        # ---- session id ----
         session = request.session_hash if request else "global"
         now = time.time()
 
         count, start = usage.get(session, (0, now))
 
-        # Reset after window
         if now - start > WINDOW:
             count = 0
             start = now
@@ -34,8 +33,6 @@ def quota_guard(fn):
             )
 
         usage[session] = (count + 1, start)
-
-        # IMPORTANT: forward request explicitly
         return fn(*args, request=request, **kwargs)
 
     return wrapper
@@ -55,6 +52,42 @@ if not APP_PASSWORD:
     raise RuntimeError("APP_PASSWORD environment variable not set")
 
 
+# ======================================================
+# YOUTUBE FREE PREVIEW
+# ======================================================
+YOUTUBE_LINKS = [
+    "https://www.youtube.com/watch?v=g30KR9VNXS0",
+    "https://www.youtube.com/watch?v=g30KR9VNXS0",
+    "https://www.youtube.com/watch?v=g30KR9VNXS0",
+    "https://www.youtube.com/watch?v=g30KR9VNXS0",
+    "https://www.youtube.com/watch?v=g30KR9VNXS0",
+]
+
+
+def render_free_videos():
+    picks = random.sample(YOUTUBE_LINKS, 4)
+    cards = []
+
+    for link in picks:
+        vid = link.split("v=")[-1]
+        cards.append(f"""
+        <div class="free-card">
+            <iframe
+                src="https://www.youtube.com/embed/{vid}"
+                allowfullscreen
+                loading="lazy">
+            </iframe>
+        </div>
+        """)
+
+    return f"""
+    <h3>🎬 Free Preview</h3>
+    <div class="free-grid">
+        {''.join(cards)}
+    </div>
+    """
+
+
 # ======================================================
 # LOAD DATASET
 # ======================================================
@@ -64,7 +97,7 @@ df = df[[VIDEO_COL, TEXT_COL, DATE_COL]].dropna().reset_index(drop=True)
 
 
 # ======================================================
-# PAGINATION LOGIC
+# PAGINATION
 # ======================================================
 def render_grid(page, page_size):
     page = int(page)
@@ -74,9 +107,7 @@ def render_grid(page, page_size):
     total_pages = max(1, math.ceil(total_items / page_size))
     page = max(0, min(page, total_pages - 1))
 
-    start = page * page_size
-    end = start + page_size
-    batch = df.iloc[start:end]
+    batch = df.iloc[page * page_size: (page + 1) * page_size]
 
     cards = []
     for _, row in batch.iterrows():
@@ -91,12 +122,8 @@ def render_grid(page, page_size):
         """)
 
     html = f"""
-    <div class="grid">
-        {''.join(cards)}
-    </div>
-    <div class="page-info">
-        Page {page + 1} / {total_pages}
-    </div>
+    <div class="grid">{''.join(cards)}</div>
+    <div class="page-info">Page {page + 1} / {total_pages}</div>
     """
 
     return html, page
@@ -115,21 +142,23 @@ def reset_page(page_size):
 
 
 # ======================================================
-# AUTH GATE (UNCHANGED LOGIC)
+# AUTH
 # ======================================================
 @quota_guard
 def check_password(user_password, request: gr.Request):
     if user_password == APP_PASSWORD:
         html, page = render_grid(0, 5)
         return (
-            gr.update(visible=False),
-            gr.update(visible=True),
+            gr.update(visible=False),  # login box
+            gr.update(visible=False),  # free preview
+            gr.update(visible=True),   # app content
             html,
             page,
             "✅ Access granted"
         )
     else:
         return (
+            gr.update(visible=True),
             gr.update(visible=True),
             gr.update(visible=False),
             "",
@@ -159,24 +188,32 @@ css = """
     border-radius: 12px;
 }
 
-/* ---- Hide Gradio default footer/settings ---- */
-footer,
-.gradio-footer {
+.free-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 16px;
+    margin-top: 12px;
+}
+
+.free-card iframe {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 12px;
+}
+
+/* Hide default footer */
+footer, .gradio-footer {
     display: none !important;
 }
 
-/* ---- Custom OhamLab footer ---- */
 #ohamlab-footer {
     position: fixed;
     bottom: 0;
-    left: 0;
     width: 100%;
     text-align: center;
-    padding: 8px 0;
+    padding: 8px;
     font-size: 12px;
     background: #f8f9fb;
-    color: #555;
-    z-index: 9999;
     border-top: 1px solid #e5e7eb;
 }
 """
@@ -186,13 +223,18 @@ footer,
 # UI
 # ======================================================
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
-    gr.Markdown("# 🔐 OhamLab Video Showcase (PRO Access)")
+    gr.Markdown("# 🔐 OhamLab Video Showcase")
 
+    # -------- LOGIN + FREE PREVIEW --------
     with gr.Column(visible=True) as login_box:
         password_input = gr.Textbox(type="password", label="Password")
         login_btn = gr.Button("Unlock")
         login_status = gr.Markdown()
 
+    with gr.Column(visible=True) as free_preview:
+        free_html = gr.HTML(render_free_videos())
+
+    # -------- PRO CONTENT --------
     with gr.Column(visible=False) as app_content:
         with gr.Row():
             page_size = gr.Dropdown([1, 5, 10], value=5)
@@ -208,14 +250,21 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
         next_btn.click(next_page, [page_state, page_size], [gallery, page_state])
         page_size.change(reset_page, [page_size], [gallery, page_state])
 
+    # -------- EVENTS --------
     login_btn.click(
         check_password,
         inputs=password_input,
-        outputs=[login_box, app_content, gallery, page_state, login_status]
+        outputs=[
+            login_box,
+            free_preview,
+            app_content,
+            gallery,
+            page_state,
+            login_status,
+        ],
     )
 
-    gr.HTML("<div id='ohamlab-footer'>© OhamLab Copyright</div>")
-
+    gr.HTML("<div id='ohamlab-footer'>© OhamLab</div>")
 
 
 demo.launch()