Update app.py

app.py

@@ -3,7 +3,7 @@ import gradio as gr
 import os
 
 # ✅ Securely retrieve the Groq API key from Hugging Face Secrets
-groqkey = os.getenv("groqkey")
+groqkey = os.getenv("groqkey")  # Make sure this matches the secret name in Hugging Face
 
 # ✅ Ensure the API key exists
 if not groqkey:
@@ -13,7 +13,7 @@ if not groqkey:
 client = Groq(api_key=groqkey)
 
 # ✅ Define chatbot response function
-def get_chatbot_response(user_message, insurance_type, country, image, conversation_history):
+def get_chatbot_response(user_message, insurance_type, country, conversation_history):
     """Fetch insurance-related responses from the AI."""
 
     system_message = (
@@ -33,9 +33,6 @@ def get_chatbot_response(user_message, insurance_type, country, image, conversat
 
     conversation_history.append({"role": "user", "content": user_message})
 
-    if image:
-        conversation_history.append({"role": "user", "content": "[User uploaded an image]"})
-
     # ✅ API call to Groq
     completion = client.chat.completions.create(
         model="mixtral-8x7b",
@@ -57,7 +54,7 @@ def get_chatbot_response(user_message, insurance_type, country, image, conversat
 
     return conversation_history, chat_display
 
-# ✅ Styling and Theme
+# ✅ Styling and Theme with a Sophisticated UI
 theme = gr.themes.Base().set(
     body_background_fill="linear-gradient(to right, #001F3F, #0052CC)",  # Dark navy to royal blue
     button_primary_background_fill="linear-gradient(135deg, #FFD700, #FFAA00)",  # Golden gradient
@@ -65,7 +62,7 @@ theme = gr.themes.Base().set(
 )
 
 custom_css = """
-/* Title text with gold gradient */
+/* Elegant title styling with a gold-illuminated effect */
 .title-text {
     background: linear-gradient(90deg, #FFD700, #FFAA00);
     -webkit-background-clip: text;
@@ -73,105 +70,136 @@ custom_css = """
     color: transparent;
     -webkit-text-fill-color: transparent;
     font-weight: 700;
-    font-size: 42px;
+    font-size: 48px;
     text-align: center;
     text-transform: uppercase;
-    letter-spacing: 1px;
-    text-shadow: 1px 1px 5px rgba(255, 215, 0, 0.3);
+    letter-spacing: 1.5px;
+    text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.3);
 }
 
-/* Body text - Gold on Dark Background */
+/* Sophisticated body text - Gold on Dark Background */
 body, .gradio-container {
-    color: #FFD700 !important;
+    color: #FFD700 !important; /* Premium gold text */
     font-family: 'Inter', sans-serif;
 }
 
-/* Chat messages - Minimalist design */
+/* Chat messages - Glassmorphic styling */
 .chat-message {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.1); /* Subtle transparent white */
     border-radius: 12px;
     padding: 12px;
-    backdrop-filter: blur(8px);
-    color: white !important;
+    backdrop-filter: blur(10px);
+    color: black !important;
 }
 
-/* Buttons */
+/* Buttons - Glassmorphism with subtle glow */
 .insurance-button {
     border: 2px solid rgba(255, 215, 0, 0.8);
     background: rgba(0, 0, 0, 0.2);
-    font-size: 15px;
+    font-size: 16px;
     font-weight: bold;
-    padding: 8px 16px;
-    border-radius: 20px;
+    padding: 8px 20px;
+    border-radius: 24px;
     margin: 5px;
-    color: #FFD700;
+    color: #FFD700; /* Gold text */
     transition: all 0.3s ease-in-out;
 }
 
+/* Button hover effect with glowing effect */
 .insurance-button:hover {
     background: linear-gradient(90deg, #FFD700, #FFAA00);
     color: black !important;
     transform: scale(1.05);
-    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
+}
+
+/* Chatbot container - Transparent glass panel */
+.gradio-container .block.markdown {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 15px;
+    backdrop-filter: blur(12px);
+    color: #FFD700 !important; /* Gold text */
 }
 
-/* Input field */
+/* Input field - Premium styling */
 textarea {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 215, 0, 0.5);
     border-radius: 8px;
-    color: white !important;
+    color: black !important;
     font-size: 16px;
     padding: 10px;
 }
 
+/* Glow effect on input focus */
 textarea:focus {
     box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
     border-color: #FFD700;
 }
+
+/* Send button - Luxurious design */
+button.primary {
+    background: linear-gradient(135deg, #FFD700, #FFAA00);
+    border: none;
+    color: black !important;
+    font-weight: bold;
+    text-transform: uppercase;
+    border-radius: 20px;
+    padding: 10px 20px;
+    transition: all 0.3s ease-in-out;
+}
+
+/* Send button hover */
+button.primary:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
+}
 """
 
+
 def clear_history():
     return []
 
 # ✅ Build Gradio Interface
 with gr.Blocks(theme=theme, css=custom_css) as demo:
-    gr.HTML("<h2 class='title-text'>AI Insurance Chatbot</h2>")
-    gr.Markdown("### Select your insurance type, country, and ask your question.")
+    gr.HTML("<h2 class='title-text'>🛡️ AI Insurance Chatbot</h2>")
+    gr.Markdown("### Select your insurance type, country, and ask your question!")
 
     with gr.Row():
         insurance_type_input = gr.Dropdown(
             ["Health", "Car", "Home", "Travel", "Life", "Disability", "Business", "Pet"],
-            label="Select Insurance Type",
+            label=" Select Insurance Type",
             interactive=True
         )
         country_input = gr.Dropdown(
             ["USA", "Canada", "UK", "Germany", "France", "India", "Australia", "Other"],
-            label="Select Country",
+            label=" Select Country",
             interactive=True
         )
 
     custom_country_input = gr.Textbox(label="Enter Country (if not listed)", visible=False)
 
     conversation_state = gr.State([])
-    
-    chatbot = gr.Chatbot(label="Chat History")
 
+    # ✅ Define chatbot BEFORE using it in clear button
+    chatbot = gr.Chatbot(label="💬 Chat History")
+
+    # ✅ Define the clear chat button AFTER chatbot
     clear_button = gr.Button("Clear Chat History")
     clear_button.click(lambda: [], outputs=[conversation_state, chatbot])
 
     with gr.Row():
-        health_btn = gr.Button("Health", elem_classes="insurance-button")
-        car_btn = gr.Button("Car", elem_classes="insurance-button")
-        home_btn = gr.Button("Home", elem_classes="insurance-button")
-        travel_btn = gr.Button("Travel", elem_classes="insurance-button")
-        life_btn = gr.Button("Life", elem_classes="insurance-button")
-        disability_btn = gr.Button("Disability", elem_classes="insurance-button")
-        business_btn = gr.Button("Business", elem_classes="insurance-button")
-        pet_btn = gr.Button("Pet", elem_classes="insurance-button")
-
-    question_input = gr.Textbox(label="Ask your question...", placeholder="Describe your insurance question...", interactive=True)
-    image_input = gr.File(label="Upload an image (optional)", type="file")
+        health_btn = gr.Button(" Health", elem_classes="insurance-button")
+        car_btn = gr.Button(" Car", elem_classes="insurance-button")
+        home_btn = gr.Button(" Home", elem_classes="insurance-button")
+        travel_btn = gr.Button(" Travel", elem_classes="insurance-button")
+        life_btn = gr.Button(" Life", elem_classes="insurance-button")
+        disability_btn = gr.Button(" Disability", elem_classes="insurance-button")
+        business_btn = gr.Button(" Business", elem_classes="insurance-button")
+        pet_btn = gr.Button(" Pet", elem_classes="insurance-button")
+
+    question_input = gr.Textbox(label="💡 Ask your question...", placeholder="Describe your insurance question...", interactive=True)
 
     def update_insurance_selection(current, new_selection):
         if "Insurance:" in current:
@@ -189,12 +217,21 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
         btn.click(lambda current, insurance=insurance: update_insurance_selection(current, insurance),
                   inputs=question_input, outputs=question_input)
 
-    submit_btn = gr.Button("Send")
+    submit_btn = gr.Button("Send", variant="primary")
+
+    def submit(insurance_type, country, custom_country, question, conversation_state):
+        selected_country = custom_country if country == "Other" else country
+        updated_history, chat_display = get_chatbot_response(
+            question, insurance_type, selected_country, conversation_state
+        )
+        return updated_history, chat_display, ""
+
+    country_input.change(lambda c: gr.update(visible=c == "Other"), inputs=country_input, outputs=custom_country_input)
 
     submit_btn.click(
-        get_chatbot_response,
-        inputs=[question_input, insurance_type_input, country_input, image_input, conversation_state],
-        outputs=[conversation_state, chatbot]
+        submit,
+        inputs=[insurance_type_input, country_input, custom_country_input, question_input, conversation_state],
+        outputs=[conversation_state, chatbot, question_input]
     )
 
-demo.launch()
+demo.launch()