Zenith Wang commited on
Commit
a493d0c
·
1 Parent(s): 28d20d3

Match File upload box height exactly with text input box (52px)

Browse files
Files changed (1) hide show
  1. app.py +26 -18
app.py CHANGED
@@ -243,34 +243,42 @@ def process_message(message, history, images, system_prompt, temperature, max_to
243
 
244
  # 创建Gradio界面
245
  css = """
 
246
  .compact-file {
247
- height: 45px !important;
248
- max-height: 45px !important;
249
  }
250
- .compact-file > div {
251
- height: 45px !important;
252
- max-height: 45px !important;
253
- }
254
- .compact-file .wrap {
255
- height: 45px !important;
256
- max-height: 45px !important;
257
  }
258
  .compact-file label {
259
- font-size: 11px !important;
260
- margin-bottom: 2px !important;
 
 
 
261
  }
262
  .compact-file .file-preview {
263
- max-height: 30px !important;
264
  overflow-y: auto !important;
265
- font-size: 11px !important;
 
266
  }
267
  .compact-file input[type="file"] {
268
- height: 30px !important;
269
- font-size: 11px !important;
270
  }
271
  .compact-file .upload-container {
272
- min-height: 30px !important;
273
- max-height: 30px !important;
 
 
 
 
 
 
 
274
  }
275
  """
276
 
@@ -310,7 +318,7 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
310
  file_count="multiple",
311
  file_types=[".png", ".jpg", ".jpeg", ".gif", ".webp"],
312
  interactive=True,
313
- show_label=True,
314
  elem_classes="compact-file"
315
  )
316
  with gr.Column(scale=1, min_width=100):
 
243
 
244
  # 创建Gradio界面
245
  css = """
246
+ /* 让文件上传框与文本框高度一致 */
247
  .compact-file {
248
+ height: 52px !important;
 
249
  }
250
+ .compact-file > div:first-child {
251
+ height: 52px !important;
252
+ display: flex !important;
253
+ flex-direction: column !important;
 
 
 
254
  }
255
  .compact-file label {
256
+ display: none !important; /* 隐藏标签以节省空间 */
257
+ }
258
+ .compact-file .wrap {
259
+ height: 52px !important;
260
+ padding: 0 !important;
261
  }
262
  .compact-file .file-preview {
263
+ max-height: 52px !important;
264
  overflow-y: auto !important;
265
+ font-size: 12px !important;
266
+ padding: 8px !important;
267
  }
268
  .compact-file input[type="file"] {
269
+ height: 52px !important;
270
+ font-size: 12px !important;
271
  }
272
  .compact-file .upload-container {
273
+ height: 52px !important;
274
+ }
275
+ /* 确保上传按钮区域也是正确高度 */
276
+ .compact-file .upload-area {
277
+ height: 52px !important;
278
+ min-height: 52px !important;
279
+ display: flex !important;
280
+ align-items: center !important;
281
+ justify-content: center !important;
282
  }
283
  """
284
 
 
318
  file_count="multiple",
319
  file_types=[".png", ".jpg", ".jpeg", ".gif", ".webp"],
320
  interactive=True,
321
+ show_label=False,
322
  elem_classes="compact-file"
323
  )
324
  with gr.Column(scale=1, min_width=100):