Update app.py

app.py

@@ -3,7 +3,7 @@ import gradio as gr
 # Custom CSS for gradient background and styling
 custom_css = """
 .gradio-container {
-    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 25%, #fbc2eb 50%, #a6c1ee 75%, #c2e9fb 100%);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
     background-size: 400% 400%;
     animation: gradient-animation 15s ease infinite;
     min-height: 100vh;
@@ -14,34 +14,34 @@ custom_css = """
     100% { background-position: 0% 50%; }
 }
 .dark .gradio-container {
-    background: linear-gradient(135deg, #2a2a3e 0%, #3a3a5e 25%, #4a4a6e 50%, #5a5a7e 75%, #6a6a8e 100%);
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #e94560 100%);
     background-size: 400% 400%;
     animation: gradient-animation 15s ease infinite;
 }
 /* Style for content areas */
 .main-container {
-    background-color: rgba(255, 255, 255, 0.92);
+    background-color: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 20px;
-    box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    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(40, 40, 40, 0.95);
+    background-color: rgba(30, 30, 30, 0.95);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 """
 
-def chat_fn(message, history, model_choice):
-    """Placeholder chat function"""
-    return f"Response from {model_choice}: {message}"
+# State variable to track current model
+current_model = gr.State("openai/gpt-oss-120b")
 
-with gr.Blocks(fill_height=True, theme="soft", css=custom_css) as demo:
-    # 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:
     with gr.Row():
         # Sidebar
         with gr.Column(scale=1):
@@ -66,6 +66,9 @@ with gr.Blocks(fill_height=True, theme="soft", css=custom_css) as demo:
                 # Login button
                 login_button = gr.LoginButton("Sign in with Hugging Face", size="lg")
                 
+                # 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*")
@@ -89,77 +92,37 @@ with gr.Blocks(fill_height=True, theme="soft", css=custom_css) as demo:
             with gr.Group(elem_classes="main-container"):
                 gr.Markdown("## 💬 Chat Interface")
                 
-                # Display current model
-                model_display = gr.Markdown(f"### Model: openai/gpt-oss-120b")
-                
-                # Single chat interface that works with both models
-                chatbot = gr.Chatbot(
-                    height=400,
-                    show_label=False,
-                    elem_classes="main-container"
-                )
-                
-                with gr.Row():
-                    msg = gr.Textbox(
-                        placeholder="Type your message here...",
-                        show_label=False,
-                        scale=9
-                    )
-                    submit_btn = gr.Button("Send", variant="primary", scale=1)
+                # 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")
                 
-                clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
+                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")
     
-    # Update model display when dropdown changes
-    def update_model_display(model_choice):
-        return f"### Model: {model_choice}", model_choice
-    
-    model_dropdown.change(
-        fn=update_model_display,
+    # Handle model switching
+    reload_btn.click(
+        fn=switch_model,
         inputs=[model_dropdown],
-        outputs=[model_display, current_model]
-    )
-    
-    # Chat functionality
-    def respond(message, chat_history, model):
-        if not message:
-            return "", chat_history
-        
-        # Add user message to history
-        chat_history = chat_history + [[message, None]]
-        
-        # Generate bot response (placeholder - replace with actual model call)
-        bot_response = f"[{model.split('/')[-1]}]: This is a placeholder response. In production, this would connect to the {model} via Fireworks AI API."
-        
-        # Update the last message with bot response
-        chat_history[-1][1] = bot_response
-        
-        return "", chat_history
-    
-    # Submit message on button click or enter
-    submit_btn.click(
-        fn=respond,
-        inputs=[msg, chatbot, current_model],
-        outputs=[msg, chatbot]
-    )
-    
-    msg.submit(
-        fn=respond,
-        inputs=[msg, chatbot, current_model],
-        outputs=[msg, chatbot]
-    )
-    
-    # Clear chat
-    clear_btn.click(
-        fn=lambda: (None, ""),
+        outputs=[model_120b_container, model_20b_container, current_model]
+    ).then(
+        fn=lambda: gr.Info("Model switched successfully!"),
         inputs=[],
-        outputs=[chatbot, msg]
+        outputs=[]
     )
     
-    # Show info message on login
-    login_button.click(
-        fn=lambda: gr.Info("Please authenticate with Hugging Face to access the models"),
-        inputs=[],
-        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]
     )
 
 demo.launch()