Add modal functionality (LLM) and improve layout

app.py

@@ -2,6 +2,7 @@
 
 import dash
 from dash import Output, Input, State, dcc, _dash_renderer
+from string import Template
 from appconfig import appconfig
 import plotly.graph_objects as go
 import dash_mantine_components as dmc
@@ -93,7 +94,7 @@ def update_figure_cards(
         start_end,
         selected_time_frequency,
         disable_ridership,
-        disable_drop
+        disable_drop,
     )
 
     ridership_cards = pylayoutfunc.generate_layout_card_total_ridership(
@@ -112,36 +113,114 @@ def update_figure_cards(
     [
         Input("button-llm", "n_clicks"),
         State("plot-mta-ridership-recovery", "figure"),
-        State("llm-model", "value"),
-        State("llm-api-key", "value"),
+        State("llm-context-system", "value"),
+        State("llm-context-project", "value"),
+        State("llm-context-stat", "value"),
+        State("llm-question", "value"),
+        State("multi-select-transportation", "value"),
         State("date-picker-start", "value"),
         State("date-picker-end", "value"),
         State("radiogroup-resample", "value"),
+        State("llm-model", "value"),
+        State("llm-api-key", "value"),
     ],
     prevent_initial_call=True,
 )
 def update_insight(
-    _, fig, llm_models, llm_api_key, start_date, end_date, resample_period
+    _,
+    fig,
+    system_prompt,
+    project_overview,
+    context_plot_stats,
+    user_question,
+    selected_mta,
+    start_date,
+    end_date,
+    time_frequency,
+    llm_models,
+    llm_api_key,
 ):
-    system_prompt = pyfunc.read_text_file("text/system_prompt.md")
-    context_overview = pyfunc.read_text_file("text/context_overview.md")
+    """Generate insight using OpenAI's Language Model API."""
+
+    from datetime import datetime
+    import pandas as pd
+
+    template_plot_stats = Template(context_plot_stats)
+
+    # Calculation
+
+    selected_mta_label = []
+    data_ridership = []
+    data_recovery = []
+    for mode in selected_mta:
+        selected_mta_label.append(mta_data[mode]["label"])
+        data_ridership.append(
+            mta_data[mode]["data_ridership"].resample(time_frequency).sum()
+        )
+        data_recovery.append(
+            mta_data[mode]["data_recovery"].resample(time_frequency).mean()
+        )
+
+    data_ridership = pd.concat(data_ridership, axis=1)
+    data_recovery = pd.concat(data_recovery, axis=1)
+
+    selected_mta_total_ridership = data_ridership.sum()
+    selected_mta_ridership_describe = data_ridership.describe()
+    selected_mta_recovery_describe = data_recovery.describe()
+
+    selected_mta_label = ", ".join(selected_mta_label)
+    start_date = datetime.strptime(start_date, "%Y-%m-%d").strftime("%B %d, %Y")
+    end_date = datetime.strptime(end_date, "%Y-%m-%d").strftime("%B %d, %Y")
+    time_frequency_label = pyfunc.TIME_FREQUENCY_DICT[time_frequency]
+
+    context_plot_stats = template_plot_stats.substitute(
+        selected_mta_label=selected_mta_label,
+        start_date=start_date,
+        end_date=end_date,
+        time_frequency=time_frequency_label,
+        selected_mta_total_ridership=selected_mta_total_ridership,
+        selected_mta_ridership_describe=selected_mta_ridership_describe,
+        selected_mta_recovery_describe=selected_mta_recovery_describe,
+    )
 
     figure = pyfunc.fig_to_base64(go.Figure(fig))
 
     insight = pyfunc.generate_insight(
         system_prompt,
-        context_overview,
+        project_overview,
+        context_plot_stats,
+        user_question,
         figure,
         model=llm_models,
         llm_api_key=llm_api_key,
-        start_date=start_date,
-        end_date=end_date,
-        resample_period=resample_period,
     )
 
+    # return dcc.Textarea("hello")
     return dcc.Markdown(insight)
 
 
+@app.callback(
+    Output("modal-llm-setting", "opened"),
+    Input("modal-llm-setting-button", "n_clicks"),
+    Input("modal-llm-setting-close-button", "n_clicks"),
+    State("modal-llm-setting", "opened"),
+    prevent_initial_call=True,
+)
+def modal_llm_setting(_1, _2, opened):
+    return not opened
+
+
+@app.callback(
+    Output("modal-llm-context", "opened"),
+    Input("modal-llm-context-button", "n_clicks"),
+    Input("modal-llm-context-close-button", "n_clicks"),
+    State("modal-llm-context", "opened"),
+    prevent_initial_call=True,
+)
+def modal_llm_context(_1, _2, opened):
+    return not opened
+
+
 # Run the app
 if __name__ == "__main__":
     app.run_server(debug=DEBUG_MODE)

pyfunc.py

@@ -134,13 +134,12 @@ def fig_to_base64(fig):
 
 def generate_insight(
     system_prompt: str,
-    context_overview: str,
+    context_project: str,
+    context_plot_stats: str,
+    user_question: str, 
     graph_base64: str,
     model: str = "openai:gpt-4o-mini",
     llm_api_key: str = None,
-    start_date: str = None,
-    end_date: str = None,
-    resample_period: str = "W",
     temperature: float = 0.75,
 ) -> str:
     """
@@ -150,33 +149,28 @@ def generate_insight(
         if llm_api_key == "" or llm_api_key is None:
             llm_api_key = os.getenv("OPENAI_API_KEY")
 
-        start_date = start_date if start_date is not None else "2020-03-01"
-        end_date = end_date if end_date is not None else "2024-10-31"
-
         client = ai.Client({"openai": dict(api_key=llm_api_key)})
 
-        period = [
-            label
-            for resample, label in TIME_FREQUENCY_LABELS
-            if resample == resample_period
-        ][0]
-
         messages = [
             {"role": "system", "content": system_prompt},
             {
                 "role": "user",
                 "content": [
                     {
                         "type": "text",
-                        "text": f"Here's overview of this project: {context_overview}",
+                        "text": context_project,
                     },
                     {
                         "type": "image_url",
                         "image_url": {"url": graph_base64},
                     },
                     {
                         "type": "text",
-                        "text": f"Analyze this graph and provide insights. The period data is from {start_date} to {end_date} in {period} period.",
+                        "text": context_plot_stats,
+                    },
+                    {
+                        "type": "text",
+                        "text": user_question,
                     },
                 ],
             },

pylayout.py

@@ -105,7 +105,9 @@
     id="check-disable-ridership", label="Hide Ridership Trend", checked=False, size="sm"
 )
 
-check_drop = dmc.Checkbox(id="check-disable-drop", label="Hide Percentage Drop Trend", checked=False)
+check_drop = dmc.Checkbox(
+    id="check-disable-drop", label="Hide Percentage Drop Trend", checked=False
+)
 
 # SELECT RESAMPLE PERIOD
 radio_data = [
@@ -128,9 +130,6 @@
 
 # LLM
 
-plot1_llm_title = dmc.Text(
-    "Insight (with LLM)", my="md", size="md", fw=600, ta="center"
-)
 llm_model = dmc.TextInput(
     id="llm-model",
     label="LLM Model (provider:model-name)",
@@ -145,6 +144,17 @@
     w=300,
 )
 
+default_question = pyfunc.read_text_file("text/default_question.md")
+
+llm_question = dmc.Textarea(
+    id="llm-question",
+    label=dmc.Text("🔍 Uncover Insights with 🤖 LLM", size="lg", fw=600),
+    value=default_question,
+    description="What do you want to know about the data?",
+    w=1200,
+    size="md",
+)
+
 placeholder_insight = pyfunc.read_text_file("text/app_plot1_insight.md")
 plot1_insight = dmc.Center(
     dmc.Paper(
@@ -155,6 +165,7 @@
         pt="md",
         px="lg",
         id="insight-text",
+        withBorder=True,
     )
 )
 
@@ -164,6 +175,93 @@
     type="default",
 )
 
+# LAYOUT BUTTON
+
+modal_llm_setting = dmc.Modal(
+    title=dmc.Text("LLM Settings", size="lg", fw=700),
+    id="modal-llm-setting",
+    children=[
+        dmc.Group(
+            [llm_model, llm_api_key],
+            justify="flex-start",
+            align="flex-end",
+            grow=True,
+        ),
+        dmc.Space(h=20),
+        dmc.Group(
+            [
+                dmc.Button(
+                    "Close",
+                    color="red",
+                    variant="outline",
+                    id="modal-llm-setting-close-button",
+                )
+            ],
+            justify="flex-end",
+        ),
+    ],
+    size="lg",
+    centered=True,
+)
+
+
+llm_context_system = dmc.Textarea(
+    id="llm-context-system",
+    label="System Prompt",
+    value=pyfunc.read_text_file("text/system_prompt.md"),
+    autosize=True,
+    minRows=5,
+    w=550
+)
+
+llm_context_project = dmc.Textarea(
+    id="llm-context-project",
+    label="Context: Project Overview",
+    value=pyfunc.read_text_file("text/project_overview.md"),
+    autosize=True,
+    minRows=5,
+    w=550
+)
+
+llm_context_stat = dmc.Textarea(
+    id="llm-context-stat",
+    label="Context: Statistical & Plot Description",
+    autosize=True,
+    value=pyfunc.read_text_file("text/context_plot_stat.md"),
+    minRows=5,
+    w=550
+)
+
+modal_llm_context = dmc.Modal(
+    title=dmc.Text("LLM Context", size="lg"),
+    id="modal-llm-context",
+    children=[
+        dmc.Group(
+            [
+                llm_context_system,
+                llm_context_project,
+                llm_context_stat,
+            ],
+            justify="center",
+            align="flex-start",
+            wrap=True,
+        ),
+        dmc.Space(h=20),
+        dmc.Group(
+            [
+                dmc.Button(
+                    "Close",
+                    color="red",
+                    variant="outline",
+                    id="modal-llm-context-close-button",
+                ),
+            ],
+            justify="flex-end",
+        ),
+    ],
+    fullScreen=True,
+    centered=True,
+)
 
 # FOOTER
 
@@ -222,30 +320,46 @@
             gap="md",
         ),
         dmc.Space(h="sm"),
-        dmc.Divider(label="At a Glance Stats", variant="dashed", labelPosition="center"),
-        # dmc.Text("At a Glance Stats", c="dimmed", size="md", fw=500, ta="center"),
+        dmc.Divider(
+            label="At a Glance Stats", variant="dashed", labelPosition="center"
+        ),
         dmc.Space(h="sm"),
         dmc.SimpleGrid(
             [
                 html.Div(id="div-cards-total-ridership"),
-                html.Div(id="div-cards-highest-recovery")
+                html.Div(id="div-cards-highest-recovery"),
             ],
             cols=2,
             spacing="md",
-            verticalSpacing="xs"
+            verticalSpacing="xs",
         ),
         dmc.Space(h="sm"),
         dmc.Divider(variant="dashed"),
+        dmc.Space(h="md"),
+        modal_llm_setting,
+        modal_llm_context,
+        dmc.Center(llm_question),
         dmc.Space(h="sm"),
-        plot1_llm_title,
         dmc.Group(
             [
-                llm_model,
-                llm_api_key,
-                dmc.Button("Generate Insight", id="button-llm", variant="gradient"),
+                dmc.ActionIcon(
+                    DashIconify(icon="clarity:settings-line", width=20),
+                    size="lg",
+                    variant="gradient",
+                    id="modal-llm-setting-button",
+                ),
+                dmc.ActionIcon(
+                    DashIconify(icon="clarity:eye-show-line", width=20),
+                    size="lg",
+                    variant="gradient",
+                    id="modal-llm-context-button",
+                ),
+                dmc.Button(
+                    "Generate Insight", id="button-llm", variant="gradient", size="sm"
+                ),
             ],
             justify="center",
-            align="flex-end",
+            align="center",
         ),
         loading_plot1_insight,
         dmc.Space(h="xl"),