Update app.py

app.py

@@ -1,195 +1,200 @@
-import gradio as gr
-import os
-from groq import Groq
-
-client = Groq(api_key= "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")  # Assumes GROQ_API_KEY is in .env file
-
-system_prompt = "You are a Travel Advisor. Provide helpful travel tips, recommend destinations, and suggest itineraries based on user queries."
-
-def chatbot_response(user_message, history, output_length):
-    # Initialize chat history if None
-    if history is None:
-        history = []
-    
-    # Build messages list
-    messages = [{"role": "system", "content": system_prompt}]
-    for user_msg, bot_msg in history:
-        messages.append({"role": "user", "content": user_msg})
-        messages.append({"role": "assistant", "content": bot_msg})
-    messages.append({"role": "user", "content": user_message})
-    
-    # Adjust response length
-    length_modifier = {
-        "Concise": "Respond briefly.",
-        "Moderate": "Respond with a balanced explanation.",
-        "Explained": "Provide a detailed and thorough response."
-    }
-    messages.append({"role": "system", "content": length_modifier[output_length]})
-    
-    # Call Groq API
-    response = client.chat.completions.create(
-        model="llama-3.3-70b-versatile",
-        messages=messages
-    )
-    
-    # Update history
-    history.append((user_message, response.choices[0].message.content))
-    return history, history, ""  # Return history for chatbot/state and "" to clear textbox
-
-# Custom CSS for a travel-themed UI
-custom_css = """
-/* General container styling */
-.gradio-container {
-    background: linear-gradient(to bottom, #e6f3ff, #ffffff);
-    font-family: 'Poppins', sans-serif;
-    color: #333;
-}
-
-/* Header styling */
-h1, h3 {
-    color: #1a5f7a;
-    text-align: center;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-}
-
-/* Chatbot area */
-.gr-chatbot {
-    background: #ffffff;
-    border-radius: 15px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    padding: 20px;
-    max-height: 500px;
-    overflow-y: auto;
-    border: 2px solid #95c8d8;
-}
-
-/* Chat messages */
-.gr-chatbot .message {
-    border-radius: 10px;
-    margin: 10px 0;
-    padding: 10px 15px;
-}
-.gr-chatbot .user {
-    background: #95c8d8;
-    color: #fff;
-    text-align: right;
-}
-.gr-chatbot .assistant {
-    background: #e6f3ff;
-    color: #333;
-    text-align: left;
-}
-
-/* Textbox */
-.gr-textbox input {
-    border: 2px solid #95c8d8;
-    border-radius: 10px;
-    padding: 10px;
-    font-size: 16px;
-    transition: border-color 0.3s ease;
-}
-.gr-textbox input:focus {
-    border-color: #1a5f7a;
-    outline: none;
-}
-
-/* Radio buttons */
-.gr-radio {
-    background: #ffffff;
-    border-radius: 10px;
-    padding: 15px;
-    border: 2px solid #95c8d8;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-.gr-radio label {
-    color: #1a5f7a;
-    font-weight: 600;
-}
-.gr-radio input[type="radio"]:checked + label {
-    color: #0a3d62;
-}
-
-/* Buttons */
-.gr-button {
-    background: #1a5f7a;
-    color: #ffffff;
-    border: none;
-    border-radius: 10px;
-    padding: 10px 20px;
-    font-size: 16px;
-    font-weight: 600;
-    transition: background 0.3s ease, transform 0.2s ease;
-}
-.gr-button:hover {
-    background: #0a3d62;
-    transform: translateY(-2px);
-}
-.gr-button:active {
-    transform: translateY(0);
-}
-
-/* Row layout */
-.gr-row {
-    gap: 20px;
-}
-
-/* Add a subtle background image */
-body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: url('https://www.transparenttextures.com/patterns/white-wave.png');
-    opacity: 0.1;
-    z-index: -1;
-}
-"""
-
-# Create Gradio interface with Blocks
-with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("# 🌍 My Travel Advisor Chatbot")
-    gr.Markdown("Embark on your next adventure with personalized travel tips and itineraries!")
-    
-    # Chatbot display
-    chatbot = gr.Chatbot(label="Travel Chat", height=500)
-    
-    # Input components
-    with gr.Row():
-        user_message = gr.Textbox(
-            label="Your Travel Question",
-            placeholder="Ask about destinations, tips, or itineraries...",
-            lines=2
-        )
-        output_length = gr.Radio(
-            choices=["Concise", "Moderate", "Explained"],
-            value="Moderate",
-            label="Response Length",
-            info="Choose how detailed you want the response to be."
-        )
-    
-    # Submit and clear buttons
-    with gr.Row():
-        submit_button = gr.Button("Send")
-        clear_button = gr.Button("Clear Chat")
-    
-    # State to store chat history
-    chat_state = gr.State(value=[])
-    
-    # Connect button to function
-    submit_button.click(
-        fn=chatbot_response,
-        inputs=[user_message, chat_state, output_length],
-        outputs=[chatbot, chat_state, user_message]
-    )
-    
-    # Clear chat functionality
-    clear_button.click(
-        fn=lambda: ([], [], ""),
-        inputs=None,
-        outputs=[chatbot, chat_state, user_message]
-    )
-
-# Launch the app
+import gradio as gr
+import os
+from groq import Groq
+
+import os
+
+api_key = os.getenv("GROQ_API_KEY")
+client = Groq(api_key=api_key)
+
+#client = Groq(api_key= "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")  # Assumes GROQ_API_KEY is in .env file
+
+system_prompt = "You are a Travel Advisor. Provide helpful travel tips, recommend destinations, and suggest itineraries based on user queries."
+
+def chatbot_response(user_message, history, output_length):
+    # Initialize chat history if None
+    if history is None:
+        history = []
+    
+    # Build messages list
+    messages = [{"role": "system", "content": system_prompt}]
+    for user_msg, bot_msg in history:
+        messages.append({"role": "user", "content": user_msg})
+        messages.append({"role": "assistant", "content": bot_msg})
+    messages.append({"role": "user", "content": user_message})
+    
+    # Adjust response length
+    length_modifier = {
+        "Concise": "Respond briefly.",
+        "Moderate": "Respond with a balanced explanation.",
+        "Explained": "Provide a detailed and thorough response."
+    }
+    messages.append({"role": "system", "content": length_modifier[output_length]})
+    
+    # Call Groq API
+    response = client.chat.completions.create(
+        model="llama-3.3-70b-versatile",
+        messages=messages
+    )
+    
+    # Update history
+    history.append((user_message, response.choices[0].message.content))
+    return history, history, ""  # Return history for chatbot/state and "" to clear textbox
+
+# Custom CSS for a travel-themed UI
+custom_css = """
+/* General container styling */
+.gradio-container {
+    background: linear-gradient(to bottom, #e6f3ff, #ffffff);
+    font-family: 'Poppins', sans-serif;
+    color: #333;
+}
+
+/* Header styling */
+h1, h3 {
+    color: #1a5f7a;
+    text-align: center;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+/* Chatbot area */
+.gr-chatbot {
+    background: #ffffff;
+    border-radius: 15px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    padding: 20px;
+    max-height: 500px;
+    overflow-y: auto;
+    border: 2px solid #95c8d8;
+}
+
+/* Chat messages */
+.gr-chatbot .message {
+    border-radius: 10px;
+    margin: 10px 0;
+    padding: 10px 15px;
+}
+.gr-chatbot .user {
+    background: #95c8d8;
+    color: #fff;
+    text-align: right;
+}
+.gr-chatbot .assistant {
+    background: #e6f3ff;
+    color: #333;
+    text-align: left;
+}
+
+/* Textbox */
+.gr-textbox input {
+    border: 2px solid #95c8d8;
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 16px;
+    transition: border-color 0.3s ease;
+}
+.gr-textbox input:focus {
+    border-color: #1a5f7a;
+    outline: none;
+}
+
+/* Radio buttons */
+.gr-radio {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+    border: 2px solid #95c8d8;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+.gr-radio label {
+    color: #1a5f7a;
+    font-weight: 600;
+}
+.gr-radio input[type="radio"]:checked + label {
+    color: #0a3d62;
+}
+
+/* Buttons */
+.gr-button {
+    background: #1a5f7a;
+    color: #ffffff;
+    border: none;
+    border-radius: 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+.gr-button:hover {
+    background: #0a3d62;
+    transform: translateY(-2px);
+}
+.gr-button:active {
+    transform: translateY(0);
+}
+
+/* Row layout */
+.gr-row {
+    gap: 20px;
+}
+
+/* Add a subtle background image */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url('https://www.transparenttextures.com/patterns/white-wave.png');
+    opacity: 0.1;
+    z-index: -1;
+}
+"""
+
+# Create Gradio interface with Blocks
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown("# 🌍 My Travel Advisor Chatbot")
+    gr.Markdown("Embark on your next adventure with personalized travel tips and itineraries!")
+    
+    # Chatbot display
+    chatbot = gr.Chatbot(label="Travel Chat", height=500)
+    
+    # Input components
+    with gr.Row():
+        user_message = gr.Textbox(
+            label="Your Travel Question",
+            placeholder="Ask about destinations, tips, or itineraries...",
+            lines=2
+        )
+        output_length = gr.Radio(
+            choices=["Concise", "Moderate", "Explained"],
+            value="Moderate",
+            label="Response Length",
+            info="Choose how detailed you want the response to be."
+        )
+    
+    # Submit and clear buttons
+    with gr.Row():
+        submit_button = gr.Button("Send")
+        clear_button = gr.Button("Clear Chat")
+    
+    # State to store chat history
+    chat_state = gr.State(value=[])
+    
+    # Connect button to function
+    submit_button.click(
+        fn=chatbot_response,
+        inputs=[user_message, chat_state, output_length],
+        outputs=[chatbot, chat_state, user_message]
+    )
+    
+    # Clear chat functionality
+    clear_button.click(
+        fn=lambda: ([], [], ""),
+        inputs=None,
+        outputs=[chatbot, chat_state, user_message]
+    )
+
+# Launch the app
 demo.launch()