Update app.py

app.py

@@ -188,26 +188,26 @@ if __name__ == "__main__":
     with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="teal")) as iface:
         custom_css = """
         html, body {
-            background-color: #111111 !important;  /* Dark gray background */
-            color: #ffffff !important;  /* White text */
+            background-color: #ffffff !important;  /* White background */
+            color: #333333 !important;  /* Dark text color for better contrast */
             font-family: 'Roboto', sans-serif !important;
         }
-
+        
         #app-title {
             text-align: center;
             font-size: 36px;
             font-weight: 700;
-            color: #ffffff !important;  /* White title for dark background */
+            color: #333333 !important;  /* Dark title for white background */
             margin-bottom: 20px;
         }
-
+        
         #description {
             font-size: 18px;
             margin-bottom: 40px;
             text-align: center;
-            color: #dddddd !important;  /* Lighter text color for description */
+            color: #555555 !important;  /* Slightly darker text for description */
         }
-
+        
         .gr-button {
             padding: 12px 24px;
             font-weight: bold;
@@ -218,27 +218,28 @@ if __name__ == "__main__":
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
             transition: all 0.3s ease;
         }
-
+        
         .gr-button:hover {
             background-color: #005cbf !important;  /* Darker blue on hover */
             transform: translateY(-2px);
             box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
         }
-
+        
         .gr-input:focus {
             border-color: #0066cc !important;
             box-shadow: 0 0 8px rgba(0, 102, 204, 0.3) !important;
         }
-
+        
         .gr-output {
-            background-color: #444444 !important;  /* Lighter gray background for outputs */
+            height: 120px;
+            overflow-y: auto;
+            color: #333333 !important;
+            padding: 15px;
             border-radius: 10px;
-            padding: 20px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-            color: #ffffff !important;  /* White text for outputs */
+            border: 2px solid #28a745;  /* Green border for file section */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
-
+        
         .error-message {
             background-color: #f8d7da !important;
             border-color: #f5c6cb !important;
@@ -246,7 +247,7 @@ if __name__ == "__main__":
             padding: 15px;
             border-radius: 8px;
         }
-
+        
         .success-message {
             background-color: #d4edda !important;
             border-color: #c3e6cb !important;
@@ -254,19 +255,21 @@ if __name__ == "__main__":
             padding: 15px;
             border-radius: 8px;
         }
-
+        
         .gr-row {
             margin-bottom: 20px;
         }
+        
+        .file-output {
+            height: 90px;
+            overflow-y: auto;
+            color: #333333 !important;
+            padding: 15px;
+            border-radius: 10px;
+            border: 2px solid #28a745;  /* Green border for file section */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
 
-       .file-output {
-        height: 80px;
-        overflow-y: auto;
-        color: #ffffff !important;
-        padding: 10px;
-        border-radius: 10px;
-        border: 1px solid #555555;
-    }
 """
         iface.css = custom_css
         gr.Markdown("## GPT-2 Drug Generator", elem_id="app-title")