Update app.py

app.py

@@ -157,290 +157,82 @@ def process_video(
     return video_summary, frame_previews
 
 # Create the Gradio interface
-with gr.Blocks(css="""
-    /* Apple-inspired design system */
-    :root {
-        --apple-blue: #0071e3;
-        --apple-blue-hover: #0077ed;
-        --apple-gray-1: #fbfbfd;
-        --apple-gray-2: #f5f5f7;
-        --apple-gray-3: #e8e8ed;
-        --apple-gray-4: #d2d2d7;
-        --apple-gray-5: #86868b;
-        --apple-gray-6: #515154;
-        --apple-text: #1d1d1f;
-        --apple-bg: #ffffff;
-        --apple-radius: 12px;
-        --apple-radius-sm: 8px;
-        --apple-radius-lg: 18px;
-        --apple-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
-        --apple-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-        --apple-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
-    }
-    
-    /* Global styles */
-    .gradio-container {
-        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        background: var(--apple-gray-1);
-        color: var(--apple-text);
-    }
-    
-    /* Main container */
-    .contain {
-        max-width: 1400px !important;
-        margin: 0 auto;
-        padding: 24px;
-    }
-    
-    /* Headers */
-    h1, h2, h3 {
-        font-weight: 600;
-        letter-spacing: -0.02em;
-        color: var(--apple-text);
-    }
-    
-    h1 {
-        font-size: 48px;
-        font-weight: 700;
-        background: linear-gradient(135deg, #1d1d1f 0%, #515154 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        margin-bottom: 8px;
-    }
-    
-    /* Chatbot styling */
-    .chatbot {
-        background: var(--apple-bg) !important;
-        border-radius: var(--apple-radius) !important;
-        border: 1px solid var(--apple-gray-3) !important;
-        box-shadow: var(--apple-shadow-md) !important;
-        overflow: hidden;
-    }
-    
-    .message-wrap {
-        padding: 12px 16px !important;
-    }
-    
-    .message {
-        font-size: 15px !important;
-        line-height: 1.5 !important;
-        max-width: 85% !important;
-    }
-    
-    .user .message {
-        background: var(--apple-blue) !important;
-        color: white !important;
-        border-radius: var(--apple-radius-lg) !important;
-        padding: 10px 16px !important;
-        margin-left: auto !important;
-        box-shadow: var(--apple-shadow-sm) !important;
-    }
-    
-    .bot .message {
-        background: var(--apple-gray-2) !important;
-        color: var(--apple-text) !important;
-        border-radius: var(--apple-radius-lg) !important;
-        padding: 10px 16px !important;
-        box-shadow: var(--apple-shadow-sm) !important;
-    }
-    
-    /* Buttons */
-    .gr-button {
-        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
-        font-weight: 500 !important;
-        border-radius: var(--apple-radius-sm) !important;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        border: none !important;
-        box-shadow: var(--apple-shadow-sm) !important;
-    }
-    
-    .gr-button-primary, .gr-button-primary:hover {
-        background: var(--apple-blue) !important;
-        color: white !important;
-        font-size: 16px !important;
-        padding: 12px 24px !important;
-        letter-spacing: -0.01em !important;
-    }
-    
-    .gr-button-primary:hover {
-        background: var(--apple-blue-hover) !important;
-        transform: translateY(-1px) !important;
-        box-shadow: var(--apple-shadow-md) !important;
-    }
-    
-    .gr-button-primary:active {
-        transform: translateY(0) !important;
-    }
-    
-    /* Video component */
-    .gr-video {
-        border-radius: var(--apple-radius) !important;
-        overflow: hidden !important;
-        box-shadow: var(--apple-shadow-lg) !important;
-        border: 1px solid var(--apple-gray-3) !important;
-        background: var(--apple-text) !important;
-    }
-    
-    video {
-        border-radius: var(--apple-radius) !important;
-    }
-    
-    /* Sidebar */
-    .gr-sidebar {
-        background: var(--apple-bg) !important;
-        border-radius: var(--apple-radius) !important;
-        border: 1px solid var(--apple-gray-3) !important;
-        box-shadow: var(--apple-shadow-md) !important;
-        padding: 20px !important;
-    }
-    
-    /* Accordion */
-    .gr-accordion {
-        background: var(--apple-gray-2) !important;
-        border-radius: var(--apple-radius-sm) !important;
-        border: 1px solid var(--apple-gray-3) !important;
-        overflow: hidden !important;
-        margin-top: 16px !important;
-    }
-    
-    .gr-accordion-header {
-        background: var(--apple-gray-2) !important;
-        padding: 12px 16px !important;
-        font-weight: 500 !important;
-        color: var(--apple-text) !important;
-        border: none !important;
-    }
-    
-    .gr-accordion-header:hover {
-        background: var(--apple-gray-3) !important;
-    }
-    
-    /* Gallery */
-    .gr-gallery {
-        background: transparent !important;
-        gap: 12px !important;
-    }
-    
-    .gr-gallery-item {
-        border-radius: var(--apple-radius-sm) !important;
-        overflow: hidden !important;
-        box-shadow: var(--apple-shadow-sm) !important;
-        border: 1px solid var(--apple-gray-3) !important;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    }
-    
-    .gr-gallery-item:hover {
-        transform: scale(1.02) !important;
-        box-shadow: var(--apple-shadow-md) !important;
-    }
-    
-    /* Progress bar */
-    .progress-bar {
-        background: var(--apple-gray-3) !important;
-        border-radius: 100px !important;
-        overflow: hidden !important;
-        height: 4px !important;
-    }
-    
-    .progress-bar-fill {
-        background: var(--apple-blue) !important;
-        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    }
-    
-    /* Labels */
-    label {
-        color: var(--apple-gray-5) !important;
-        font-size: 13px !important;
-        font-weight: 500 !important;
-        letter-spacing: -0.01em !important;
-        margin-bottom: 6px !important;
-    }
-    
-    /* Inputs and form elements */
-    .gr-input, .gr-textbox, .gr-dropdown {
-        background: var(--apple-bg) !important;
-        border: 1px solid var(--apple-gray-4) !important;
-        border-radius: var(--apple-radius-sm) !important;
-        padding: 10px 12px !important;
-        font-size: 15px !important;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    }
-    
-    .gr-input:focus, .gr-textbox:focus, .gr-dropdown:focus {
-        border-color: var(--apple-blue) !important;
-        box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1) !important;
-        outline: none !important;
-    }
-    
-    /* Markdown content */
-    .gr-markdown {
-        color: var(--apple-text) !important;
-        line-height: 1.6 !important;
-    }
-    
-    .gr-markdown h2 {
-        font-size: 20px !important;
-        font-weight: 600 !important;
-        margin-bottom: 12px !important;
-        color: var(--apple-text) !important;
-    }
-    
-    /* Loading states */
-    .gr-loading {
-        color: var(--apple-gray-5) !important;
-    }
-    
-    /* Scrollbars */
-    ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-    
-    ::-webkit-scrollbar-track {
-        background: var(--apple-gray-2);
-        border-radius: 10px;
-    }
-    
-    ::-webkit-scrollbar-thumb {
-        background: var(--apple-gray-4);
-        border-radius: 10px;
-    }
-    
-    ::-webkit-scrollbar-thumb:hover {
-        background: var(--apple-gray-5);
-    }
-    
-    /* Animations */
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-            transform: translateY(10px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-    
-    .message {
-        animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    
-    /* Responsive adjustments */
-    @media (max-width: 768px) {
-        h1 {
-            font-size: 36px;
-        }
-        
-        .contain {
-            padding: 16px;
-        }
-        
-        .message {
-            max-width: 90% !important;
-        }
-    }
-""") as demo:
+# Create custom Apple-inspired theme
+class AppleTheme(gr.themes.Base):
+    def __init__(self):
+        super().__init__(
+            primary_hue=gr.themes.colors.blue,
+            secondary_hue=gr.themes.colors.gray,
+            neutral_hue=gr.themes.colors.gray,
+            spacing_size=gr.themes.sizes.spacing_md,
+            radius_size=gr.themes.sizes.radius_md,
+            text_size=gr.themes.sizes.text_md,
+            font=[
+                gr.themes.GoogleFont("Inter"),
+                "-apple-system",
+                "BlinkMacSystemFont",
+                "SF Pro Display",
+                "SF Pro Text",
+                "Helvetica Neue",
+                "Helvetica",
+                "Arial",
+                "sans-serif"
+            ],
+            font_mono=[
+                gr.themes.GoogleFont("SF Mono"),
+                "ui-monospace",
+                "Consolas",
+                "monospace"
+            ]
+        )
+        super().set(
+            # Core colors
+            body_background_fill="*neutral_50",
+            body_background_fill_dark="*neutral_950",
+            button_primary_background_fill="*primary_500",
+            button_primary_background_fill_hover="*primary_600",
+            button_primary_text_color="white",
+            button_primary_border_color="*primary_500",
+            
+            # Shadows
+            button_shadow="0 2px 8px rgba(0, 0, 0, 0.04)",
+            button_shadow_hover="0 4px 12px rgba(0, 0, 0, 0.08)",
+            block_shadow="0 4px 12px rgba(0, 0, 0, 0.08)",
+            
+            # Border radius
+            button_large_radius="8px",
+            button_small_radius="6px",
+            block_radius="12px",
+            container_radius="12px",
+            
+            # Borders
+            block_border_width="1px",
+            block_border_color="*neutral_200",
+            input_border_width="1px",
+            input_border_color="*neutral_300",
+            input_border_color_focus="*primary_500",
+            
+            # Text
+            block_title_text_weight="600",
+            block_label_text_weight="500",
+            block_label_text_size="13px",
+            block_label_text_color="*neutral_600",
+            body_text_color="*neutral_900",
+            
+            # Spacing
+            layout_gap="16px",
+            block_padding="20px",
+            
+            # Specific components
+            chatbot_code_background_color="*neutral_100",
+            slider_color="*primary_500",
+            
+            # Transitions
+            button_transition="all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+        )
+
+# Create the Gradio interface with the custom theme
+with gr.Blocks(theme=AppleTheme()) as demo:
     gr.Markdown("# 🎬 FastVLM Video Captioning")
     
     with gr.Row():