Update app.py

app.py

@@ -125,7 +125,75 @@ def handle_input(user_prompt, image=None, audio=None, websearch=False, document=
 
 # Gradio UI Setup
 def create_ui():
-    with gr.Blocks() as demo:
+    with gr.Blocks(css="""
+        /* Overall Styling */
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            color: #333;
+        }
+
+        /* Title Styling */
+        .gradio-container h1 {
+            text-align: center;
+            padding: 20px 0;
+            background-color: #007bff; /* Example color */
+            color: white;
+        }
+
+        /* Input Area Styling */
+        .gradio-container .gr-row {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .gradio-container .gr-column {
+            flex: 1;
+            margin: 0 10px;
+        }
+
+        /* Textbox Styling */
+        .gradio-container textarea {
+            width: calc(100% - 20px);
+            padding: 10px;
+            border: 2px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        /* Button Styling */
+        .gradio-container button {
+            background-color: #007bff; /* Example color */
+            color: white;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+
+        .gradio-container button:hover {
+            background-color: #0056b3; /* Example darker color */
+        }
+
+        /* Output Area Styling */
+        .gradio-container .output-area {
+            padding: 20px;
+            text-align: center;
+        }
+
+        /* Image Styling */
+        .gradio-container img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 5px;
+        }
+    """) as demo:
         gr.Markdown("# AI Assistant")
         with gr.Row():
             with gr.Column(scale=2):
@@ -133,7 +201,7 @@ def create_ui():
             with gr.Column(scale=1):
                 image_input = gr.Image(type="filepath", label="Upload an image", elem_id="image-icon")
                 audio_input = gr.Audio(type="filepath", label="Upload audio", elem_id="mic-icon")
-                document_input = gr.File(type="filepath", label="Upload a document", elem_id="document-icon") 
+                document_input = gr.File(type="filepath", label="Upload a document", elem_id="document-icon")
                 voice_only_mode = gr.Checkbox(label="Enable Voice Only Mode", elem_id="voice-only-mode")
                 websearch_mode = gr.Checkbox(label="Enable Web Search", elem_id="websearch-mode")
             with gr.Column(scale=1):