Update app.py

app.py

@@ -103,14 +103,14 @@ def model_generate_ans(img=None,img_audio=None,val_q=None):
 
 with gr.Blocks() as demo:
 
-     # Add custom CSS stylesheet within Markdown
+    # Add custom CSS stylesheet within Markdown
     gr.Markdown(
     """
     <style>
     /* General Layout */
     body {
         font-family: 'Arial', sans-serif;
-        background-color: #f9f9f9;
+        background-color: #f4f6f9; /* Light pastel background */
         margin: 0;
         padding: 0;
     }
@@ -118,13 +118,13 @@ with gr.Blocks() as demo:
     /* Header */
     h1, h2, h3 {
         text-align: center;
-        color: #333;
+        color: #3a3a3a;
         font-weight: bold;
     }
 
     gr-Markdown h1 {
         font-size: 28px;
-        color: #4CAF50;
+        color: #a3d5d3; /* Soft pastel teal for the header */
     }
 
     /* Container and Columns */
@@ -138,8 +138,8 @@ with gr.Blocks() as demo:
         flex: 1;
         margin: 0 10px;
         padding: 10px;
-        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-        background-color: #fff;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
+        background-color: #f8f0fa; /* Pastel pink background for columns */
         border-radius: 8px;
     }
 
@@ -147,18 +147,21 @@ with gr.Blocks() as demo:
     .gr-Image, .gr-Audio, .gr-Text {
         width: 100%;
         margin-bottom: 15px;
+        background-color: #fff5e1; /* Soft pastel yellow for inputs */
+        border: 1px solid #e3e3e3;
+        border-radius: 8px;
     }
 
     .gr-Image label, .gr-Audio label, .gr-Text label {
         font-size: 16px;
         font-weight: bold;
-        color: #555;
+        color: #8b8b8b;
     }
 
     /* Submit Button */
     .gr-Button {
         width: 100%;
-        background-color: #4CAF50;
+        background-color: #b2c7e1; /* Pastel blue button */
         color: white;
         padding: 10px;
         font-size: 16px;
@@ -169,7 +172,7 @@ with gr.Blocks() as demo:
     }
 
     .gr-Button:hover {
-        background-color: #45a049;
+        background-color: #9db6d3; /* Darker pastel blue on hover */
     }
 
     /* Text Output */
@@ -180,6 +183,7 @@ with gr.Blocks() as demo:
         padding: 10px;
         border: 1px solid #ddd;
         border-radius: 5px;
+        background-color: #edf5e1; /* Light pastel green for the output text box */
     }
 
     /* Responsive Design */
@@ -194,9 +198,8 @@ with gr.Blocks() as demo:
     }
     </style>
 
-    # Discover MultiModal GPT: A New AI Experience!
-    Leveraging the best of CLIP and Phi-2 models for enhanced image, audio, and text understanding.
-    
+    # Engage with MultiModal GPT!
+    A seamless AI experience combining CLIP and Phi-2 models.
     """
     )