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")  # Make sure this matches the secret name in Hugging Face
+groqkey = os.getenv("groqkey")
 
 # ✅ 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, conversation_history):
+def get_chatbot_response(user_message, insurance_type, country, image, conversation_history):
     """Fetch insurance-related responses from the AI."""
 
     system_message = (
@@ -33,6 +33,9 @@ def get_chatbot_response(user_message, insurance_type, country, conversation_his
 
     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",
@@ -54,7 +57,7 @@ def get_chatbot_response(user_message, insurance_type, country, conversation_his
 
     return conversation_history, chat_display
 
-# ✅ Styling and Theme with a Sophisticated UI
+# ✅ Styling and Theme
 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
@@ -62,7 +65,7 @@ theme = gr.themes.Base().set(
 )
 
 custom_css = """
-/* Elegant title styling with a gold-illuminated effect */
+/* Title text with gold gradient */
 .title-text {
     background: linear-gradient(90deg, #FFD700, #FFAA00);
     -webkit-background-clip: text;
@@ -70,136 +73,105 @@ custom_css = """
     color: transparent;
     -webkit-text-fill-color: transparent;
     font-weight: 700;
-    font-size: 48px;
+    font-size: 42px;
     text-align: center;
     text-transform: uppercase;
-    letter-spacing: 1.5px;
-    text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.3);
+    letter-spacing: 1px;
+    text-shadow: 1px 1px 5px rgba(255, 215, 0, 0.3);
 }
 
-/* Sophisticated body text - Gold on Dark Background */
+/* Body text - Gold on Dark Background */
 body, .gradio-container {
-    color: #FFD700 !important; /* Premium gold text */
+    color: #FFD700 !important;
     font-family: 'Inter', sans-serif;
 }
 
-/* Chat messages - Glassmorphic styling */
+/* Chat messages - Minimalist design */
 .chat-message {
-    background: rgba(255, 255, 255, 0.1); /* Subtle transparent white */
+    background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 12px;
-    backdrop-filter: blur(10px);
-    color: black !important;
+    backdrop-filter: blur(8px);
+    color: white !important;
 }
 
-/* Buttons - Glassmorphism with subtle glow */
+/* Buttons */
 .insurance-button {
     border: 2px solid rgba(255, 215, 0, 0.8);
     background: rgba(0, 0, 0, 0.2);
-    font-size: 16px;
+    font-size: 15px;
     font-weight: bold;
-    padding: 8px 20px;
-    border-radius: 24px;
+    padding: 8px 16px;
+    border-radius: 20px;
     margin: 5px;
-    color: #FFD700; /* Gold text */
+    color: #FFD700;
     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 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 */
+    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
 }
 
-/* Input field - Premium styling */
+/* Input field */
 textarea {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 215, 0, 0.5);
     border-radius: 8px;
-    color: black !important;
+    color: white !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)
+        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")
 
     def update_insurance_selection(current, new_selection):
         if "Insurance:" in current:
@@ -217,21 +189,12 @@ 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", 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 = gr.Button("Send")
 
     submit_btn.click(
-        submit,
-        inputs=[insurance_type_input, country_input, custom_country_input, question_input, conversation_state],
-        outputs=[conversation_state, chatbot, question_input]
+        get_chatbot_response,
+        inputs=[question_input, insurance_type_input, country_input, image_input, conversation_state],
+        outputs=[conversation_state, chatbot]
     )
 
 demo.launch()