Add audio set selection screen - users can choose between Khmer and Korean audio

app.py

@@ -3,17 +3,15 @@ import os
 import random
 from pathlib import Path
 
-# Get all audio clips and images from the same folder
-audio_dir = "audio_clips"
-audio_files = sorted([f for f in os.listdir(audio_dir) if f.endswith('.mp3')])
-image_files = sorted([f for f in os.listdir(audio_dir) if f.endswith('.png')])
-
-print(f"Found {len(audio_files)} audio files")
-print(f"Found {len(image_files)} image files")
-
 # Build a mapping of audio clips to their corresponding images
-def build_clip_mapping():
+def build_clip_mapping(audio_dir):
     """Map each audio file to its corresponding image based on matching base names"""
+    audio_files = sorted([f for f in os.listdir(audio_dir) if f.endswith('.mp3')])
+    image_files = sorted([f for f in os.listdir(audio_dir) if f.endswith('.png')])
+    
+    print(f"Found {len(audio_files)} audio files in {audio_dir}")
+    print(f"Found {len(image_files)} image files in {audio_dir}")
+    
     mapping = {}
     
     for audio_file in audio_files:
@@ -23,36 +21,62 @@ def build_clip_mapping():
             if audio_base == image_base:
                 mapping[audio_file] = image_file
                 break
+    
+    print(f"Successfully mapped {len(mapping)} audio-image pairs")
     return mapping
 
-clip_to_image = build_clip_mapping()
-print(f"Successfully mapped {len(clip_to_image)} audio-image pairs")
-print(f"Sample pairs: {list(clip_to_image.items())[:3]}")
-
-valid_clips = list(clip_to_image.keys())
-
 class QuizApp:
     def __init__(self):
         self.current_index = 0
         self.score = 0
-        self.total_questions = len(valid_clips)
         self.selected_image = None
         self.current_correct_index = None
+        self.audio_dir = None
+        self.clip_to_image = {}
+        self.shuffled_clips = []
+        self.total_questions = 0
+    
+    def start_quiz(self, audio_set):
+        """Initialize quiz with selected audio set"""
+        self.audio_dir = "audio_clips" if audio_set == "Khmer Script (ខ្មែរ)" else "audio_clips_ko"
+        self.clip_to_image = build_clip_mapping(self.audio_dir)
+        valid_clips = list(self.clip_to_image.keys())
         self.shuffled_clips = valid_clips.copy()
         random.shuffle(self.shuffled_clips)
+        self.total_questions = len(self.shuffled_clips)
+        self.current_index = 0
+        self.score = 0
+        self.selected_image = None
+        
+        clip_path, question, image_paths, _ = self.get_current_clip()
+        image_updates = []
+        for i in range(4):
+            if i < len(image_paths):
+                image_updates.append(gr.Image(value=image_paths[i], visible=True))
+            else:
+                image_updates.append(gr.Image(visible=False))
+        
+        return (
+            gr.update(visible=False),  # Hide start screen
+            gr.update(visible=True),   # Show quiz screen
+            clip_path, 
+            gr.Markdown(f"### {question}"), 
+            *image_updates,
+            ""
+        )
         
     def get_current_clip(self):
         if self.current_index < len(self.shuffled_clips):
             clip_name = self.shuffled_clips[self.current_index]
-            clip_path = os.path.join(audio_dir, clip_name)
-            correct_image = clip_to_image[clip_name]
-            all_images = [img for audio, img in clip_to_image.items() if audio != clip_name]
+            clip_path = os.path.join(self.audio_dir, clip_name)
+            correct_image = self.clip_to_image[clip_name]
+            all_images = [img for audio, img in self.clip_to_image.items() if audio != clip_name]
             incorrect_images = random.sample(all_images, min(3, len(all_images)))
             all_options = [correct_image] + incorrect_images
             random.shuffle(all_options)
             correct_index = all_options.index(correct_image)
             self.current_correct_index = correct_index
-            image_paths = [os.path.join(audio_dir, img) for img in all_options]
+            image_paths = [os.path.join(self.audio_dir, img) for img in all_options]
             question = f"What did you hear? ({self.current_index + 1}/{self.total_questions})"
             return clip_path, question, image_paths, correct_index
         
@@ -117,21 +141,25 @@ class QuizApp:
         )
     
     def reset(self):
+        """Reset quiz to start screen"""
         self.current_index = 0
         self.score = 0
         self.selected_image = None
-        random.shuffle(self.shuffled_clips)
-        clip_path, question, image_paths, _ = self.get_current_clip()
-        image_updates = []
-        for i in range(4):
-            if i < len(image_paths):
-                image_updates.append(gr.Image(value=image_paths[i], visible=True))
-            else:
-                image_updates.append(gr.Image(visible=False))
-        return "", clip_path, gr.Markdown(f"### {question}"), *image_updates, ""
+        self.audio_dir = None
+        self.clip_to_image = {}
+        self.shuffled_clips = []
+        
+        return (
+            gr.update(visible=True),   # Show start screen
+            gr.update(visible=False),  # Hide quiz screen
+            None,
+            gr.Markdown(""),
+            *[gr.Image(visible=False) for _ in range(4)],
+            "",
+            ""
+        )
 
 quiz = QuizApp()
-initial_clip, initial_question, initial_images, _ = quiz.get_current_clip()
 
 def make_select_handler(index):
     def handler():
@@ -161,30 +189,50 @@ custom_css = """
 
 with gr.Blocks(title="Khmer Learning Quiz", theme=gr.themes.Base(), css=custom_css) as demo:
     gr.Markdown("# 🎵 Khmer Audio Learning Quiz")
-    gr.Markdown("Listen to each audio clip and select the correct image!")
     
-    audio_player = gr.Audio(value=initial_clip, label="🔊 Listen to the audio clip", autoplay=False)
-    question_text = gr.Markdown(f"### {initial_question}")
-    gr.Markdown("### Click on an image to select:")
+    # Start Screen
+    with gr.Column(visible=True) as start_screen:
+        gr.Markdown("## Welcome! 👋")
+        gr.Markdown("### Choose your learning mode:")
+        
+        audio_set_choice = gr.Radio(
+            choices=["Khmer Script (ខ្មែរ)", "Korean (한글/ko)"],
+            value="Khmer Script (ខ្មែរ)",
+            label="Select Audio Set",
+            info="Choose which set of audio clips you want to practice with"
+        )
+        
+        start_btn = gr.Button("🚀 Start Quiz", variant="primary", size="lg")
     
-    with gr.Row():
-        image_options = []
-        for i in range(4):
-            if initial_images and i < len(initial_images):
-                img = gr.Image(value=initial_images[i], show_label=False, interactive=False, 
-                              height=200, visible=True, elem_classes="clickable-image")
-            else:
+    # Quiz Screen
+    with gr.Column(visible=False) as quiz_screen:
+        gr.Markdown("Listen to each audio clip and select the correct image!")
+        
+        audio_player = gr.Audio(label="🔊 Listen to the audio clip", autoplay=False)
+        question_text = gr.Markdown("")
+        gr.Markdown("### Click on an image to select:")
+        
+        with gr.Row():
+            image_options = []
+            for i in range(4):
                 img = gr.Image(show_label=False, interactive=False, height=200, 
                               visible=False, elem_classes="clickable-image")
-            image_options.append(img)
-    
-    selection_status = gr.Textbox(label="Your Selection", value="", interactive=False)
-    
-    with gr.Row():
-        submit_btn = gr.Button("✓ Submit Answer", variant="primary", size="lg")
-        reset_btn = gr.Button("🔄 Reset Quiz", variant="secondary")
+                image_options.append(img)
+        
+        selection_status = gr.Textbox(label="Your Selection", value="", interactive=False)
+        
+        with gr.Row():
+            submit_btn = gr.Button("✓ Submit Answer", variant="primary", size="lg")
+            reset_btn = gr.Button("🔄 Back to Start", variant="secondary")
+        
+        feedback_text = gr.Markdown("", elem_classes="feedback-box")
     
-    feedback_text = gr.Markdown("", elem_classes="feedback-box")
+    # Event handlers
+    start_btn.click(
+        fn=quiz.start_quiz,
+        inputs=[audio_set_choice],
+        outputs=[start_screen, quiz_screen, audio_player, question_text] + image_options + [selection_status]
+    )
     
     for i in range(4):
         image_options[i].select(fn=make_select_handler(i), inputs=[], outputs=[selection_status])
@@ -193,7 +241,7 @@ with gr.Blocks(title="Khmer Learning Quiz", theme=gr.themes.Base(), css=custom_c
                      outputs=[feedback_text, audio_player, question_text] + image_options + [selection_status])
     
     reset_btn.click(fn=quiz.reset, inputs=[], 
-                   outputs=[feedback_text, audio_player, question_text] + image_options + [selection_status])
+                   outputs=[start_screen, quiz_screen, audio_player, question_text] + image_options + [selection_status, feedback_text])
 
 if __name__ == "__main__":
     demo.launch()