Updated and made simple CSS

app.py

@@ -1,14 +1,14 @@
-import gradio as gr
-from groq import Groq
-from dotenv import load_dotenv
-import os
-import traceback
 import json
+import os
+import re
 import time
+import traceback
 from collections import defaultdict
+
+import gradio as gr
+from dotenv import load_dotenv
 from duckduckgo_search import DDGS
-import requests
-import re
+from groq import Groq
 
 # Load .env environment variables
 load_dotenv()
@@ -115,7 +115,7 @@ def detect_language_and_model(message):
 def respond(message, history, vehicle_profile):
     try:
         system_message = (
-            "You are CarMaa, a totally Indian car Doctor and mechanic,you are friendly, and highly knowledgeable AI Car Doctor specializing in Indian cars. Your mission is to assist users with detailed, practical advice on car care, maintenance, and troubleshooting, tailored for Indian driving conditions. "
+            "You are Carmaa Car Care, a totally Indian car Doctor and mechanic,you are friendly, and highly knowledgeable AI Car Doctor specializing in Indian cars. Your mission is to assist users with detailed, practical advice on car care, maintenance, and troubleshooting, tailored for Indian driving conditions. "
             "You have deep expertise in Indian car brands like Maruti Suzuki, Tata Motors, Mahindra, Hyundai India, and Honda Cars India, including popular models such as Maruti Alto, Tata Nexon, Mahindra Scorpio, Hyundai Creta, and Honda City. "
             "You understand the unique challenges of Indian roads—monsoon flooding, potholes, extreme heat, and heavy traffic—and can provide advice on common issues like engine overheating, suspension wear, AC failures, and fuel efficiency problems. "
             "You are also well-versed in Indian market trends (e.g., rise of EVs like Tata Nexon EV, government policies on BS6 norms), you can also differentiate between petrol, diesel, hybrids and EV and give answers to queries according to them, car features (e.g., CNG variants, AMT transmissions), and driving experiences (e.g., long drives on NH44, city driving in Delhi). "
@@ -212,7 +212,7 @@ def respond(message, history, vehicle_profile):
                 uttarakhand_cities = ["dehradun", "haridwar", "roorkee", "haldwani", "nainital", "rudrapur"]
                 carmaa_recommendation = ""
                 if any(city in vehicle_profile['city'].lower() for city in uttarakhand_cities):
-                    carmaa_recommendation = "- [CarMaa Car Care - Recommended](https://carmaacarcare.com/contactus/)\n"
+                    carmaa_recommendation = "- [Carmaa Car Care - Recommended](https://carmaacarcare.com/contactus/)\n"
             else:
                 response = "I'd be happy to help you find repair workshops near you. However, I need to know your location. Could you please tell me your city or update your vehicle profile?" if lang == "english" else "Main aapko repair workshop dhundhne mein madad karunga, lekin mujhe aapka shahar pata hona chahiye. Kya aap apna shahar batayenge ya profile update karenge?"
                 for i in range(0, len(response), 10):
@@ -284,7 +284,7 @@ def respond(message, history, vehicle_profile):
                     uttarakhand_cities = ["dehradun", "haridwar", "roorkee", "haldwani", "nainital", "rudrapur"]
                     carmaa_recommendation = ""
                     if any(city in vehicle_profile['city'].lower() for city in uttarakhand_cities):
-                        carmaa_recommendation = "- [CarMaa Car Care - Recommended](https://carmaacarcare.com/)\n"
+                        carmaa_recommendation = "- [Carmaa Car Care - Recommended](https://carmaacarcare.com/)\n"
                 else:
                     response = "I'd be happy to help you find repair workshops near you. However, I need to know your location. Could you please tell me your city or update your vehicle profile?" if lang == "english" else "Main aapko repair workshop dhundhne mein madad karunga, lekin mujhe aapka shahar pata hona chahiye. Kya aap apna shahar batayenge ya profile update karenge?"
                     for i in range(0, len(response), 10):
@@ -305,273 +305,34 @@ def respond(message, history, vehicle_profile):
         yield error_msg
 
 # Gradio interface with enhanced, customer-centric UI
-with gr.Blocks(
-    title="CarMaa - India's AI Car Doctor",
-    css="""
-        /* Overall layout and background */
-        .gradio-container {
-            background: linear-gradient(135deg, #e6f0fa, #b3d4fc);
-            font-family: 'Arial', sans-serif;
-            color: #003087;
-            padding: 20px;
-            min-height: 100vh;
-        }
-        /* Ensure the parent container allows growth */
-        .gradio-container > div {
-            height: auto !important;
-            min-height: 100vh !important;
-        }
-        /* Header styling with clean design */
-        .header {
-            background: #ffffff;
-            padding: 25px;
-            border-radius: 12px;
-            border-bottom: 4px solid #007bff;
-            text-align: center;
-            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-        .header h1 {
-            font-size: 2.8em;
-            font-weight: 700;
-            color: #003087;
-            margin: 0;
-        }
-        .header p {
-            color: #003087;
-            font-size: 1.2em;
-            margin-top: 8px;
-            font-weight: 500;
-        }
-        /* Vehicle profile inputs with clean styling */
-        .vehicle-profile {
-            background: #ffffff;
-            padding: 25px;
-            border-radius: 10px;
-            margin: 20px 0;
-            border: 1px solid #b3d4fc;
-            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-        }
-        .vehicle-profile label {
-            color: #007bff;
-            font-weight: 600;
-            font-size: 1.1em;
-            margin-bottom: 8px;
-            display: block;
-        }
-        .vehicle-profile input {
-            background: #f9f9f9;
-            color: #003087;
-            border: 1px solid #b3d4fc;
-            border-radius: 6px;
-            padding: 12px;
-            font-size: 1em;
-            width: 100%;
-            transition: border-color 0.3s, box-shadow 0.3s;
-        }
-        .vehicle-profile input:focus {
-            border-color: #007bff;
-            outline: none;
-            box-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
-        }
-        /* Save button with hover animation */
-        .save-btn {
-            background: #007bff !important;
-            color: #ffffff !important;
-            border: none !important;
-            padding: 14px !important;
-            border-radius: 6px !important;
-            font-weight: 600 !important;
-            font-size: 1.1em !important;
-            transition: transform 0.2s, background 0.3s !important;
-            width: 100% !important;
-            margin-top: 15px !important;
-        }
-        .save-btn:hover {
-            background: #0056b3 !important;
-            transform: scale(1.03);
-        }
-        /* Chat container with increased height */
-        .chatbot-container {
-            background: #ffffff;
-            border: 2px solid #b3d4fc;
-            border-radius: 10px;
-            padding: 20px;
-            max-height: 1000px !important;
-            min-height: 400px !important;
-            overflow-y: auto;
-            margin-bottom: 20px;
-            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
-            height: auto !important;
-        }
-        /* Ensure the chat interface itself can grow */
-        .chatbot-container .gr-chatbot {
-            max-height: 1000px !important;
-            height: auto !important;
-        }
-        /* Chat messages with clean styling */
-        .chatbot-container .message-user div, .chatbot-container .message-assistant div {
-            padding: 12px !important;
-            border-radius: 8px !important;
-            margin-bottom: 12px !important;
-            max-width: 85% !important;
-            word-wrap: break-word !important;
-            font-size: 1em !important;
-            line-height: 1.5 !important;
-        }
-        .chatbot-container .message-user div {
-            background: #007bff !important;
-            color: #ffffff !important;
-            margin-left: auto !important;
-            border: 1px solid #0056b3 !important;
-        }
-        .chatbot-container .message-assistant div {
-            background: #f0f7ff !important;
-            color: #003087 !important;
-            margin-right: auto !important;
-            border: 1px solid #b3d4fc !important;
-        }
-        /* Chat input area */
-        .chatbot-container textarea {
-            background: #f9f9f9 !important;
-            color: #003087 !important;
-            border: 1px solid #b3d4fc !important;
-            border-radius: 6px !important;
-            padding: 12px !important;
-            font-size: 1em !important;
-            transition: border-color 0.3s, box-shadow 0.3s !important;
-        }
-        .chatbot-container textarea:focus {
-            border-color: #007bff !important;
-            box-shadow: 0 0 6px rgba(0, 123, 255, 0.3) !important;
-        }
-        /* Send button with clean design */
-        .chatbot-container button {
-            background: #007bff !important;
-            color: #ffffff !important;
-            border: none !important;
-            border-radius: 6px !important;
-            padding: 12px 24px !important;
-            font-weight: 600 !important;
-            font-size: 1em !important;
-            transition: transform 0.2s, background 0.3s !important;
-        }
-        .chatbot-container button:hover {
-            background: #0056b3 !important;
-            transform: scale(1.03);
-        }
-        /* Navigation tabs for quick access */
-        .nav-tabs {
-            display: flex;
-            justify-content: space-around;
-            background: #ffffff;
-            padding: 12px 0;
-            border-radius: 10px;
-            margin-bottom: 20px;
-            border: 1px solid #b3d4fc;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-        }
-        .nav-tabs button {
-            background: none;
-            border: none;
-            color: #003087;
-            font-weight: 600;
-            font-size: 1.1em;
-            padding: 12px;
-            transition: color 0.3s;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        .nav-tabs button:hover {
-            color: #007bff;
-        }
-        .nav-tabs button.active {
-            color: #007bff;
-            border-bottom: 3px solid #007bff;
-        }
-        /* Footer with subtle branding */
-        .footer {
-            text-align: center;
-            color: #003087;
-            font-size: 1em;
-            font-weight: 500;
-            margin-top: 25px;
-            padding: 10px;
-            background: rgba(255, 255, 255, 0.9);
-            border-radius: 8px;
-        }
-    """
-) as demo:
-    # Header with car-themed branding
-    with gr.Row():
-        gr.Markdown(
-            """
-            <div class='header'>
-                <h1>🚗 CarMaa - India's AI Car Doctor</h1>
-                <p>Diagnose issues, find garages, and connect with the car community!</p>
-            </div>
-            """
-        )
-
-    # Navigation tabs for quick access
-    with gr.Row():
-        gr.Markdown(
-            """
-            <div class='nav-tabs'>
-                <button class='active'>🚘 Profile</button>
-                <button>🔧 Diagnostics</button>
-                <button>🗣️ Community</button>
-            </div>
-            """
-        )
+with gr.Blocks(css="""
+footer {
+    display: none !important;
+}
+#custom-footer {
+    text-align: center;
+    color: gray;
+    padding: 10px;
+    font-size: 14px;
+}
+""") as demo:
 
-    # Vehicle profile inputs
-    with gr.Row(variant="panel", elem_classes="vehicle-profile"):
-        make_model = gr.Textbox(
-            label="Vehicle Make and Model",
-            placeholder="e.g., Maruti Alto"
-        )
-        year = gr.Textbox(
-            label="Year",
-            placeholder="e.g., 2000"
-        )
-        city = gr.Textbox(
-            label="City",
-            placeholder="e.g., Delhi"
-        )
     vehicle_profile = gr.State(value={"make_model": "", "year": "", "city": ""})
-    
-    # Update vehicle profile
-    def update_vehicle_profile(make_model, year, city):
-        return {"make_model": make_model, "year": year, "city": city}
-    
-    gr.Button("Save Vehicle Profile", elem_classes="save-btn").click(
-        fn=update_vehicle_profile,
-        inputs=[make_model, year, city],
-        outputs=vehicle_profile
-    )
-    
+
     # Chat interface with enhanced styling
     chatbot = gr.ChatInterface(
         fn=respond,
         additional_inputs=[vehicle_profile],
         title="",
-        description="Ask about car diagnostics, garage locations, or community advice.",
         theme="soft",
-        textbox=gr.Textbox(placeholder="Ask about your car... 🚘"),
+        textbox=gr.Textbox(placeholder="Hello, this is Carmite - India's First AI Car Doctor. How can i help you..."),
         submit_btn="Send 🚀",
         type="messages"
     )
 
     # Footer
-    gr.Markdown(
-        """
-        <div class='footer'>
-            Powered by CarMaa © 2025 | Your Trusted Car Care Companion
-        </div>
-        """
-    )
+    # Custom footer
+    gr.HTML('<div id="custom-footer">Powered by Carmaa Car Care © 2025 | Your Trusted Car Care Companion</div>')
 
 if __name__ == "__main__":
     demo.launch(share=True)