Update app.py

app.py

@@ -838,58 +838,51 @@ def create_interface():
     # Custom CSS for the interface
     css = """
     #analyze-btn {
-        background-color: #FF8C00 !important; /* Keep your analyze button style */
+        background-color: #FF8C00 !important;
         border-color: #FF8C00 !important;
         color: white !important;
     }
     
-    /* Style the file upload component container */
+    /* Style the file upload to be more compact */
     .file-upload {
-        min-width: 150px !important; /* Set a minimum width */
-        max-width: 200px !important; /* Set a maximum width */
-        margin-left: 15px !important; /* Keep the margin */
-        flex-grow: 0 !important; /* Prevent it from expanding too much */
-        overflow: hidden; /* Hide any overflowing default elements */
+        width: 150px !important;
+        margin-left: 15px !important;
     }
     
-    /* Style the actual button inside the file component */
-    .file-upload > div > button.secondary { /* More specific selector for the button */
-        height: 40px !important; /* Match the desired height */
-        width: 100% !important; /* Make button fill the container width */
-        background-color: #e0e0e0 !important; /* A cleaner light grey */
-        border: 1px solid #bdbdbd !important; /* A slightly darker border */
+    /* Hide file preview elements */
+    .file-upload .file-preview,
+    .file-upload p:not(.file-upload p:first-child),
+    .file-upload svg,
+    .file-upload [data-testid="chunkFileDropArea"],
+    .file-upload .file-drop {
+        display: none !important;
+    }
+    
+    /* Style the upload button */
+    .file-upload button {
+        height: 40px !important;
+        width: 100% !important;
+        background-color: #f0f0f0 !important;
+        border: 1px solid #d9d9d9 !important;
         border-radius: 4px !important;
-        color: #333 !important; /* Dark grey text for readability */
+        color: #333 !important;
         font-size: 14px !important;
-        font-weight: 500; /* Slightly bolder text */
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
-        padding: 0 10px !important; /* Horizontal padding */
-        text-align: center;
-        line-height: normal !important; /* Use normal line height */
-        box-shadow: none !important; /* Remove default shadows */
-        transition: background-color 0.2s ease; /* Add a hover effect */
+        margin: 0 !important;
+        padding: 0 !important;
     }
     
-    .file-upload > div > button.secondary:hover {
-        background-color: #d5d5d5 !important; /* Darken slightly on hover */
-    }
-    
-    
-    /* Hide unnecessary default text elements within the file component */
-    .file-upload > div > div[data-testid="block-label"], /* Hide the block label */
-    .file-upload > div > div > p, /* Hide paragraphs like 'or Drag-and-Drop' */
-    .file-upload > div > div > .or /* Hide the 'or' text */
-    {
+    /* Hide the "or" text */
+    .file-upload .or {
         display: none !important;
     }
     
-    /* Clean up the styling of the area containing the button */
-    .file-upload > div > div > .w-full {
-         padding: 0 !important; /* Remove padding */
-         border: none !important; /* Remove border */
-         background: none !important; /* Remove any background */
+    /* Make the container compact */
+    .file-upload [data-testid="block"] {
+        margin: 0 !important;
+        padding: 0 !important;
     }
     """