Update app.py

app.py

@@ -64,24 +64,29 @@ def load_models():
 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)
+    text = re.sub(r'^\s*[\?؟]\s*منتديات.*?حائل.*?[^\n]*\d{4},\s*\d{1,2}:\d{2}', '', 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
+    # Step 3: Remove forum metadata
+    text = re.sub(r'^\s*[\?؟]\s*[^\n]+:\s*[^\n]+\?\s*', '', text)
+    text = re.sub(r'منتديات.*?نور[^\n]*$', '', text)
+    
+    # Step 4: Remove website references
     text = re.sub(r'[-–—]\s*موقع\s+[^\n]+', '', text)
     text = re.sub(r'[-–—]\s*[^\n]*المصطبه[^\n]*', '', text)
     
-    # Step 4: Remove unrelated questions that might appear
+    # Step 5: 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
+    # Step 6: Clean up format and spacing
     text = re.sub(r'\s+', ' ', text).strip()
     
-    # If text begins with a colon or similar punctuation, clean it
+    # Step 7: If text begins with punctuation, clean it
     text = re.sub(r'^[:.،,؛;-]+\s*', '', text)
     
     return text
@@ -134,22 +139,30 @@ def set_example3():
 def set_example4():
     return "ماهو شهر رمضان؟"
 
-# Create custom CSS that fixes text visibility while matching the current look
+# Create custom CSS with enhanced fonts and distinctive buttons
 custom_css = """
+/* Import improved Arabic fonts from Google */
+@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');
+
 /* Enhanced styles for Arabic Cohere model interface */
 :root {
     --primary-color: #1F4287;
     --secondary-color: #278EA5;
     --bg-color: #f9fafb;
     --border-color: #d1d5db;
-    --btn-primary: #2C5282;
-    --btn-secondary: #E2E8F0;
+    --btn-primary: #2563EB;  /* Bright blue */
+    --btn-secondary: #6B7280; /* Gray */
+    --btn-primary-hover: #1D4ED8;
+    --btn-secondary-hover: #4B5563;
+    --example-btn-bg: #F3F4F6;
+    --example-btn-border: #D1D5DB;
     --text-color: #000000;
 }
 
 /* Base styles */
 body, html {
-    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
+    font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Arial', sans-serif !important;
     margin: 0;
     padding: 0;
     background-color: var(--bg-color);
@@ -157,9 +170,11 @@ body, html {
 }
 
 /* Typography */
-h1, h2, h3 {
+h1, h2, h3, button, label {
+    font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Arial', sans-serif !important;
     color: var(--primary-color);
     text-align: center;
+    font-weight: 700 !important;
 }
 
 /* Fix input and output containers */
@@ -171,61 +186,92 @@ h1, h2, h3 {
     background-color: white;
 }
 
-/* CRITICAL FIX: Make sure text is visible in textboxes */
+/* CRITICAL FIX: Make sure text is visible in textboxes with better fonts */
 textarea, .output-text {
-    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
+    font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Arial', sans-serif !important;
     color: black !important;
     background-color: white !important;
     border: 1px solid #d1d5db !important;
-    padding: 10px !important;
+    padding: 12px !important;
     font-size: 16px !important;
-    line-height: 1.5 !important;
-    border-radius: 6px !important;
+    line-height: 1.6 !important;
+    border-radius: 8px !important;
     width: 100% !important;
     direction: rtl !important;
     min-height: 80px !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.2px !important;
 }
 
 /* Ensure text and placeholder are visible */
 textarea::placeholder {
     color: #9ca3af !important;
     opacity: 1 !important;
+    font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Arial', sans-serif !important;
 }
 
-/* Button styling to match current design */
+/* Button styling to match current design but more distinct */
 button {
-    border-radius: 6px !important;
-    padding: 8px 16px !important;
+    border-radius: 8px !important;
+    padding: 10px 20px !important;
     font-weight: 600 !important;
-    transition: all 0.2s !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
+    text-align: center !important;
+    font-size: 15px !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
+    margin: 5px !important;
 }
 
-button.primary {
-    background-color: var(--btn-primary) !important;
+/* SPECIAL STYLING FOR GENERATE/CLEAR BUTTONS */
+/* Generate Button - Distinctive styling */
+#generate-btn {
+    background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
     color: white !important;
     border: none !important;
+    font-weight: 700 !important;
+    padding: 12px 24px !important;
+    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.25) !important;
+    transform: translateY(0) !important;
+    font-size: 16px !important;
 }
 
-button.secondary {
-    background-color: var(--btn-secondary) !important;
-    color: var(--primary-color) !important;
-    border: 1px solid var(--border-color) !important;
+#generate-btn:hover {
+    background: linear-gradient(135deg, #1D4ED8, #2563EB) !important;
+    box-shadow: 0 6px 8px rgba(37, 99, 235, 0.3) !important;
+    transform: translateY(-2px) !important;
+}
+
+/* Clear Button - Distinctive styling */
+#clear-btn {
+    background-color: #F3F4F6 !important;
+    color: #4B5563 !important;
+    border: 1px solid #D1D5DB !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    font-size: 16px !important;
+}
+
+#clear-btn:hover {
+    background-color: #E5E7EB !important;
+    color: #374151 !important;
 }
 
 /* Example buttons styling */
 .example-btn {
-    background-color: #f8fafc !important;
-    border: 1px solid #cbd5e1 !important;
+    background-color: var(--example-btn-bg) !important;
+    border: 1px solid var(--example-btn-border) !important;
     color: var(--primary-color) !important;
     padding: 8px 12px !important;
     border-radius: 6px !important;
     margin: 4px !important;
     font-size: 14px !important;
+    font-weight: 500 !important;
 }
 
 .example-btn:hover {
-    background-color: #f1f5f9 !important;
-    border-color: #94a3b8 !important;
+    background-color: #E5E7EB !important;
+    border-color: #9CA3AF !important;
 }
 
 /* Layout containers */
@@ -251,9 +297,19 @@ button.secondary {
     display: block !important;
     opacity: 1 !important;
 }
+
+/* Improved labels */
+label {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    margin-bottom: 5px !important;
+    display: block !important;
+    text-align: right !important;
+    color: #1F2937 !important;
+}
 """
 
-# Create a Gradio interface that matches the current design
+# Create a Gradio interface that matches the current design with better fonts
 with gr.Blocks(css=custom_css, title="Cohere Arabic Model") as demo:
     gr.Markdown("""# ⭐ نموذج أرحب للغة العربية | Command R7B Arabic Model""")
     
@@ -277,8 +333,8 @@ with gr.Blocks(css=custom_css, title="Cohere Arabic Model") as demo:
                 ex4 = gr.Button("ماهو شهر رمضان؟", elem_classes=["example-btn"])
             
             with gr.Row():
-                submit_btn = gr.Button("توليد النص | Generate", elem_classes=["primary"])
-                clear_btn = gr.Button("مسح | Clear", elem_classes=["secondary"])
+                submit_btn = gr.Button("توليد النص | Generate", elem_id="generate-btn")
+                clear_btn = gr.Button("مسح | Clear", elem_id="clear-btn")
             
         with gr.Column():
             output_text = gr.Textbox(