Tshembhani/Chapter3a_Revised_Onboarding

1import gradio as gr2 3# ==============================================================================4# CONFIGURATION SECTION5# ==============================================================================6 7CONFIG = {8    "brand": {9        "logo": "https://raw.githubusercontent.com/baloyitd/sci-sonke-assets/main/Sci_Sonke_Logo.png",10        "auntie_nia_image": "https://raw.githubusercontent.com/baloyitd/sci-sonke-assets/main/aunti_nia.png",11        "leo_image": "https://raw.githubusercontent.com/baloyitd/sci-sonke-assets/main/leo_the_lion.png",12        "thandi_image": "https://raw.githubusercontent.com/baloyitd/sci-sonke-assets/main/sister_thandi.png"13    },14    "part_1_bridge": {15        "parent_request_audio": "https://raw.githubusercontent.com/baloyitd/Unified_Chapter_3_Demo/main/parent_initial_afrikaans.mp3",16        "language_detected": "Afrikaans",17        "ai_text_response": "Welkom by Sci-Sonke! Jy is nou verbind. Laat weet wat jy nodig het.",18        "audio_response": "https://raw.githubusercontent.com/baloyitd/sci-sonke-assets/main/ch3_p1_afrikaans_response.mp3"19    },20    "part_2_squad": {21        "parent_request_hindi_audio": "https://raw.githubusercontent.com/baloyitd/Chapter-4-The-Kitchen-Classroom./main/Chapter%204%20Parent%20Question%20Filipino.mp3",22        "parent_request_english_text": "Can I get a bedtime story for my child?",23        "mapped_prompt": "story_request.bedtime_tale",24        "story_text": "Long ago in the savannah, a young lion named Leo learned the value of kindness...",25        "persona_image": "https://raw.githubusercontent.com/baloyitd/sci-sonke-assets/main/leo_the_lion.png",26        "intro_text": "Let me introduce you to Leo the Lion. He’s got just the story for bedtime.",27        "intro_audio": "https://raw.githubusercontent.com/baloyitd/sci-sonke-assets/main/ch3_p1_afrikaans_response.mp3",  # Reused for simplicity28        "story_audio": "https://raw.githubusercontent.com/baloyitd/sci-sonke-assets/main/ch3_p1_afrikaans_response.mp3"  # Reused for simplicity29    }30}31 32# ==============================================================================33# FUNCTION DEFINITIONS34# ==============================================================================35 36def show_part_1_results():37    part1 = CONFIG["part_1_bridge"]38    return (39        gr.update(visible=True),40        part1["language_detected"],41        part1["ai_text_response"],42        part1["audio_response"]43    )44 45def show_part_2_results():46    part2 = CONFIG["part_2_squad"]47    return (48        gr.update(visible=True),49        part2["mapped_prompt"],50        part2["persona_image"],51        part2["intro_text"],52        part2["intro_audio"]53    )54 55def reveal_final_story():56    part2 = CONFIG["part_2_squad"]57    return (58        gr.update(visible=True),59        part2["story_text"],60        part2["story_audio"]61    )62 63# ==============================================================================64# GRADIO INTERFACE DEFINITION65# ==============================================================================66 67theme = gr.themes.Soft(primary_hue="orange", secondary_hue="amber").set(body_background_fill="#FFF8F0")68 69with gr.Blocks(theme=theme, title="Sci-Sonke: Chapter 3 Demo") as demo:70    # --- Header ---71    gr.Markdown(f'''72    <div style="text-align: center; padding-top: 20px;">73        <img src="{CONFIG['brand']['logo']}" width="150" alt="Sci-Sonke Logo">74        <h1>Chapter 3: The Onboarding Experience</h1>75        <p>A two-part journey demonstrating Sci-Sonke's core values: <b>Accessibility</b> and <b>Intelligence</b>.</p>76    </div>77    ''')78 79    # --- Part 1: Language Bridge ---80    with gr.Accordion("Part 1: The Language Bridge (Accessibility)", open=True):81        p1 = CONFIG["part_1_bridge"]82        gr.Markdown("### The Story: A Parent's Hope\nA parent, speaking Afrikaans, sends a voice note. Will the system understand? **Listen to their request, then build the bridge.**")83        gr.Audio(value=p1["parent_request_audio"], label="Listen to the Parent's Request:", interactive=False)84        p1_submit_button = gr.Button("Build the Bridge →", variant="primary")85 86        with gr.Column(visible=False) as p1_results_section:87            gr.Markdown("---\n## The Connection is Made!")88            gr.Image(value=CONFIG["brand"]["auntie_nia_image"], width=150, label="Auntie Nia Responds", interactive=False)89            p1_lang_detected_output = gr.Textbox(label="Language Detected", interactive=False)90            p1_ai_text_output = gr.Textbox(label="AI Response Text", interactive=False, lines=4)91            p1_audio_output = gr.Audio(label="Listen to Auntie Nia's Welcoming Reply:", autoplay=True)92 93    # --- Part 2: Meet the Squad ---94    with gr.Accordion("Part 2: Meet the Squad (Intelligence)", open=False):95        p2 = CONFIG["part_2_squad"]96        gr.Markdown("### The Story: A Parent's Need\nNow onboarded, the parent makes a request in Hindi for a bedtime story. The system must map this request to the right storyteller.\n\n**Listen to the request, then see how the system thinks.**")97        gr.Audio(value=p2["parent_request_hindi_audio"], label="Listen to the Parent's Story Request (in Hindi):", interactive=False)98        p2_submit_button = gr.Button("See How the System Routes the Request →", variant="primary")99 100        with gr.Column(visible=False) as p2_results_section:101            gr.Markdown("---\n## The System's Thought Process:")102            gr.Textbox(label="Step 1: AI Summary of Request", value=p2["parent_request_english_text"], interactive=False)103            p2_mapped_prompt_output = gr.Textbox(label="Step 2: Mapped to Internal Task ID", interactive=False)104 105            # Auntie Nia introduction106            gr.Markdown("### Step 3: Auntie Nia makes the introduction...")107            gr.Image(value=CONFIG["brand"]["auntie_nia_image"], width=150, interactive=False)108            p2_intro_text_output = gr.Textbox(label="Auntie Nia's Introduction", interactive=False, lines=3)109            p2_intro_audio_output = gr.Audio(label="Listen:", autoplay=True)110 111            # Story section112            with gr.Column(visible=False) as p2_story_section:113                gr.Markdown("### Step 4: The Storyteller begins...")114                p2_persona_image_output = gr.Image(label="Storyteller", interactive=False, show_label=False, width=150)115                p2_story_text_output = gr.Textbox(label="Story Text", interactive=False, lines=4)116                p2_story_audio_output = gr.Audio(label="Listen:", autoplay=True)117 118    # --- Button Logic ---119    p1_submit_button.click(120        fn=show_part_1_results,121        inputs=[],122        outputs=[p1_results_section, p1_lang_detected_output, p1_ai_text_output, p1_audio_output]123    )124 125    p2_submit_button.click(126        fn=show_part_2_results,127        inputs=[],128        outputs=[p2_results_section, p2_mapped_prompt_output, p2_persona_image_output, p2_intro_text_output, p2_intro_audio_output]129    ).then(130        fn=reveal_final_story,131        inputs=[],132        outputs=[p2_story_section, p2_story_text_output, p2_story_audio_output]133    )134 135# ==============================================================================136# LAUNCH APP137# ==============================================================================138 139if __name__ == "__main__":140    demo.launch()141