Update app.py

app.py

@@ -158,38 +158,287 @@ def process_video(
 
 # 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 {
-        font-family: 'Arial', sans-serif;
-        font-size: 14px;
-        line-height: 1.5;
+        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;
     }
-    #component-0 {
-        background-color: #f0f8ff;
-        border-radius: 10px;
-        padding: 20px;
-    }
-    .gr-button-primary {
-        background: linear-gradient(45deg, #4CAF50, #45a049);
-        border: none;
-        color: white;
-        padding: 12px 24px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 16px;
-        margin: 4px 2px;
-        cursor: pointer;
-        border-radius: 8px;
+    
+    .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: linear-gradient(45deg, #45a049, #4CAF50);
+        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-color: #e6f3ff;
-        border-radius: 8px;
+        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 {
-        font-family: 'Arial', sans-serif;
+        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:
     gr.Markdown("# 🎬 FastVLM Video Captioning")