Update app.py

app.py

@@ -780,59 +780,48 @@ def create_interface():
         color: white !important;
     }
     
-    /* Custom styling for the file upload button */
-    .gradio-file {
-        height: 40px !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        background-color: #f0f0f0 !important;
-        border: 1px solid #d9d9d9 !important;
-        border-radius: 4px !important;
+    /* Target the file upload component */
+    [data-testid="file"] {
         margin-left: 15px !important;
         width: 150px !important;
-        position: relative !important;
-        overflow: hidden !important;
     }
     
-    /* Style the upload button label */
-    .gradio-file > div:first-child {
+    /* Style the file upload button to match original design */
+    [data-testid="file"] [data-testid="block"] > div:first-child {
+        height: 40px !important;
+        background-color: #f0f0f0 !important;
+        border: 1px solid #d9d9d9 !important;
+        border-radius: 4px !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
-        height: 100% !important;
-        width: 100% !important;
+        text-align: center !important;
     }
     
-    /* Hide unnecessary elements */
-    .gradio-file p, 
-    .gradio-file .file-preview, 
-    .gradio-file svg {
+    /* Hide the drop area text and icon */
+    [data-testid="file"] [data-testid="block"] svg,
+    [data-testid="file"] [data-testid="block"] p,
+    [data-testid="file"] [data-testid="block"] > div:not(:first-child) {
         display: none !important;
     }
     
-    /* Make sure the input is accessible to clicks but visually hidden */
-    .gradio-file input[type="file"] {
-        cursor: pointer !important;
+    /* Add custom text */
+    [data-testid="file"] [data-testid="block"]::before {
+        content: "Upload Document" !important;
         position: absolute !important;
-        top: 0 !important;
-        left: 0 !important;
-        width: 100% !important;
-        height: 100% !important;
-        opacity: 0 !important;
+        z-index: 10 !important;
+        pointer-events: none !important;
     }
     
-    /* Add the text with a pseudo-element */
-    .gradio-file > div:first-child::before {
-        content: "Upload Document" !important;
-        display: block !important;
-        pointer-events: none !important;
+    /* Hide the existing text without breaking functionality */
+    [data-testid="file"] [data-testid="block"] span {
+        opacity: 0 !important;
+        height: 0 !important;
     }
     
-    /* Ensure the radio buttons and file upload are aligned */
-    .radio-container, .file-container {
-        display: flex !important;
-        align-items: center !important;
+    /* Hide the "or" text that appears */
+    [data-testid="file"] .or {
+        display: none !important;
     }
     """