Update app.py

app.py

@@ -48,18 +48,25 @@ custom_css = """
 .dark .sidebar {
     background-color: rgba(40, 40, 40, 0.9);
 }
+
+/* Chat interface styling */
+.chat-container {
+    height: 600px;
+}
 """
 
-def load_model(model_name, signed_in):
-    """Function to load different models based on selection"""
-    if not signed_in:
-        return gr.Info("Please sign in to use the models")
-    
-    # Here you would implement the actual model loading logic
-    # For now, we'll return a placeholder
-    return f"Model {model_name} loaded successfully!"
+def create_chat_interface(model_name):
+    """Create a chat interface for the selected model"""
+    # This creates the actual chat interface
+    return gr.load(
+        f"models/{model_name}",
+        provider="fireworks-ai"
+    )
 
 with gr.Blocks(fill_height=True, theme="Nymbo/Nymbo_Theme", css=custom_css) as demo:
+    # State to track login status
+    is_logged_in = gr.State(False)
+    
     with gr.Row():
         with gr.Column(scale=1):
             with gr.Group(elem_classes="sidebar"):
@@ -81,7 +88,10 @@ with gr.Blocks(fill_height=True, theme="Nymbo/Nymbo_Theme", css=custom_css) as d
                 )
                 
                 # Login button
-                button = gr.LoginButton("Sign in with Hugging Face", size="lg")
+                login_button = gr.LoginButton("Sign in with Hugging Face", size="lg")
+                
+                # Status display
+                status_text = gr.Markdown("❌ Not logged in", visible=True)
                 
                 # Additional options
                 with gr.Accordion("⚙️ Advanced Options", open=False):
@@ -99,23 +109,89 @@ with gr.Blocks(fill_height=True, theme="Nymbo/Nymbo_Theme", css=custom_css) as d
                         step=1,
                         label="Max Tokens"
                     )
+                    
+                # Load model button
+                load_button = gr.Button("🔄 Load Selected Model", variant="primary", size="lg")
+        
+        with gr.Column(scale=3):
+            with gr.Group(elem_classes="main-container"):
+                gr.Markdown("## 💬 Chat Interface")
+                
+                # Chat interface placeholder
+                chat_interface = gr.ChatInterface(
+                    fn=lambda message, history: "Please sign in and load a model to start chatting.",
+                    examples=["Hello! How are you?", "What can you help me with?", "Tell me a joke"],
+                    retry_btn=None,
+                    undo_btn="Delete Previous",
+                    clear_btn="Clear",
+                    elem_classes="chat-container"
+                )
+    
+    # Handle login status
+    def update_login_status(profile):
+        if profile:
+            return gr.update(value="✅ Logged in", visible=True), True
+        return gr.update(value="❌ Not logged in", visible=True), False
+    
+    # Load the selected model
+    def load_selected_model(model_name, logged_in):
+        if not logged_in:
+            gr.Warning("Please sign in first to use the models!")
+            return
+        
+        gr.Info(f"Loading {model_name}... This may take a moment.")
+        
+        # Here you would implement the actual model loading
+        # For now, we'll update the chat interface
+        try:
+            # Load the model-specific interface
+            loaded_interface = gr.load(
+                f"models/{model_name}",
+                accept_token=True,
+                provider="fireworks-ai"
+            )
+            gr.Success(f"Successfully loaded {model_name}!")
+            return loaded_interface
+        except Exception as e:
+            gr.Error(f"Failed to load model: {str(e)}")
+            return None
+    
+    # Connect the login button to status update
+    login_button.click(
+        fn=update_login_status,
+        inputs=[login_button],
+        outputs=[status_text, is_logged_in]
+    )
+    
+    # Connect the load button
+    load_button.click(
+        fn=load_selected_model,
+        inputs=[model_dropdown, is_logged_in],
+        outputs=[]
+    )
+
+# Alternative approach: Direct loading with model selection
+# Uncomment this if you want to use the original approach with modifications
+"""
+with gr.Blocks(fill_height=True, theme="Nymbo/Nymbo_Theme", css=custom_css) as demo:
+    with gr.Row():
+        with gr.Column(scale=1):
+            with gr.Group(elem_classes="sidebar"):
+                gr.Markdown("# 🚀 Inference Provider")
+                gr.Markdown("This Space showcases OpenAI GPT-OSS models. Sign in to use.")
+                
+                model_choice = gr.Radio(
+                    choices=["openai/gpt-oss-120b", "openai/gpt-oss-20b"],
+                    value="openai/gpt-oss-120b",
+                    label="Select Model"
+                )
+                
+                button = gr.LoginButton("Sign in")
         
         with gr.Column(scale=3):
             with gr.Group(elem_classes="main-container"):
-                # Dynamic model loading based on selection
-                @gr.render(inputs=[model_dropdown, button])
-                def render_model_interface(selected_model, login_status):
-                    if selected_model == "openai/gpt-oss-120b":
-                        gr.load(
-                            "models/openai/gpt-oss-120b",
-                            accept_token=login_status,
-                            provider="fireworks-ai"
-                        )
-                    elif selected_model == "openai/gpt-oss-20b":
-                        gr.load(
-                            "models/openai/gpt-oss-20b",
-                            accept_token=login_status,
-                            provider="fireworks-ai"
-                        )
+                # Default to 120b model
+                gr.load("models/openai/gpt-oss-120b", accept_token=button, provider="fireworks-ai")
+"""
 
 demo.launch()