Spaces:
Sleeping
Sleeping
import gradio as gr | |
from utils import driver, driver_resource | |
# ----------------------------- | |
# Callback for initial suggestion | |
# ----------------------------- | |
def on_submit(age, background, interest): | |
# Get LLM-generated study plan, reason, and resources | |
diagram, reason, outcome = driver(age, background, interest) | |
return ( | |
gr.update(value=diagram, visible=True), # studyflow_diagram | |
gr.update(value=reason, visible=True), # topic_reason | |
gr.update(value=outcome, visible=True), # topic_outcome | |
gr.update(visible=False), # hide submit | |
gr.update(visible=True), # show feedback section | |
gr.update(visible=True), # show revised submission button | |
gr.update(visible=True), # show original section | |
gr.update(visible=False), # hide revised section | |
gr.update(visible=True), # show resource button | |
) | |
# ----------------------------- | |
# Callback for revised suggestion based on feedback | |
# ----------------------------- | |
def on_feedback(age, background, interest, userFeedback): | |
# Optionally send feedback to model | |
diagram, reason, outcome = driver(age, background, interest, userFeedback) | |
return ( | |
gr.update(value=diagram, visible=True), # revisedStudyflow_diagram | |
gr.update(value=reason, visible=True), # revisedTopic_reason | |
gr.update(value=outcome, visible=True), # revisedTopic_outcome | |
gr.update(visible=False), # hide submitWithFeedback | |
gr.update(visible=False), # hide original section | |
gr.update(visible=True), # show revised section | |
) | |
# ----------------------------- | |
# Helpers for dummy resource button | |
# ----------------------------- | |
# def getResouces(): | |
# return "Here are some resources to help you get started with your learning path." | |
def getResouces(): | |
resources, questions = driver_resource() | |
return resources, questions | |
def on_Resource(): | |
resources, questions = driver_resource() | |
return ( | |
resources, | |
questions, | |
gr.update(visible=True), # Show resource section | |
gr.update(visible=False), # Hide resource button | |
gr.update(visible=False), # Hide feedback button | |
) | |
# ----------------------------- | |
# UI with Gradio Blocks | |
# ----------------------------- | |
with gr.Blocks(css=""" | |
#scrollable-md { | |
max-height: 350px; | |
border: 1px solid #999; | |
overflow-y: auto; | |
} | |
#original_section{ | |
background-color: transparent !important; | |
} | |
""") as demo: | |
gr.Markdown("# π LearnFlow") | |
gr.Markdown("""πΉ **πΊοΈ Personalized Study Workflow** πΉ **π§ Meaningful Reasoning & Outcomes** πΉ **π Beginner-Friendly Resources** πΉ **β Grasp Check Questions** """) | |
with gr.Row(): | |
with gr.Column(scale=1): | |
with gr.Group(elem_id="input-section", visible=True): | |
age = gr.Number(label="πΆ Your Age", value=18) | |
background = gr.Textbox(label="π Your Educational Background") | |
interest = gr.Textbox(label="π‘ Your Interests") | |
submit = gr.Button("π Suggest What to Learn", visible=True, elem_classes="gr-button") | |
with gr.Group(elem_id="feedback-section", visible=False) as feedback_section: | |
userFeedback = gr.Textbox(label="βΉοΈ Help us know what youβre looking for") | |
submitWithFeeback = gr.Button("π Update the flow with feedback", elem_classes="gr-button") | |
resource_button = gr.Button("π Click to get Resource", visible=False, elem_classes="gr-button") | |
with gr.Column(scale=2): | |
# REVISED Section (initially hidden) | |
with gr.Group(visible=False) as revised_section: | |
gr.Markdown("### π Revised Recommendation") | |
with gr.Row(): | |
revisedStudyflow_diagram = gr.Markdown( | |
value="<p>No recommendation yet.</p>", | |
label="π The flow you are looking for", | |
elem_id="scrollable-md", | |
visible=False | |
) | |
with gr.Column(): | |
revisedTopic_reason = gr.Textbox(label="π§ Why this topic", lines=5, max_lines=5, visible=False) | |
revisedTopic_outcome = gr.Textbox(label="πͺ Outcome of this topic", lines=5, max_lines=5, visible=False) | |
# ORIGINAL Section (initially visible) | |
with gr.Group(visible=True) as original_section: | |
gr.Markdown("### π Recommendation") | |
with gr.Row(): | |
studyflow_diagram = gr.Markdown( | |
value="<p>No recommendation yet.</p>", | |
label="π The flow you are looking for", | |
elem_id="scrollable-md", | |
visible=False | |
) | |
with gr.Column(): | |
topic_reason = gr.Textbox(label="π§ Why this topic", lines=5, max_lines=5, visible=False) | |
topic_outcome = gr.Textbox(label="πͺ Outcome of this topic", lines=5, max_lines=5, visible=False) | |
# RESOURCES Section (initially hidden) | |
with gr.Group(elem_id="resource-section", visible=False) as resource_section: | |
gr.Markdown("### π Learning Resources") | |
learningResource = gr.Textbox(label="Resources to help you get started") | |
graspCheck = gr.Textbox(label="Grasp Check Questions") | |
# ----------- Events ------------ | |
submit.click( | |
fn=on_submit, | |
inputs=[age, background, interest], | |
outputs=[ | |
studyflow_diagram, | |
topic_reason, | |
topic_outcome, | |
submit, | |
feedback_section, | |
submitWithFeeback, | |
original_section, | |
revised_section, | |
resource_button, | |
], | |
queue=True | |
) | |
submitWithFeeback.click( | |
fn=on_feedback, | |
inputs=[age, background, interest, userFeedback], | |
outputs=[ | |
revisedStudyflow_diagram, | |
revisedTopic_reason, | |
revisedTopic_outcome, | |
submitWithFeeback, | |
original_section, | |
revised_section, | |
], | |
queue=True | |
) | |
resource_button.click( | |
fn=on_Resource, | |
inputs=[], | |
outputs=[ | |
learningResource, | |
graspCheck, | |
resource_section, | |
resource_button, | |
submitWithFeeback | |
], | |
queue=True | |
) | |
# Launch the app | |
demo.launch() | |