Upload folder using huggingface_hub

app.py

@@ -24,45 +24,48 @@ print("========================================")
 def main():
     # Custom CSS for dataset cards
     custom_css = theme.css + """
-    /* Hero logo styling */
-    .hero-logo {
-        max-width: 280px !important;
-        margin: 1.5rem auto 0.5rem !important;
-        background: transparent !important;
-        border: none !important;
-        box-shadow: none !important;
+    /* Hide any share buttons globally */
+    .share-button, [class*="share"], button[title="Share"] {
+        display: none !important;
+    }
+
+    /* Hero section styling */
+    .hero-section {
+        text-align: center;
+        padding: 2rem 1rem 1rem;
     }
-    .hero-logo img {
-        object-fit: contain !important;
+    .hero-logo-img {
+        max-width: 220px;
+        height: auto;
+        margin: 0 auto 0.75rem;
+        display: block;
     }
     .hero-subtitle {
-        font-size: 1.125rem !important;
-        color: var(--text-secondary, #a1a1a6) !important;
-        margin: 0 auto 1rem !important;
-        text-align: center !important;
+        font-size: 1rem !important;
+        color: var(--text-secondary, #98989d) !important;
+        margin: 0 !important;
+        font-weight: 400 !important;
     }
 
     /* Dataset card styling */
     .dataset-card-group {
         background: var(--bg-card, #1c1c1e) !important;
-        border: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
-        border-radius: 20px !important;
-        padding: 1.5rem !important;
-        margin-bottom: 1rem !important;
-        transition: all 0.25s ease !important;
-        overflow: hidden !important;
+        border: 1px solid rgba(255,255,255,0.06) !important;
+        border-radius: 16px !important;
+        padding: 1.25rem 1.5rem !important;
+        margin-bottom: 0.75rem !important;
+        transition: all 0.2s ease !important;
     }
     .dataset-card-group:hover {
-        border-color: rgba(255,255,255,0.2) !important;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
-        transform: translateY(-2px) !important;
+        border-color: rgba(255,255,255,0.12) !important;
+        background: rgba(255,255,255,0.02) !important;
     }
 
     /* Card header */
     .card-header-row {
-        margin-bottom: 0.75rem !important;
+        margin-bottom: 0.5rem !important;
         gap: 1rem !important;
-        align-items: flex-start !important;
+        align-items: center !important;
     }
     .card-title-col {
         min-width: 0 !important;
@@ -72,97 +75,102 @@ def main():
         min-width: auto !important;
     }
     .dataset-title {
-        font-size: 1.25rem !important;
-        font-weight: 700 !important;
+        font-size: 1.125rem !important;
+        font-weight: 600 !important;
         margin: 0 !important;
         color: var(--text-primary, #f5f5f7) !important;
-        line-height: 1.3 !important;
-        letter-spacing: -0.01em !important;
+        line-height: 1.4 !important;
     }
     .dataset-id {
-        font-size: 0.75rem !important;
+        font-size: 0.6875rem !important;
         color: var(--text-tertiary, #6e6e73) !important;
-        margin: 0.375rem 0 0 0 !important;
-        font-family: 'SF Mono', Monaco, monospace !important;
-        background: rgba(255,255,255,0.05) !important;
-        padding: 0.2rem 0.5rem !important;
+        margin: 0.25rem 0 0 0 !important;
+        font-family: 'JetBrains Mono', monospace !important;
+        background: rgba(255,255,255,0.04) !important;
+        padding: 0.15rem 0.4rem !important;
         border-radius: 4px !important;
         display: inline-block !important;
     }
     .dataset-desc {
-        font-size: 0.9375rem !important;
-        color: var(--text-secondary, #a1a1a6) !important;
-        line-height: 1.6 !important;
-        margin: 0 0 1.25rem 0 !important;
+        font-size: 0.875rem !important;
+        color: var(--text-secondary, #98989d) !important;
+        line-height: 1.5 !important;
+        margin: 0 0 1rem 0 !important;
     }
 
     /* Price badges */
     .price-badge {
         display: inline-flex !important;
         align-items: center !important;
-        padding: 0.5rem 1rem !important;
-        border-radius: 24px !important;
-        font-size: 0.9375rem !important;
+        justify-content: center !important;
+        padding: 0.4rem 0.9rem !important;
+        border-radius: 20px !important;
+        font-size: 0.8125rem !important;
         font-weight: 600 !important;
+        white-space: nowrap !important;
     }
     .price-badge.paid {
-        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
+        background: rgba(255,255,255,0.08) !important;
         color: var(--text-primary, #f5f5f7) !important;
-        border: 1px solid rgba(255,255,255,0.1) !important;
     }
     .price-badge.free {
-        background: linear-gradient(135deg, rgba(52, 199, 89, 0.2) 0%, rgba(52, 199, 89, 0.1) 100%) !important;
-        color: #34c759 !important;
-        border: 1px solid rgba(52, 199, 89, 0.3) !important;
+        background: rgba(52, 199, 89, 0.15) !important;
+        color: #32d74b !important;
     }
 
     /* Card footer */
     .card-footer-row {
-        padding-top: 1rem !important;
-        border-top: 1px solid rgba(255,255,255,0.08) !important;
-        gap: 1rem !important;
-        align-items: center !important;
+        padding-top: 0.875rem !important;
+        margin-top: 0.25rem !important;
+        border-top: 1px solid rgba(255,255,255,0.06) !important;
+        gap: 0 !important;
+    }
+    .card-footer-row > div {
+        flex: 1 !important;
     }
 
     /* Subscribe buttons */
-    .subscribe-btn {
-        background: linear-gradient(135deg, #f5c842 0%, #d4a832 100%) !important;
+    .subscribe-btn,
+    .subscribe-btn button {
+        width: 100% !important;
+        background: linear-gradient(180deg, #f7d052 0%, #e9b93a 100%) !important;
         color: #1a1a1a !important;
         border: none !important;
-        border-radius: 12px !important;
-        padding: 0.875rem 2rem !important;
+        border-radius: 10px !important;
+        padding: 0.75rem 1.5rem !important;
         font-weight: 600 !important;
-        font-size: 1rem !important;
-        transition: all 0.2s ease !important;
-        box-shadow: 0 4px 12px rgba(245, 200, 66, 0.35) !important;
-        min-height: 48px !important;
+        font-size: 0.9375rem !important;
+        transition: all 0.15s ease !important;
         cursor: pointer !important;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2) !important;
     }
-    .subscribe-btn:hover {
-        background: linear-gradient(135deg, #ffd54f 0%, #f5c842 100%) !important;
-        box-shadow: 0 6px 20px rgba(245, 200, 66, 0.5) !important;
-        transform: translateY(-2px) !important;
-    }
-    .subscribe-btn:active {
-        transform: translateY(0) !important;
-        box-shadow: 0 2px 8px rgba(245, 200, 66, 0.3) !important;
+    .subscribe-btn:hover,
+    .subscribe-btn:hover button {
+        background: linear-gradient(180deg, #fad965 0%, #f0c243 100%) !important;
+        box-shadow: 0 2px 8px rgba(247, 208, 82, 0.3), inset 0 1px 0 rgba(255,255,255,0.25) !important;
     }
-    /* Override any Gradio defaults */
-    .subscribe-btn button,
-    button.subscribe-btn,
-    .subscribe-btn > button {
-        background: linear-gradient(135deg, #f5c842 0%, #d4a832 100%) !important;
-        color: #1a1a1a !important;
-        border: none !important;
+    .subscribe-btn:active,
+    .subscribe-btn:active button {
+        background: linear-gradient(180deg, #e5b835 0%, #d4a52e 100%) !important;
+        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
     }
 
     /* Login hint */
     .login-hint {
-        font-size: 0.875rem !important;
+        font-size: 0.8125rem !important;
         color: var(--text-tertiary, #6e6e73) !important;
         font-style: italic !important;
         margin: 0 !important;
         padding: 0.5rem 0 !important;
+        text-align: center !important;
+    }
+
+    /* Tighten up Gradio's default spacing */
+    .gradio-container .gr-group {
+        gap: 0 !important;
+    }
+    .gradio-container .gr-block {
+        padding: 0 !important;
     }
     """
 
@@ -170,17 +178,13 @@ def main():
         # State to track logged-in username (triggers re-render when changed)
         logged_in_user = gr.State(value=None)
 
-        # Hero Section with logo
-        gr.Image(
-            value="datapass_logo.png",
-            show_label=False,
-            show_download_button=False,
-            show_fullscreen_button=False,
-            container=False,
-            height=140,
-            elem_classes="hero-logo"
-        )
-        gr.HTML('<p class="hero-subtitle">Your pass to private data.</p>')
+        # Hero Section with logo (using HTML to avoid Gradio image controls)
+        gr.HTML('''
+        <div class="hero-section">
+            <img src="/file=datapass_logo.png" alt="DataPass" class="hero-logo-img">
+            <p class="hero-subtitle">Your pass to private data.</p>
+        </div>
+        ''')
 
         # Simple auth row with Gradio 6 LoginButton
         with gr.Row():

theme.py

@@ -9,8 +9,8 @@ def get_theme():
         spacing_size="lg",
         radius_size="lg",
         text_size="md",
-        font=[gr.themes.GoogleFont("SF Pro Display"), gr.themes.GoogleFont("Inter"), "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
-        font_mono=[gr.themes.GoogleFont("SF Mono"), gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
+        font=[gr.themes.GoogleFont("Inter"), "system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+        font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
     ).set(
         # Light mode base
         body_background_fill="*neutral_50",