Fix AttributeError by removing gr.Box and using more aggressive CSS selectors

app.py

@@ -268,59 +268,74 @@ def process_message(message, history, images, system_prompt, temperature, max_to
 
 # 创建Gradio界面
 css = """
-/* 设置Box容器高度 */
-.compact-file-box {
+/* 强制设置File组件容器高度 */
+.compact-file, .compact-file > * {
     height: 52px !important;
     max-height: 52px !important;
-    padding: 0 !important;
-    border: none !important;
-    background: transparent !important;
+    min-height: 52px !important;
 }
 
-/* 设置File组件高度 */
+/* 使用ID选择器确保优先级 */
 #image-upload {
     height: 52px !important;
     max-height: 52px !important;
+    min-height: 52px !important;
 }
 
-#image-upload > div {
-    height: 52px !important;
-    max-height: 52px !important;
-}
-
-#image-upload .wrap {
+#image-upload > div,
+#image-upload .wrap,
+#image-upload .block,
+#image-upload .container {
     height: 52px !important;
     max-height: 52px !important;
+    min-height: 52px !important;
     padding: 0 !important;
+    margin: 0 !important;
 }
 
-#image-upload .block {
-    height: 52px !important;
-    max-height: 52px !important;
-}
-
-/* 文件上传按钮 */
-#image-upload button {
-    height: 48px !important;
+/* 文件上传按钮样式 */
+#image-upload button,
+.compact-file button {
+    height: 50px !important;
+    max-height: 50px !important;
+    min-height: 50px !important;
     font-size: 13px !important;
-    padding: 0 16px !important;
+    padding: 0 12px !important;
+    margin: 1px !important;
 }
 
 /* 文件预览区域 */
-#image-upload .file-preview {
-    max-height: 48px !important;
-    font-size: 12px !important;
+#image-upload .file-preview,
+.compact-file .file-preview {
+    height: 50px !important;
+    max-height: 50px !important;
     overflow-y: auto !important;
+    font-size: 12px !important;
+    padding: 4px !important;
 }
 
-/* 隐藏不必要的元素 */
-#image-upload label {
+/* 隐藏标签 */
+#image-upload label,
+.compact-file label {
     display: none !important;
 }
 
-/* 文本框样式对齐参考 */
+/* 确保input元素也是正确高度 */
+#image-upload input[type="file"],
+.compact-file input[type="file"] {
+    height: 50px !important;
+    max-height: 50px !important;
+}
+
+/* 文本框参考高度 */
 #message-textbox textarea {
     min-height: 52px !important;
+    max-height: 52px !important;
+}
+
+/* 使用通配符确保所有子元素 */
+#image-upload * {
+    max-height: 52px !important;
 }
 """
 
@@ -358,16 +373,15 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
                         elem_id="message-textbox"
                     )
                 with gr.Column(scale=2):
-                    with gr.Box(elem_classes="compact-file-box"):
-                        image_input = gr.File(
-                            label="Upload Images",
-                            file_count="multiple",
-                            file_types=[".png", ".jpg", ".jpeg", ".gif", ".webp"],
-                            interactive=True,
-                            show_label=False,
-                            elem_classes="compact-file",
-                            elem_id="image-upload"
-                        )
+                    image_input = gr.File(
+                        label="Upload Images",
+                        file_count="multiple",
+                        file_types=[".png", ".jpg", ".jpeg", ".gif", ".webp"],
+                        interactive=True,
+                        show_label=False,
+                        elem_classes="compact-file",
+                        elem_id="image-upload"
+                    )
                 with gr.Column(scale=1, min_width=100):
                     submit_btn = gr.Button("Send", variant="primary")