added more css to make interface consistent

app.py

@@ -28,11 +28,12 @@ def prediction(news):
     return preds_dict
 
 def file_prediction(file):
+    # Load the file (CSV or text)
     if file.name.endswith('.csv'):
-        df = pd.read_csv(file.name) 
-        news_list = df.iloc[:, 0].tolist()  
+        df = pd.read_csv(file.name)  
+        news_list = df.iloc[:, 0].tolist()
     else:
-        news_list = [file.read().decode('utf-8')]  # Load plain text
+        news_list = [file.read().decode('utf-8')] 
     
     results = []
     for news in news_list:
@@ -46,21 +47,6 @@ gradio_ui = gr.Interface(
     description=f"Enter Setswana news article to see the category of the news.\n For this classification, the {MODEL_URL} model was used.",
     inputs=gr.Textbox(lines=10, label="Paste some Setswana news here"),
     outputs=gr.Label(num_top_classes=5, label="News categories probabilities"),
-    theme="default",
-    css="""
-    body {
-        background-color: white !important;
-        color: black !important;
-    }
-    .gradio-container {
-        background-color: white !important;
-        color: black !important;
-    }
-    .gr-button {
-        background-color: #f0f0f0 !important;
-        color: black !important;
-    }
-    """
 )
 
 gradio_file_ui = gr.Interface(
@@ -69,9 +55,37 @@ gradio_file_ui = gr.Interface(
     description=f"Upload a text or CSV file with Setswana news articles. The first column in the CSV should contain the news text.",
     inputs=gr.File(label="Upload text or CSV file"),
     outputs=gr.Dataframe(headers=["News Text", "Category Predictions"], label="Predictions from file"),
-    theme="default"
 )
 
 gradio_combined_ui = gr.TabbedInterface([gradio_ui, gradio_file_ui], ["Text Input", "File Upload"])
 
-gradio_combined_ui.launch()
+css = """
+body {
+    background-color: white !important;
+    color: black !important;
+}
+
+.gradio-container {
+    background-color: white !important;
+    color: black !important;
+}
+
+.gr-input, .gr-button, .gr-textbox, .gr-file, .gr-dataframe {
+    background-color: white !important;
+    color: black !important;
+    border-color: #ccc !important;
+}
+
+.gr-button {
+    background-color: #f0f0f0 !important;
+    color: black !important;
+    border: 1px solid #ccc !important;
+}
+
+.gr-dataframe th, .gr-dataframe td {
+    background-color: #f9f9f9 !important;
+    color: black !important;
+}
+"""
+
+gradio_combined_ui.launch(css=css)