Fix vertical text in file upload drag-and-drop area and enhance uploader UI

app.py

@@ -470,7 +470,74 @@ with main_tab1:
         Using the latest `mistral-ocr-latest` model for advanced document understanding.
         """)
         
-        uploaded_file = st.file_uploader("Choose a PDF or image file to get started", type=["pdf", "png", "jpg", "jpeg"])
+        # Add enhanced CSS to fix the vertical text and improve the drag and drop area visually
+        st.markdown("""
+        <style>
+        /* Fix color and text orientation */
+        .uploadedFile, .uploadedFileData, .stFileUploader {
+            color: #333333 !important;
+        }
+        
+        /* Fix the text orientation for all elements in the uploader */
+        .stFileUploader label span,
+        .stFileUploader label div,
+        .stFileUploader p,
+        .stFileUploader div[data-testid="stFileUploadDropzone"] span,
+        .stFileUploader div[data-testid="stFileUploadDropzone"] div,
+        .stFileUploader div[data-testid="stFileUploadDropzone"] label,
+        .stFileUploader div[data-testid="stFileUploadDropzone"] p {
+            white-space: normal !important;
+            display: inline-block !important;
+            height: auto !important;
+            text-orientation: mixed !important;
+            writing-mode: horizontal-tb !important;
+            width: auto !important;
+            text-align: center !important;
+            color: #424242 !important;
+            font-weight: 400 !important;
+        }
+        
+        /* Enhance the drop zone appearance */
+        .stFileUploader > section > div,
+        .stFileUploader div[data-testid="stFileUploadDropzone"] {
+            display: flex !important;
+            flex-direction: column !important;
+            align-items: center !important;
+            justify-content: center !important;
+            text-align: center !important;
+            height: auto !important;
+            min-height: 180px !important;
+            background-color: #f5f5f5 !important;
+            border: 2px dashed #bdbdbd !important;
+            border-radius: 8px !important;
+            transition: background-color 0.3s, border-color 0.3s !important;
+            padding: 20px !important;
+            margin-bottom: 20px !important;
+        }
+        
+        /* Hover effect for better user feedback */
+        .stFileUploader > section > div:hover,
+        .stFileUploader div[data-testid="stFileUploadDropzone"]:hover {
+            background-color: #e8f4fd !important;
+            border-color: #2196f3 !important;
+        }
+        
+        /* Add visual icon for upload */
+        .stFileUploader div[data-testid="stFileUploadDropzone"]::before {
+            content: "📄" !important;
+            font-size: 36px !important;
+            display: block !important;
+            margin-bottom: 10px !important;
+        }
+        </style>
+        """, unsafe_allow_html=True)
+        
+        # Add visual label above the file uploader
+        st.markdown('<div style="margin-bottom:8px; font-weight:500; color:#212121;">📄 Upload Historical Document</div>', unsafe_allow_html=True)
+        
+        # Enhanced file uploader with better help text
+        uploaded_file = st.file_uploader("Drag and drop PDFs or images here", type=["pdf", "png", "jpg", "jpeg"], 
+                                        help="Supports PDFs, JPGs, PNGs and other image formats")
         
         # Removed seed prompt instructions from here, moving to sidebar