import dash
from dash import html, dcc, callback, Output, Input, State
import dash_mantine_components as dmc
import pandas as pd
import os
import tempfile
from utils import prompt, helpers
from gallery_data import GALLERY_DATA
# Initialize the Dash app
app = dash.Dash(__name__, suppress_callback_exceptions=True)
server = app.server
# Define the layout matching design.html
app.layout = dmc.MantineProvider(
html.Div(
[
html.Div(
[
html.Div(className="ribbon a", **{"aria-hidden": "true"}),
html.Div(className="ribbon b", **{"aria-hidden": "true"}),
html.Main(
[
# Header section
html.Header(
[
html.Div(
[
html.Div(className="mark", **{"aria-hidden": "true"}),
html.Div(
[
html.H1("ChaRtBot"),
html.Div(
"AI-assisted data visualization through natural language prompts",
className="sub"
)
]
)
],
className="brand"
),
# Container for tabs and button
html.Div(
[
html.Button(
"New Chart",
id="new-chart-button",
className="pill",
n_clicks=0,
style={
"cursor": "pointer",
"border": "none",
"fontFamily": "inherit"
}
),
# Tab switcher
html.Div(
[
html.Button(
"CREATE",
id="tab-create",
className="tab active",
type="button",
style={
"height": "30px",
"padding": "0 16px",
},
**{
"role": "tab",
"aria-selected": "true"
}
),
html.Button(
"GALLERY",
id="tab-gallery",
className="tab",
type="button",
style={
"height": "30px",
"padding": "0 16px",
},
**{
"role": "tab",
"aria-selected": "false"
}
)
],
className="tabs",
role="tablist",
**{"aria-label": "ChaRtBot pages"}
)
],
style={
"display": "flex",
"alignItems": "center",
"gap": "12px"
}
)
]
),
# Visualizer Page (Form section)
html.Div(
[
# Prompt textarea
html.Div(
[
dcc.Textarea(
id="prompt-textarea",
placeholder='Example: "Create a heatmap of weekly sales by month, highlighting high-volume days"',
style={
"width": "100%",
"height": "120px",
"resize": "none",
"border": "none",
"outline": "none",
"background": "transparent",
"color": "var(--ink)",
"fontSize": "15px",
"lineHeight": "1.55"
}
)
],
className="prompt"
),
# How it works section
html.Div(
[
html.Span("How it works ", style={
"fontSize": "13px",
"color": "#667085",
"fontWeight": "500"
}),
html.Span("ⓘ", id="info-icon", style={
"cursor": "pointer",
"fontSize": "14px",
"color": "#6941C6",
"marginLeft": "2px"
})
],
style={
"marginTop": "8px",
"marginBottom": "16px"
}
),
# Drawer for How it works
dmc.Drawer(
title="How it works",
id="info-drawer",
padding="md",
size="400px",
position="right",
children=[
html.Div([
html.Ol([
html.Li([
html.Strong("Upload and review your data:"),
" Choose a CSV file containing your dataset and take a moment to explore it—understand the columns, data types, and any patterns, filters, or transformations relevant to your analysis."
], style={"marginBottom": "16px"}),
html.Li([
html.Strong("Describe your analytical goal:"),
" Write a natural language prompt that clearly states what you want to analyze and visualize. Reference specific column names and describe how they should be used (e.g., grouping, aggregation, filtering)."
], style={"marginBottom": "16px"}),
html.Li([
html.Strong("Refine your prompt if needed:"),
" If the output isn’t what you expected or an error occurs, adjust your prompt to be more specific or clarify assumptions. Small changes often lead to better results."
], style={"marginBottom": "16px"}),
html.Li([
html.Strong("Review the generated code and chart:"),
" Once the visualization is generated, review the underlying code to ensure it accurately reflects your analytical intent before using or sharing the results."
], style={"marginBottom": "16px"}),
html.Li([
html.Strong("Share or export your results:"),
" Download the visualization as an interactive HTML file to preserve interactivity, or export it as a static image for reports, presentations, or documentation."
], style={"marginBottom": "0px"}),
], style={
"fontSize": "13px",
"lineHeight": "1.6",
"color": "#344054",
"paddingLeft": "20px"
}),
html.Div([
html.H4("Tips for better results:", style={
"fontSize": "13px",
"fontWeight": "600",
"color": "#344054",
"marginTop": "24px",
"marginBottom": "12px"
}),
html.Ul([
html.Li("Mention specific column names from your dataset"),
html.Li("Specify colors, themes, or styling preferences"),
html.Li("Include aggregations or transformations you need"),
html.Li("Be clear about labels, titles, and legends")
], style={
"fontSize": "12px",
"lineHeight": "1.6",
"color": "#475467",
"paddingLeft": "20px"
})
])
])
]
),
# File picker and submit button row
html.Div(
[
html.Div(
[
dmc.Tooltip(
label="Only CSV files are supported",
position="right",
withArrow=True,
children=[
dcc.Upload(
id="upload-data",
children=html.Button(
"Choose file",
className="pickBtn",
type="button",
style={
"height": "40px",
"padding": "0 20px",
"minWidth": "120px",
"fontFamily": "inherit"
}
),
accept=".csv",
multiple=False
)
]
),
html.Div(id="file-name-display", style={"fontSize": "12px", "color": "#475467", "marginTop": "8px"})
],
style={"display": "flex", "alignItems": "center", "gap": "12px"}
),
dcc.Loading(
id="loading",
type="default",
children=html.Button(
"Visualize",
id="submit-button",
className="submitBtn",
type="button",
n_clicks=0,
disabled=True,
style={
"height": "40px",
"padding": "0 20px",
"minWidth": "120px",
"fontFamily": "inherit"
}
)
)
],
className="row"
),
# Output sections
html.A(
"Download Chart as HTML",
id="download-html",
download="chart.html",
href="",
target="_blank",
style={"display": "none", "marginTop": "20px", "textAlign": "right"}
),
html.Div(id="dataset-explorer", style={"marginTop": "10px"}),
html.Div(id="chartbot-output", style={"marginTop": "10px"}),
html.Div(id="python-content-output", style={"marginTop": "10px"}),
# Footer section with notes and disclaimers
html.Div(
[
html.Div(
[
html.H3("Notes and Disclaimers", style={
"fontSize": "12px",
"fontWeight": "600",
"color": "#667085",
"marginBottom": "8px",
"letterSpacing": "0.02em"
}),
html.Ul([
html.Li("AI-generated outputs may contain errors. Users should review their data, prompts, and generated code to verify that visualizations accurately reflect their intended analysis. Human oversight is required before use in decision-making."),
html.Li("ChaRtBot does not store, log, or retain user-provided datasets, prompts, generated code, or visualization outputs. All processing is performed transiently during the active session.")
], style={
"fontSize": "11px",
"color": "#69707D",
"lineHeight": "1.6",
"margin": "0",
"paddingLeft": "16px"
})
],
style={"marginBottom": "20px"}
),
html.Div(
[
html.H3("About this project", style={
"fontSize": "12px",
"fontWeight": "600",
"color": "#667085",
"marginBottom": "8px",
"letterSpacing": "0.02em"
}),
html.P([
"ChaRtBot is a personal project created by Deepa Shalini K to explore AI-assisted data visualization and user-centered analytical workflows."
], style={
"fontSize": "11px",
"color": "#69707D",
"lineHeight": "1.6",
"margin": "0 0 8px 0"
}),
html.P([
html.Strong("Contact: ", style={"fontWeight": "600"}),
html.A("Email", href="mailto:shalini.jul97@gmail.com", target="_blank", style={
"color": "#6941C6",
"textDecoration": "none"
}),
" · ",
html.A("LinkedIn", href="https://www.linkedin.com/in/deepa-shalini-273385193/", target="_blank", style={
"color": "#6941C6",
"textDecoration": "none"
})
], style={
"fontSize": "11px",
"color": "#98A2B3",
"lineHeight": "1.6",
"margin": "0"
})
]
),
html.P("© 2026 Deepa Shalini K. All rights reserved.", style={
"fontSize": "10px",
"color": "#434447",
"textAlign": "center",
"marginTop": "24px",
"marginBottom": "0",
"paddingTop": "20px",
"borderTop": "1px solid #F2F4F7"
})
],
style={
"marginTop": "5px",
"padding": "10px 0 16px 0"
}
),
# Hidden stores for data
dcc.Store(id="stored-data"),
dcc.Store(id="stored-file-name"),
dcc.Store(id="html-buffer")
],
id="visualizer-page",
style={"marginTop": "10px"}
),
# Gallery Page
html.Div(
[
# Gallery page header
html.Section(
html.Div(
[
html.H2("Gallery", style={"margin": "0", "fontSize": "18px", "letterSpacing": "-0.02em"}),
html.P(
"Browse charts generated by ChaRtBot — each card includes the prompt and the original dataset.",
style={"margin": "6px 0 0", "fontSize": "13px", "color": "var(--muted)"}
)
],
className="page-title"
),
className="page-head"
),
# Gallery grid
html.Section(
[
# Generate cards from GALLERY_DATA
*[
html.Article(
[
html.Div(
[
html.Img(
src=item["image"],
alt=f"Chart thumbnail {i+1}"
)
],
className="thumb"
),
html.Div(
[
html.P(
item["prompt"],
className="gallery-prompt"
),
html.Div(
[
html.Div(
[
html.A(
"CSV",
className="link",
href=item["csv_link"],
target="_blank" if item["csv_link"] != "#" else ""
),
html.Span(
item["badge"],
className="badge"
) if item.get("badge") else None
],
className="links"
)
],
className="meta"
)
],
className="content"
)
],
className="gallery-card"
)
for i, item in enumerate(GALLERY_DATA)
]
],
className="gallery-grid",
**{"aria-label": "Gallery grid"}
),
# Copyright footer for gallery page
html.Div(
html.P("© 2026 Deepa Shalini K. All rights reserved.", style={
"fontSize": "10px",
"color": "#434447",
"textAlign": "center",
"marginTop": "20px",
"marginBottom": "0",
"paddingTop": "10px",
"borderTop": "1px solid #F2F4F7"
}),
style={
"marginTop": "10px",
"padding": "0 0 16px 0"
}
)
],
id="gallery-page",
style={"display": "none"}
)
],
className="card",
role="main"
)
],
className="shell"
)
],
className="viewport"
)
)
# Add callback for drawer
@callback(
Output("info-drawer", "opened"),
Input("info-icon", "n_clicks"),
State("info-drawer", "opened"),
prevent_initial_call=True
)
def toggle_drawer(n_clicks, opened):
"""Toggle the info drawer when the info icon is clicked."""
return not opened
# Callback for file upload
@callback(
Output("stored-data", "data"),
Output("stored-file-name", "data"),
Output("file-name-display", "children"),
Output("dataset-explorer", "children"), # Add this output
Input("upload-data", "contents"),
State("upload-data", "filename")
)
def upload_file(contents, filename):
"""Handle CSV file upload and store the data."""
if contents is None:
return None, None, None, None # Add None for dataset-explorer
try:
# Parse the uploaded file
content_type, content_string = contents.split(",")
import base64
import io
decoded = base64.b64decode(content_string)
# Only accept CSV files
if not filename.endswith('.csv'):
return None, None, html.Div("Only CSV files are allowed", style={"color": "red"}), None
# Read CSV file
df = pd.read_csv(io.StringIO(decoded.decode('utf-8')))
# Create AG Grid accordion
grid_accordion = html.Div([
dmc.Accordion(
children=[
dmc.AccordionItem(
[
dmc.AccordionControl(
html.Div([
html.Span("Explore Dataset", style={"fontWeight": "600", "fontSize": "15px"}),
html.Span(f" ({len(df)} rows, {len(df.columns)} columns)",
style={"fontSize": "13px", "color": "#667085", "marginLeft": "8px"})
])
),
dmc.AccordionPanel(
helpers.create_ag_grid(df)
)
],
value="dataset"
)
],
chevronPosition="right",
variant="filled",
style={
"border": "2px solid #E4E7EC",
"borderRadius": "8px",
"boxShadow": "0 1px 3px rgba(0, 0, 0, 0.1)"
}
)
], style={"marginTop": "20px"})
return df.to_dict("records"), filename, html.Div(f"✓ {filename}", style={"color": "#067A55", "fontWeight": "600"}), grid_accordion
except Exception as e:
return None, None, html.Div(f"Error: {str(e)}", style={"color": "red"}), None
# Callback to enable/disable submit button based on inputs
@callback(
Output("submit-button", "disabled", allow_duplicate=True),
Input("prompt-textarea", "value"),
Input("stored-data", "data"),
Input("stored-file-name", "data"),
prevent_initial_call=True
)
def toggle_submit_button(user_prompt, stored_data, filename):
"""Enable submit button only when both prompt and file are provided."""
# Disable button if prompt is empty or file is not uploaded
if not user_prompt or not user_prompt.strip() or not stored_data or not filename:
return True
return False
# Callback for submit button with validation
@callback(
Output("chartbot-output", "children"),
Output("python-content-output", "children"),
Output("download-html", "style"),
Output("html-buffer", "data"),
Output("submit-button", "disabled"),
Input("submit-button", "n_clicks"),
State("prompt-textarea", "value"),
State("stored-data", "data"),
State("stored-file-name", "data"),
prevent_initial_call=True
)
def create_graph(n_clicks, user_prompt, stored_data, filename):
"""Create visualization based on user prompt and uploaded CSV data."""
if n_clicks == 0:
return None, None, {"display": "none"}, None, False
try:
# Validate inputs
if not user_prompt or not user_prompt.strip():
return html.Div([
html.Br(),
dmc.Alert("Please enter a prompt for visualization.", title="Missing Prompt", color="red")
]), None, {"display": "none"}, None, False
if not stored_data or not filename:
return html.Div([
html.Br(),
dmc.Alert("Please upload a CSV file before submitting.", title="Missing File", color="red")
]), None, {"display": "none"}, None, False
# Convert stored data back to DataFrame
df = pd.DataFrame(stored_data)
# Save the dataframe temporarily for processing
temp_dir = tempfile.gettempdir()
temp_file_path = os.path.join(temp_dir, "temp_uploaded_data.csv")
df.to_csv(temp_file_path, index=False)
# Get first 5 rows as CSV string
df_5_rows = df.head(5)
data_top5_csv_string = df_5_rows.to_csv(index=False)
# Get response from LLM
result_output = prompt.get_response(user_prompt, data_top5_csv_string, temp_file_path)
# Display the response - returns 5 values
graph, code, download_style, html_buffer, _ = helpers.display_response(result_output, temp_file_path)
# Extract the Python code from result_output for the accordion
import re
code_block_match = re.search(r"```(?:[Pp]ython)?(.*?)```", result_output, re.DOTALL)
python_code = code_block_match.group(1).strip() if code_block_match else "No code found"
# Create accordion with the generated code
code_accordion = html.Div([
dmc.Accordion(
children=[
dmc.AccordionItem(
[
dmc.AccordionControl(
html.Div([
html.Span("Code Generated", style={"fontWeight": "600", "fontSize": "15px"})
])
),
dmc.AccordionPanel(
html.Div([
html.Div([
dcc.Clipboard(
target_id="code-display",
title="Copy code",
style={
"position": "absolute",
"top": "12px",
"right": "12px",
"fontSize": "18px",
"cursor": "pointer",
"padding": "8px",
"border": "1px solid #d0d5dd",
"borderRadius": "6px",
"display": "inline-flex",
"alignItems": "center",
"justifyContent": "center",
"color": "#475467",
"transition": "all 0.2s",
"zIndex": "10",
"width": "32px",
"height": "32px"
}
)
], style={"position": "relative"}),
html.Pre(
html.Code(
python_code,
id="code-display",
style={
"fontSize": "13px",
"lineHeight": "1.6",
"fontFamily": "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace",
"backgroundColor": "#f6f8fa",
"padding": "16px",
"paddingTop": "48px",
"borderRadius": "6px",
"display": "block",
"overflowX": "auto",
"color": "#24292f"
}
),
style={"margin": "0", "position": "relative"}
)
], style={"position": "relative"})
)
],
value="code"
)
],
chevronPosition="right",
variant="filled",
style={
"border": "2px solid #E4E7EC",
"borderRadius": "8px",
"boxShadow": "0 1px 3px rgba(0, 0, 0, 0.1)"
}
)
])
return graph, code_accordion, {"display": "block", "textAlign": "right", "marginTop": "20px"}, html_buffer, True
except Exception as e:
error_message = str(e)
return html.Div([
html.Br(),
dmc.Alert(error_message, title="Error", color="red")
]), None, {"display": "none"}, None, False
# Callback for download HTML
@callback(
Output("download-html", "href"),
Input("html-buffer", "data")
)
def download_html(encoded):
"""Generate download link for the chart as HTML."""
if encoded:
return f"data:text/html;base64,{encoded}"
return ""
# Callback for New Chat button to reset everything
@callback(
Output("prompt-textarea", "value"),
Output("stored-data", "data", allow_duplicate=True),
Output("stored-file-name", "data", allow_duplicate=True),
Output("file-name-display", "children", allow_duplicate=True),
Output("dataset-explorer", "children", allow_duplicate=True), # Add this output
Output("chartbot-output", "children", allow_duplicate=True),
Output("python-content-output", "children", allow_duplicate=True),
Output("download-html", "style", allow_duplicate=True),
Output("html-buffer", "data", allow_duplicate=True),
Output("submit-button", "disabled", allow_duplicate=True),
Output("upload-data", "contents"),
Input("new-chart-button", "n_clicks"),
prevent_initial_call=True
)
def reset_chat(n_clicks):
"""Reset all inputs and outputs to start a new chat."""
if n_clicks > 0:
return "", None, None, None, None, None, None, {"display": "none"}, None, True, None # Added None for dataset-explorer
return dash.no_update
# Callback for tab switching
@callback(
Output("tab-create", "className"),
Output("tab-gallery", "className"),
Output("visualizer-page", "style"),
Output("gallery-page", "style"),
Output("new-chart-button", "style"),
Input("tab-create", "n_clicks"),
Input("tab-gallery", "n_clicks"),
prevent_initial_call=True
)
def switch_tabs(visualizer_clicks, gallery_clicks):
"""Handle tab switching between Visualizer and Gallery."""
ctx = dash.callback_context
if not ctx.triggered:
return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}, {"cursor": "pointer", "border": "none", "fontFamily": "inherit"}
button_id = ctx.triggered[0]["prop_id"].split(".")[0]
if button_id == "tab-create":
return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}, {"cursor": "pointer", "border": "none", "fontFamily": "inherit"}
elif button_id == "tab-gallery":
return "tab", "tab active", {"display": "none"}, {"marginTop": "10px"}, {"display": "none"}
return "tab active", "tab", {"marginTop": "10px"}, {"display": "none"}, {"cursor": "pointer", "border": "none", "fontFamily": "inherit"}
if __name__ == "__main__":
app.run(debug=False)