Upload app.py

app.py

@@ -1,64 +1,195 @@
-import gradio as gr
-from huggingface_hub import InferenceClient
-
-"""
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
-"""
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-
-
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
-    messages = [{"role": "system", "content": system_message}]
-
-    for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
-
-    messages.append({"role": "user", "content": message})
-
-    response = ""
-
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        token = message.choices[0].delta.content
-
-        response += token
-        yield response
-
-
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
-
-
-if __name__ == "__main__":
-    demo.launch()
+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
+demo.launch()