Update app.py

app.py

@@ -93,6 +93,7 @@ def create_chain(vectorstore):
 
     
 custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700&display=swap');
 body {
     font-family: 'Noto Kufi Arabic', sans-serif;
     background: linear-gradient(135deg, #799351 0%, #A67B5B 100%);
@@ -102,9 +103,9 @@ body {
 }
 
 .gradio-container {
-    direction: rtl;  
-    font-family: 'Noto Kufi Arabic', sans-serif;  
-    font-size: 16px;  /* Adjust font size */
+    direction: rtl;
+    font-family: 'Noto Kufi Arabic', sans-serif;
+    font-size: 16px;
     max-width: 800px !important;
     margin: auto !important;
     background: rgba(255, 255, 255, 0.9);
@@ -115,41 +116,26 @@ body {
     padding: 20px;
 }
 
-h1, h2, h3 {
-    color: #1A4D2E;
-    font-weight: bold;
-    text-align: center;
-}
-
-p {
-    color: #A89F91;
-}
-
-.gradio-button {
+.gr-button {
     background-color: blue !important;
     color: #FFFFFF !important;
 }
 
-.gradio-button:hover {
+.gr-button:hover {
     background-color: #FFFFFF !important;
     color: #5F6F65 !important;
 }
 
-.gradio-chat-message {
-    border-radius: 10px;
-    padding: 10px;
-    margin-bottom: 10px;
-}
 
-.gradio.chat-message.user {
+.message.user {
     background-color: #E7F0DC;
 }
 
-.gradio.chat-message.bot {
+.message.bot {
     background-color: #F7EED3;
 }
 
-.gradio-chat-message::before {
+.message::before {
     content: '';
     display: inline-block;
     width: 24px;
@@ -160,20 +146,23 @@ p {
     vertical-align: middle;
 }
 
-.gradio-chat-message.user::before {
+.message.user::before {
     content: '👤';
 }
 
-.gradio-chat-message.bot::before {
+.message.bot::before {
     content: '🤖';
 }
-label {
-        font-size: 16px;  /* Label customizations */
-        color: blue;  /* Change color as needed */
+
+#pdf_input input, #submit_button_pdf, #chat_input, #chat_output, #audio_output {
+    text-align: right !important;  /* RTL alignment */
 }
-#pdf_input, #submit_button_pdf, #chat_input, #chat_output, #audio_output {
-        text-align: right;  /* Ensure RTL alignment */
+
+label {
+    font-size: 16px !important;
+    color: blue !important;
 }
+
 """
 # Function to check if the file is a valid PDF in Arabic and less than 10MB
 def validate_pdf(pdf):
@@ -240,8 +229,8 @@ with gr.Blocks(css=custom_css) as demo:
     pdf_input = gr.File(label="اختر ملف PDF")
     output_label = gr.HTML(value='')  # Replaced Textbox with HTML for label
     submit_button_pdf = gr.Button("ارفع الملف", interactive=False)
-    chat_input = gr.Textbox(label="أدخل سؤالك هنا")
-    chat_output = gr.Textbox(label="الرد الآلي")
+    chat_input = gr.Textbox(label="")
+    chat_output = gr.Textbox(label="")
     audio_output = gr.Audio(label="استمع إلى الرد", interactive=False)
     submit_button_chat = gr.Button("إرسال", interactive=False)
 
@@ -254,7 +243,7 @@ with gr.Blocks(css=custom_css) as demo:
         if is_valid:
             # Enable the upload button if the file is valid
             value=''
-            return gr.update(value=value), gr.update(interactive=True), gr.update(interactive=False), gr.update(label=""), gr.update(label="")
+            return gr.update(value=value), gr.update(interactive=True), gr.update(interactive=False), gr.update(label="أدخل سؤالك هنا"), gr.update(label="الرد الآلي")
         else:
             value=f'<span style="color:{color}">{message}</span>'
             return gr.update(value=value), gr.update(interactive=False), gr.update(interactive=False), gr.update(label=""), gr.update(label="")