Update app.py

app.py

@@ -1,4 +1,3 @@
-# Import libraries
 import os
 import gradio as gr
 from groq import Groq
@@ -6,34 +5,60 @@ from groq import Groq
 # Set up Groq API client (ensure GROQ_API_KEY is set in your environment or as a Hugging Face secret for deployment)
 client = Groq(api_key=os.getenv("apikey"))
 
-
 # Function to interact with the LLM using Groq's API
-def chatbot(user_input):
+def chatbot(messages):
     try:
+        # Extract the latest user message
+        user_input = messages[-1][0] if messages else ""
+        
         # Send user input to the LLM and get a response
         chat_completion = client.chat.completions.create(
-            messages=[
-                {
-                    "role": "user",
-                    "content": user_input,
-                }
-            ],
+            messages=[{"role": "user", "content": user_input}],
             model="llama3-8b-8192",  # Replace with the desired model
         )
         response = chat_completion.choices[0].message.content
-        return response
+        messages.append((user_input, response))  # Append user input and response to chat
+        return messages
     except Exception as e:
-        # Handle errors gracefully
-        return f"An error occurred: {str(e)}"
-
-# Create a Gradio interface for real-time interaction
-iface = gr.Interface(
-    fn=chatbot,
-    inputs=gr.Textbox(label="Your Message", placeholder="Type a message here..."),
-    outputs=gr.Textbox(label="Response"),
-    title="Real-Time Text-to-Text Chatbot - by ATIF MEHMOOD",
-    description="You can Chat with the LLM in real-time using Groq's API.",
-)
+        return messages + [(None, f"An error occurred: {str(e)}")]
+
+# Function to reset the chat
+def reset_chat():
+    return []
+
+# Gradio interface with a chatbot component
+with gr.Blocks(theme=gr.themes.Soft()) as iface:
+    gr.Markdown(
+        """
+        # Real-Time Text-to-Text Chatbot
+        **by ATIF MEHMOOD**
+        
+        Chat with an advanced language model using Groq's API. Enjoy real-time interactions!
+        """
+    )
+
+    with gr.Row():
+        chatbot_ui = gr.Chatbot(label="Chat Interface").style(height=400)
+    
+    with gr.Row():
+        user_input = gr.Textbox(
+            label="Type Your Message",
+            placeholder="Ask me something...",
+            lines=1,
+            interactive=True,
+        )
+        send_button = gr.Button("Send", variant="primary")
+        clear_button = gr.Button("Clear Chat")
+
+    with gr.Row():
+        gr.Examples(
+            examples=["Hello!", "Tell me a joke.", "What's the weather like?"],
+            inputs=user_input,
+        )
+
+    # Link components to functions
+    send_button.click(chatbot, inputs=[chatbot_ui], outputs=chatbot_ui)
+    clear_button.click(reset_chat, inputs=[], outputs=chatbot_ui)
 
 # Launch the Gradio app
 iface.launch()