update

app.py

@@ -10,6 +10,99 @@ from openai import OpenAI
 DEFAULT_MODEL = os.getenv("DEFAULT_MODEL", "ERNIE-4.5-VL-28B-A3B-Thinking")
 BASE_URL = os.getenv("BASE_URL","")
 api_key = os.getenv("ERNIE_API_KEY","")
+
+CUSTOM_CSS = """
+body {
+    background: radial-gradient(circle at top, #fdfbff 0%, #e7ecf7 45%, #dfe6f5 100%);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+    color: #0f172a;
+}
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto;
+}
+#ernie-hero {
+    padding: 12px 0 4px;
+}
+#ernie-hero h1 {
+    font-size: 1.85rem;
+    margin-bottom: 0;
+    font-weight: 500;
+}
+#examples-panel {
+    margin-top: 20px;
+    padding: 18px 22px;
+    border-radius: 18px;
+    border: 1px solid rgba(15, 23, 42, 0.12);
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
+    gap: 18px;
+}
+#examples-panel h4 {
+    margin: 0 0 8px;
+    font-size: 1.1rem;
+    font-weight: 500;
+}
+#examples-panel p {
+    margin: 0;
+    color: rgba(15, 23, 42, 0.7);
+    font-size: 0.95rem;
+}
+#examples-grid table {
+    width: 100%;
+}
+#examples-grid table tbody {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 12px;
+}
+#examples-grid table tr {
+    display: block;
+    background: #f7f9ff;
+    border-radius: 14px;
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    padding: 14px;
+    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
+}
+#examples-grid table td {
+    display: block;
+    padding: 0;
+}
+#chat-wrapper {
+    margin-top: 32px;
+    border-radius: 24px;
+    padding: 18px;
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid rgba(15, 23, 42, 0.1);
+    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: radial-gradient(circle at top, #1f264b 0%, #0f172a 45%, #040713 100%);
+        color: #ecf2ff;
+    }
+    #examples-panel {
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        background: rgba(8, 13, 30, 0.85);
+        box-shadow: 0 15px 45px rgba(3, 7, 18, 0.55);
+    }
+    #examples-panel p {
+        color: rgba(236, 242, 255, 0.75);
+    }
+    #examples-grid table tr {
+        background: rgba(15, 23, 42, 0.7);
+        border: 1px solid rgba(255, 255, 255, 0.04);
+        box-shadow: 0 10px 30px rgba(4, 6, 15, 0.45);
+    }
+    #chat-wrapper {
+        background: rgba(2, 6, 23, 0.78);
+        border: 1px solid rgba(99, 102, 241, 0.25);
+        box-shadow: 0 25px 70px rgba(2, 6, 23, 0.7);
+    }
+}
+"""
+
 _client = OpenAI(
     base_url=BASE_URL,
     api_key=api_key,
@@ -117,8 +210,29 @@ def stream_response(message: Dict[str, Any], history: List[Dict[str, Any]], mode
 
 
 def build_demo() -> gr.Blocks:
-    with gr.Blocks(title="ERNIE-4.5-VL-28B-A3B-Thinking") as demo:
-        chatbot = gr.Chatbot(type="messages", allow_tags=["think"],height=600)
+    theme = gr.themes.Soft(primary_hue="violet", secondary_hue="cyan", neutral_hue="slate")
+
+    with gr.Blocks(
+        title="ERNIE-4.5-VL-28B-A3B-Thinking",
+        theme=theme,
+        css=CUSTOM_CSS,
+    ) as demo:
+        with gr.Column(elem_id="ernie-hero"):
+            gr.Markdown(
+                """
+                <h1>Chat with ERNIE-4.5-VL-28B-A3B-Thinking</h1>
+                """,
+                elem_id="hero-text",
+            )
+
+        chatbot = gr.Chatbot(
+            type="messages",
+            allow_tags=["think"],
+            height=560,
+            render_markdown=True,
+            bubble_full_width=False,
+            show_copy_button=True,
+        )
         textbox = gr.MultimodalTextbox(
             show_label=False,
             placeholder="Enter text, or upload one or more images...",
@@ -137,20 +251,31 @@ def build_demo() -> gr.Blocks:
             },
         ]
 
-        chat_interface = gr.ChatInterface(
-            fn=stream_response,
-            type="messages",
-            multimodal=True,
-            chatbot=chatbot,
-            textbox=textbox,
-        )
+        with gr.Row(elem_id="examples-panel"):
+            with gr.Column(scale=1):
+                gr.Markdown(
+                    """
+                    <h4>Quick Examples</h4>
+                    <p>选择一个示例，即可快速体验 ERNIE 的视觉 + 推理能力。</p>
+                    """,
+                    elem_id="examples-copy",
+                )
+            with gr.Column(scale=2):
+                gr.Examples(
+                    examples=examples,
+                    inputs=textbox,
+                    label=None,
+                    examples_per_page=4,
+                    elem_id="examples-grid",
+                )
 
-        with gr.Row():
-            gr.Examples(
-                examples=examples,
-                inputs=textbox,
-                label="示例 Examples",
-                examples_per_page=2,
+        with gr.Column(elem_id="chat-wrapper"):
+            chat_interface = gr.ChatInterface(
+                fn=stream_response,
+                type="messages",
+                multimodal=True,
+                chatbot=chatbot,
+                textbox=textbox,
             )