Update app.py

app.py

@@ -264,20 +264,28 @@ def main() -> None:
 
     fetch_data()
 
-    # To avoid the orange border for the Gradio elements that are in constant loading
+    
+
+        # CSS to handle RTL direction for Arabic content and remove the orange border
     css = """
     .generating {
         border: none;
     }
+
+    .markdown-arabic {
+        direction: rtl;
+        text-align: right;
+    }
     """
 
     with gr.Blocks(css=css) as demo:
         gr.Markdown(
             """
-            
-
+          
+            <div class='markdown-arabic'>
+        
             ![image/png](https://cdn-uploads.huggingface.co/production/uploads/64d5698102e58cc1fdd0b585/MnWb3lFLVu6ufcmupu3_o.png)
-
+ 
             # 🌍 العربية - مشروع تقييم المطالبات متعدد اللغات
 
             أطلقت Hugging Face و Argilla مشروع [مشروع تقييم المطالبات متعدد اللغات](https://github.com/huggingface/data-is-better-together/tree/main/prompt_translation). إنه معيار متعدد اللغات مفتوح لتقييم نماذج اللغة، وبالطبع، للغة العربية أيضًا.
@@ -285,21 +293,28 @@ def main() -> None:
             ## 💡الهدف هو ترجمة 500 مطالبة
             وكالعادة: البيانات عالية الجودة مطلوبة! اختارت المجتمع أفضل 500 مطالبة التي ستشكل المعيار. باللغة الإنجليزية، بالطبع.
             **لذلك نحتاج إلى مساعدتك**: إذا قمنا جميعًا بترجمة الـ 500 مطالبة، يمكننا إضافة العربية إلى قائمة المتصدرين.
-
-
+ 
             ## 📌كيفية المشاركة
-             المشاركة سهلة. اذهب إلى [فضاء التعليق](https://somosnlp-dibt-prompt-translation-for-es.hf.space/)، قم بتسجيل الدخول أو إنشاء حساب على Hugging Face، ويمكنك البدء في العمل.
+            المشاركة سهلة. اذهب إلى [فضاء التعليق](https://somosnlp-dibt-prompt-translation-for-es.hf.space/)، قم بتسجيل الدخول أو إنشاء حساب على Hugging Face، ويمكنك البدء في العمل.
             شكرًا لك مقدمًا 🤗! آه، وسنقدم لك دفعة صغيرة: GPT4 قد أعد بالفعل اقتراحًا للترجمة لك.
 
-            """
-        )
+             </div>
+             """,
+            css_classes="markdown-arabic"
+    )
 
         gr.Markdown(
-            f"""
-            ## 🚀 التقدم الحالي
+             """
+            <div class='markdown-arabic'>
+        
+             ## 🚀 التقدم الحالي
             وهذا ما حققناه حتى الآن!
-            """
-        )
+  
+             </div>
+            """,
+            css_classes="markdown-arabic"
+    )
+
         with gr.Row():
 
             kpi_submitted_plot = gr.Plot(label="Plot")
@@ -317,7 +332,6 @@ def main() -> None:
             : هنا يمكنك رؤية المستخدمين الذين لديهم أكبر عدد من المساهمات
             """
         )
-
         with gr.Row():
 
             kpi_hall_plot = gr.Plot(label="Plot")