app.py

# Install necessary libraries
# pip install gradio openai

import gradio as gr
import openai
from typing import List
from openai import OpenAI
import os
import requests
import re

# def strip_markdown(text):
#     return re.sub(r'\[.*?\]\(.*?\)|[*_~`#>\-]', '', text).strip()


# Retrieve the secret
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:

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.

### Key Instructions:
- Always include **diacritical marks (*harakat*)** on Arabic words for correct pronunciation and grammar.
- When translating Arabic text, highlight **key grammatical rules**, their **benefits**, and their role in constructing proper sentences.
- Provide simple, beginner-friendly explanations with relevant examples from Islamic Salafi references, such as:
  - *Ahadith* (prophetic traditions)
  - Quranic verses
  - Works of Salafi scholars or poets.
- Always mention **Arabic terminology**, its **transliteration**, and its **English meaning** (e.g., *ism ishārah* (demonstrative pronoun)).
- 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).

### Format Requirements:
1. **TL;DR 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.

### 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?").
"""



if openai_api_key:
    print(f"OpenAI API Key exists and begins {openai_api_key[:8]}")
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 = ""
    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;
}
"""

view.launch()