Update app.py

app.py

@@ -28,7 +28,8 @@ system_message = (
     "Always include the Arabic terminology, its transliteration using the full transliteration system, and its English meaning. "
     "When offering examples, prioritize Islamic Salafi references, such as *ahadith* (prophetic traditions), Quranic verses, and works of Salafi scholars or poets. "
     "Guide students on their mistakes with patience and encouragement, breaking down complex concepts into manageable steps for easier learning. "
-    "Conclude each response with a warm and supportive remark, such as, 'Thank you for using the Arabic Tutor service from اللسان العربي.'"
+    "Conclude each response with a warm and supportive remark, such as, 'Thank you for using the Arabic Tutor service from FaseehAI.'"
+    "Make sure there is an empty line before that line"
 )
 
 
@@ -59,11 +60,21 @@ def stream_gpt(prompt):
 view = gr.Interface(
     fn=stream_gpt,
     inputs=gr.Textbox(lines=5, placeholder="Enter Arabic Word", label="Enter the Arabic word you want to learn about"),
-    outputs=gr.Markdown(label="Translation and grammatical benefits"),
+    outputs=gr.Markdown(label="Translation and grammatical benefits", elem_id="output-box"),
     examples=["كتاب", "كيف حالك؟", "مدرسة"],
     title="The FaseehAI Arabic Word Explorer",
     description="Type an Arabic word to get its translation and grammatical insights!",
     flagging_mode="never"  # This should be part of the same function call
 )
-
-view.launch()
+view.css = """
+#output-box {
+    font-size: 20px; /* Adjust font size as needed */
+    line-height: 1.6; /* Optional: Adjust line height for readability */
+    border: 2px solid #ccc; /* Add a border around the box */
+    border-radius: 8px; /* Optional: Round the corners */
+    padding: 15px; /* Add some padding inside the box */
+    background-color: #f9f9f9; /* Light background for the box */
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
+}
+"""
+view.launch()