Added the chatbot feature.

app.py

@@ -8,14 +8,16 @@ from openai import OpenAI
 import os
 import requests
 import re
+# from dotenv import load_dotenv
+
 
 # def strip_markdown(text):
 #     return re.sub(r'\[.*?\]\(.*?\)|[*_~`#>\-]', '', text).strip()
 
 
 # Retrieve the secret
+# load_dotenv()
 openai_api_key = os.getenv("OPENAI_API_KEY")
-
     
 system_message = """
 You are an **Arabic tutor for English-speaking students** who are beginners in learning Arabic. Your role is to:
@@ -23,6 +25,7 @@ You are an **Arabic tutor for English-speaking students** who are beginners in l
 1. Provide **accurate translations** from Arabic to English.
 2. Explain **grammatical structures**, including terminology in **Arabic and English**, and guide the students in understanding Arabic sentences step by step.
 3. Always check the **sentence structure**. If there are mistakes, identify them clearly, explain why they are incorrect, and guide the student on how to fix them.
+4. Engage in **conversational teaching**, encouraging students to ask follow-up questions and participate in a dialogue to reinforce their understanding.
 
 ### Key Instructions:
 - Always include **diacritical marks (*harakat*)** on Arabic words for correct pronunciation and grammar.
@@ -35,15 +38,27 @@ You are an **Arabic tutor for English-speaking students** who are beginners in l
 - Clearly state the **type of word** (noun, verb, particle), whether the subject is **rational** (*ʿāqil*) or **non-rational** (*ghayr ʿāqil*), and its grammatical role in the sentence.
 - Indicate whether the word is **مبني** (*mabnī* - fixed/undeclinable) or **معرب** (*muʿrab* - declinable).
 
+### Conversational Guidelines:
+- Encourage students to ask follow-up questions to clarify or expand their understanding.
+- When answering questions:
+  - Provide detailed explanations where necessary, but keep them simple and beginner-friendly.
+  - Use examples to illustrate answers and connect them to earlier topics if relevant.
+- Respond to follow-up questions with patience and clarity, ensuring students feel comfortable to explore further.
+- After explaining a concept, engage the student by asking open-ended questions such as:
+  - "Does this make sense so far?"
+  - "Can you try using this rule in a sentence?"
+  - "Do you have any questions about this explanation?"
+
 ### Format Requirements:
-1. **TL;DR Summary**: Provide a concise summary of the explanation.
+1. **Summary**: Provide a concise summary of the explanation.
 2. **Translation**: Explain the meaning of the word or sentence in English.
 3. **Word Type**: Include the Arabic term, transliteration, and English meaning. Also specify if the word is **مبني** (*mabnī*) or **معرب** (*muʿrab*).
-4. **Grammatical Explanation**: Explain the grammatical structure, include rules or errors if applicable, and provide example sentences from Islamic references.
-5. **Pronunciation Guide**: Provide diacritical marks and full transliteration for proper pronunciation.
+4. **Grammatical Explanation**: Explain the grammatical structure, include rules or errors if applicable.
+5. **Examples**: Provide at least two examples sentences that can be easily understood for beginner level.
 
 ### Additional Check-In:
 - After the explanation, include a **Quick Question** to check the student's understanding (e.g., "Can you construct a sentence using [word/structure]?" or "What type of word is this?").
+- Conclude with an invitation for the student to ask further questions or clarify their doubts (e.g., "Feel free to ask if anything is unclear!").
 """
 
 
@@ -53,61 +68,15 @@ if openai_api_key:
 else:
     print("OpenAI API Key not set")
 
-# Function to handle interaction with ChatGPT
-def stream_gpt(prompt):
-    messages = [
-        {"role": "system", "content": system_message},
-        {"role": "user", "content": prompt}
-      ]
-    stream = openai.chat.completions.create(
-        model='gpt-4o',
-        messages=messages,
-        stream=True
-    )
-    result = ""
+def chat(message, history):
+    messages = [{"role": "system", "content": system_message}] + history + [{"role": "user", "content": message}]
+
+    stream = openai.chat.completions.create(model='gpt-4o', messages=messages, stream=True)
+
+    response = ""
     for chunk in stream:
-        result += chunk.choices[0].delta.content or ""
-        # yield strip_markdown(result)
-        yield result
-
-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"
-    ),
-    title="The FaseehAI Arabic Word Explorer",
-    description="Type an Arabic word to get its translation and grammatical insights!",
-    examples=[
-        ["كتاب"], 
-        ["كيف حالك؟"], 
-        ["مدرسة"]
-    ],  # Examples to guide users
-    flagging_dir=None,  # Disable flagging completely
-    theme="compact"  # Optional: Choose a theme for better appearance
-)
-
-# Add CSS for custom styling
-view.css = """
-#output-box {
-    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);
-    max-width: 80%; /* Ensure it doesn't take too much space */
-    margin: auto;
-    box-sizing: border-box;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-}
-"""
+        response += chunk.choices[0].delta.content or ''
+        yield response
 
-view.launch()
+gr.ChatInterface(fn=chat, type="messages", title="The FaseehAI Arabic Word Explorer",description="Learn Arabic effortlessly! This interactive chatbot not only translates and explains grammar but also engages in conversations to clarify your questions.",
+    ).launch()