Update app.py

app.py

@@ -6,7 +6,6 @@ from typing import Iterator, List, Tuple
 
 # Configuration Constants
 DEFAULT_SYSTEM_PROMPT = """ 
-
   
 أنت مترجم ثنائي اللغة متخصص في الترجمة بين العربية والإنجليزية. هدفك هو تقديم ترجمات دقيقة، ملائمة للسياق، ومتسقة من الناحية الأسلوبية، مع الالتزام بالإرشادات التالية:
 أسلوب الكتابة:
@@ -42,90 +41,53 @@ DEFAULT_SYSTEM_PROMPT = """
 قدم الأولوية للوضوح، والتناسق، والملاءمة مع احتياجات الجمهور المستهدف. قم دائمًا بموازنة التعليمات الخاصة بالمشروع مع هذه الإرشادات، مع إعطاء الأولوية لمتطلبات العميل عند وجود أي تعارض.
  
 
-"""
+
+"""  # Full prompt maintained as original
 
 TITLE = "<h1><center>Mawared T Assistant</center></h1>"
 PLACEHOLDER = "Ask me anything! I'll think through it step by step."
 
 CSS = """
-:root {
-    --rtl-bg: #f0f8ff;
-    --ltr-bg: #fff8f0;
-}
 
-.rtl {
-    direction: rtl !important;
-    text-align: right !important;
-    font-family: 'Tahoma', 'Arial', sans-serif !important;
+duplicate-button {
+    margin: auto !important;
+    color: white !important;
+    background: black !important;
+    border-radius: 100vh !important;
 }
-
-.ltr {
-    direction: ltr !important;
-    text-align: left !important;
+h3 {
+    text-align: center;
 }
-
 .message-wrap {
     overflow-x: auto;
-    padding: 20px;
-    border-radius: 10px;
-    margin: 10px 0;
-}
-
-.user-message {
-    background: var(--rtl-bg);
-    padding: 15px;
-    border-radius: 15px 15px 0 15px;
-    margin: 10px 0;
-    max-width: 80%;
-    margin-left: auto;
 }
-
-.assistant-message {
-    background: var(--ltr-bg);
-    padding: 15px;
-    border-radius: 15px 15px 15px 0;
-    margin: 10px 0;
-    max-width: 80%;
-}
-
-.direction-toggle {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 1000;
+.message-wrap p {
+    margin-bottom: 1em;
 }
-
-.arabic-text {
-    font-size: 1.1em;
-    line-height: 1.8;
+.message-wrap pre {
+    background-color: #f6f8fa;
+    border-radius: 3px;
+    padding: 16px;
+    overflow-x: auto;
 }
-
-.text-input {
-    min-height: 120px !important;
+.message-wrap code {
+    background-color: rgba(175,184,193,0.2);
+    border-radius: 3px;
+    padding: 0.2em 0.4em;
+    font-family: monospace;
 }
-
-.rtl-textarea textarea {
-    text-align: right !important;
-    direction: rtl !important;
+.custom-tag {
+    color: #0066cc;
+    font-weight: bold;
 }
-
 .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
+# Precompile regex patterns for better performance
 TAG_PATTERNS = [
     (re.compile(r'<Thinking>'), '\n<Thinking>\n'),
     (re.compile(r'</Thinking>'), '\n</Thinking>\n'),
@@ -137,12 +99,6 @@ TAG_PATTERNS = [
     (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"""
     formatted = text
@@ -151,28 +107,11 @@ def format_text(text: str) -> str:
     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 with RTL/LTR support"""
-    html = []
-    for user_msg, assistant_msg in history:
-        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:
-            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)
+    """Format chat history for display"""
+    return "\n\n".join(
+        f"User: {user_msg}\nAssistant: {assistant_msg}" 
+        for user_msg, assistant_msg in history if user_msg
+    )
 
 def convert_history_to_cohere_format(history: List[List[str]]) -> List[dict]:
     """Convert chat history to Cohere's format with proper roles"""
@@ -189,14 +128,14 @@ def chat_response(
     history: List[List[str]],
     chat_display: str,
     system_prompt: str,
-    temperature: float = 0.3,
+    temperature: float = 0.2,
     max_new_tokens: int = 8192,
     top_p: float = 0.8,
     top_k: int = 40,
     penalty: float = 1.2,
     api_key: str = os.getenv("COHERE_API_KEY")
 ) -> Iterator[Tuple[List[List[str]], str]]:
-    """Generate chat responses using Cohere API"""
+    """Generate chat responses using Cohere API with error handling"""
     if not api_key:
         error_message = "Error: COHERE_API_KEY environment variable not set."
         history.append([message, error_message])
@@ -245,9 +184,10 @@ def main():
         with gr.Row():
             with gr.Column():
                 chat_history = gr.State([])
-                chat_display = gr.HTML(
+                chat_display = gr.TextArea(
                     value="",
                     label="Chat History",
+                    interactive=False,
                     elem_classes=["chat-area"],
                 )
                 
@@ -255,8 +195,7 @@ def main():
                     placeholder=PLACEHOLDER,
                     label="Your message",
                     lines=3,
-                    elem_id="message_input",
-                    elem_classes=["text-input"]
+                    elem_id="message_input"
                 )
                 
                 with gr.Row():
@@ -268,13 +207,12 @@ def main():
                         value=DEFAULT_SYSTEM_PROMPT,
                         label="System Prompt",
                         lines=5,
-                        elem_classes=["rtl-textarea"]
                     )
                     temperature = gr.Slider(
                         minimum=0,
                         maximum=1,
                         step=0.1,
-                        value=0.3,
+                        value=0.2,
                         label="Temperature",
                     )
                     max_tokens = gr.Slider(
@@ -329,8 +267,28 @@ def main():
             show_progress=True,
         )
 
-        # JavaScript for dynamic RTL/LTR switching
-        
+    # Add JavaScript for Enter key handling
+    demo.load(
+        None,
+        None,
+        None,
+        _js="""
+        function enableEnterSubmit() {
+            const textarea = document.querySelector('#message_input textarea');
+            const submitBtn = document.querySelector('#submit_btn');
+            
+            textarea?.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    submitBtn.click();
+                }
+            });
+        }
+        enableEnterSubmit();
+        """
+    )
+    
+    return demo
 
 if __name__ == "__main__":
     demo = main()