Update app.py

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 import os
-import json
 
 ACCESS_TOKEN = os.getenv("HF_TOKEN")
 print("Access token loaded.")
@@ -107,6 +106,7 @@ def respond(
 
 # GRADIO UI
 
+# Define all the UI components first
 chatbot = gr.Chatbot(height=600, show_copy_button=True, placeholder="Select a model and begin chatting", layout="panel")
 print("Chatbot interface created.")
 
@@ -149,14 +149,6 @@ seed_slider = gr.Slider(
     label="Seed (-1 for random)"
 )
 
-# Custom model box
-custom_model_box = gr.Textbox(
-    value="",
-    label="Custom Model",
-    info="(Optional) Provide a custom Hugging Face model path. Overrides any selected featured model.",
-    placeholder="meta-llama/Llama-3.3-70B-Instruct"
-)
-
 # Provider selection
 providers_list = [
     "hf-inference",  # Default Hugging Face Inference
@@ -179,12 +171,6 @@ provider_radio = gr.Radio(
 )
 
 # Model selection components
-model_search_box = gr.Textbox(
-    label="Filter Models",
-    placeholder="Search for a featured model...",
-    lines=1
-)
-
 models_list = [
     "meta-llama/Llama-3.3-70B-Instruct",
     "meta-llama/Llama-3.1-70B-Instruct",
@@ -237,43 +223,79 @@ def set_custom_model_from_radio(selected):
     print(f"Featured model selected: {selected}")
     return selected
 
-# Create the Gradio interface
-demo = gr.ChatInterface(
-    fn=respond,
-    additional_inputs=[
-        system_message_box,
-        max_tokens_slider,
-        temperature_slider,
-        top_p_slider,
-        frequency_penalty_slider,
-        seed_slider,
-        custom_model_box,
-        provider_radio,     # Provider selection
-        model_search_box,    # Model search box
-        featured_model_radio # Featured model radio
-    ],
-    fill_height=True,
-    chatbot=chatbot,
-    theme="Nymbo/Nymbo_Theme",
-)
-print("ChatInterface object created.")
-
-with demo:
+# Create the Gradio interface with blocks for more control
+with gr.Blocks(theme="Nymbo/Nymbo_Theme") as demo:
+    with gr.Row():
+        # Create the main chat area
+        with gr.Column(scale=3):
+            # Add the chatbot UI
+            chat_interface = gr.ChatInterface(
+                respond,
+                chatbot=chatbot,
+                additional_inputs=[
+                    system_message_box,
+                    max_tokens_slider,
+                    temperature_slider,
+                    top_p_slider,
+                    frequency_penalty_slider,
+                    seed_slider,
+                    # These will be added manually outside the ChatInterface
+                    # custom_model_box,
+                    # model_search_box,
+                    provider_radio,
+                    # featured_model_radio will be linked manually
+                ]
+            )
+        
+    # Put the "Custom Model" and "Filter Models" textboxes in the same row
+    with gr.Row():
+        with gr.Column(scale=1):
+            custom_model_box = gr.Textbox(
+                value="",
+                label="Custom Model",
+                info="(Optional) Provide a custom Hugging Face model path. Overrides any selected featured model.",
+                placeholder="meta-llama/Llama-3.3-70B-Instruct"
+            )
+        with gr.Column(scale=1):
+            model_search_box = gr.Textbox(
+                label="Filter Models",
+                placeholder="Search for a featured model...",
+                lines=1
+            )
+    
+    # Add the featured model radio separately
+    featured_model_radio_display = gr.Radio(
+        label="Select a model below",
+        choices=models_list,
+        value="meta-llama/Llama-3.3-70B-Instruct",
+        interactive=True
+    )
+    
     # Connect the model filter to update the radio choices
     model_search_box.change(
         fn=filter_models,
         inputs=model_search_box,
-        outputs=featured_model_radio
+        outputs=featured_model_radio_display
     )
     print("Model search box change event linked.")
 
     # Connect the featured model radio to update the custom model box
-    featured_model_radio.change(
+    featured_model_radio_display.change(
         fn=set_custom_model_from_radio,
-        inputs=featured_model_radio,
+        inputs=featured_model_radio_display,
         outputs=custom_model_box
     )
     print("Featured model radio button change event linked.")
+    
+    # Make sure the custom model and selected model are passed to the respond function
+    def modified_respond(*args):
+        # The last two arguments are supposed to be model_search_term and selected_model
+        args_list = list(args)
+        args_list[-2] = model_search_box.value  # Set the model_search_term
+        args_list[-1] = featured_model_radio_display.value  # Set the selected_model
+        return respond(*args_list)
+    
+    chat_interface.chatbot.submit_callback = modified_respond
 
 print("Gradio interface initialized.")