Upload folder using huggingface_hub

app.py

@@ -3,6 +3,7 @@ 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
@@ -383,85 +384,18 @@ def main():
 
             # Catalog Tab
             with gr.Tab("Catalog", id="catalog"):
-                # Use gr.render to dynamically create cards with 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.')
-
-                        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 ""
-                        price_text = "Free Trial" if is_free else f"${price}/mo"
-                        button_text = "Start 24h Trial" if is_free else f"Subscribe - ${price}/mo"
-
-                        with gr.Group(elem_classes="card-wrapper"):
-                            gr.HTML(f"""
-                                <h3 class="dataset-title">{display_name}</h3>
-                                <p class="dataset-id">{dataset_id}</p>
-                                <p class="dataset-desc">{description}</p>
-                                <p class="dataset-price {price_class}">{price_text}</p>
-                            """)
-
-                            if profile:
-                                # Create button with closure to capture dataset info
-                                btn = gr.Button(button_text, variant="primary", size="sm")
-
-                                # Capture variables in closure
-                                ds_id = dataset_id
-                                ds_name = display_name
-                                ds_is_free = is_free
-
-                                def make_handler(did, dname, dfree):
-                                    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 dfree:
-                                            result = utils.subscribe_free(did, p.username, hf_token)
-                                            if "error" in result:
-                                                return f"❌ Error: {result['error']}"
-                                            return f"✅ Your 24-hour DataPass for **{dname}** is active! Go to My Subscriptions to get your access token."
-                                        else:
-                                            result = utils.create_checkout_session(did, 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_handler(ds_id, ds_name, ds_is_free),
-                                    outputs=[subscribe_status]
-                                )
-                            else:
-                                gr.HTML('<p class="login-hint">Sign in to subscribe</p>')
+                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)
 
             # Subscriptions Tab
             with gr.Tab("My Subscriptions", id="subscriptions"):
@@ -479,12 +413,71 @@ 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:
@@ -500,10 +493,47 @@ 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
 
 

components/catalog.py

@@ -1,5 +1,5 @@
 def create_catalog_html(datasets, username=None):
-    """Creates HTML string for the dataset catalog (display only, no buttons)."""
+    """Creates HTML string for the dataset catalog with improved card design."""
     if not datasets:
         return """
         <div class="empty-state">
@@ -10,69 +10,187 @@ def create_catalog_html(datasets, username=None):
         """
 
     cards_html = ""
-    for dataset in datasets:
+    for i, dataset in enumerate(datasets):
+        dataset_id = dataset.get('dataset_id', '')
+        display_name = dataset.get('display_name', dataset_id)
+        description = dataset.get('description', 'No description available.')
+
         # Determine pricing display
         plans = dataset.get("plans", [])
-        price_display = ""
-        action_text = ""
+        is_free = False
+        price = "10"
+        trial_days = 1
 
         if plans:
             plan = plans[0]
             price_id = plan.get("stripe_price_id", "")
             if price_id in ["free", "0", 0]:
+                is_free = True
                 trial_days = plan.get("access_duration_days", 1)
-                trial_text = "24h" if trial_days == 1 else f"{trial_days}-day"
-                price_display = f'<span class="price-tag price-free">{trial_text} Free Trial</span>'
-                if not username:
-                    action_text = '<span class="login-hint">Sign in to start trial</span>'
             else:
                 price = plan.get("price", "10")
-                price_display = f'''
-                <span class="price-tag">
-                    <span class="currency">$</span>{price}
-                    <span class="period">/mo</span>
-                </span>
-                '''
-                if not username:
-                    action_text = '<span class="login-hint">Sign in to subscribe</span>'
 
-        cards_html += f"""
-        <div class="dataset-card animate-in">
-            <div class="card-header">
-                <h3 class="card-title">{dataset.get('display_name', dataset.get('dataset_id', 'Untitled'))}</h3>
-                <span class="card-badge">{dataset.get('dataset_id', '')}</span>
+        # Price badge
+        if is_free:
+            trial_text = "24h" if trial_days == 1 else f"{trial_days}-day"
+            price_badge = f'<span class="catalog-price-badge free">{trial_text} Free Trial</span>'
+        else:
+            price_badge = f'<span class="catalog-price-badge paid">${price}<span class="period">/mo</span></span>'
+
+        # Action area - only show hint when not logged in
+        if not username:
+            action_html = '''
+            <div class="catalog-card-action">
+                <span class="action-hint login-required">Sign in to subscribe</span>
             </div>
-            <p class="card-description">{dataset.get('description', 'No description available.')}</p>
-            <div class="card-footer">
-                {price_display}
-                <div class="card-actions">
-                    {action_text}
+            '''
+        else:
+            action_html = ''
+
+        cards_html += f"""
+        <div class="catalog-card" data-dataset-id="{dataset_id}">
+            <div class="catalog-card-header">
+                <div class="catalog-card-icon">📊</div>
+                <div class="catalog-card-title-area">
+                    <h3 class="catalog-card-title">{display_name}</h3>
+                    <span class="catalog-card-id">{dataset_id}</span>
                 </div>
             </div>
+            <p class="catalog-card-description">{description}</p>
+            <div class="catalog-card-footer">
+                {price_badge}
+                {action_html}
+            </div>
         </div>
         """
 
-    # Wrap in container with grid layout
+    # Wrap in container with improved styles
     html = f"""
-    <div class="catalog-grid">
+    <div class="catalog-container">
         {cards_html}
     </div>
     <style>
-        .catalog-grid {{
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-            gap: 1.5rem;
+        .catalog-container {{
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
             padding: 0.5rem 0;
         }}
-        .login-hint {{
+
+        .catalog-card {{
+            background: var(--bg-card, #1c1c1e);
+            border: 1px solid var(--border-color, rgba(255,255,255,0.08));
+            border-radius: 16px;
+            padding: 1.25rem 1.5rem;
+            transition: all 0.2s ease;
+            position: relative;
+        }}
+
+        .catalog-card:hover {{
+            border-color: var(--border-color-strong, rgba(255,255,255,0.15));
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+        }}
+
+        .catalog-card-header {{
+            display: flex;
+            align-items: flex-start;
+            gap: 1rem;
+            margin-bottom: 0.75rem;
+        }}
+
+        .catalog-card-icon {{
+            font-size: 2rem;
+            line-height: 1;
+            flex-shrink: 0;
+        }}
+
+        .catalog-card-title-area {{
+            flex: 1;
+            min-width: 0;
+        }}
+
+        .catalog-card-title {{
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: var(--text-primary, #f5f5f7);
+            margin: 0 0 0.25rem 0;
+            line-height: 1.3;
+        }}
+
+        .catalog-card-id {{
+            font-size: 0.75rem;
+            color: var(--text-tertiary, #6e6e73);
+            font-family: 'SF Mono', Monaco, monospace;
+            background: var(--bg-tertiary, rgba(255,255,255,0.05));
+            padding: 0.125rem 0.5rem;
+            border-radius: 4px;
+            display: inline-block;
+        }}
+
+        .catalog-card-description {{
             font-size: 0.875rem;
-            color: var(--text-tertiary);
-            font-style: italic;
+            color: var(--text-secondary, #a1a1a6);
+            line-height: 1.5;
+            margin: 0 0 1rem 0;
         }}
-        .card-actions {{
+
+        .catalog-card-footer {{
             display: flex;
             align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
             gap: 0.75rem;
+            padding-top: 0.75rem;
+            border-top: 1px solid var(--border-color, rgba(255,255,255,0.06));
+        }}
+
+        .catalog-price-badge {{
+            font-size: 1rem;
+            font-weight: 600;
+            padding: 0.375rem 0.875rem;
+            border-radius: 20px;
+            display: inline-flex;
+            align-items: baseline;
+            gap: 0.125rem;
+        }}
+
+        .catalog-price-badge.free {{
+            background: rgba(52, 199, 89, 0.15);
+            color: #34c759;
+        }}
+
+        .catalog-price-badge.paid {{
+            background: var(--bg-tertiary, rgba(255,255,255,0.05));
+            color: var(--text-primary, #f5f5f7);
+        }}
+
+        .catalog-price-badge .period {{
+            font-size: 0.75rem;
+            font-weight: 400;
+            color: var(--text-tertiary, #6e6e73);
+        }}
+
+        .catalog-card-action {{
+            display: flex;
+            align-items: center;
+        }}
+
+        .action-hint {{
+            font-size: 0.8125rem;
+            color: var(--text-tertiary, #6e6e73);
+        }}
+
+        .action-hint.login-required {{
+            font-style: italic;
+            color: var(--text-tertiary, #6e6e73);
+        }}
+
+        @media (max-width: 640px) {{
+            .catalog-card-footer {{
+                flex-direction: column;
+                align-items: flex-start;
+            }}
         }}
     </style>
     """