Update app.py

app.py

@@ -6,8 +6,10 @@ from huggingface_hub.inference._generated.types.chat_completion import ChatCompl
 MODEL = "nomiChroma3.1"
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
-# Previous functions remain exactly the same
-def respond(message: str, chat_history: list[dict]) -> tuple[list[dict], str]:
+def respond(
+    message: str,
+    chat_history: list[dict],
+) -> tuple[list[dict], str]:
     """
     Generate a response and update chat history.
     Uses the new message format with role and content keys.
@@ -80,15 +82,88 @@ def handle_example_click(example_query: str):
     """Handle example query click by returning the query and empty chat history"""
     return example_query, []
 
-# Updated CSS with image styling
+# SVG Definitions
+WAVE_SVG = """
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none">
+  <defs>
+    <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#1a365d;stop-opacity:0.2"/>
+      <stop offset="50%" style="stop-color:#2a4a7d;stop-opacity:0.3"/>
+      <stop offset="100%" style="stop-color:#1a365d;stop-opacity:0.2"/>
+    </linearGradient>
+  </defs>
+  <path fill="url(#waveGradient)" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
+    <animate attributeName="d" 
+             dur="10s" 
+             repeatCount="indefinite"
+             values="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
+                    M0,160L48,181.3C96,203,192,245,288,261.3C384,277,480,267,576,234.7C672,203,768,149,864,138.7C960,128,1056,160,1152,186.7C1248,213,1344,235,1392,245.3L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z;
+                    M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"/>
+  </path>
+</svg>
+"""
+
+MARITIME_ICONS = """
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60">
+  <g transform="translate(0,0)">
+    <path d="M20,10 v25 M10,35 h20 M20,10 l-10,10 l10,-10 l10,10" 
+          stroke="#e6f3ff" 
+          fill="none" 
+          stroke-width="2"/>
+  </g>
+  <g transform="translate(60,0)">
+    <path d="M10,30 l5,-15 h30 l5,15 h-40 v5 l40,0 v-5" 
+          stroke="#e6f3ff" 
+          fill="none" 
+          stroke-width="2"/>
+    <path d="M20,15 v-5 h20 v5" 
+          stroke="#e6f3ff" 
+          fill="none" 
+          stroke-width="2"/>
+  </g>
+  <g transform="translate(120,0)">
+    <path d="M25,5 l-7,35 h14 l-7,-35" 
+          stroke="#e6f3ff" 
+          fill="none" 
+          stroke-width="2"/>
+    <path d="M18,15 h14 M18,25 h14" 
+          stroke="#e6f3ff" 
+          fill="none" 
+          stroke-width="2"/>
+  </g>
+  <g transform="translate(180,0)">
+    <circle cx="20" cy="20" r="15" 
+            stroke="#e6f3ff" 
+            fill="none" 
+            stroke-width="2"/>
+    <path d="M20,5 v30 M5,20 h30 M15,15 l10,10 M25,15 l-10,10" 
+          stroke="#e6f3ff" 
+          fill="none" 
+          stroke-width="2"/>
+  </g>
+</svg>
+"""
+
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
-
+/* Global styles */
 .gradio-container {
     background-color: #1a365d !important;
     font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif !important;
+    position: relative;
+    overflow: hidden;
 }
-
+/* Wave Background */
+.wave-background {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    pointer-events: none;
+}
+/* Header styling */
 .header-container {
     text-align: center;
     padding: 2rem 0;
@@ -97,7 +172,6 @@ custom_css = """
     position: relative;
     z-index: 1;
 }
-
 .header-title {
     color: #ffffff;
     font-size: 2.5rem;
@@ -105,7 +179,6 @@ custom_css = """
     font-family: 'Ubuntu', sans-serif !important;
     text-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
-
 .header-subtitle {
     color: #e6f3ff;
     font-size: 1.1rem;
@@ -113,6 +186,129 @@ custom_css = """
     font-family: 'Ubuntu', sans-serif !important;
     opacity: 0.9;
 }
+/* Maritime icons styling */
+.maritime-icons {
+    display: flex;
+    justify-content: center;
+    margin: 1rem 0;
+    gap: 2rem;
+}
+.maritime-icon {
+    width: 40px;
+    height: 40px;
+    transition: transform 0.3s ease;
+}
+.maritime-icon:hover {
+    transform: scale(1.1);
+}
+/* Sidebar styling */
+.sidebar {
+    background: #ccd9e6 !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
+    border: 1px solid rgba(176, 226, 255, 0.2) !important;
+    height: fit-content !important;
+    position: relative;
+    overflow: hidden;
+}
+.sidebar-bg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.05;
+    pointer-events: none;
+    z-index: 0;
+}
+.sidebar-content {
+    position: relative;
+    z-index: 1;
+}
+.sidebar-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+.sidebar-title {
+    color: #1a365d !important;
+    font-size: 1.1rem !important;
+    margin-bottom: 0.8rem !important;
+    padding-bottom: 0.4rem !important;
+    border-bottom: 2px solid rgba(26, 54, 93, 0.2) !important;
+    font-family: 'Ubuntu', sans-serif !important;
+    display: flex;
+    align-items: center;
+}
+.example-query-button {
+    background-color: #b3c6d9 !important;
+    color: #1a365d !important;
+    border: none !important;
+    margin: 3px 0 !important;
+    padding: 6px 10px !important;
+    border-radius: 4px !important;
+    text-align: left !important;
+    width: 100% !important;
+    cursor: pointer !important;
+    transition: background-color 0.3s ease !important;
+    font-size: 0.9rem !important;
+    font-family: 'Ubuntu', sans-serif !important;
+    position: relative;
+    padding-left: 30px !important;
+}
+.example-query-button::before {
+    content: "⚓";
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 12px;
+    opacity: 0.7;
+}
+.example-query-button:hover {
+    background-color: #99b3cc !important;
+}
+/* Chat container */
+.chat-container {
+    background: #ccd9e6 !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
+    height: 300px !important;
+    overflow-y: auto !important;
+    border: 1px solid rgba(176, 226, 255, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+    font-family: 'Ubuntu', sans-serif !important;
+}
+/* Message styling */
+.message.user, .message.bot {
+    padding: 8px 12px !important;
+    margin: 6px 0 !important;
+    border-radius: 6px !important;
+    color: #1a365d !important;
+    font-size: 0.9rem !important;
+    font-family: 'Ubuntu', sans-serif !important;
+    line-height: 1.5 !important;
+}
+.message.user {
+    background-color: #b3c6d9 !important;
+}
+.message.bot {
+    background-color: #e6f3ff !important;
+}
+/* Input and button styling */
+textarea {
+    background-color: #e6f3ff !important;
+    border: 1px solid rgba(176, 226, 255, 0.3) !important;
+    border-radius: 6px !important;
+    padding: 8px !important;
+    color: #1a365d !important;
+    font-size: 0.9rem !important;
+    font-family: 'Ubuntu', sans-serif !important;
+}
+.gr-button {
+    font-family: 'Ubuntu', sans-serif !important;
+}
 
 .maritime-images {
     display: grid;
@@ -138,28 +334,20 @@ custom_css = """
     transform: scale(1.02);
 }
 
-/* Rest of your existing CSS remains exactly the same */
-.sidebar {
-    background: #ccd9e6 !important;
-    border-radius: 8px !important;
-    padding: 15px !important;
-    border: 1px solid rgba(176, 226, 255, 0.2) !important;
-    height: fit-content !important;
-    position: relative;
-    overflow: hidden;
-}
-
-/* ... (rest of your existing CSS) ... */
 """
 
 # Main application
 with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
-    # Updated header with realistic images
-    gr.HTML("""
+    # Header with wave background and maritime icons
+    # Only change this part in your original code, specifically in the header HTML section:
+    gr.HTML(f"""
+        <div class="wave-background">
+            {WAVE_SVG}
+        </div>
         <div class="header-container">
             <h1 class="header-title">Maritime Legal Compliance</h1>
             <div class="maritime-images">
-                <img src="/api/placeholder/400/320" alt="Modern port with cargo vessels" class="maritime-image">
+                <img src="img1.jpg" alt="Modern port with cargo vessels" class="maritime-image">
                 <img src="/api/placeholder/400/320" alt="Container ship at sea" class="maritime-image">
                 <img src="/api/placeholder/400/320" alt="Coastal waterway" class="maritime-image">
             </div>
@@ -167,9 +355,11 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
             <p class="header-subtitle">This chatbot uses Fine-tuned LLAMA-3.1 model personalised specifically to provide assistance with Indian maritime legal queries.</p>
         </div>
     """)
+    
+
 
-    # Rest of your application remains exactly the same
     with gr.Row():
+        # Enhanced sidebar with graphics
         with gr.Column(scale=1, elem_classes="sidebar"):
             gr.HTML("""
                 <div class="sidebar-bg">
@@ -205,8 +395,10 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
             with gr.Column(elem_classes="example-queries"):
                 example_buttons = [gr.Button(query, elem_classes="example-query-button") for query in example_queries]
             
-            gr.HTML("</div>")
+            gr.HTML("</div>")  # Close sidebar-content
 
+                # Main chat area
+                # Main chat area
         with gr.Column(scale=3):
             chatbot = gr.Chatbot(
                 height=300,
@@ -222,7 +414,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
                 submit = gr.Button("Send", variant="primary")
                 clear = gr.Button("Clear")
 
-            # Event handlers remain the same
+            # Event handlers
             msg.submit(fn=respond, inputs=[msg, chatbot], outputs=[chatbot, msg])
             submit.click(fn=respond, inputs=[msg, chatbot], outputs=[chatbot, msg])
             clear.click(fn=lambda: ([], ""), inputs=None, outputs=[chatbot, msg], queue=False)