Update app.py

app.py

@@ -311,7 +311,6 @@ textarea {
 .gr-button {
     font-family: 'Ubuntu', sans-serif !important;
 }
-
 .maritime-images {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -320,7 +319,6 @@ textarea {
     max-width: 1200px;
     padding: 0 1rem;
 }
-
 .maritime-image {
     width: 100%;
     height: 200px;
@@ -331,33 +329,36 @@ textarea {
     transition: transform 0.3s ease;
     filter: contrast(110%) saturate(110%);
 }
-
 .maritime-image:hover {
     transform: scale(1.02);
 }
-
 """
 
 # Main application
     # Header with wave background and maritime icons
 
-BUSY_IMG = "https://huggingface.co/asthaaa300/Maritime-Legal-Assistant/resolve/main/images/busy.jpg"
-CARGO_IMG = "https://huggingface.co/asthaaa300/Maritime-Legal-Assistant/resolve/main/images/cargo.jpg"
-FULL_IMG = "https://huggingface.co/asthaaa300/Maritime-Legal-Assistant/resolve/main/images/full.jpg"
 with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
- 
+    # Header with wave background and maritime icons
     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">
             <div class="maritime-image-container">
-                <img src="{BUSY_IMG}" alt="Modern port with cargo vessels" class="maritime-image">
+                <img src="images/busy.jpg" alt="Modern port with cargo vessels" class="maritime-image">
             </div>
             <div class="maritime-image-container">
-                <img src="{CARGO_IMG}" alt="Container ship at sea" class="maritime-image">
+                <img src="images/cargo.jpg" alt="Container ship at sea" class="maritime-image">
             </div>
             <div class="maritime-image-container">
-                <img src="{FULL_IMG}" alt="Coastal waterway" class="maritime-image">
+                <img src="images/full.jpg" alt="Coastal waterway" class="maritime-image">
             </div>
         </div>
+        <p class="header-subtitle">AI-powered assistance for Indian maritime law queries</p>
+        <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>
     """)