Update app.py

app.py

@@ -256,56 +256,222 @@ def process_question(question: str):
     # Mettez le résultat en cache à la fin  
     question_cache[question] = (response, context)   
 
-# Custom CSS for right-aligned text in textboxes  
-custom_css = """  
-.rtl-text {  
-    text-align: right !important;  
-    direction: rtl !important;  
-}  
-.rtl-text textarea {  
-    text-align: right !important;  
-    direction: rtl !important;  
-}  
-"""  
-
-# Gradio interface with queue  
-with gr.Blocks(css=custom_css) as iface:  
-    with gr.Column():  
-        input_text = gr.Textbox(  
-            label="السؤال",  
-            placeholder="اكتب سؤالك هنا...",  
-            lines=2,  
-            elem_classes="rtl-text"  
-        )  
+# # Custom CSS for right-aligned text in textboxes  
+# custom_css = """  
+# .rtl-text {  
+#     text-align: right !important;  
+#     direction: rtl !important;  
+# }  
+# .rtl-text textarea {  
+#     text-align: right !important;  
+#     direction: rtl !important;  
+# }  
+# """  
+
+# # Gradio interface with queue  
+# with gr.Blocks(css=custom_css) as iface:  
+#     with gr.Column():  
+#         input_text = gr.Textbox(  
+#             label="السؤال",  
+#             placeholder="اكتب سؤالك هنا...",  
+#             lines=2,  
+#             elem_classes="rtl-text"  
+#         )  
+        
+#         with gr.Row():  
+#             answer_box = gr.Textbox(  
+#                 label="الإجابة",  
+#                 lines=4,  
+#                 elem_classes="rtl-text"  
+#             )  
+#             context_box = gr.Textbox(  
+#                 label="السياق المستخدم",  
+#                 lines=8,  
+#                 elem_classes="rtl-text"  
+#             )  
+        
+#         submit_btn = gr.Button("إرسال")  
+        
+#         submit_btn.click(  
+#             fn=process_question,  
+#             inputs=input_text,  
+#             outputs=[answer_box, context_box],  
+#             api_name="predict",  
+#             queue=True  # Utiliser le système de queue pour un traitement asynchrone  
+#         )  
+
+# if __name__ == "__main__":  
+#     iface.launch(  
+#         share=True,  
+#         server_name="0.0.0.0",  
+#         server_port=7860,  
+#         max_threads=3,  # Controls concurrency  
+#         show_error=True  
+#     )
+
+# CSS personnalisé avec l'importation de Google Fonts
+custom_css = """
+/* Import Google Fonts - Noto Sans Arabic */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');
+
+/* Styles généraux */
+:root {
+    --primary-color: #2D3748;
+    --secondary-color: #4A5568;
+    --accent-color: #4299E1;
+    --background-color: #F7FAFC;
+    --border-radius: 8px;
+    --font-family-arabic: 'Noto Sans Arabic', Arial, sans-serif;
+}
+
+/* Style de base */
+body {
+    font-family: var(--font-family-arabic);
+    background-color: var(--background-color);
+}
+
+/* Styles pour le texte RTL */
+.rtl-text {
+    text-align: right !important;
+    direction: rtl !important;
+    font-family: var(--font-family-arabic) !important;
+}
+
+.rtl-text textarea {
+    text-align: right !important;
+    direction: rtl !important;
+    padding: 1rem !important;
+    border-radius: var(--border-radius) !important;
+    border: 1px solid #E2E8F0 !important;
+    background-color: white !important;
+    font-size: 1.1rem !important;
+    line-height: 1.6 !important;
+    font-family: var(--font-family-arabic) !important;
+}
+
+/* Style du titre */
+.app-title {
+    font-family: var(--font-family-arabic) !important;
+    font-size: 2rem !important;
+    font-weight: 700 !important;
+    color: var(--primary-color) !important;
+    margin-bottom: 2rem !important;
+    text-align: center !important;
+}
+
+/* Styles des étiquettes */
+.rtl-text label {
+    font-family: var(--font-family-arabic) !important;
+    font-size: 1.2rem !important;
+    font-weight: 600 !important;
+    color: var(--primary-color) !important;
+    margin-bottom: 0.5rem !important;
+}
+
+/* Style du bouton */
+button.primary-button {
+    font-family: var(--font-family-arabic) !important;
+    background-color: var(--accent-color) !important;
+    color: white !important;
+    padding: 0.75rem 1.5rem !important;
+    border-radius: var(--border-radius) !important;
+    font-weight: 600 !important;
+    font-size: 1.1rem !important;
+    transition: all 0.3s ease !important;
+}
+
+button.primary-button:hover {
+    background-color: #3182CE !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Styles des boîtes de texte */
+.textbox-container {
+    background-color: white !important;
+    padding: 1.5rem !important;
+    border-radius: var(--border-radius) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    margin-bottom: 1rem !important;
+}
+
+/* Animation de chargement */
+.loading {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+
+/* Style du statut */
+.status-text {
+    font-family: var(--font-family-arabic) !important;
+    text-align: center !important;
+    color: var(--secondary-color) !important;
+    font-size: 1rem !important;
+    margin-top: 1rem !important;
+}
+"""
+
+# Interface Gradio avec la nouvelle police
+with gr.Blocks(css=custom_css) as iface:
+    with gr.Column(elem_classes="container"):
+        gr.Markdown(
+            "# نظام الأسئلة والأجوبة الذكي",
+            elem_classes="app-title rtl-text"
+        )
         
-        with gr.Row():  
-            answer_box = gr.Textbox(  
-                label="الإجابة",  
-                lines=4,  
-                elem_classes="rtl-text"  
-            )  
-            context_box = gr.Textbox(  
-                label="السياق المستخدم",  
-                lines=8,  
-                elem_classes="rtl-text"  
-            )  
+        with gr.Column(elem_classes="textbox-container"):
+            input_text = gr.Textbox(
+                label="السؤال",
+                placeholder="اكتب سؤالك هنا...",
+                lines=2,
+                elem_classes="rtl-text"
+            )
         
-        submit_btn = gr.Button("إرسال")  
+        with gr.Row():
+            with gr.Column(scale=2):
+                answer_box = gr.Textbox(
+                    label="الإجابة",
+                    lines=4,
+                    elem_classes="rtl-text textbox-container"
+                )
+            with gr.Column(scale=1):
+                context_box = gr.Textbox(
+                    label="السياق المستخدم",
+                    lines=8,
+                    elem_classes="rtl-text textbox-container"
+                )
+        
+        submit_btn = gr.Button(
+            "إرسال السؤال",
+            elem_classes="primary-button",
+            variant="primary"
+        )
         
-        submit_btn.click(  
-            fn=process_question,  
-            inputs=input_text,  
-            outputs=[answer_box, context_box],  
-            api_name="predict",  
-            queue=True  # Utiliser le système de queue pour un traitement asynchrone  
-        )  
-
-if __name__ == "__main__":  
-    iface.launch(  
-        share=True,  
-        server_name="0.0.0.0",  
-        server_port=7860,  
-        max_threads=3,  # Controls concurrency  
-        show_error=True  
+        # Statut avec la nouvelle police
+        status_text = gr.Markdown("", elem_classes="rtl-text status-text")
+        
+        def on_submit(question):
+            status_text.value = "جاري معالجة السؤال..."
+            return process_question(question)
+        
+        submit_btn.click(
+            fn=on_submit,
+            inputs=input_text,
+            outputs=[answer_box, context_box, status_text],
+            api_name="predict",
+            queue=True
+        )
+
+if __name__ == "__main__":
+    iface.launch(
+        share=True,
+        server_name="0.0.0.0",
+        server_port=7860,
+        max_threads=3,
+        show_error=True
     )