Update app.py

app.py

@@ -61,41 +61,85 @@ def run(history, text, image, audio_upload, audio_mic):
     return history, None, None, None, None
 
 
+# Custom styling
+interface_style = {
+    "box": {
+        "backgroundColor": "#f9f9f9",
+        "padding": "20px",
+        "borderRadius": "10px",
+        "boxShadow": "0 0 10px rgba(0, 0, 0, 0.1)",
+    },
+    "button": {
+        "backgroundColor": "#4caf50",
+        "color": "#fff",
+        "padding": "10px",
+        "border": "none",
+        "borderRadius": "5px",
+        "cursor": "pointer",
+    },
+    "textbox": {
+        "width": "100%",
+        "padding": "10px",
+        "marginBottom": "10px",
+        "boxSizing": "border-box",
+    },
+    "image": {
+        "width": "100%",
+        "marginBottom": "10px",
+    },
+    "audio": {
+        "width": "100%",
+        "marginBottom": "10px",
+    },
+    "chatbox": {
+        "height": "550px",
+        "backgroundColor": "#f0f0f0",
+        "borderRadius": "5px",
+        "padding": "10px",
+        "overflowY": "auto",
+    },
+}
+
 with gr.Blocks() as demo:
-    gr.Markdown("## MulitModal Phi2 Model Pretraining and Finetuning from Scratch")
-    
+    gr.Markdown("## MultiModal Phi2 Model Pretraining and Finetuning from Scratch")
+
     with gr.Row():
         with gr.Column(scale=4):
-            # Creating a column with a scale of 6
-            with gr.Box():
+            with gr.Box(style=interface_style["box"]):
                 with gr.Row():
-                    # Adding a Textbox with a placeholder "write prompt"
                     prompt = gr.Textbox(
-                        placeholder="Enter Prompt", lines=2, label="Query", value=None
+                        placeholder="Enter Prompt",
+                        lines=2,
+                        label="Query",
+                        value=None,
+                        style=interface_style["textbox"],
                     )
-                # Creating a column with a scale of 2
                 with gr.Row():
-                    # Adding image
-                    image = gr.Image(type="filepath", value=None)
-                # Creating a column with a scale of 2
+                    image = gr.Image(
+                        type="filepath", value=None, style=interface_style["image"]
+                    )
                 with gr.Row():
-                    # Add audio
-                    audio_upload = gr.Audio(source="upload", type="filepath")
+                    audio_upload = gr.Audio(
+                        source="upload", type="filepath", style=interface_style["audio"]
+                    )
                     audio_mic = gr.Audio(
-                        source="microphone", type="filepath", format="mp3"
+                        source="microphone",
+                        type="filepath",
+                        format="mp3",
+                        style=interface_style["audio"],
                     )
 
         with gr.Column(scale=8):
-            with gr.Box():
+            with gr.Box(style=interface_style["box"]):
                 with gr.Row():
                     chatbot = gr.Chatbot(
                         avatar_images=("🧑", "🤖"),
                         height=550,
+                        style=interface_style["chatbox"],
                     )
                 with gr.Row():
-                    # Adding a Button
-                    submit = gr.Button()
-                    clear = gr.Button(value="Clear")
+                    submit = gr.Button(style=interface_style["button"])
+                    clear = gr.Button(value="Clear", style=interface_style["button"])
 
     submit.click(
         add_content,