Update app.py

app.py

@@ -109,14 +109,49 @@ body { font-family: 'Open Sans', sans-serif !important; }
 }
 .model-selector {
     display: flex;
-    gap: 0.5rem;
+    gap: 8px;
     margin-bottom: 1rem;
 }
-.model-button {
-    padding: 0.25rem 0.75rem !important;
-    min-width: 0 !important;
-    height: 32px !important;
-    font-size: 0.875rem !important;
+#model-buttons .gr-form {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+#model-buttons .gr-radio-row {
+    gap: 8px !important;
+}
+#model-buttons label {
+    display: flex !important;
+    align-items: center !important;
+    gap: 4px !important;
+    padding: 4px 12px !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 6px !important;
+    font-size: 14px !important;
+    cursor: pointer !important;
+    transition: all 0.2s !important;
+}
+#model-buttons label:hover {
+    background-color: #f3f4f6 !important;
+}
+#model-buttons label.selected {
+    background-color: #4c4ce3 !important;
+    color: white !important;
+    border-color: #4c4ce3 !important;
+}
+#model-buttons label:before {
+    content: "" !important;
+    width: 20px !important;
+    height: 20px !important;
+    background-size: contain !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+}
+#model-buttons label:nth-child(1):before {
+    background-image: url('img/gemini-icon.png') !important;
+}
+#model-buttons label:nth-child(2):before {
+    background-image: url('img/openai-icon.png') !important;
 }
 """
 
@@ -129,14 +164,17 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     
     with gr.Row(elem_classes="model-selector"):
         with gr.Column(scale=1):
-            model_choice = gr.Radio(
-                choices=["Gemini", "OpenAI"],
-                value="Gemini",
-                label="Select Model",
-                elem_classes="model-buttons",
-                container=False,
-                interactive=True
-            )
+            with gr.Row():
+                model_choice = gr.Radio(
+                    choices=["Gemini", "OpenAI"],
+                    value="Gemini",
+                    label="",
+                    elem_classes="model-selector",
+                    elem_id="model-buttons",
+                    container=False,
+                    interactive=True
+                )
+
     
     with gr.Row():
         with gr.Column(scale=1):