Update app.py

app.py

@@ -6,6 +6,8 @@ from typing import Iterator, List, Tuple
 
 # Configuration Constants
 DEFAULT_SYSTEM_PROMPT = """ 
+
+  
 أنت مترجم ثنائي اللغة متخصص في الترجمة بين العربية والإنجليزية. هدفك هو تقديم ترجمات دقيقة، ملائمة للسياق، ومتسقة من الناحية الأسلوبية، مع الالتزام بالإرشادات التالية:
 أسلوب الكتابة:
 1. الدقة النحوية: احرص دائمًا على أن تكون الترجمة صحيحة نحويًا.
@@ -38,97 +40,148 @@ DEFAULT_SYSTEM_PROMPT = """
 حافظ على تنسيق البيانات المهمة (مثل التواريخ، والقياسات، والاستشهادات القانونية).
 عند الشك:
 قدم الأولوية للوضوح، والتناسق، والملاءمة مع احتياجات الجمهور المستهدف. قم دائمًا بموازنة التعليمات الخاصة بالمشروع مع هذه الإرشادات، مع إعطاء الأولوية لمتطلبات العميل عند وجود أي تعارض.
-"""  # (keeping the full prompt as in original)
+ 
+
+"""
 
 TITLE = "<h1><center>Mawared T Assistant</center></h1>"
 PLACEHOLDER = "Ask me anything! I'll think through it step by step."
 
 CSS = """
-.duplicate-button {
-    margin: auto !important;
-    color: white !important;
-    background: black !important;
-    border-radius: 100vh !important;
+:root {
+    --rtl-bg: #f0f8ff;
+    --ltr-bg: #fff8f0;
 }
-h3 {
-    text-align: center;
+
+.rtl {
+    direction: rtl !important;
+    text-align: right !important;
+    font-family: 'Tahoma', 'Arial', sans-serif !important;
+}
+
+.ltr {
+    direction: ltr !important;
+    text-align: left !important;
 }
+
 .message-wrap {
     overflow-x: auto;
+    padding: 20px;
+    border-radius: 10px;
+    margin: 10px 0;
 }
-.message-wrap p {
-    margin-bottom: 1em;
+
+.user-message {
+    background: var(--rtl-bg);
+    padding: 15px;
+    border-radius: 15px 15px 0 15px;
+    margin: 10px 0;
+    max-width: 80%;
+    margin-left: auto;
 }
-.message-wrap pre {
-    background-color: #f6f8fa;
-    border-radius: 3px;
-    padding: 16px;
-    overflow-x: auto;
+
+.assistant-message {
+    background: var(--ltr-bg);
+    padding: 15px;
+    border-radius: 15px 15px 15px 0;
+    margin: 10px 0;
+    max-width: 80%;
 }
-.message-wrap code {
-    background-color: rgba(175,184,193,0.2);
-    border-radius: 3px;
-    padding: 0.2em 0.4em;
-    font-family: monospace;
+
+.direction-toggle {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1000;
 }
-.custom-tag {
-    color: #0066cc;
-    font-weight: bold;
+
+.arabic-text {
+    font-size: 1.1em;
+    line-height: 1.8;
+}
+
+.text-input {
+    min-height: 120px !important;
+}
+
+.rtl-textarea textarea {
+    text-align: right !important;
+    direction: rtl !important;
 }
+
 .chat-area {
     height: 500px !important;
     overflow-y: auto !important;
+    background: #f8f9fa !important;
+    border-radius: 10px !important;
+    padding: 20px !important;
+}
+
+.duplicate-button {
+    margin: auto !important;
+    color: white !important;
+    background: black !important;
+    border-radius: 100vh !important;
 }
 """
 
+# Precompile regex patterns
+TAG_PATTERNS = [
+    (re.compile(r'<Thinking>'), '\n<Thinking>\n'),
+    (re.compile(r'</Thinking>'), '\n</Thinking>\n'),
+    (re.compile(r'<Critique>'), '\n<Critique>\n'),
+    (re.compile(r'</Critique>'), '\n</Critique>\n'),
+    (re.compile(r'<Revising>'), '\n<Revising>\n'),
+    (re.compile(r'</Revising>'), '\n</Revising>\n'),
+    (re.compile(r'<Final>'), '\n<Final>\n'),
+    (re.compile(r'</Final>'), '\n</Final>\n')
+]
+
+ARABIC_REGEX = re.compile(r'[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]')
+
+def has_arabic(text: str) -> bool:
+    """Check if text contains Arabic characters"""
+    return bool(ARABIC_REGEX.search(text))
+
 def format_text(text: str) -> str:
     """Format text with proper spacing and tag highlighting"""
-    tag_patterns = [
-        (r'<Thinking>', '\n<Thinking>\n'),
-        (r'</Thinking>', '\n</Thinking>\n'),
-        (r'<Critique>', '\n<Critique>\n'),
-        (r'</Critique>', '\n</Critique>\n'),
-        (r'<Revising>', '\n<Revising>\n'),
-        (r'</Revising>', '\n</Revising>\n'),
-        (r'<Final>', '\n<Final>\n'),
-        (r'</Final>', '\n</Final>\n')
-    ]
-    
     formatted = text
-    for pattern, replacement in tag_patterns:
-        formatted = re.sub(pattern, replacement, formatted)
-    
-    formatted = '\n'.join(line for line in formatted.split('\n') if line.strip())
-    
-    return formatted
+    for pattern, replacement in TAG_PATTERNS:
+        formatted = pattern.sub(replacement, formatted)
+    return '\n'.join(line for line in formatted.split('\n') if line.strip())
 
 def format_chat_history(history: List[List[str]]) -> str:
-    """Format chat history for display"""
-    formatted = []
+    """Format chat history with RTL/LTR support"""
+    html = []
     for user_msg, assistant_msg in history:
-        formatted.append(f"User: {user_msg}")
+        if user_msg:
+            direction = "rtl" if has_arabic(user_msg) else "ltr"
+            html.append(f"""
+            <div class="message-wrap {direction}">
+                <div class="user-message arabic-text {direction}">
+                    <strong>User:</strong> {user_msg}
+                </div>
+            </div>
+            """)
         if assistant_msg:
-            formatted.append(f"Assistant: {assistant_msg}")
-    return "\n\n".join(formatted)
-
-def create_examples() -> List[str]:
-    """Create example queries for the UI"""
-    return [
-        "Explain the concept of artificial intelligence.",
-        "How does photosynthesis work?",
-        "What are the main causes of climate change?",
-        "Describe the process of protein synthesis.",
-        "What are the key features of a democratic government?",
-    ]
+            direction = "rtl" if has_arabic(assistant_msg) else "ltr"
+            html.append(f"""
+            <div class="message-wrap {direction}">
+                <div class="assistant-message {direction}">
+                    <strong>Assistant:</strong> {assistant_msg}
+                </div>
+            </div>
+            """)
+    return "".join(html)
 
 def convert_history_to_cohere_format(history: List[List[str]]) -> List[dict]:
-    """Convert chat history to Cohere's format"""
+    """Convert chat history to Cohere's format with proper roles"""
     cohere_history = []
     for user_msg, assistant_msg in history:
         if user_msg:
-            cohere_history.append({"role": "User", "message": user_msg})
+            cohere_history.append({"role": "USER", "message": user_msg})
         if assistant_msg:
-            cohere_history.append({"role": "Chatbot", "message": assistant_msg})
+            cohere_history.append({"role": "CHATBOT", "message": assistant_msg})
     return cohere_history
 
 def chat_response(
@@ -144,44 +197,41 @@ def chat_response(
     api_key: str = os.getenv("COHERE_API_KEY")
 ) -> Iterator[Tuple[List[List[str]], str]]:
     """Generate chat responses using Cohere API"""
+    if not api_key:
+        error_message = "Error: COHERE_API_KEY environment variable not set."
+        history.append([message, error_message])
+        yield history, format_chat_history(history)
+        return
+
     co = cohere.Client(api_key=api_key)
-    
-    # Convert history to Cohere format
     chat_history = convert_history_to_cohere_format(history)
-    
-    # Initialize buffer for streaming
     buffer = ""
-    history = history + [[message, ""]]
+    history.append([message, ""])
     
-    # Process stream
     try:
-        # Initialize stream
         stream = co.chat_stream(
             model='c4ai-aya-expanse-32b',
             message=message,
             temperature=temperature,
+            max_tokens=max_new_tokens,
+            p=top_p,
+            k=top_k,
+            frequency_penalty=penalty,
             chat_history=chat_history,
             prompt_truncation='AUTO',
             preamble=system_prompt
         )
-        
+
         for event in stream:
             if event.event_type == "text-generation":
                 buffer += event.text
-                formatted_buffer = format_text(buffer)
-                history[-1][1] = formatted_buffer
-                chat_display = format_chat_history(history)
-                yield history, chat_display
-                
+                history[-1][1] = format_text(buffer)
+                yield history, format_chat_history(history)
+
     except Exception as e:
         error_message = f"Error: {str(e)}"
         history[-1][1] = error_message
-        chat_display = format_chat_history(history)
-        yield history, chat_display
-
-def process_example(example: str) -> tuple:
-    """Process example query and return empty history and updated display"""
-    return [], f"User: {example}\n\n"
+        yield history, format_chat_history(history)
 
 def main():
     """Main function to set up and launch the Gradio interface"""
@@ -195,21 +245,22 @@ def main():
         with gr.Row():
             with gr.Column():
                 chat_history = gr.State([])
-                chat_display = gr.TextArea(
+                chat_display = gr.HTML(
                     value="",
                     label="Chat History",
-                    interactive=False,
                     elem_classes=["chat-area"],
                 )
                 
                 message = gr.TextArea(
                     placeholder=PLACEHOLDER,
                     label="Your message",
-                    lines=3
+                    lines=3,
+                    elem_id="message_input",
+                    elem_classes=["text-input"]
                 )
                 
                 with gr.Row():
-                    submit = gr.Button("Send")
+                    submit = gr.Button("Send", elem_id="submit_btn")
                     clear = gr.Button("Clear")
                 
                 with gr.Accordion("���️ Advanced Settings", open=False):
@@ -217,6 +268,7 @@ def main():
                         value=DEFAULT_SYSTEM_PROMPT,
                         label="System Prompt",
                         lines=5,
+                        elem_classes=["rtl-textarea"]
                     )
                     temperature = gr.Slider(
                         minimum=0,
@@ -253,65 +305,58 @@ def main():
                         value=1.2,
                         label="Repetition Penalty",
                     )
-                
-                examples = gr.Examples(
-                    examples=create_examples(),
-                    inputs=[message],
-                    outputs=[chat_history, chat_display],
-                    fn=process_example,
-                    cache_examples=False,
-                )
-        
-        # Set up event handlers
-        submit_click = submit.click(
+
+        # Event handlers
+        submit.click(
             chat_response,
-            inputs=[
-                message,
-                chat_history,
-                chat_display,
-                system_prompt,
-                temperature,
-                max_tokens,
-                top_p,
-                top_k,
-                penalty,
-            ],
+            inputs=[message, chat_history, chat_display, system_prompt,
+                    temperature, max_tokens, top_p, top_k, penalty],
             outputs=[chat_history, chat_display],
             show_progress=True,
-        )
-        
-        # Bind Enter key to submit
+        ).then(lambda: "", outputs=message)
+
         message.submit(
             chat_response,
-            inputs=[
-                message,
-                chat_history,
-                chat_display,
-                system_prompt,
-                temperature,
-                max_tokens,
-                top_p,
-                top_k,
-                penalty,
-            ],
+            inputs=[message, chat_history, chat_display, system_prompt,
+                    temperature, max_tokens, top_p, top_k, penalty],
             outputs=[chat_history, chat_display],
             show_progress=True,
-        )
-        
+        ).then(lambda: "", outputs=message)
+
         clear.click(
             lambda: ([], ""),
             outputs=[chat_history, chat_display],
             show_progress=True,
         )
-        
-        # Clear input after submission
-        submit_click.then(lambda: "", outputs=message)
-        message.submit(lambda: "", outputs=message)
+
+        # JavaScript for dynamic RTL/LTR switching
+        demo.load(
+            None,
+            None,
+            None,
+            _js="""
+            function setupDirectionHandling() {
+                const textarea = document.querySelector('#message_input textarea');
+                const chatArea = document.querySelector('.chat-area');
+                
+                // Input field handling
+                textarea.addEventListener('input', function(e) {
+                    const hasArabic = /[\u0600-\u06FF]/.test(e.target.value);
+                    this.parentElement.classList.toggle('rtl', hasArabic);
+                    this.parentElement.classList.toggle('ltr', !hasArabic);
+                });
+                
+                // Chat area scroll handling
+                chatArea.addEventListener('DOMSubtreeModified', function() {
+                    this.scrollTop = this.scrollHeight;
+                });
+            }
+            setupDirectionHandling();
+            """
+        )
     
     return demo
 
 if __name__ == "__main__":
     demo = main()
-    demo.launch()
-
-
+    demo.launch()