Update app.py

app.py

@@ -21,7 +21,7 @@ custom_css = """
     animation: gradient-animation 15s ease infinite;
 }
 
-/* Style for the main content area */
+/* Style for content areas */
 .main-container {
     background-color: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
@@ -29,72 +29,53 @@ custom_css = """
     padding: 20px;
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
     border: 1px solid rgba(255, 255, 255, 0.18);
+    margin: 10px;
 }
 
 .dark .main-container {
     background-color: rgba(30, 30, 30, 0.95);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
-
-/* Sidebar styling */
-.sidebar {
-    background-color: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(10px);
-    border-radius: 15px;
-    padding: 20px;
-    margin: 10px;
-}
-
-.dark .sidebar {
-    background-color: rgba(40, 40, 40, 0.9);
-}
-
-/* Chat interface styling */
-.chat-container {
-    height: 600px;
-}
 """
 
-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"
-    )
+# State variable to track current model
+current_model = gr.State("openai/gpt-oss-120b")
+
+def switch_model(model_choice):
+    """Function to switch between models"""
+    return gr.update(visible=False), gr.update(visible=True), model_choice
 
 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():
+        # Sidebar
         with gr.Column(scale=1):
-            with gr.Group(elem_classes="sidebar"):
+            with gr.Group(elem_classes="main-container"):
                 gr.Markdown("# 🚀 Inference Provider")
                 gr.Markdown(
                     "This Space showcases OpenAI GPT-OSS models, served by the Cerebras API. "
                     "Sign in with your Hugging Face account to use this API."
                 )
                 
-                # Model selection dropdown
+                # Model selection
                 model_dropdown = gr.Dropdown(
                     choices=[
                         "openai/gpt-oss-120b",
                         "openai/gpt-oss-20b"
                     ],
                     value="openai/gpt-oss-120b",
-                    label="Select Model",
+                    label="📊 Select Model",
                     info="Choose between different model sizes"
                 )
                 
                 # Login button
                 login_button = gr.LoginButton("Sign in with Hugging Face", size="lg")
                 
-                # Status display
-                status_text = gr.Markdown("❌ Not logged in", visible=True)
+                # Reload button to apply model change
+                reload_btn = gr.Button("🔄 Apply Model Change", variant="primary", size="lg")
                 
                 # Additional options
                 with gr.Accordion("⚙️ Advanced Options", open=False):
+                    gr.Markdown("*These options will be available after model implementation*")
                     temperature = gr.Slider(
                         minimum=0,
                         maximum=2,
@@ -109,87 +90,43 @@ 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")
         
+        # Main chat area
         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"],
-                    undo_btn="Delete Previous",
-                    clear_btn="Clear"
-                )
-    
-    # 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
+                # Container for model interfaces
+                with gr.Column(visible=True) as model_120b_container:
+                    gr.Markdown("### Model: openai/gpt-oss-120b")
+                    gr.load("models/openai/gpt-oss-120b", accept_token=login_button, provider="fireworks-ai")
+                
+                with gr.Column(visible=False) as model_20b_container:
+                    gr.Markdown("### Model: openai/gpt-oss-20b")
+                    gr.load("models/openai/gpt-oss-20b", accept_token=login_button, provider="fireworks-ai")
     
-    # Connect the login button to status update
-    login_button.click(
-        fn=update_login_status,
-        inputs=[login_button],
-        outputs=[status_text, is_logged_in]
+    # Handle model switching
+    reload_btn.click(
+        fn=switch_model,
+        inputs=[model_dropdown],
+        outputs=[model_120b_container, model_20b_container, current_model]
+    ).then(
+        fn=lambda: gr.Info("Model switched successfully!"),
+        inputs=[],
+        outputs=[]
     )
     
-    # Connect the load button
-    load_button.click(
-        fn=load_selected_model,
-        inputs=[model_dropdown, is_logged_in],
-        outputs=[]
+    # Update visibility based on dropdown selection
+    def update_visibility(model_choice):
+        if model_choice == "openai/gpt-oss-120b":
+            return gr.update(visible=True), gr.update(visible=False)
+        else:
+            return gr.update(visible=False), gr.update(visible=True)
+    
+    model_dropdown.change(
+        fn=update_visibility,
+        inputs=[model_dropdown],
+        outputs=[model_120b_container, model_20b_container]
     )
 
-# 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"):
-                # Default to 120b model
-                gr.load("models/openai/gpt-oss-120b", accept_token=button, provider="fireworks-ai")
-"""
-
 demo.launch()