Update app.py

app.py

@@ -60,14 +60,30 @@ def load_models():
         print(f"Error loading model: {str(e)}")
         return None, None
 
-# Simple clean response function
+# Enhanced clean response function with better metadata cleaning
 def clean_response(text):
+    # Step 1: Aggressively remove the common metadata pattern at the beginning
+    text = re.sub(r'^\s*[\?؟]\s*موضوع:.*?التالي:\s*[^؟?]*[؟?]\s*[^\n]*\d{4},\s*\d{1,2}:\d{2}\s*[apm]+\s*', '', text)
+    
+    # Step 2: Remove date and timestamp patterns
+    text = re.sub(r'\d{1,2}\s+[^ ]+\s+\d{4}\s*[-,]\s*\d{1,2}:\d{2}\s*[صمaApP][مmMnN]?', '', text)
+    
+    # Step 3: Remove website references
     text = re.sub(r'[-–—]\s*موقع\s+[^\n]+', '', text)
     text = re.sub(r'[-–—]\s*[^\n]*المصطبه[^\n]*', '', text)
-    text = re.sub(r'\d{1,2}\s+[^\s]+\s+\d{4}\s*[-–—]\s*\d{1,2}[:\.]\d{1,2}\s*[صمaApP][مmMnN]?', '', text)
+    
+    # Step 4: Remove unrelated questions that might appear
     text = re.sub(r'من هو [^؟?]+\؟', '', text)
+    text = re.sub(r'من هي [^؟?]+\؟', '', text)
     text = re.sub(r'ما هو [^؟?]+\؟', '', text)
+    text = re.sub(r'ما هي [^؟?]+\؟', '', text)
+    
+    # Step 5: Clean up format and spacing
     text = re.sub(r'\s+', ' ', text).strip()
+    
+    # If text begins with a colon or similar punctuation, clean it
+    text = re.sub(r'^[:.،,؛;-]+\s*', '', text)
+    
     return text
 
 # Generate text function with GPU access
@@ -81,8 +97,8 @@ def generate_text(prompt):
         if tokenizer is None or model is None:
             return "خطأ في تحميل النموذج."
         
-        # Simple system prompt
-        full_prompt = f"أجب على السؤال التالي: {prompt}"
+        # Using minimal prompt without system context
+        full_prompt = prompt
         
         # Tokenize and generate
         inputs = tokenizer(full_prompt, return_tensors="pt").to(model.device)
@@ -96,7 +112,10 @@ def generate_text(prompt):
         
         # Get only new content
         generated_text = tokenizer.decode(outputs[0][inputs.input_ids.shape[1]:], skip_special_tokens=True)
+        
+        # Apply enhanced cleaning to remove metadata
         final_text = clean_response(generated_text)
+        
         return final_text
         
     except Exception as e:
@@ -115,112 +134,128 @@ def set_example3():
 def set_example4():
     return "ماهو شهر رمضان؟"
 
-# Create custom CSS that fixes text visibility
+# Create custom CSS that fixes text visibility while matching the current look
 custom_css = """
-/* Basic reset */
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-/* Basic colors and fonts */
+/* Enhanced styles for Arabic Cohere model interface */
 :root {
-    --border-color: #2c3e50;
-    --background-color: #f8f9fa;
     --primary-color: #1F4287;
-    --accent-color: #21BF73;
+    --secondary-color: #278EA5;
+    --bg-color: #f9fafb;
+    --border-color: #d1d5db;
+    --btn-primary: #2C5282;
+    --btn-secondary: #E2E8F0;
+    --text-color: #000000;
 }
 
-/* Full container styling */
-.gradio-container {
-    font-family: 'Arial', 'Cairo', sans-serif !important;
-    padding: 1rem;
-    background-color: var(--background-color);
+/* Base styles */
+body, html {
+    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-color);
+    overflow-x: hidden;
 }
 
-/* Basic header */
+/* Typography */
 h1, h2, h3 {
-    text-align: center;
-    margin-bottom: 1rem;
     color: var(--primary-color);
+    text-align: center;
+}
+
+/* Fix input and output containers */
+.input-container, .output-container {
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 10px;
+    margin-bottom: 15px;
+    background-color: white;
 }
 
-/* CRITICALLY IMPORTANT: Fix input and textarea appearance */
-input, textarea {
+/* CRITICAL FIX: Make sure text is visible in textboxes */
+textarea, .output-text {
+    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
     color: black !important;
     background-color: white !important;
-    font-size: 16px !important;
+    border: 1px solid #d1d5db !important;
     padding: 10px !important;
-    border: 2px solid var(--border-color) !important;
+    font-size: 16px !important;
+    line-height: 1.5 !important;
     border-radius: 6px !important;
     width: 100% !important;
     direction: rtl !important;
+    min-height: 80px !important;
 }
 
-input::placeholder, textarea::placeholder {
-    color: #999 !important;
+/* Ensure text and placeholder are visible */
+textarea::placeholder {
+    color: #9ca3af !important;
     opacity: 1 !important;
 }
 
-/* Fix button appearance */
+/* Button styling to match current design */
 button {
-    background-color: var(--primary-color) !important;
+    border-radius: 6px !important;
+    padding: 8px 16px !important;
+    font-weight: 600 !important;
+    transition: all 0.2s !important;
+}
+
+button.primary {
+    background-color: var(--btn-primary) !important;
     color: white !important;
     border: none !important;
-    padding: 8px 16px !important;
-    border-radius: 4px !important;
-    cursor: pointer !important;
-    margin: 5px !important;
 }
 
-button:hover {
-    opacity: 0.9 !important;
+button.secondary {
+    background-color: var(--btn-secondary) !important;
+    color: var(--primary-color) !important;
+    border: 1px solid var(--border-color) !important;
 }
 
-/* Example button styling */
+/* Example buttons styling */
 .example-btn {
-    background-color: #f1f1f1 !important;
+    background-color: #f8fafc !important;
+    border: 1px solid #cbd5e1 !important;
     color: var(--primary-color) !important;
-    border: 1px solid var(--primary-color) !important;
+    padding: 8px 12px !important;
+    border-radius: 6px !important;
+    margin: 4px !important;
+    font-size: 14px !important;
 }
 
-/* Ensure rows are visible */
-.row {
-    display: flex !important;
-    margin-bottom: 1rem !important;
-    width: 100% !important;
+.example-btn:hover {
+    background-color: #f1f5f9 !important;
+    border-color: #94a3b8 !important;
 }
 
-/* Fix column widths and spacing */
-.col {
-    padding: 0 0.5rem !important;
-    flex: 1 !important;
+/* Layout containers */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
 }
 
-/* CRITICAL: Make sure text in inputs is visible */
-#input-textbox {
-    color: black !important;
-    background-color: white !important;
-    min-height: 100px !important;
+.row {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 15px;
 }
 
-#output-textbox {
-    color: black !important;
-    background-color: white !important;
-    min-height: 200px !important;
+.col {
+    flex: 1;
 }
 
-/* No scrollbars on main container */
-body, html, .gradio-container {
-    overflow: hidden !important;
-    height: 100% !important;
+/* Explicitly force element visibility */
+#input-text, #output-text {
+    visibility: visible !important;
+    display: block !important;
+    opacity: 1 !important;
 }
 """
 
-# Create a simplified interface with blocks
-with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("# ⭐ نموذج أرحِب للغة العربية | Command R7B Arabic Model")
+# Create a Gradio interface that matches the current design
+with gr.Blocks(css=custom_css, title="Cohere Arabic Model") as demo:
+    gr.Markdown("""# ⭐ نموذج أرحب للغة العربية | Command R7B Arabic Model""")
     
     with gr.Row():
         with gr.Column():
@@ -228,12 +263,11 @@ with gr.Blocks(css=custom_css) as demo:
                 label="النص الإدخال | Input Prompt",
                 placeholder="أدخل سؤالك باللغة العربية هنا...",
                 lines=4,
-                elem_id="input-textbox",
-                value=""
+                elem_id="input-text"
             )
             
-            # Examples in a grid layout
             gr.Markdown("### أمثلة سريعة | Quick Examples")
+            
             with gr.Row():
                 ex1 = gr.Button('من كتب قصيدة "على قدر أهل العزم تأتي العزائم"؟', elem_classes=["example-btn"])
                 ex2 = gr.Button("ما هي عاصمة السعودية؟", elem_classes=["example-btn"])
@@ -242,16 +276,15 @@ with gr.Blocks(css=custom_css) as demo:
                 ex3 = gr.Button("اشرح مفهوم الذكاء الاصطناعي", elem_classes=["example-btn"])
                 ex4 = gr.Button("ماهو شهر رمضان؟", elem_classes=["example-btn"])
             
-            # Submit and clear buttons
             with gr.Row():
-                submit_btn = gr.Button("توليد النص | Generate")
-                clear_btn = gr.Button("مسح | Clear")
+                submit_btn = gr.Button("توليد النص | Generate", elem_classes=["primary"])
+                clear_btn = gr.Button("مسح | Clear", elem_classes=["secondary"])
             
         with gr.Column():
             output_text = gr.Textbox(
                 label="النص المولد | Generated Text",
                 lines=10,
-                elem_id="output-textbox"
+                elem_id="output-text"
             )
     
     # Set up the event handlers