Update app.py

app.py

@@ -195,6 +195,7 @@ custom_css = """
     border-radius: 12px;
     box-shadow: 0 8px 16px rgba(0,0,0,0.1);
     overflow: hidden;
+    border: 1px solid #e0e0e0;
 }
 
 .contain {
@@ -226,12 +227,6 @@ h1 {
     border-color: #4299e1;
 }
 
-.tabs {
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    border-radius: 8px;
-    overflow: hidden;
-}
-
 .footer {
     text-align: center;
     margin-top: 20px;
@@ -264,29 +259,6 @@ h1 {
         box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
     }
 }
-
-/* Parameter tooltips */
-.parameter-container {
-    position: relative;
-}
-
-.parameter-info {
-    display: none;
-    position: absolute;
-    background: white;
-    border: 1px solid #ddd;
-    padding: 10px;
-    border-radius: 6px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    z-index: 100;
-    width: 250px;
-    top: 100%;
-    left: 10px;
-}
-
-.parameter-container:hover .parameter-info {
-    display: block;
-}
 """
 
 with gr.Blocks(css=custom_css, title=APP_TITLE, theme=gr.themes.Soft()) as demo:
@@ -307,24 +279,24 @@ with gr.Blocks(css=custom_css, title=APP_TITLE, theme=gr.themes.Soft()) as demo:
     with gr.Row():
         with gr.Column(scale=3):
             # Main chat interface
-            with gr.Box(elem_id="chat-container"):
-                chatbot = gr.Chatbot(
-                    height=550, 
-                    show_copy_button=True, 
-                    placeholder="Select a model and begin chatting", 
-                    layout="panel"
-                )
-                
-                with gr.Row():
-                    with gr.Column(scale=8):
-                        msg = gr.Textbox(
-                            show_label=False,
-                            placeholder="Type your message here...",
-                            container=False,
-                            scale=8
-                        )
-                    with gr.Column(scale=1, min_width=70):
-                        submit_btn = gr.Button("Send", variant="primary", scale=1)
+            chatbot = gr.Chatbot(
+                height=550, 
+                show_copy_button=True, 
+                placeholder="Select a model and begin chatting", 
+                layout="panel",
+                elem_id="chat-container"
+            )
+            
+            with gr.Row():
+                with gr.Column(scale=8):
+                    msg = gr.Textbox(
+                        show_label=False,
+                        placeholder="Type your message here...",
+                        container=False,
+                        scale=8
+                    )
+                with gr.Column(scale=1, min_width=70):
+                    submit_btn = gr.Button("Send", variant="primary", scale=1)
             
             with gr.Accordion("Conversation Settings", open=False):
                 system_message_box = gr.Textbox(
@@ -334,78 +306,79 @@ with gr.Blocks(css=custom_css, title=APP_TITLE, theme=gr.themes.Soft()) as demo:
                     lines=2
                 )
                 
-                with gr.Tabs(elem_classes="tabs"):
-                    with gr.TabItem("Basic Parameters"):
-                        with gr.Row(elem_classes="parameter-row"):
-                            with gr.Column():
-                                max_tokens_slider = gr.Slider(
-                                    minimum=1,
-                                    maximum=4096,
-                                    value=512,
-                                    step=1,
-                                    label="Max new tokens"
-                                )
-                            with gr.Column():
-                                temperature_slider = gr.Slider(
-                                    minimum=0.1,
-                                    maximum=4.0,
-                                    value=0.7,
-                                    step=0.1,
-                                    label="Temperature"
-                                )
-                    
-                    with gr.TabItem("Advanced Parameters"):
-                        with gr.Row(elem_classes="parameter-row"):
-                            with gr.Column():
-                                top_p_slider = gr.Slider(
-                                    minimum=0.1,
-                                    maximum=1.0,
-                                    value=0.95,
-                                    step=0.05,
-                                    label="Top-P"
-                                )
-                            with gr.Column():
-                                frequency_penalty_slider = gr.Slider(
-                                    minimum=-2.0,
-                                    maximum=2.0,
-                                    value=0.0,
-                                    step=0.1,
-                                    label="Frequency Penalty"
-                                )
-                        
-                        seed_slider = gr.Slider(
-                            minimum=-1,
-                            maximum=65535,
-                            value=-1,
+                # Use standard Row/Column layout instead of tabs that might not be available
+                gr.HTML("<h3>Basic Parameters</h3>")
+                with gr.Row():
+                    with gr.Column():
+                        max_tokens_slider = gr.Slider(
+                            minimum=1,
+                            maximum=4096,
+                            value=512,
                             step=1,
-                            label="Seed (-1 for random)"
+                            label="Max new tokens"
+                        )
+                    with gr.Column():
+                        temperature_slider = gr.Slider(
+                            minimum=0.1,
+                            maximum=4.0,
+                            value=0.7,
+                            step=0.1,
+                            label="Temperature"
                         )
-        
-        with gr.Column(scale=2):
-            # Model selection panel
-            with gr.Box():
-                gr.HTML("<h3 style='margin-top: 0;'>Model Selection</h3>")
                 
-                # Custom model input (this is what the respond function sees)
-                custom_model_box = gr.Textbox(
-                    value="meta-llama/Llama-3.3-70B-Instruct",
-                    label="Selected Model",
-                    elem_id="custom-model-input"
-                )
+                gr.HTML("<h3>Advanced Parameters</h3>")
+                with gr.Row():
+                    with gr.Column():
+                        top_p_slider = gr.Slider(
+                            minimum=0.1,
+                            maximum=1.0,
+                            value=0.95,
+                            step=0.05,
+                            label="Top-P"
+                        )
+                    with gr.Column():
+                        frequency_penalty_slider = gr.Slider(
+                            minimum=-2.0,
+                            maximum=2.0,
+                            value=0.0,
+                            step=0.1,
+                            label="Frequency Penalty"
+                        )
                 
-                # Search box
-                model_search_box = gr.Textbox(
-                    label="Search Models",
-                    placeholder="Type to filter models...",
-                    lines=1
+                seed_slider = gr.Slider(
+                    minimum=-1,
+                    maximum=65535,
+                    value=-1,
+                    step=1,
+                    label="Seed (-1 for random)"
                 )
-                
-                # Dynamic model display area
-                model_display = gr.HTML(update_model_display())
-                
-                # Model information display
-                gr.HTML("<h4>Current Model Info</h4>")
-                model_info_display = gr.Markdown(get_model_info("meta-llama/Llama-3.3-70B-Instruct"))
+        
+        with gr.Column(scale=2):
+            # Model selection panel
+            gr.HTML("<div style='border: 1px solid #e0e0e0; border-radius: 10px; padding: 15px;'>")
+            gr.HTML("<h3 style='margin-top: 0;'>Model Selection</h3>")
+            
+            # Custom model input (this is what the respond function sees)
+            custom_model_box = gr.Textbox(
+                value="meta-llama/Llama-3.3-70B-Instruct",
+                label="Selected Model",
+                elem_id="custom-model-input"
+            )
+            
+            # Search box
+            model_search_box = gr.Textbox(
+                label="Search Models",
+                placeholder="Type to filter models...",
+                lines=1
+            )
+            
+            # Dynamic model display area
+            model_display = gr.HTML(update_model_display())
+            
+            # Model information display
+            gr.HTML("<h4>Current Model Info</h4>")
+            model_info_display = gr.Markdown(get_model_info("meta-llama/Llama-3.3-70B-Instruct"))
+            gr.HTML("</div>")
     
     # Footer
     gr.HTML("""