Update app.py

app.py

@@ -6,29 +6,34 @@ from huggingface_hub.inference._generated.types.chat_completion import ChatCompl
 MODEL = "nomiChroma3.1"
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
-def respond(message, history, config):
-    """Consolidated response function that takes a config dictionary"""
-    messages = [{"role": "system", "content": config["system_message"]}]
-    for user, assistant in history:
-        if user:
-            messages.append({"role": "user", "content": user})
-        if assistant:
-            messages.append({"role": "assistant", "content": assistant})
+def respond(
+    message,
+    history: list[tuple[str, str]],
+    system_message,
+    max_tokens,
+    temperature,
+    top_p,
+):
+    messages = [{"role": "system", "content": system_message}]
+    for val in history:
+        if val[0]:
+            messages.append({"role": "user", "content": val[0]})
+        if val[1]:
+            messages.append({"role": "assistant", "content": val[1]})
     messages.append({"role": "user", "content": message})
-    
     response = ""
     try:
         for message in client.chat_completion(
             messages,
-            max_tokens=config["max_tokens"],
+            max_tokens=max_tokens,
             stream=True,
-            temperature=config["temperature"],
-            top_p=config["top_p"],
+            temperature=temperature,
+            top_p=top_p,
         ):
             try:
                 if isinstance(message, ChatCompletionStreamOutput):
                     content = message.choices[0].delta.content
-                    if content:
+                    if content is not None:
                         response += content
                         yield response
                     if message.choices[0].finish_reason == 'stop':
@@ -40,120 +45,165 @@ def respond(message, history, config):
                         yield response
                     if message.get('choices', [{}])[0].get('finish_reason') == 'stop':
                         break
-                elif isinstance(message, str) and message.strip():
-                    response += message
-                    yield response
+                elif isinstance(message, str):
+                    if message.strip():
+                        response += message
+                        yield response
             except Exception as e:
                 print(f"Error processing message: {e}")
                 continue
-        
+
         if response:
             yield response
+
     except Exception as e:
         print(f"An error occurred: {e}")
         yield f"An error occurred: {e}"
 
-# Streamlined CSS with better performance
 custom_css = """
-    .gradio-container { background-color: #1a365d !important; }
-    
+    /* Global styles */
+    .gradio-container {
+        background-color: #1a365d !important;
+    }
+
+    /* Header styling */
     .header-container {
         text-align: center;
-        padding: 1.5rem 0;
-        margin-bottom: 1.5rem;
-        border-bottom: 1px solid rgba(176, 226, 255, 0.2);
+        padding: 2rem 0;
+        margin-bottom: 2rem;
+        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
     }
-    
+
     .header-title {
-        color: #fff;
-        font-size: 2.25rem;
+        color: #ffffff;
+        font-size: 2.5rem;
         margin-bottom: 0.5rem;
     }
-    
+
     .header-subtitle {
         color: #e6f3ff;
-        font-size: 1rem;
+        font-size: 1.1rem;
     }
-    
-    /* Optimized sidebar */
+
+    /* Sidebar styling */
     .sidebar {
-        background: rgba(176, 226, 255, 0.15) !important;
-        border-radius: 8px !important;
-        padding: 1rem !important;
+        background: #e6f3ff !important;
+        border-radius: 12px !important;
+        padding: 20px !important;
         border: 1px solid rgba(176, 226, 255, 0.2) !important;
-        max-height: calc(100vh - 2rem) !important;
-        overflow-y: auto !important;
-        position: sticky !important;
-        top: 1rem !important;
+        height: fit-content !important;
     }
-    
-    .sidebar-section {
-        margin-bottom: 1.5rem !important;
-    }
-    
+
     .sidebar-title {
-        font-size: 1.1rem !important;
-        color: #fff !important;
-        margin-bottom: 0.75rem !important;
+        color: #1a365d !important;
+        font-size: 1.2rem !important;
+        margin-bottom: 1rem !important;
         padding-bottom: 0.5rem !important;
-        border-bottom: 1px solid rgba(176, 226, 255, 0.2) !important;
+        border-bottom: 2px solid rgba(26, 54, 93, 0.1) !important;
     }
-    
-    /* Compact form controls */
-    .sidebar .gr-form {
-        gap: 0.75rem !important;
+
+    /* Input and control styling in sidebar */
+    .sidebar textarea,
+    .sidebar input,
+    .sidebar .gr-slider {
+        background-color: #ffffff !important;
+        border: 1px solid rgba(26, 54, 93, 0.2) !important;
+        border-radius: 8px !important;
+        color: #1a365d !important;
     }
-    
+
     .sidebar label {
-        font-size: 0.9rem !important;
-        margin-bottom: 0.25rem !important;
+        color: #1a365d !important;
+        font-weight: 500 !important;
+    }
+
+    /* Example queries styling */
+    .sidebar .gr-examples {
+        background-color: #ffffff !important;
+        border-radius: 8px !important;
+        padding: 12px !important;
+        margin-top: 1rem !important;
+    }
+
+    .sidebar .gr-examples button {
+        background-color: #cce7ff !important;
+        color: #1a365d !important;
+        border: none !important;
+        margin: 4px 0 !important;
+        padding: 8px 12px !important;
+        border-radius: 6px !important;
+        text-align: left !important;
+        width: 100% !important;
+    }
+
+    .sidebar .gr-examples button:hover {
+        background-color: #b0e2ff !important;
     }
-    
-    .sidebar .gr-slider { margin: 0.5rem 0 !important; }
-    
-    /* Chat elements */
+
+    /* Chat container */
     .chat-container {
         background: rgba(176, 226, 255, 0.15) !important;
-        border-radius: 8px !important;
-        padding: 1rem !important;
-        height: calc(100vh - 12rem) !important;
+        border-radius: 12px !important;
+        padding: 20px !important;
+        height: 600px !important;
+        overflow-y: auto !important;
         border: 1px solid rgba(176, 226, 255, 0.2) !important;
+        backdrop-filter: blur(10px) !important;
     }
-    
-    .message {
-        padding: 0.75rem !important;
-        margin: 0.5rem 0 !important;
-        border-radius: 6px !important;
+
+    /* Message styling */
+    .message.user, .message.bot {
+        padding: 12px 16px !important;
+        margin: 8px 0 !important;
+        border-radius: 8px !important;
+        color: #1a365d !important;
     }
-    
-    .message.user { background-color: #cce7ff !important; }
-    .message.bot { background-color: #e6f3ff !important; }
-    
+
+    .message.user {
+        background-color: #cce7ff !important;
+    }
+
+    .message.bot {
+        background-color: #e6f3ff !important;
+    }
+
+    /* Chat input styling */
     textarea {
         background-color: #e6f3ff !important;
         border: 1px solid rgba(176, 226, 255, 0.3) !important;
-        border-radius: 6px !important;
-        padding: 0.75rem !important;
+        border-radius: 8px !important;
+        padding: 12px !important;
+        color: #1a365d !important;
     }
-    
+
+    /* Button styling */
     .gr-button {
         background-color: #cce7ff !important;
         color: #1a365d !important;
-        padding: 0.5rem 1rem !important;
-        border-radius: 6px !important;
+        border: none !important;
+    }
+
+    .gr-button:hover {
+        background-color: #b0e2ff !important;
+    }
+
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: rgba(176, 226, 255, 0.1);
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: rgba(176, 226, 255, 0.3);
+        border-radius: 4px;
     }
 """
 
-# Main application with optimized structure
+# Main application
 with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
-    # Application state
-    config = gr.State({
-        "system_message": "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.",
-        "max_tokens": 512,
-        "temperature": 0.7,
-        "top_p": 0.95
-    })
-    
     # Header
     gr.HTML("""
         <div class="header-container">
@@ -162,95 +212,73 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
         </div>
     """)
 
+    # Main layout with sidebar
     with gr.Row():
-        # Optimized sidebar
+        # Sidebar
         with gr.Column(scale=1, elem_classes="sidebar"):
-            with gr.Group(elem_classes="sidebar-section"):
-                gr.Markdown("### Settings", elem_classes="sidebar-title")
-                system_message = gr.Textbox(
-                    value=config.value["system_message"],
-                    label="System Prompt",
-                    lines=3,
-                    elem_classes="compact-input"
-                )
-                
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        max_tokens = gr.Slider(
-                            minimum=1,
-                            maximum=2048,
-                            value=config.value["max_tokens"],
-                            step=1,
-                            label="Length"
-                        )
-                    with gr.Column(scale=1):
-                        temperature = gr.Slider(
-                            minimum=0.1,
-                            maximum=4.0,
-                            value=config.value["temperature"],
-                            step=0.1,
-                            label="Creativity"
-                        )
-                
-                top_p = gr.Slider(
-                    minimum=0.1,
-                    maximum=1.0,
-                    value=config.value["top_p"],
-                    step=0.05,
-                    label="Focus"
-                )
+            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",
+                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"
+            )
             
-            with gr.Group(elem_classes="sidebar-section"):
-                gr.Markdown("### Examples", elem_classes="sidebar-title")
-                example_queries = [
-                    "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?"
-                ]
-                for query in example_queries:
-                    gr.Button(
-                        query,
-                        elem_classes="example-button"
-                    )
+            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(elem_classes="chat-container")
+            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():
-                msg = gr.Textbox(
-                    show_label=False,
-                    placeholder="Type your maritime law query here...",
-                    container=False
-                )
                 submit = gr.Button("Send", variant="primary")
-            
-            clear = gr.Button("Clear History")
-
-    # Event handlers
-    def update_config(system_msg, max_tok, temp, tp):
-        return {"system_message": system_msg, "max_tokens": max_tok, "temperature": temp, "top_p": tp}
+                clear = gr.Button("Clear")
 
-    submit.click(
-        respond,
-        inputs=[msg, chatbot, config],
-        outputs=chatbot
-    )
-    
-    msg.submit(
-        respond,
-        inputs=[msg, chatbot, config],
-        outputs=chatbot
-    )
-    
-    clear.click(lambda: None, None, chatbot, queue=False)
-    
-    # Update config when settings change
-    for setting in [system_message, max_tokens, temperature, top_p]:
-        setting.change(
-            update_config,
-            inputs=[system_message, max_tokens, temperature, top_p],
-            outputs=[config]
-        )
+            # 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)
 
 if __name__ == "__main__":
     demo.launch()