added css

app.py

@@ -100,23 +100,86 @@ def run_example(image, model_id="Qwen/Qwen2-VL-7B-Instruct"):
     return output_text[0]
 
 css = """
+  /* Overall app styling */
+  .gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f8f9fa;
+  }
+
+  /* Tabs styling */
+  .tabs {
+    border-radius: 8px;
+    background: white;
+    padding: 20px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Input/Output containers */
+  .input-container, .output-container {
+    background: white;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 10px 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  }
+
+  /* Button styling */
+  .submit-btn {
+    background-color: #2d31fa !important;
+    border: none !important;
+    padding: 8px 20px !important;
+    border-radius: 6px !important;
+    color: white !important;
+    transition: all 0.3s ease !important;
+  }
+  
+  .submit-btn:hover {
+    background-color: #1f24c7 !important;
+    transform: translateY(-1px);
+  }
+
+  /* Output text area */
   #output {
-    height: 500px; 
-    overflow: auto; 
-    border: 1px solid #ccc; 
+    height: 500px;
+    overflow: auto;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 15px;
+    background: #ffffff;
+    font-family: 'Arial', sans-serif;
+  }
+
+  /* Dropdown styling */
+  .gr-dropdown {
+    border-radius: 6px !important;
+    border: 1px solid #e0e0e0 !important;
+  }
+
+  /* Image upload area */
+  .gr-image-input {
+    border: 2px dashed #ccc;
+    border-radius: 8px;
+    padding: 20px;
+    transition: all 0.3s ease;
+  }
+
+  .gr-image-input:hover {
+    border-color: #2d31fa;
   }
 """
 
 with gr.Blocks(css=css) as demo:
     gr.Image("Caracal.jpg", interactive=False)
-    with gr.Tab(label="Image Input"):
+    with gr.Tab(label="Image Input", elem_classes="tabs"):
         with gr.Row():
-            with gr.Column():
-                input_img = gr.Image(label="Input Picture")
-                model_selector = gr.Dropdown(choices=list(models.keys()), label="Model", value="Qwen/Qwen2-VL-7B-Instruct")
-                submit_btn = gr.Button(value="Submit")
-            with gr.Column():
-                output_text = gr.Textbox(label="Output Text")
+            with gr.Column(elem_classes="input-container"):
+                input_img = gr.Image(label="Input Picture", elem_classes="gr-image-input")
+                model_selector = gr.Dropdown(choices=list(models.keys()), label="Model", value="Qwen/Qwen2-VL-7B-Instruct", elem_classes="gr-dropdown")
+                submit_btn = gr.Button(value="Submit", elem_classes="submit-btn")
+            with gr.Column(elem_classes="output-container"):
+                output_text = gr.Textbox(label="Output Text", elem_id="output")
 
         submit_btn.click(run_example, [input_img, model_selector], [output_text])