Update app.py

app.py

@@ -142,15 +142,82 @@ def process_video_and_question(video, question, fps, force_packing, history):
 def clear_chat():
     return [], None, "", 3, 0
 
-# CSS for better styling
+# CSS for better styling with Apple-inspired design
 css = """
 .chat-container {
     overflow-y: auto;
+    border-radius: 12px;
+}
+
+.gradio-container {
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif !important;
+}
+
+.gr-button {
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.gr-button:active {
+    transform: scale(0.98);
+}
+
+.gr-input, .gr-textarea {
+    backdrop-filter: blur(10px);
+}
+
+.gr-box {
+    backdrop-filter: blur(20px);
+    background: rgba(255, 255, 255, 0.8) !important;
+}
+
+.dark .gr-box {
+    background: rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Smooth transitions */
+* {
+    transition: background-color 0.2s ease, border-color 0.2s ease;
 }
 """
 
-# Create Gradio interface
-with gr.Blocks(css=css, title="Video Chat with MiniCPM-V") as demo:
+# Create Gradio interface with Apple-style theme
+theme = gr.themes.Soft(
+    primary_hue=gr.themes.colors.blue,
+    secondary_hue=gr.themes.colors.gray,
+    neutral_hue=gr.themes.colors.gray,
+    spacing_size="md",
+    radius_size="md",
+    text_size="md",
+    font=[gr.themes.GoogleFont("Inter"), "SF Pro Display", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+    font_mono=[gr.themes.GoogleFont("SF Mono"), "Monaco", "Menlo", "monospace"]
+).set(
+    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",
+    block_background_fill="white",
+    block_background_fill_dark="*neutral_900",
+    block_border_width="1px",
+    block_border_color="*neutral_200",
+    block_border_color_dark="*neutral_800",
+    block_radius="*radius_lg",
+    block_shadow="0px 1px 3px 0px rgba(0, 0, 0, 0.02), 0px 0px 0px 1px rgba(0, 0, 0, 0.05)",
+    block_shadow_dark="0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(255, 255, 255, 0.05)",
+    input_background_fill="*neutral_50",
+    input_background_fill_dark="*neutral_900",
+    input_border_color="*neutral_300",
+    input_border_color_dark="*neutral_700",
+    input_border_width="1px",
+    input_radius="*radius_md",
+    slider_color="*primary_500",
+    chatbot_code_background_color="*neutral_100",
+    chatbot_code_background_color_dark="*neutral_800",
+)
+
+with gr.Blocks(css=css, theme=theme, title="Video Chat with MiniCPM-V") as demo:
     gr.Markdown(
         """
         # 🎥 Video Chat with MiniCPM-V-4.5
@@ -186,13 +253,13 @@ with gr.Blocks(css=css, title="Video Chat with MiniCPM-V") as demo:
                     lines=2,
                     scale=4
                 )
-                submit_btn = gr.Button("Send", variant="primary", scale=1)
+                submit_btn = gr.Button("Send", variant="primary", scale=1, icon="🚀")
             
             with gr.Row():
-                clear_btn = gr.Button("🗑️ Clear Chat")
-                example_btn1 = gr.Button("📝 Describe")
-                example_btn2 = gr.Button("🎬 Action")
-                example_btn3 = gr.Button("👥 People")
+                clear_btn = gr.Button("Clear Chat", variant="secondary", size="sm", icon="🗑️")
+                example_btn1 = gr.Button("Describe", size="sm", icon="📝")
+                example_btn2 = gr.Button("Action", size="sm", icon="🎬")
+                example_btn3 = gr.Button("People", size="sm", icon="👥")
             
             with gr.Accordion("Advanced Settings", open=False):
                 fps_slider = gr.Slider(
@@ -213,14 +280,14 @@ with gr.Blocks(css=css, title="Video Chat with MiniCPM-V") as demo:
                     info=f"0 = auto, 1-{MAX_NUM_PACKING} = force specific packing number"
                 )
             
-            gr.Markdown(
-                """
-                ### Video Info
-                - Max frames: 180 × 3 packing = 540 frames
-                - Temporal compression: 64 tokens per video
-                - Supported formats: MP4, AVI, MOV, etc.
-                """
-            )
+            with gr.Accordion("ℹ️ Video Info", open=False):
+                gr.Markdown(
+                    """
+                    - **Max frames:** 180 × 3 packing = 540 frames
+                    - **Temporal compression:** 64 tokens per video
+                    - **Supported formats:** MP4, AVI, MOV, etc.
+                    """
+                )
     
     # Example questions
     example_btn1.click(