Update app.py

app.py

@@ -59,41 +59,83 @@ def get_chat_response(api_key, user_input, history):
     history = history + [[user_input, assistant_reply]]
     return history, history
 
+def set_api_key(api_key):
+    """
+    Stores the user's API key.
+
+    Args:
+        api_key (str): User-provided Fireworks AI API key.
+
+    Returns:
+        tuple: Stored API key and confirmation message.
+    """
+    if api_key:
+        return api_key, "✅ API Key has been set."
+    else:
+        return "", "❌ Please enter a valid API key."
+
+def send_message(user_input, history, api_key):
+    """
+    Handles sending messages to the chatbot.
+
+    Args:
+        user_input (str): The message input by the user.
+        history (list): The conversation history.
+        api_key (str): User-provided Fireworks AI API key.
+
+    Returns:
+        tuple: Updated conversation history with the assistant's response.
+    """
+    if not api_key:
+        assistant_reply = "❌ Please enter your Fireworks AI API key above."
+        history = history + [[user_input, assistant_reply]]
+        return history, history
+
+    return get_chat_response(api_key, user_input, history)
+
 # Define the Gradio Blocks interface
 with gr.Blocks() as demo:
     gr.Markdown(
         """
-        # Fireworks AI Chatbot
+        # 🪄 Fireworks AI Chatbot
         Interact with the Fireworks AI chatbot powered by the LLaMA model.
         Enter your **Fireworks AI API key** and your messages below to receive responses in real-time.
         """
     )
     
     with gr.Row():
-        with gr.Column(scale=0.7):
+        with gr.Column(scale=7):
             api_key_input = gr.Textbox(
-                label="Fireworks AI API Key",
+                label="🔑 Fireworks AI API Key",
                 placeholder="Enter your API key here...",
                 type="password",
                 lines=1
             )
-        with gr.Column(scale=0.3):
+        with gr.Column(scale=3):
             set_key_button = gr.Button("Set API Key")
     
-    chatbot = gr.Chatbot(label="Chatbot")
+    # Output for API key confirmation
+    api_key_status = gr.Textbox(
+        label="API Key Status",
+        interactive=False,
+        lines=1,
+        value=""
+    )
+    
+    chatbot = gr.Chatbot(label="💬 Chatbot")
     
     with gr.Row():
-        with gr.Column(scale=0.85):
+        with gr.Column(scale=8):
             user_input = gr.Textbox(
                 placeholder="Type your message here...",
-                label="Your Message",
+                label="📝 Your Message",
                 lines=1
             )
-        with gr.Column(scale=0.15):
+        with gr.Column(scale=2):
             send_button = gr.Button("Send")
     
     # Optional: Add example buttons
-    with gr.Accordion("Examples", open=False):
+    with gr.Accordion("💡 Examples", open=False):
         examples = gr.Examples(
             examples=[
                 "Tell me a joke.",
@@ -108,70 +150,35 @@ with gr.Blocks() as demo:
     # Initialize the conversation history and store the API key
     history = gr.State([])
     stored_api_key = gr.State("")
-
-    def set_api_key(api_key):
-        """
-        Stores the user's API key.
-
-        Args:
-            api_key (str): User-provided Fireworks AI API key.
-
-        Returns:
-            str: Confirmation message.
-        """
-        if api_key:
-            return "API Key has been set."
-        else:
-            return "Please enter a valid API key."
-
+    
     # Set API Key Button Click Event
     set_key_button.click(
         fn=set_api_key,
         inputs=api_key_input,
-        outputs=None,
-        _js="() => {}"  # No output component to update
+        outputs=[stored_api_key, api_key_status]
     )
     
-    def send_message(user_input, history, api_key):
-        """
-        Handles sending messages to the chatbot.
-
-        Args:
-            user_input (str): The message input by the user.
-            history (list): The conversation history.
-            api_key (str): User-provided Fireworks AI API key.
-
-        Returns:
-            tuple: Updated conversation history with the assistant's response.
-        """
-        if not api_key:
-            assistant_reply = "Please enter your Fireworks AI API key above."
-            history = history + [[user_input, assistant_reply]]
-            return history, history
-
-        return get_chat_response(api_key, user_input, history)
-
     # Define the function to handle the interaction
     send_button.click(
         fn=send_message,
-        inputs=[user_input, history, api_key_input],
+        inputs=[user_input, history, stored_api_key],
         outputs=[chatbot, history]
     )
     
     # Allow pressing Enter to send the message
     user_input.submit(
         fn=send_message,
-        inputs=[user_input, history, api_key_input],
+        inputs=[user_input, history, stored_api_key],
         outputs=[chatbot, history]
     )
     
     gr.Markdown(
         """
         ---
-        **Note**: Ensure you have a valid Fireworks AI API key. You can obtain one from [Fireworks AI](https://fireworks.ai/).
+        **ℹ️ Note**: Ensure you have a valid Fireworks AI API key. You can obtain one from [Fireworks AI](https://fireworks.ai/).
         """
     )
 
 # Launch the interface
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()