Update app.py

app.py

@@ -1,92 +1,243 @@
-import React from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-
-const MaritimeLegalInterface = () => {
-  const imageStyles = "w-full h-48 object-cover rounded-lg shadow-md transition-transform hover:scale-105 border-2 border-[#1a365d] filter contrast-110 saturate-110";
-  
-  return (
-    <div className="min-h-screen bg-[#1a365d] p-8 relative">
-      {/* Header Section */}
-      <div className="text-center mb-8 relative z-10">
-        <h1 className="text-4xl font-bold text-white mb-2">Maritime Legal Compliance</h1>
-        <div className="grid grid-cols-3 gap-4 mt-6 mb-4">
-          <img 
-            src="/api/placeholder/400/320" 
-            alt="Modern cargo port with container ships"
-            className={imageStyles}
-          />
-          <img 
-            src="/api/placeholder/400/320" 
-            alt="Large container vessel at sea"
-            className={imageStyles}
-          />
-          <img 
-            src="/api/placeholder/400/320" 
-            alt="Busy waterway with multiple vessels"
-            className={imageStyles}
-          />
-        </div>
-        <p className="text-[#e6f3ff] text-lg">AI-powered assistance for Indian maritime law queries</p>
-        <p className="text-[#e6f3ff] text-sm mt-2">This chatbot uses Fine-tuned LLAMA-3.1 model personalised specifically to provide assistance with Indian maritime legal queries.</p>
-      </div>
-
-      {/* Main Content Area */}
-      <div className="flex gap-6">
-        {/* Sidebar */}
-        <div className="w-1/4">
-          <Card className="bg-[#ccd9e6] border-none">
-            <CardContent className="p-4">
-              <h2 className="text-[#1a365d] text-xl font-semibold mb-4 pb-2 border-b-2 border-[#1a365d]/20">
-                Example Queries
-              </h2>
-              <div className="space-y-2">
-                {[
-                  "What are the key regulations governing ports in India?",
-                  "What are the legal requirements for registering a vessel in India?",
-                  "What are the recent environmental concerns for shipping in Indian waters?",
-                  "What are the rules for coastal cargo transportation in India?"
-                ].map((query, index) => (
-                  <button
-                    key={index}
-                    className="w-full text-left p-3 bg-[#b3c6d9] text-[#1a365d] rounded hover:bg-[#99b3cc] transition-colors pl-8 relative text-sm"
-                  >
-                    <span className="absolute left-2 top-1/2 -translate-y-1/2 opacity-70">⚓</span>
-                    {query}
-                  </button>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
+import gradio as gr
+import os
+from huggingface_hub import InferenceClient
+from huggingface_hub.inference._generated.types.chat_completion import ChatCompletionStreamOutput
+
+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]:
+    """
+    Generate a response and update chat history.
+    Uses the new message format with role and content keys.
+    Returns tuple of (new_history, None) to clear input box.
+    """
+    system_message = "You are a maritime legal assistant with expertise strictly in Indian maritime law. Provide a detailed legal advice and information based on Indian maritime legal principles and regulations."
+    
+    messages = [{"role": "system", "content": system_message}]
+    for msg in chat_history:
+        messages.append({"role": msg["role"], "content": msg["content"]})
+    messages.append({"role": "user", "content": message})
+    
+    chat_history = chat_history + [{"role": "user", "content": message}]
+    response = ""
+    
+    try:
+        for chunk in client.chat_completion(
+            messages,
+            max_tokens=512,
+            stream=True,
+            temperature=0.7,
+            top_p=0.95,
+        ):
+            try:
+                if isinstance(chunk, ChatCompletionStreamOutput):
+                    content = chunk.choices[0].delta.content
+                    if content:
+                        response += content
+                        if len(chat_history) > 0 and chat_history[-1]["role"] == "assistant":
+                            chat_history[-1]["content"] = response
+                        else:
+                            chat_history.append({"role": "assistant", "content": response})
+                        yield chat_history, ""
+                    if chunk.choices[0].finish_reason == 'stop':
+                        break
+                elif isinstance(chunk, dict):
+                    content = chunk.get('choices', [{}])[0].get('delta', {}).get('content')
+                    if content:
+                        response += content
+                        if len(chat_history) > 0 and chat_history[-1]["role"] == "assistant":
+                            chat_history[-1]["content"] = response
+                        else:
+                            chat_history.append({"role": "assistant", "content": response})
+                        yield chat_history, ""
+                    if chunk.get('choices', [{}])[0].get('finish_reason') == 'stop':
+                        break
+                elif isinstance(chunk, str) and chunk.strip():
+                    response += chunk
+                    if len(chat_history) > 0 and chat_history[-1]["role"] == "assistant":
+                        chat_history[-1]["content"] = response
+                    else:
+                        chat_history.append({"role": "assistant", "content": response})
+                    yield chat_history, ""
+                    
+            except Exception as e:
+                print(f"Error processing chunk: {e}")
+                continue
+
+        if not response:
+            chat_history.append({"role": "assistant", "content": "I apologize, but I couldn't generate a response. Please try again."})
+        
+        yield chat_history, ""
+
+    except Exception as e:
+        error_msg = f"An error occurred: {str(e)}"
+        chat_history.append({"role": "assistant", "content": error_msg})
+        yield chat_history, ""
+
+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
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
+
+.gradio-container {
+    background-color: #1a365d !important;
+    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif !important;
+}
+
+.header-container {
+    text-align: center;
+    padding: 2rem 0;
+    margin-bottom: 1rem;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+    position: relative;
+    z-index: 1;
+}
+
+.header-title {
+    color: #ffffff;
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    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;
+    margin-bottom: 0.3rem;
+    font-family: 'Ubuntu', sans-serif !important;
+    opacity: 0.9;
+}
+
+.maritime-images {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin: 1.5rem auto;
+    max-width: 1200px;
+    padding: 0 1rem;
+}
+
+.maritime-image {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 8px;
+    border: 2px solid #e6f3ff;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    filter: contrast(110%) saturate(110%);
+}
+
+.maritime-image:hover {
+    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("""
+        <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="/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>
+            <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>
+    """)
 
-        {/* Chat Area */}
-        <div className="flex-1">
-          <Card className="bg-[#ccd9e6] border-none">
-            <CardContent className="p-4">
-              <div className="h-[300px] overflow-y-auto mb-4 rounded-lg bg-white/50 p-4">
-                {/* Chat messages would go here */}
-              </div>
-              <div className="flex gap-2">
-                <textarea 
-                  className="w-full p-2 rounded-lg bg-[#e6f3ff] border border-[#1a365d]/20 text-[#1a365d]"
-                  placeholder="Type your maritime law query here..."
-                  rows={3}
-                />
-                <div className="flex flex-col gap-2">
-                  <button className="px-4 py-2 bg-[#1a365d] text-white rounded-lg hover:bg-[#2a4a7d] transition-colors">
-                    Send
-                  </button>
-                  <button className="px-4 py-2 bg-[#b3c6d9] text-[#1a365d] rounded-lg hover:bg-[#99b3cc] transition-colors">
-                    Clear
-                  </button>
+    # Rest of your application remains exactly the same
+    with gr.Row():
+        with gr.Column(scale=1, elem_classes="sidebar"):
+            gr.HTML("""
+                <div class="sidebar-bg">
+                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+                        <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
+                            <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#1a365d" stroke-width="0.5"/>
+                        </pattern>
+                        <rect width="100%" height="100%" fill="url(#grid)"/>
+                        <circle cx="80" cy="20" r="15" fill="#1a365d"/>
+                        <path d="M70,80 L90,80 L80,95 Z" fill="#1a365d"/>
+                    </svg>
                 </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
-};
+                <div class="sidebar-content">
+            """)
+            
+            gr.HTML("""
+                <div class="sidebar-title">
+                    <svg class="sidebar-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="10" fill="none" stroke="#1a365d" stroke-width="2"/>
+                        <path d="M12 6 L12 18 M6 12 L18 12" stroke="#1a365d" stroke-width="2"/>
+                    </svg>
+                    Example Queries
+                </div>
+            """)
+            
+            example_queries = [
+                "What are the key regulations governing ports in India?",
+                "What are the legal requirements for registering a vessel in India?",
+                "What are the recent environmental concerns for shipping in Indian waters?",
+                "What are the rules for coastal cargo transportation in India?"
+            ]
+            
+            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>")
+
+        with gr.Column(scale=3):
+            chatbot = gr.Chatbot(
+                height=300,
+                elem_classes="chat-container",
+                type="messages"
+            )
+            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 remain the same
+            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)
+            
+            for button in example_buttons:
+                button.click(
+                    fn=handle_example_click,
+                    inputs=[button],
+                    outputs=[msg, chatbot],
+                    queue=False
+                ).then(
+                    fn=respond,
+                    inputs=[msg, chatbot],
+                    outputs=[chatbot, msg]
+                )
 
-export default MaritimeLegalInterface;
+if __name__ == "__main__":
+    demo.launch()