Upload folder using huggingface_hub

app.py

@@ -3,7 +3,6 @@ from __future__ import annotations
 import gradio as gr
 from dotenv import load_dotenv
 from components import subscriptions
-from components.catalog import create_catalog_html, get_dataset_choices
 import utils
 import theme
 import os
@@ -25,51 +24,79 @@ print("========================================")
 def main():
     # Custom CSS for dataset cards
     custom_css = theme.css + """
-    /* Card wrapper for gr.Group */
-    .card-wrapper {
-        background: var(--bg-secondary, #1c1c1e) !important;
+    /* Dataset card styling */
+    .dataset-card-group {
+        background: var(--bg-card, #1c1c1e) !important;
         border: 1px solid var(--border-color, rgba(255,255,255,0.08)) !important;
-        border-radius: 12px !important;
+        border-radius: 16px !important;
         padding: 1.25rem !important;
-        margin-bottom: 0.75rem !important;
-        transition: all 0.15s ease !important;
+        margin-bottom: 1rem !important;
+        transition: all 0.2s ease !important;
     }
-    .card-wrapper:hover {
-        border-color: var(--border-color-strong, rgba(255,255,255,0.12)) !important;
+    .dataset-card-group:hover {
+        border-color: var(--border-color-strong, rgba(255,255,255,0.15)) !important;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
+    }
+    .card-header-row {
+        margin-bottom: 0.5rem !important;
+        gap: 0.75rem !important;
+    }
+    .card-title-col {
+        min-width: 0 !important;
+    }
+    .card-price-col {
+        flex-shrink: 0 !important;
+        min-width: auto !important;
     }
-    /* Dataset card content */
     .dataset-title {
-        font-size: 1rem !important;
+        font-size: 1.125rem !important;
         font-weight: 600 !important;
-        margin: 0 0 0.25rem 0 !important;
+        margin: 0 !important;
         color: var(--text-primary, #f5f5f7) !important;
+        line-height: 1.3 !important;
     }
     .dataset-id {
         font-size: 0.75rem !important;
         color: var(--text-tertiary, #6e6e73) !important;
-        margin: 0 0 0.5rem 0 !important;
+        margin: 0.25rem 0 0 0 !important;
         font-family: 'SF Mono', Monaco, monospace !important;
     }
     .dataset-desc {
-        font-size: 0.8125rem !important;
+        font-size: 0.875rem !important;
         color: var(--text-secondary, #a1a1a6) !important;
         line-height: 1.5 !important;
-        margin: 0 0 0.75rem 0 !important;
+        margin: 0 0 1rem 0 !important;
     }
-    .dataset-price {
+    .price-badge {
+        display: inline-block !important;
+        padding: 0.375rem 0.875rem !important;
+        border-radius: 20px !important;
         font-size: 0.875rem !important;
         font-weight: 600 !important;
+    }
+    .price-badge.paid {
+        background: var(--bg-tertiary, rgba(255,255,255,0.05)) !important;
         color: var(--text-primary, #f5f5f7) !important;
-        margin: 0 !important;
     }
-    .dataset-price.free {
+    .price-badge.free {
+        background: rgba(52, 199, 89, 0.15) !important;
         color: #34c759 !important;
     }
+    .card-footer-row {
+        padding-top: 0.75rem !important;
+        border-top: 1px solid var(--border-color, rgba(255,255,255,0.06)) !important;
+        gap: 0.75rem !important;
+        align-items: center !important;
+    }
     .login-hint {
-        font-size: 0.75rem !important;
+        font-size: 0.8125rem !important;
         color: var(--text-tertiary, #6e6e73) !important;
         font-style: italic !important;
-        margin: 0.5rem 0 0 0 !important;
+        margin: 0 !important;
+    }
+    /* Make buttons fill available space in cards */
+    .card-footer-row .gr-button {
+        min-width: 140px !important;
     }
     """
 
@@ -384,18 +411,98 @@ def main():
 
             # Catalog Tab
             with gr.Tab("Catalog", id="catalog"):
-                catalog_container = gr.HTML()
-
-                # Subscribe section (visible when logged in)
-                gr.HTML('<div style="margin-top: 1.5rem;"></div>')
-                with gr.Row():
-                    dataset_dropdown = gr.Dropdown(
-                        label="Select a dataset to subscribe",
-                        choices=[],
-                        interactive=True,
-                        scale=3
-                    )
-                    subscribe_btn = gr.Button("Subscribe", variant="primary", scale=1)
+                # Use gr.render to dynamically create cards with integrated buttons
+                @gr.render(triggers=[demo.load])
+                def render_catalog(profile: gr.OAuthProfile | None = None, token: gr.OAuthToken | None = None):
+                    datasets = utils.get_catalog() or []
+
+                    if not datasets:
+                        gr.HTML("""
+                        <div class="empty-state">
+                            <div class="empty-state-icon">📦</div>
+                            <div class="empty-state-title">No datasets available</div>
+                            <div class="empty-state-text">Check back soon for new data products.</div>
+                        </div>
+                        """)
+                        return
+
+                    for dataset in datasets:
+                        dataset_id = dataset.get('dataset_id', '')
+                        display_name = dataset.get('display_name', dataset_id)
+                        description = dataset.get('description', 'No description available.')
+
+                        # Get pricing info
+                        plans = dataset.get("plans", [])
+                        is_free = False
+                        price = "10"
+                        if plans:
+                            plan = plans[0]
+                            price_id = plan.get("stripe_price_id", "")
+                            if price_id in ["free", "0", 0]:
+                                is_free = True
+                            else:
+                                price = plan.get("price", "10")
+
+                        price_class = "free" if is_free else "paid"
+                        price_text = "Free Trial" if is_free else f"${price}/mo"
+                        button_text = "Start Free Trial" if is_free else f"Subscribe - ${price}/mo"
+
+                        # Create card using gr.Group
+                        with gr.Group(elem_classes="dataset-card-group"):
+                            # Card header with title and price
+                            with gr.Row(elem_classes="card-header-row"):
+                                with gr.Column(scale=4, elem_classes="card-title-col"):
+                                    gr.HTML(f'''
+                                        <h3 class="dataset-title">{display_name}</h3>
+                                        <p class="dataset-id">{dataset_id}</p>
+                                    ''')
+                                with gr.Column(scale=1, min_width=100, elem_classes="card-price-col"):
+                                    gr.HTML(f'<span class="price-badge {price_class}">{price_text}</span>')
+
+                            # Description
+                            gr.HTML(f'<p class="dataset-desc">{description}</p>')
+
+                            # Footer with action
+                            with gr.Row(elem_classes="card-footer-row"):
+                                if profile:
+                                    # User is logged in - show subscribe button
+                                    btn = gr.Button(
+                                        button_text,
+                                        variant="primary",
+                                        size="sm",
+                                        key=f"subscribe-btn-{dataset_id}"
+                                    )
+
+                                    # Define handler with frozen variables (critical for loops!)
+                                    def make_subscribe_handler(ds_id, ds_name, ds_free):
+                                        def handler(p: gr.OAuthProfile | None, t: gr.OAuthToken | None):
+                                            if not p:
+                                                return "Please sign in first to subscribe."
+
+                                            hf_token = t.token if t else None
+
+                                            if ds_free:
+                                                result = utils.subscribe_free(ds_id, p.username, hf_token)
+                                                if "error" in result:
+                                                    return f"Error: {result['error']}"
+                                                return f"Your 24-hour DataPass for **{ds_name}** is active! Go to **My Subscriptions** to get your access token."
+                                            else:
+                                                result = utils.create_checkout_session(ds_id, p.username, hf_token)
+                                                if "error" in result:
+                                                    return f"Error: {result['error']}"
+                                                if "checkout_url" in result:
+                                                    return f"[Click here to complete payment]({result['checkout_url']})"
+                                                return "Error creating checkout session."
+                                        return handler
+
+                                    btn.click(
+                                        fn=make_subscribe_handler(dataset_id, display_name, is_free),
+                                        outputs=[subscribe_status],
+                                        key=f"subscribe-click-{dataset_id}"
+                                    )
+                                else:
+                                    # User not logged in - show hint
+                                    gr.HTML('<p class="login-hint">Sign in with Hugging Face to subscribe</p>')
 
             # Subscriptions Tab
             with gr.Tab("My Subscriptions", id="subscriptions"):
@@ -413,71 +520,12 @@ def main():
         </div>
         """)
 
-        # Store datasets for reference
-        datasets_cache = []
-
         # Load user status
         def load_user_status(profile: gr.OAuthProfile | None):
             if profile:
                 return f"👤 Signed in as **{profile.username}**"
             return "Sign in to subscribe to datasets"
 
-        # Load catalog and dropdown
-        def load_catalog_and_dropdown(profile: gr.OAuthProfile | None):
-            nonlocal datasets_cache
-            datasets_cache = utils.get_catalog() or []
-            username = profile.username if profile else None
-
-            # Generate catalog HTML
-            catalog_html = create_catalog_html(datasets_cache, username)
-
-            # Generate dropdown choices
-            if username:
-                choices = get_dataset_choices(datasets_cache, username)
-            else:
-                choices = []
-
-            return catalog_html, gr.update(choices=choices, value=None)
-
-        # Handle subscription
-        def handle_subscribe(dataset_choice, profile: gr.OAuthProfile | None, token: gr.OAuthToken | None):
-            if not profile:
-                return "Please sign in first to subscribe."
-
-            if not dataset_choice:
-                return "Please select a dataset from the dropdown."
-
-            # Find the dataset info
-            dataset_id = dataset_choice
-            dataset_info = next((d for d in datasets_cache if d.get('dataset_id') == dataset_id), None)
-
-            if not dataset_info:
-                return f"Dataset not found: {dataset_id}"
-
-            hf_token = token.token if token else None
-            plans = dataset_info.get("plans", [])
-
-            if plans:
-                plan = plans[0]
-                price_id = plan.get("stripe_price_id", "")
-                is_free = price_id in ["free", "0", 0]
-
-                if is_free:
-                    result = utils.subscribe_free(dataset_id, profile.username, hf_token)
-                    if "error" in result:
-                        return f"Error: {result['error']}"
-                    display_name = dataset_info.get('display_name', dataset_id)
-                    return f"Your 24-hour DataPass for **{display_name}** is active! Go to My Subscriptions to get your access token."
-                else:
-                    result = utils.create_checkout_session(dataset_id, profile.username, hf_token)
-                    if "error" in result:
-                        return f"Error: {result['error']}"
-                    if "checkout_url" in result:
-                        return f"[Click here to complete payment]({result['checkout_url']})"
-                    return "Error creating checkout session."
-
-            return "No subscription plans available for this dataset."
-
         # Load subscriptions
         def load_subscriptions(profile: gr.OAuthProfile | None, token: gr.OAuthToken | None):
             if not profile:
@@ -493,47 +541,10 @@ def main():
             user_subs = utils.get_user_subscriptions(profile.username, hf_token)
             return subscriptions.create_subscriptions_html(user_subs)
 
-        # Update button text based on selection
-        def update_button_text(dataset_choice):
-            if not dataset_choice:
-                return gr.update(value="Subscribe")
-
-            # Find the dataset info
-            dataset_info = next((d for d in datasets_cache if d.get('dataset_id') == dataset_choice), None)
-            if not dataset_info:
-                return gr.update(value="Subscribe")
-
-            plans = dataset_info.get("plans", [])
-            if plans:
-                plan = plans[0]
-                price_id = plan.get("stripe_price_id", "")
-                if price_id in ["free", "0", 0]:
-                    return gr.update(value="Start Free Trial")
-                else:
-                    price = plan.get("price", "10")
-                    return gr.update(value=f"Subscribe - ${price}/mo")
-
-            return gr.update(value="Subscribe")
-
         # Load on page load
         demo.load(fn=load_user_status, outputs=[user_status])
-        demo.load(fn=load_catalog_and_dropdown, outputs=[catalog_container, dataset_dropdown])
         demo.load(fn=load_subscriptions, outputs=[subscriptions_container])
 
-        # Update button on dropdown change
-        dataset_dropdown.change(
-            fn=update_button_text,
-            inputs=[dataset_dropdown],
-            outputs=[subscribe_btn]
-        )
-
-        # Subscribe button handler
-        subscribe_btn.click(
-            fn=handle_subscribe,
-            inputs=[dataset_dropdown],
-            outputs=[subscribe_status]
-        )
-
     return demo