Add RTL Arabic support with CSS and update examples to Arabic

app.py

@@ -212,6 +212,46 @@ examples = [
     ["Write a short story about a robot learning to paint", "You are a helpful assistant.", 1000]
 ]
 
+# CSS for RTL Arabic support
+rtl_css = """
+.arabic-rtl {
+    direction: rtl;
+    text-align: right;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.arabic-rtl .message {
+    direction: rtl;
+    text-align: right;
+}
+
+.arabic-rtl .message.user {
+    direction: rtl;
+    text-align: right;
+}
+
+.arabic-rtl .message.assistant {
+    direction: rtl;
+    text-align: right;
+}
+
+.arabic-rtl textarea, .arabic-rtl input {
+    direction: rtl;
+    text-align: right;
+}
+
+.arabic-rtl .gradio-container {
+    direction: rtl;
+}
+
+/* Make sure Arabic text displays properly */
+.arabic-text {
+    font-family: 'Segoe UI', 'Arial Unicode MS', 'Noto Sans Arabic', sans-serif;
+    direction: rtl;
+    text-align: right;
+}
+"""
+
 # Create the chat interface
 demo = gr.ChatInterface(
     fn=generate,
@@ -220,14 +260,20 @@ demo = gr.ChatInterface(
         file_types=list(IMAGE_FILE_TYPES + VIDEO_FILE_TYPES + AUDIO_FILE_TYPES),
         file_count="multiple",
         autofocus=True,
+        elem_classes=["arabic-rtl"]
     ),
     multimodal=True,
     additional_inputs=[
-        gr.Textbox(label="System Prompt", value="انت شخص عراقي عادي من بغداد، ذكي ومرح. تتحدث بالعراقي فقط وتجاوب بتفصيل حسب السؤال. ما تستخدم فصحى ابدا."),
+        gr.Textbox(label="System Prompt", value="انت شخص عراقي عادي من بغداد، ذكي ومرح. تتحدث بالعراقي فقط وتجاوب بتفصيل حسب السؤال. ما تستخدم فصحى ابدا.", elem_classes=["arabic-rtl"]),
         gr.Slider(label="Max New Tokens", minimum=100, maximum=2000, step=10, value=700),
     ],
-    title="Shako IRAQI AI",
-    examples=examples,
+    title="شكو - ذكاء عراقي",
+    examples=[
+        "مرحبا شكو، كيف حالك؟",
+        "شرح لي عن الذكاء الاصطناعي",
+        "أخبرني نكتة عراقية"
+    ],
+    css=rtl_css,
     stop_btn=False,
 )