File size: 6,874 Bytes
2d37f2f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ffeb0b7
2d37f2f
 
 
 
 
 
 
 
 
 
 
 
4eb0cd6
2d37f2f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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()