Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+datapass_logo.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -24,22 +24,45 @@ 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;
+    }
+    .hero-logo img {
+        object-fit: contain !important;
+    }
+    .hero-subtitle {
+        font-size: 1.125rem !important;
+        color: var(--text-secondary, #a1a1a6) !important;
+        margin: 0 auto 1rem !important;
+        text-align: center !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: 16px !important;
-        padding: 1.25rem !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.2s ease !important;
+        transition: all 0.25s ease !important;
+        overflow: hidden !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;
+        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;
     }
+
+    /* Card header */
     .card-header-row {
-        margin-bottom: 0.5rem !important;
-        gap: 0.75rem !important;
+        margin-bottom: 0.75rem !important;
+        gap: 1rem !important;
+        align-items: flex-start !important;
     }
     .card-title-col {
         min-width: 0 !important;
@@ -49,54 +72,83 @@ def main():
         min-width: auto !important;
     }
     .dataset-title {
-        font-size: 1.125rem !important;
-        font-weight: 600 !important;
+        font-size: 1.25rem !important;
+        font-weight: 700 !important;
         margin: 0 !important;
         color: var(--text-primary, #f5f5f7) !important;
         line-height: 1.3 !important;
+        letter-spacing: -0.01em !important;
     }
     .dataset-id {
         font-size: 0.75rem !important;
         color: var(--text-tertiary, #6e6e73) !important;
-        margin: 0.25rem 0 0 0 !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;
+        border-radius: 4px !important;
+        display: inline-block !important;
     }
     .dataset-desc {
-        font-size: 0.875rem !important;
+        font-size: 0.9375rem !important;
         color: var(--text-secondary, #a1a1a6) !important;
-        line-height: 1.5 !important;
-        margin: 0 0 1rem 0 !important;
+        line-height: 1.6 !important;
+        margin: 0 0 1.25rem 0 !important;
     }
+
+    /* Price badges */
     .price-badge {
-        display: inline-block !important;
-        padding: 0.375rem 0.875rem !important;
-        border-radius: 20px !important;
-        font-size: 0.875rem !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        padding: 0.5rem 1rem !important;
+        border-radius: 24px !important;
+        font-size: 0.9375rem !important;
         font-weight: 600 !important;
     }
     .price-badge.paid {
-        background: var(--bg-tertiary, rgba(255,255,255,0.05)) !important;
+        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
         color: var(--text-primary, #f5f5f7) !important;
+        border: 1px solid rgba(255,255,255,0.1) !important;
     }
     .price-badge.free {
-        background: rgba(52, 199, 89, 0.15) !important;
+        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;
     }
+
+    /* Card footer */
     .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;
+        padding-top: 1rem !important;
+        border-top: 1px solid rgba(255,255,255,0.08) !important;
+        gap: 1rem !important;
         align-items: center !important;
     }
+
+    /* Subscribe buttons */
+    .dataset-card-group .gr-button-primary {
+        background: linear-gradient(135deg, #f5c842 0%, #d4a832 100%) !important;
+        color: #1a1a1a !important;
+        border: none !important;
+        border-radius: 12px !important;
+        padding: 0.75rem 1.5rem !important;
+        font-weight: 600 !important;
+        font-size: 0.9375rem !important;
+        transition: all 0.2s ease !important;
+        box-shadow: 0 2px 8px rgba(245, 200, 66, 0.3) !important;
+    }
+    .dataset-card-group .gr-button-primary:hover {
+        background: linear-gradient(135deg, #ffd54f 0%, #f5c842 100%) !important;
+        box-shadow: 0 4px 16px rgba(245, 200, 66, 0.4) !important;
+        transform: translateY(-1px) !important;
+    }
+
+    /* Login hint */
     .login-hint {
-        font-size: 0.8125rem !important;
+        font-size: 0.875rem !important;
         color: var(--text-tertiary, #6e6e73) !important;
         font-style: italic !important;
         margin: 0 !important;
-    }
-    /* Make buttons fill available space in cards */
-    .card-footer-row .gr-button {
-        min-width: 140px !important;
+        padding: 0.5rem 0 !important;
     }
     """
 
@@ -104,13 +156,17 @@ def main():
         # State to track logged-in username (triggers re-render when changed)
         logged_in_user = gr.State(value=None)
 
-        # Hero Section
-        gr.HTML("""
-        <div class="hero-section">
-            <h1 class="hero-title">DataPass</h1>
-            <p class="hero-subtitle">Your pass to private data.</p>
-        </div>
-        """)
+        # 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>')
 
         # Simple auth row with Gradio 6 LoginButton
         with gr.Row():