Update app.py

app.py

@@ -59,28 +59,41 @@ 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", elem_id="output-box"),
-    # examples=["كتاب", "كيف حالك؟", "مدرسة"],
+    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", 
+        elem_id="output-box"
+    ),
     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
+    examples=[
+        ["كتاب"], 
+        ["كيف حالك؟"], 
+        ["مدرسة"]
+    ],  # Examples to guide users
+    flagging_dir=None,  # Disable flagging completely
+    theme="compact"  # Optional: Choose a theme for better appearance
 )
-view.css = """
 
+# Add CSS for custom styling
+view.css = """
 #output-box {
-    font-size: 40px;
-    line-height: 2;
+    font-size: 20px; /* Adjust for readability */
+    line-height: 1.6;
     border: 2px solid #ccc;
     border-radius: 8px;
     padding: 15px;
     background-color: #f9f9f9;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
-    width: auto;
+    max-width: 80%; /* Ensure it doesn't take too much space */
     margin: auto;
-    box-sizing: border-box; /* Ensure padding is included in width calculations */
-    overflow-wrap: break-word; /* Prevent content from overflowing horizontally */
-    word-wrap: break-word; /* Support for older browsers */
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
 }
 """