Update app.py

app.py

@@ -11,6 +11,41 @@ MODEL = "nomiChroma3.1"
 
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
+# Custom CSS for dark theme and modern aesthetics
+custom_css = """
+    body {
+        background-color: #1f1f1f;
+        color: #e0e0e0;
+        font-family: 'Arial', sans-serif;
+    }
+    .gr-button {
+        background-color: #4A4A4A !important;
+        border: 1px solid #333 !important;
+        color: #ffffff !important;
+    }
+    .gr-button:hover {
+        background-color: #3a3a3a !important;
+        border-color: #555 !important;
+    }
+    .gr-textbox {
+        border-color: #555 !important;
+        color: #ffffff !important;
+    }
+    .gr-slider {
+        color: #ffffff !important;
+    }
+    .gr-textbox textarea {
+        background-color: #333 !important;
+        color: #ffffff !important;
+    }
+    .gr-slider input[type=range] {
+        background-color: #4A4A4A !important;
+    }
+    .gr-box {
+        background-color: #292929 !important;
+        border-color: #444 !important;
+    }
+"""
 
 def respond(
     message,
@@ -44,27 +79,33 @@ def respond(
         response += token
         yield response
 
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
+# Updated ChatInterface with dark theme and modern layout
 demo = gr.ChatInterface(
     respond,
     additional_inputs=[
-        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 message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
+        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 message",
+            placeholder="Enter system instructions...",
+            elem_classes="custom-textbox"
+        ),
+        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens", elem_classes="custom-slider"),
+        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature", elem_classes="custom-slider"),
         gr.Slider(
             minimum=0.1,
             maximum=1.0,
             value=0.95,
             step=0.05,
             label="Top-p (nucleus sampling)",
+            elem_classes="custom-slider"
         ),
     ],
+    theme="dark",
     title="Maritime Legal Compliance",
-    description="This chatbot uses the fine tune Llama 3.1 which has the capabilities of responding and helping in legal advices regarding maritime",
+    description="This chatbot uses the fine-tuned Llama 3.1 model to provide legal advice on maritime law with a focus on Indian maritime regulations.",
+    css=custom_css,
+    elem_classes="custom-container"
 )
 
-
 if __name__ == "__main__":
     demo.launch()