"Updated CSS styles and added elem_classes to gr.Image and gr.Number components in app.py"

app.py

@@ -31,7 +31,7 @@ with gr.Blocks(css=utils.css, js=utils.js, theme=gr.themes.Ocean(primary_hue=gr.
     with gr.Row():
         with gr.Column(scale=5):
             # Image upload
-            image_input = gr.Image(type="pil", label="Upload Image", height=177)
+            image_input = gr.Image(type="pil", label="Upload Image", height=177, elem_classes="image-input")
         
         with gr.Column(scale=5):
             longitude = gr.Number(label="Longitude")
@@ -39,20 +39,20 @@ with gr.Blocks(css=utils.css, js=utils.js, theme=gr.themes.Ocean(primary_hue=gr.
 
     with gr.Row():
         with gr.Column(scale=5):
-            cloud_cover = gr.Number(label="Monthly Cloud Cover")
-            evapotranspiration = gr.Number(label="Potential EvapoTranspiration")
+            cloud_cover = gr.Number(label="Monthly Cloud Cover", elem_classes="num-input")
+            evapotranspiration = gr.Number(label="Potential EvapoTranspiration", elem_classes="num-input")
         
         with gr.Column(scale=5):
-            precipitation = gr.Number(label="Precipitation")
-            min_temp = gr.Number(label="Minimum Temperature")
+            precipitation = gr.Number(label="Precipitation", elem_classes="num-input")
+            min_temp = gr.Number(label="Minimum Temperature", elem_classes="num-input")
 
         with gr.Column(scale=5):
-            mean_temp = gr.Number(label="Mean Temperature")
-            max_temp = gr.Number(label="Maximum Temperature")
+            mean_temp = gr.Number(label="Mean Temperature", elem_classes="num-input")
+            max_temp = gr.Number(label="Maximum Temperature", elem_classes="num-input")
         
         with gr.Column(scale=5):
-            vapour_pressure = gr.Number(label="Vapour Pressure")
-            wet_day_freq = gr.Number(label="Wet Day Frequency")
+            vapour_pressure = gr.Number(label="Vapour Pressure", elem_classes="num-input")
+            wet_day_freq = gr.Number(label="Wet Day Frequency", elem_classes="num-input")
 
     with gr.Row():
         predict_button = gr.Button("Predict", variant="primary")

src/utils.py

@@ -25,16 +25,13 @@ css="""
     }
 
     .title {
+        color: fff !important;
         font-family: 'Trebuchet MS';
         text-align: center;
         padding: 10px 0;
         background-color: #1f2121;
     }
 
-    input, textarea{
-        background-color: #18191a;
-    }
-
     #output-container {
         max-height: 400px;
         overflow-y: auto;
@@ -43,6 +40,10 @@ css="""
         border-radius: 5px;
     }
 
+    .image-input, .num-input{
+        backgroud-color: #1f2121 !important;
+    }
+
 """
 
 js = """