Create app.py

app.py

@@ -0,0 +1,599 @@
+import gradio as gr
+import os
+
+# Define base paths for assets - IMPORTANT: You need to create these folders and place your files here
+# For Hugging Face Spaces, these paths are relative to your app.py file
+ASSETS_DIR = "./assets"
+IMAGE_DIR = os.path.join(ASSETS_DIR, "images")
+AUDIO_DIR = os.path.join(ASSETS_DIR, "audio")
+
+# Create asset directories if they don't exist (for local testing, Hugging Face handles this with git lfs)
+# On Hugging Face Spaces, you'll upload these folders with your files.
+os.makedirs(IMAGE_DIR, exist_ok=True)
+os.makedirs(AUDIO_DIR, exist_ok=True)
+
+
+# Placeholder data for Arabic Letters
+# YOU MUST REPLACE 'placeholder_image.png' and 'placeholder_audio.mp3'
+# with actual paths to your images and audio files within the 'assets/' directory.
+# Ensure your audio files are clear and appropriate for young children.
+arabic_letters_data = [
+    {
+        "letter": "أ",
+        "image": os.path.join(IMAGE_DIR, "alif.png"), # e.g., 'assets/images/alif.png'
+        "audio": os.path.join(AUDIO_DIR, "alif.mp3"), # e.g., 'assets/audio/alif.mp3' (pronunciation of 'أ')
+        "word_example": "أرنب (Arnab - Rabbit)",
+        "word_image": os.path.join(IMAGE_DIR, "arnab.png"), # e.g., 'assets/images/arnab.png'
+        "word_audio": os.path.join(AUDIO_DIR, "arnab.mp3"), # e.g., 'assets/audio/arnab.mp3' (pronunciation of 'أرنب')
+    },
+    {
+        "letter": "ب",
+        "image": os.path.join(IMAGE_DIR, "baa.png"), # e.g., 'assets/images/baa.png'
+        "audio": os.path.join(AUDIO_DIR, "baa.mp3"), # e.g., 'assets/audio/baa.mp3'
+        "word_example": "بيت (Bayt - House)",
+        "word_image": os.path.join(IMAGE_DIR, "bayt.png"), # e.g., 'assets/images/bayt.png'
+        "word_audio": os.path.join(AUDIO_DIR, "bayt.mp3"), # e.g., 'assets/audio/bayt.mp3'
+    },
+    {
+        "letter": "ت",
+        "image": os.path.join(IMAGE_DIR, "taa.png"), # e.g., 'assets/images/taa.png'
+        "audio": os.path.join(AUDIO_DIR, "taa.mp3"), # e.g., 'assets/audio/taa.mp3'
+        "word_example": "تفاح (Tuffah - Apple)",
+        "word_image": os.path.join(IMAGE_DIR, "tuffah.png"), # e.g., 'assets/images/tuffah.png'
+        "word_audio": os.path.join(AUDIO_DIR, "tuffah.mp3"), # e.g., 'assets/audio/tuffah.mp3'
+    },
+    # Add more Arabic letters here following the same dictionary structure.
+    # Make sure to create corresponding image and audio files for each entry!
+]
+
+# Placeholder data for Arabic Stories
+# YOU MUST REPLACE 'placeholder_story_image_pageX.png' and 'placeholder_story_audio.mp3'
+# with actual paths to your story images and audio files within the 'assets/' directory.
+arabic_stories_data = [
+    {
+        "title": "قصة الأرنب الصغير (The Little Rabbit's Story)",
+        "pages": [
+            {
+                "text": "في يوم من الأيام، خرج أرنب صغير يلعب في الحديقة الخضراء. كان الجو جميلاً والشمس مشرقة.",
+                "image": os.path.join(IMAGE_DIR, "story1_page1.png"), # e.g., 'assets/images/story1_page1.png'
+                "audio": os.path.join(AUDIO_DIR, "story1_page1.mp3"), # e.g., 'assets/audio/story1_page1.mp3'
+            },
+            {
+                "text": "فجأة، رأى الأرنب زهرة حمراء جميلة. 'ما أجمل هذه الزهرة!' قال الأرنب بسعادة.",
+                "image": os.path.join(IMAGE_DIR, "story1_page2.png"), # e.g., 'assets/images/story1_page2.png'
+                "audio": os.path.join(AUDIO_DIR, "story1_page2.mp3"), # e.g., 'assets/audio/story1_page2.mp3'
+            },
+            # Add more pages for this story. Each page needs text, an image, and corresponding audio.
+        ]
+    },
+    {
+        "title": "الأسد والفأر (The Lion and the Mouse)",
+        "pages": [
+            {
+                "text": "كان أسد نائماً تحت شجرة كبيرة في الغابة. جاء فأر صغير وركض فوق الأسد.",
+                "image": os.path.join(IMAGE_DIR, "story2_page1.png"), # e.g., 'assets/images/story2_page1.png'
+                "audio": os.path.join(AUDIO_DIR, "story2_page1.mp3"), # e.g., 'assets/audio/story2_page1.mp3'
+            },
+            {
+                "text": "استيقظ الأسد غاضباً وأمسك بالفأر. توسل الفأر إليه ليتركه، ووعده بمساعدته يوماً ما.",
+                "image": os.path.join(IMAGE_DIR, "story2_page2.png"), # e.g., 'assets/images/story2_page2.png'
+                "audio": os.path.join(AUDIO_DIR, "story2_page2.mp3"), # e.g., 'assets/audio/story2_page2.mp3'
+            },
+            # Add more pages for this story.
+        ]
+    }
+]
+
+# Global state variables for navigation (do not modify directly outside functions)
+current_letter_idx = 0
+current_story_idx = 0
+current_story_page_idx = 0
+
+# --- Functions for Learning Arabic Letters Section ---
+
+def get_current_letter_content():
+    """
+    Retrieves the current letter's data (letter, image, audio, word example, word image, word audio)
+    based on the global `current_letter_idx`.
+    """
+    if not arabic_letters_data:
+        # Handle case where no letter data is available
+        return "لا توجد حروف متاحة", None, None, "لا توجد كلمات متاحة", None, None
+    
+    data = arabic_letters_data[current_letter_idx]
+    
+    # Return (letter_display, letter_image, letter_audio, word_example_display, word_image, word_audio)
+    return (
+        data["letter"],
+        data["image"],
+        data["audio"], # This audio is for the letter sound itself
+        data["word_example"],
+        data["word_image"],
+        data["word_audio"] # This audio is for the word example sound
+    )
+
+def next_letter_func():
+    """
+    Advances to the next Arabic letter in the `arabic_letters_data` list.
+    If at the end, it loops back to the first letter.
+    """
+    global current_letter_idx
+    if current_letter_idx < len(arabic_letters_data) - 1:
+        current_letter_idx += 1
+    else:
+        current_letter_idx = 0 # Loop back to the beginning
+    return get_current_letter_content()
+
+def prev_letter_func():
+    """
+    Goes back to the previous Arabic letter in the `arabic_letters_data` list.
+    If at the beginning, it loops to the last letter.
+    """
+    global current_letter_idx
+    if current_letter_idx > 0:
+        current_letter_idx -= 1
+    else:
+        current_letter_idx = len(arabic_letters_data) - 1 # Loop to the end
+    return get_current_letter_content()
+
+def play_audio(audio_path):
+    """
+    Plays an audio file. This function is called by Gradio's Audio component.
+    It checks if the file exists before returning the path.
+    """
+    if os.path.exists(audio_path):
+        return audio_path
+    print(f"Error: Audio file not found at {audio_path}")
+    # Returning None for audio will result in an error message in Gradio's console
+    return None
+
+def check_pronunciation(audio_input):
+    """
+    This is a placeholder function for checking pronunciation.
+    
+    In a real-world application, you would integrate a Speech-to-Text (ASR) model
+    (e.g., from Hugging Face Transformers like Whisper) here.
+    
+    Steps for a real implementation:
+    1. Load an Arabic ASR model: `from transformers import pipeline; asr_pipeline = pipeline("automatic-speech-recognition", model="your_arabic_asr_model")`
+    2. Transcribe the input audio: `transcribed_text = asr_pipeline(audio_input)["text"]`
+    3. Compare `transcribed_text` with the `expected_letter` or `expected_word`
+       (e.g., using phonetic similarity, or a simple string match for initial development).
+    4. Provide feedback based on the comparison.
+    """
+    if audio_input is None:
+        # If no audio was recorded, prompt the user.
+        return "من فضلك سجل صوتك أولاً. (Please record your voice first.)"
+
+    # The `audio_input` provided by Gradio will be a file path to the temporary recorded audio.
+    # You can use this path directly with an ASR model.
+
+    # Example of how you *would* get the expected text (if you had an ASR model):
+    # expected_text = arabic_letters_data[current_letter_idx]["letter"] # Or word_example
+    
+    # Placeholder feedback:
+    return f"تم استلام تسجيلك! (Your recording has been received!)" \
+           f"\nوظيفة التحقق من النطق ستضاف لاحقًا. (Pronunciation check functionality will be added later.)"
+
+# --- Functions for Arabic Storytelling Section ---
+
+def get_story_titles():
+    """
+    Returns a list of story titles to populate the dropdown menu.
+    """
+    return [story["title"] for story in arabic_stories_data]
+
+def select_story_func(title):
+    """
+    Selects a story based on its title from the dropdown.
+    Resets the page index to 0 for the newly selected story.
+    """
+    global current_story_idx, current_story_page_idx
+    for i, story in enumerate(arabic_stories_data):
+        if story["title"] == title:
+            current_story_idx = i
+            current_story_page_idx = 0 # Reset to the first page of the new story
+            break
+    # After selecting, return the content of the first page of the chosen story
+    return get_current_story_page_content()
+
+def get_current_story_page_content():
+    """
+    Retrieves the content (title, text, image, audio) for the current page
+    of the currently selected story.
+    """
+    if not arabic_stories_data:
+        # Handle case where no story data is available
+        return "لا توجد قصص متاحة", None, None, None
+    
+    story = arabic_stories_data[current_story_idx]
+    
+    if current_story_page_idx < len(story["pages"]):
+        # Return content for the current page
+        page = story["pages"][current_story_page_idx]
+        return story["title"], page["text"], page["image"], page["audio"]
+    else:
+        # If past the last page, indicate the end of the story
+        return story["title"], "انتهت القصة! (End of story!)", None, None # No image/audio at end
+
+def next_story_page_func():
+    """
+    Advances to the next page of the current story.
+    If at the end of the story, it stays on the last page.
+    """
+    global current_story_page_idx
+    story = arabic_stories_data[current_story_idx]
+    if current_story_page_idx < len(story["pages"]) - 1:
+        current_story_page_idx += 1
+    # If at the last page, do nothing (stay on the last page)
+    return get_current_story_page_content()
+
+def prev_story_page_func():
+    """
+    Goes back to the previous page of the current story.
+    If at the beginning of the story, it stays on the first page.
+    """
+    global current_story_page_idx
+    if current_story_page_idx > 0:
+        current_story_page_idx -= 1
+    # If at the first page, do nothing (stay on the first page)
+    return get_current_story_page_content()
+
+
+# --- Gradio UI Definition using gr.Blocks for advanced layout and styling ---
+
+with gr.Blocks(
+    theme=gr.themes.Soft(), # A soft, pleasant theme
+    # Custom CSS for better aesthetics and responsiveness
+    css="""
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+    body {
+        font-family: 'Inter', sans-serif;
+    }
+    .gradio-container {
+        font-family: 'Inter', sans-serif;
+        background-color: #f0f8ff; /* Light blue background for the entire app */
+        border-radius: 15px;
+        box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Enhanced shadow */
+        padding: 25px;
+        max-width: 950px; /* Slightly wider max-width */
+        margin: 30px auto;
+        border: 2px solid #aaddff; /* Light blue border */
+    }
+    h1, h2, h3 {
+        color: #2c3e50; /* Darker blue-grey for headings */
+        text-align: center;
+        margin-bottom: 25px;
+        font-weight: 700; /* Bold headings */
+    }
+    .gr-tab-item {
+        border-radius: 12px 12px 0 0 !important; /* Rounded top corners for tabs */
+        background-color: #e6f7ff; /* Lighter tab background */
+        font-size: 1.15em; /* Larger tab text */
+        padding: 12px 20px;
+        transition: background-color 0.3s ease;
+    }
+    .gr-tab-item.selected {
+        background-color: #ffffff !important;
+        border-bottom: none !important;
+        color: #007bff !important; /* Vibrant blue for selected tab */
+        font-weight: bold;
+        box-shadow: 0 -3px 8px rgba(0,0,0,0.1); /* Shadow for selected tab */
+    }
+    .gr-button {
+        background-color: #007bff; /* Primary blue button */
+        color: white;
+        border-radius: 12px; /* More rounded buttons */
+        padding: 12px 25px;
+        font-size: 1.15em; /* Larger button text */
+        margin: 8px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* More prominent shadow */
+        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
+        border: none; /* No default border */
+        cursor: pointer;
+    }
+    .gr-button:hover {
+        background-color: #0056b3; /* Darker blue on hover */
+        transform: translateY(-3px); /* Lift effect on hover */
+        box-shadow: 0 6px 12px rgba(0,0,0,0.3); /* Larger shadow on hover */
+    }
+    .gr-image {
+        border-radius: 18px; /* More rounded images */
+        overflow: hidden;
+        border: 3px solid #aaddff; /* Thicker light blue border */
+        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+        background-color: #ffffff;
+        display: block; /* Ensure image is a block element for centering */
+        margin: 15px auto; /* Center images */
+    }
+    .gr-audio {
+        border-radius: 12px;
+        border: 2px solid #cceeff;
+        background-color: #ffffff;
+        padding: 10px;
+        margin: 10px 0;
+    }
+    .gr-markdown {
+        background-color: #ffffff;
+        border-radius: 12px;
+        padding: 20px;
+        margin-top: 15px;
+        border: 2px solid #cceeff;
+        text-align: center;
+        font-size: 1.3em; /* Larger text for readability for kids */
+        color: #333;
+        line-height: 1.6; /* Improve line spacing */
+        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+    }
+    .gr-dropdown {
+        border-radius: 12px;
+        padding: 8px;
+        font-size: 1.1em;
+        border: 1px solid #cceeff;
+        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+    }
+    .feedback-message {
+        color: #28a745; /* Green for success/positive feedback */
+        font-weight: bold;
+        text-align: center;
+        margin-top: 20px;
+        font-size: 1.2em;
+    }
+    .error-message {
+        color: #dc3545; /* Red for error messages */
+        font-weight: bold;
+        text-align: center;
+        margin-top: 20px;
+        font-size: 1.2em;
+    }
+    hr {
+        border: 0;
+        height: 1px;
+        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 123, 255, 0.75), rgba(0, 0, 0, 0));
+        margin: 30px 0;
+    }
+    [dir="rtl"] .gr-button, [dir="rtl"] .gr-markdown, [dir="rtl"] .gr-dropdown {
+        text-align: right; /* Ensure RTL alignment for text within components */
+    }
+    """
+) as demo:
+    # Main application title and welcoming message
+    gr.Markdown("# <span style='color:#007bff;'>تطبيق تعلم العربية للأطفال</span>", rtl=True)
+    gr.Markdown("## <span style='color:#34495e;'>مرحباً يا أبطالنا الصغار! (Welcome, Little Heroes!)</span>", rtl=True)
+
+    # Tabs for different learning modes
+    with gr.Tabs():
+        # --- Arabic Letters Learning Tab ---
+        with gr.TabItem("تعلم الحروف العربية (Learn Arabic Letters)", rtl=True):
+            with gr.Column(
+                scale=1,
+                min_width=400,
+                elem_id="letter-learning-section", # Unique ID for CSS targeting
+                variant="panel" # Adds a subtle panel background
+            ):
+                gr.Markdown("### <span style='color:#28a745;'>تعلم حرفاً جديداً كل يوم! (Learn a new letter every day!)</span>", rtl=True)
+                
+                # Display area for the Arabic letter
+                letter_display = gr.Markdown(
+                    value="اضغط على 'الحرف التالي' للبدء", # Initial message
+                    label="الحرف (Letter)",
+                    rtl=True, # Right-to-Left text direction
+                    elem_classes=["gr-markdown"] # Apply custom CSS class
+                )
+                # Display image for the letter
+                letter_image = gr.Image(
+                    label="صورة الحرف (Letter Image)",
+                    width=250, height=250,
+                    interactive=False, # Image is for display only, not interactive input
+                    elem_classes=["gr-image"] # Apply custom CSS class
+                )
+                # Hidden audio component to play the letter sound
+                letter_audio_output = gr.Audio(
+                    label="صوت الحرف (Letter Sound)",
+                    autoplay=False,
+                    type="filepath", # Expects a local file path
+                    visible=False # Keep it hidden, as we only trigger playback
+                )
+
+                # Navigation buttons for letters
+                with gr.Row():
+                    prev_letter_btn = gr.Button("الحرف السابق (Previous Letter)", elem_classes=["gr-button"])
+                    play_letter_btn = gr.Button("استمع للحرف (Listen to Letter)", elem_classes=["gr-button"])
+                    next_letter_btn = gr.Button("الحرف التالي (Next Letter)", elem_classes=["gr-button"])
+
+                gr.Markdown("<hr>", elem_classes=["gr-markdown"]) # Horizontal rule for separation
+
+                # --- Word Example Section for the current letter ---
+                gr.Markdown("### <span style='color:#ffc107;'>كلمات تبدأ بهذا الحرف (Words starting with this letter)</span>", rtl=True)
+                # Display area for the example word
+                word_example_display = gr.Markdown(
+                    value="",
+                    label="كلمة (Word)",
+                    rtl=True,
+                    elem_classes=["gr-markdown"]
+                )
+                # Display image for the example word
+                word_image = gr.Image(
+                    label="صورة الكلمة (Word Image)",
+                    width=250, height=250,
+                    interactive=False,
+                    elem_classes=["gr-image"]
+                )
+                # Hidden audio component to play the word sound
+                word_audio_output = gr.Audio(
+                    label="صوت الكلمة (Word Sound)",
+                    autoplay=False,
+                    type="filepath",
+                    visible=False
+                )
+
+                # Button to play the word audio
+                play_word_btn = gr.Button("استمع للكلمة (Listen to Word)", elem_classes=["gr-button"])
+
+                gr.Markdown("<hr>", elem_classes=["gr-markdown"])
+
+                # --- Pronunciation Practice Section ---
+                gr.Markdown("### <span style='color:#17a2b8;'>تدرب على النطق (Practice Pronunciation)</span>", rtl=True)
+                # Microphone input for user to record pronunciation
+                pronunciation_input = gr.Audio(
+                    sources=["microphone"], # Allows recording from microphone
+                    type="filepath", # Output will be a path to a temporary audio file
+                    label="سجل صوتك وأنت تنطق الحرف/الكلمة (Record your voice saying the letter/word)",
+                    elem_classes=["gr-audio"]
+                )
+                # Markdown to display feedback on pronunciation
+                pronunciation_feedback = gr.Markdown(
+                    label="التقييم (Feedback)",
+                    rtl=True,
+                    elem_classes=["gr-markdown"]
+                )
+                # Button to trigger the pronunciation check
+                check_pronunciation_btn = gr.Button("تحقق من النطق (Check Pronunciation)", elem_classes=["gr-button"])
+
+        # --- Arabic Storytelling Tab ---
+        with gr.TabItem("قصص عربية (Arabic Storytelling)", rtl=True):
+            with gr.Column(
+                scale=1,
+                min_width=400,
+                elem_id="storytelling-section", # Unique ID for CSS targeting
+                variant="panel"
+            ):
+                gr.Markdown("### <span style='color:#fd7e14;'>استمتع بقصصنا الشيقة! (Enjoy our exciting stories!)</span>", rtl=True)
+
+                # Dropdown to select a story
+                story_selection_dropdown = gr.Dropdown(
+                    choices=get_story_titles(), # Populated by function
+                    label="اختر قصة (Choose a Story)",
+                    # Set initial value to the first story if available, otherwise None
+                    value=get_story_titles()[0] if get_story_titles() else None,
+                    elem_classes=["gr-dropdown"],
+                    rtl=True
+                )
+
+                # Display area for story title
+                story_title_display = gr.Markdown(
+                    value="",
+                    label="عنوان القصة (Story Title)",
+                    rtl=True,
+                    elem_classes=["gr-markdown"]
+                )
+                # Display area for story text
+                story_text_display = gr.Markdown(
+                    value="",
+                    label="نص القصة (Story Text)",
+                    rtl=True,
+                    elem_classes=["gr-markdown"]
+                )
+                # Display image for the current story page
+                story_image_display = gr.Image(
+                    label="صورة القصة (Story Image)",
+                    width=450, height=350,
+                    interactive=False,
+                    elem_classes=["gr-image"]
+                )
+                # Hidden audio component to play story page audio
+                story_audio_output = gr.Audio(
+                    label="صوت القصة (Story Audio)",
+                    autoplay=False,
+                    type="filepath",
+                    visible=False
+                )
+
+                # Navigation buttons for story pages
+                with gr.Row():
+                    prev_story_page_btn = gr.Button("الصفحة السابقة (Previous Page)", elem_classes=["gr-button"])
+                    play_story_btn = gr.Button("استمع للقصة (Listen to Story)", elem_classes=["gr-button"])
+                    next_story_page_btn = gr.Button("الصفحة التالية (Next Page)", elem_classes=["gr-button"])
+
+    # --- Event Handlers (Logic for button clicks and component changes) ---
+
+    # --- Event Handlers for Learning Arabic Letters Tab ---
+    # When the demo loads, display the content of the first letter
+    demo.load(
+        get_current_letter_content,
+        inputs=None,
+        outputs=[
+            letter_display,
+            letter_image,
+            letter_audio_output, # Output for the letter's audio file path
+            word_example_display,
+            word_image,
+            word_audio_output # Output for the word's audio file path
+        ],
+        queue=False # No need to queue initial load
+    )
+
+    # Connect navigation buttons to their respective functions
+    next_letter_btn.click(
+        next_letter_func,
+        inputs=None,
+        outputs=[
+            letter_display,
+            letter_image,
+            letter_audio_output,
+            word_example_display,
+            word_image,
+            word_audio_output
+        ]
+    )
+    prev_letter_btn.click(
+        prev_letter_func,
+        inputs=None,
+        outputs=[
+            letter_display,
+            letter_image,
+            letter_audio_output,
+            word_example_display,
+            word_image,
+            word_audio_output
+        ]
+    )
+
+    # Connect play audio buttons. Using lambda to pass the current audio path dynamically.
+    play_letter_btn.click(
+        lambda: play_audio(arabic_letters_data[current_letter_idx]["audio"]),
+        inputs=None,
+        outputs=letter_audio_output
+    )
+    play_word_btn.click(
+        lambda: play_audio(arabic_letters_data[current_letter_idx]["word_audio"]),
+        inputs=None,
+        outputs=word_audio_output
+    )
+
+    # Connect pronunciation check button
+    check_pronunciation_btn.click(
+        check_pronunciation,
+        inputs=pronunciation_input,
+        outputs=pronunciation_feedback
+    )
+
+    # --- Event Handlers for Arabic Storytelling Tab ---
+    # When a new story is selected from the dropdown
+    story_selection_dropdown.change(
+        select_story_func,
+        inputs=story_selection_dropdown,
+        outputs=[story_title_display, story_text_display, story_image_display, story_audio_output]
+    )
+
+    # Connect navigation buttons for story pages
+    next_story_page_btn.click(
+        next_story_page_func,
+        inputs=None,
+        outputs=[story_title_display, story_text_display, story_image_display, story_audio_output]
+    )
+    prev_story_page_btn.click(
+        prev_story_page_func,
+        inputs=None,
+        outputs=[story_title_display, story_text_display, story_image_display, story_audio_output]
+    )
+
+    # Connect button to play the current story page's audio
+    play_story_btn.click(
+        lambda: play_audio(arabic_stories_data[current_story_idx]["pages"][current_story_page_idx]["audio"]),
+        inputs=None,
+        outputs=story_audio_output
+    )
+
+# Launch the Gradio application
+demo.launch()