download fig as html feature to chartbot-common

pages/ewf_chartbot.py

@@ -28,7 +28,9 @@ layout, df = chartbot_dataset_layout.chartbot_common(
     "ewf-textarea",
     "ewf-submit-button",
     "ewf-chartbot-output",
-    "ewf-python-content-output"
+    "ewf-python-content-output",
+    "ewf-download-html",
+    "ewf-html-buffer"
 )
 
 @callback(
@@ -44,6 +46,8 @@ def update_prompt1_in_textarea(n_clicks1, n_clicks2):
 @callback(
     Output("ewf-chartbot-output", "children"),
     Output("ewf-python-content-output", "children"),
+    Output("ewf-download-html", "style"),
+    Output("ewf-html-buffer", "data"),
     Input("ewf-submit-button", "n_clicks"),
     State("ewf-textarea", "value"),
     prevent_initial_call=True
@@ -54,4 +58,13 @@ def create_graph(_, user_prompt):
 
     result_output = prompt.get_response(user_prompt, data_top5_csv_string, DATA_FILE_PATH)
 
-    return helpers.display_response(result_output, DATA_FILE_PATH)
+    return helpers.display_response(result_output, DATA_FILE_PATH)
+
+@callback(
+    Output("ewf-download-html", "href"),
+    Input("ewf-html-buffer", "data")
+)
+def download_html(encoded):
+    if encoded:
+        return f"data:text/html;base64,{encoded}"
+    return None

utils/chartbot_dataset_layout.py

@@ -14,7 +14,9 @@ def chartbot_common(
         prompt_textarea_id: str,
         submit_button_id: str,
         chartbot_output_id: str,
-        python_content_id: str              
+        python_content_id: str,
+        download_html_button_id: str,
+        html_buffer_id: str              
     ) -> tuple:
     df = pd.read_csv(csv_file_path)
 
@@ -24,6 +26,8 @@ def chartbot_common(
         starter_prompts_list.append(components.button_with_prompt(key, value))
 
     layout = html.Div([
+        dcc.Store(id=html_buffer_id),
+
         dmc.Title(page_title, id="dataset", order=1, style={'fontFamily': 'Helvetica'}),
 
         html.Br(),
@@ -42,13 +46,19 @@ def chartbot_common(
         html.Br(),
 
         dmc.Group([
-            dmc.Textarea(placeholder="Type the prompt here ...", id=prompt_textarea_id, size="lg", w=1470),
+            dmc.Textarea(placeholder="Type the prompt here ...", id=prompt_textarea_id, size="lg", w=1170),
             dmc.Button("Submit", id=submit_button_id, color="#E71316", className="float-end")
         ]),
 
         dbc.Spinner([
             dmc.Text(id="chart", style={"scrollMarginTop": "60px"}),
             html.Div(id=chartbot_output_id),
+            html.A(
+                dmc.Button("Download as HTML", color="#54545C", className="float-end"), 
+                id=download_html_button_id,
+                download="plotly_graph.html",
+                style={"display": "none"}
+            ),
             dmc.Text(id="python-code", style={"scrollMarginTop": "80px"}),
             dcc.Markdown(id=python_content_id)
         ], color="#E71316")       

utils/helpers.py

@@ -6,6 +6,7 @@ from dash import html, dcc
 import io
 import re
 import base64
+from base64 import b64encode
 
 # libraries to help with the Dash app, layout, and callbacks
 import dash_ag_grid as dag
@@ -46,10 +47,17 @@ def display_response(response, file_name):
         cleaned_code = re.sub(r'(?m)^\s*fig\.show\(\)\s*$', '', code_block)
         fig = get_fig_from_code(cleaned_code, file_name)
 
-        return dcc.Graph(figure=fig), response
+        buffer = io.StringIO()
+        fig.write_html(buffer)
+        html_bytes = buffer.getvalue().encode()
+        encoded = b64encode(html_bytes).decode()
+        #print(fig)
+        #print(type(fig))
+
+        return dcc.Graph(figure=fig), response, {"display": "block"}, encoded
     
     else:
-        return "", response
+        return "", response, {"display": "none"}, None
 
 # Function to parse the contents of the uploaded file
 def parse_contents(contents, filename):