Remove examples section and optimize image upload UI with custom CSS

app.py

@@ -223,7 +223,19 @@ def process_message(message, history, image, system_prompt, temperature, max_tok
         yield history
 
 # 创建Gradio界面
-with gr.Blocks(title="Step-3 Chat", theme=gr.themes.Soft()) as demo:
+css = """
+.compact-image .wrap {
+    font-size: 12px !important;
+}
+.compact-image .upload-container {
+    min-height: 80px !important;
+}
+.compact-image .wrap .or {
+    display: none !important;
+}
+"""
+
+with gr.Blocks(title="Step-3 Chat", theme=gr.themes.Soft(), css=css) as demo:
     gr.Markdown("""
     # 🤖 Step-3 Chat
     
@@ -255,11 +267,12 @@ with gr.Blocks(title="Step-3 Chat", theme=gr.themes.Soft()) as demo:
                     )
                 with gr.Column(scale=2):
                     image_input = gr.Image(
-                        label="Upload Image (Optional)",
+                        label="Image",
                         type="filepath",
                         height=100,
                         interactive=True,
-                        show_label=True
+                        show_label=True,
+                        elem_classes="compact-image"
                     )
                 with gr.Column(scale=1, min_width=100):
                     submit_btn = gr.Button("Send", variant="primary")
@@ -304,19 +317,7 @@ with gr.Blocks(title="Step-3 Chat", theme=gr.themes.Soft()) as demo:
                     label="Top P"
                 )
             
-            # 示例
-            with gr.Accordion("📝 Examples", open=False):
-                gr.Examples(
-                    examples=[
-                        ["What is machine learning?"],
-                        ["Write a Python function to calculate fibonacci numbers"],
-                        ["Explain quantum computing in simple terms"],
-                        ["What are the benefits of renewable energy?"],
-                        ["How does blockchain technology work?"]
-                    ],
-                    inputs=msg,
-                    label=""
-                )
+
     
     # 事件处理函数
     def user_submit(message, history, image):