Update app.py

app.py

@@ -60,144 +60,164 @@ def respond(
         print(f"An error occurred: {e}")
         yield f"An error occurred: {e}"
 
-# Custom CSS for maritime theme
+# Custom CSS for maritime theme with sidebar
 custom_css = """
     /* Global styles */
     .gradio-container {
-        background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%) !important;
-        font-family: 'Inter', sans-serif !important;
+        background-color: #e6f3ff !important;
     }
 
     /* Header styling */
-    h1.gr-text-center {
-        font-size: 2.5rem !important;
-        color: #1a365d !important;
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
-        padding: 1.5rem 0 !important;
-        border-bottom: 2px solid rgba(26, 54, 93, 0.1) !important;
+    .header-container {
+        text-align: center;
+        padding: 2rem 0;
+        margin-bottom: 2rem;
+        border-bottom: 2px solid rgba(26, 54, 93, 0.1);
     }
 
-    /* Chat window */
-    .chat-window {
-        background: rgba(255, 255, 255, 0.7) !important;
-        border-radius: 16px !important;
-        box-shadow: 0 8px 32px rgba(26, 54, 93, 0.1) !important;
-        backdrop-filter: blur(8px) !important;
-        border: 1px solid rgba(255, 255, 255, 0.2) !important;
-        margin: 20px !important;
-        padding: 20px !important;
+    .header-title {
+        color: #1a365d;
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
     }
 
-    /* Message styling */
-    .message.user {
-        background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%) !important;
-        color: white !important;
-        border-radius: 16px 16px 2px 16px !important;
-        padding: 15px 20px !important;
-        margin: 10px 0 !important;
-        box-shadow: 0 4px 12px rgba(26, 54, 93, 0.15) !important;
+    .header-subtitle {
+        color: #2c5282;
+        font-size: 1.1rem;
     }
 
-    .message.bot {
-        background: linear-gradient(135deg, #e6f3ff 0%, #f0f8ff 100%) !important;
-        color: #1a365d !important;
-        border-radius: 16px 16px 16px 2px !important;
-        padding: 15px 20px !important;
-        margin: 10px 0 !important;
+    /* Sidebar styling */
+    .sidebar {
+        background: rgba(255, 255, 255, 0.9) !important;
+        border-radius: 12px !important;
+        padding: 20px !important;
         border: 1px solid rgba(26, 54, 93, 0.1) !important;
-        box-shadow: 0 4px 12px rgba(26, 54, 93, 0.08) !important;
+        height: fit-content !important;
     }
 
-    /* Input area styling */
-    .input-row {
-        background: rgba(255, 255, 255, 0.9) !important;
+    .sidebar-title {
+        font-size: 1.2rem !important;
+        color: #1a365d !important;
+        margin-bottom: 1rem !important;
+        padding-bottom: 0.5rem !important;
+        border-bottom: 2px solid rgba(26, 54, 93, 0.1) !important;
+    }
+
+    /* Chat container */
+    .chat-container {
+        background: rgba(255, 255, 255, 0.7) !important;
         border-radius: 12px !important;
-        padding: 10px !important;
-        box-shadow: 0 4px 12px rgba(26, 54, 93, 0.08) !important;
+        padding: 20px !important;
+        height: 600px !important;
+        overflow-y: auto !important;
     }
 
-    textarea {
-        background: rgba(255, 255, 255, 0.8) !important;
-        border: 1px solid rgba(26, 54, 93, 0.1) !important;
+    /* Message styling */
+    .message.user, .message.bot {
+        padding: 12px 16px !important;
+        margin: 8px 0 !important;
         border-radius: 8px !important;
-        padding: 12px !important;
-        font-size: 1rem !important;
-        transition: all 0.3s ease !important;
     }
 
-    textarea:focus {
-        border-color: #2c5282 !important;
-        box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.2) !important;
+    .message.user {
+        background-color: #e1f0ff !important;
     }
 
-    /* Button styling */
-    button.primary {
-        background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%) !important;
-        border: none !important;
-        border-radius: 8px !important;
-        padding: 10px 20px !important;
-        color: white !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
+    .message.bot {
+        background-color: #ffffff !important;
     }
 
-    button.primary:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 4px 12px rgba(26, 54, 93, 0.2) !important;
+    /* Input styling */
+    textarea {
+        background-color: #ffffff !important;
+        border: 1px solid rgba(26, 54, 93, 0.2) !important;
+        border-radius: 8px !important;
+        padding: 12px !important;
     }
 
     /* Slider styling */
     .gr-slider {
-        background: rgba(255, 255, 255, 0.9) !important;
-        border-radius: 8px !important;
-        padding: 15px !important;
-        margin: 10px 0 !important;
-        box-shadow: 0 2px 8px rgba(26, 54, 93, 0.08) !important;
-    }
-
-    /* Examples section */
-    .examples-row {
-        background: rgba(255, 255, 255, 0.7) !important;
-        border-radius: 12px !important;
-        padding: 15px !important;
-        margin-top: 20px !important;
-        box-shadow: 0 4px 12px rgba(26, 54, 93, 0.08) !important;
+        margin: 1rem 0 !important;
     }
 """
 
-# Configure the interface
+# Main application
 with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
+    # Header
     gr.HTML("""
-        <div style="text-align: center; max-width: 800px; margin: 0 auto; padding: 20px;">
-            <h1 style="color: #1a365d; font-size: 2.5rem; margin-bottom: 10px;">Maritime Legal Compass</h1>
-            <p style="color: #2c5282; font-size: 1.1rem; margin-bottom: 20px;">
-                Your AI-powered guide through Indian maritime law and regulations
-            </p>
+        <div class="header-container">
+            <h1 class="header-title">Maritime Legal Compliance</h1>
+            <p class="header-subtitle">AI-powered assistance for Indian maritime law queries</p>
         </div>
     """)
-    
-    chatbot = gr.ChatInterface(
-        respond,
-        additional_inputs=[
-            gr.Textbox(
+
+    # Main layout with sidebar
+    with gr.Row():
+        # Sidebar
+        with gr.Column(scale=1, elem_classes="sidebar"):
+            gr.Markdown("### Configuration", elem_classes="sidebar-title")
+            system_message = gr.Textbox(
                 value="You are a maritime legal assistant with expertise strictly in Indian maritime law. Provide detailed legal advice and information based on Indian maritime legal principles and regulations.",
                 label="System Prompt",
-                elem_classes="system-prompt"
-            ),
-            gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Response Length", 
-                     elem_classes="custom-slider"),
-            gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Creativity Level",
-                     elem_classes="custom-slider"),
-            gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Response Focus",
-                     elem_classes="custom-slider"),
-        ],
-        examples=[
-            ["What are the key regulations governing ports in India?"],
-            ["Explain the concept of cabotage in Indian maritime law."],
-            ["What are the legal requirements for registering a vessel in India?"],
-        ],
-        cache_examples=False,
-    )
+                lines=4
+            )
+            max_tokens = gr.Slider(
+                minimum=1,
+                maximum=2048,
+                value=512,
+                step=1,
+                label="Response Length"
+            )
+            temperature = gr.Slider(
+                minimum=0.1,
+                maximum=4.0,
+                value=0.7,
+                step=0.1,
+                label="Creativity Level"
+            )
+            top_p = gr.Slider(
+                minimum=0.1,
+                maximum=1.0,
+                value=0.95,
+                step=0.05,
+                label="Response Focus"
+            )
+            
+            gr.Markdown("### Example Queries", elem_classes="sidebar-title")
+            examples = gr.Examples(
+                examples=[
+                    ["What are the key regulations governing ports in India?"],
+                    ["Explain the concept of cabotage in Indian maritime law."],
+                    ["What are the legal requirements for registering a vessel in India?"],
+                ],
+                inputs=[system_message],
+                label="Click on any example to load it"
+            )
+
+        # Main chat area
+        with gr.Column(scale=3):
+            chatbot = gr.Chatbot(height=500, elem_classes="chat-container")
+            msg = gr.Textbox(
+                show_label=False,
+                placeholder="Type your maritime law query here...",
+                container=False
+            )
+            with gr.Row():
+                submit = gr.Button("Send", variant="primary")
+                clear = gr.Button("Clear")
+
+            # Event handlers
+            submit_click = submit.click(
+                respond,
+                inputs=[msg, chatbot, system_message, max_tokens, temperature, top_p],
+                outputs=chatbot
+            )
+            msg_submit = msg.submit(
+                respond,
+                inputs=[msg, chatbot, system_message, max_tokens, temperature, top_p],
+                outputs=chatbot
+            )
+            clear.click(lambda: None, None, chatbot, queue=False)
 
 # Launch the app
 if __name__ == "__main__":