milwright commited on
Commit
3b93e7d
Β·
1 Parent(s): a38b9fe

Simplify file upload heading and fix drag and drop text orientation

Browse files
Files changed (1) hide show
  1. app.py +15 -49
app.py CHANGED
@@ -470,70 +470,36 @@ with main_tab1:
470
  Using the latest `mistral-ocr-latest` model for advanced document understanding.
471
  """)
472
 
473
- # Add enhanced CSS to fix the vertical text and improve the drag and drop area visually
474
  st.markdown("""
475
  <style>
476
- /* Fix color and text orientation - use white text */
477
  .uploadedFile, .uploadedFileData, .stFileUploader {
478
- color: #ffffff !important;
479
  }
480
 
481
- /* Fix the text orientation for all elements in the uploader */
482
- .stFileUploader label span,
483
- .stFileUploader label div,
484
  .stFileUploader p,
485
- .stFileUploader div[data-testid="stFileUploadDropzone"] span,
486
- .stFileUploader div[data-testid="stFileUploadDropzone"] div,
487
- .stFileUploader div[data-testid="stFileUploadDropzone"] label,
488
- .stFileUploader div[data-testid="stFileUploadDropzone"] p {
489
- white-space: normal !important;
490
- display: inline-block !important;
491
- height: auto !important;
492
- text-orientation: mixed !important;
493
  writing-mode: horizontal-tb !important;
494
- width: auto !important;
495
- text-align: center !important;
496
- color: #ffffff !important;
497
- font-weight: 400 !important;
498
  }
499
 
500
- /* Enhance the drop zone appearance with page background color */
501
  .stFileUploader > section > div,
502
  .stFileUploader div[data-testid="stFileUploadDropzone"] {
503
- display: flex !important;
504
- flex-direction: column !important;
505
- align-items: center !important;
506
- justify-content: center !important;
507
- text-align: center !important;
508
- height: auto !important;
509
- min-height: 180px !important;
510
- background-color: #f0f2f6 !important;
511
- border: 2px dashed #ffffff !important;
512
- border-radius: 8px !important;
513
- transition: background-color 0.3s, border-color 0.3s !important;
514
- padding: 20px !important;
515
- margin-bottom: 20px !important;
516
- }
517
-
518
- /* Hover effect for better user feedback - still using page background */
519
- .stFileUploader > section > div:hover,
520
- .stFileUploader div[data-testid="stFileUploadDropzone"]:hover {
521
- background-color: #f0f2f6 !important;
522
- border-color: #ffffff !important;
523
- }
524
-
525
- /* Add visual icon for upload */
526
- .stFileUploader div[data-testid="stFileUploadDropzone"]::before {
527
- content: "πŸ“„" !important;
528
- font-size: 36px !important;
529
- display: block !important;
530
- margin-bottom: 10px !important;
531
  }
532
  </style>
533
  """, unsafe_allow_html=True)
534
 
535
- # Add visual label above the file uploader with white text on page background
536
- st.markdown('<div style="margin-bottom:8px; font-weight:500; color:#ffffff; background-color:#f0f2f6; padding:8px; border-radius:4px; font-size:16px;">πŸ“„ Upload Historical Document</div>', unsafe_allow_html=True)
537
 
538
  # Enhanced file uploader with better help text
539
  uploaded_file = st.file_uploader("Drag and drop PDFs or images here", type=["pdf", "png", "jpg", "jpeg"],
 
470
  Using the latest `mistral-ocr-latest` model for advanced document understanding.
471
  """)
472
 
473
+ # Simple CSS just to fix vertical text in drag and drop area
474
  st.markdown("""
475
  <style>
476
+ /* Reset all file uploader styling */
477
  .uploadedFile, .uploadedFileData, .stFileUploader {
478
+ color: inherit !important;
479
  }
480
 
481
+ /* Fix vertical text orientation */
 
 
482
  .stFileUploader p,
483
+ .stFileUploader span,
484
+ .stFileUploader div p,
485
+ .stFileUploader div span,
486
+ .stFileUploader label p,
487
+ .stFileUploader label span,
488
+ .stFileUploader div[data-testid="stFileUploadDropzone"] p,
489
+ .stFileUploader div[data-testid="stFileUploadDropzone"] span {
 
490
  writing-mode: horizontal-tb !important;
 
 
 
 
491
  }
492
 
493
+ /* Simplify the drop zone appearance */
494
  .stFileUploader > section > div,
495
  .stFileUploader div[data-testid="stFileUploadDropzone"] {
496
+ min-height: 100px !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
497
  }
498
  </style>
499
  """, unsafe_allow_html=True)
500
 
501
+ # Add heading for the file uploader (just text, no container)
502
+ st.markdown('## Upload Historical Document')
503
 
504
  # Enhanced file uploader with better help text
505
  uploaded_file = st.file_uploader("Drag and drop PDFs or images here", type=["pdf", "png", "jpg", "jpeg"],