Merge pull request #1 from deepa-shalini-k/custom-dev

.gitignore

@@ -8,4 +8,13 @@ __pycache__/
 # ignore environment variables
 .env
 
-design.html
+# ignore old multi-page files (no longer used)
+pages/
+utils/chartbot_dataset_layout.py
+utils/components.py
+
+# ignore design html file
+design.html
+
+# ignore temporary files created
+temp*

README.md

@@ -1 +1,60 @@
-# genai-innovation-challenge-chartbot
+# ChaRtBot - Data Visualization Assistant
+
+A single-page Dash application that helps users visualize their CSV data using natural language prompts powered by AI.
+
+## Features
+
+- **Simple, Clean UI**: Modern design with gradient backgrounds and smooth animations
+- **CSV File Upload**: Easy drag-and-drop or click-to-upload functionality (CSV files only)
+- **Natural Language Prompts**: Describe the visualization you want in plain English
+- **AI-Powered Visualizations**: Automatically generates Plotly charts based on your data and prompts
+- **Download Charts**: Export generated visualizations as standalone HTML files
+- **Error Handling**: Comprehensive error handling for file uploads, API calls, and data processing
+
+## How to Use
+
+1. **Start the App**:
+   ```bash
+   source .venv/bin/activate
+   python app.py
+   ```
+
+2. **Upload Your Data**: Click "Choose file" and select a CSV file
+
+3. **Enter Your Prompt**: Describe the visualization you want, e.g.:
+   - "Create a bar chart showing the top 10 values"
+   - "Make a scatter plot with X vs Y"
+   - "Show me a pie chart of category distribution"
+
+4. **Submit**: Click the Submit button to generate your visualization
+
+5. **Download** (Optional): Download the generated chart as an HTML file
+
+## Technical Details
+
+### Structure
+- **app.py**: Main application file with all callbacks and layout
+- **utils/prompt.py**: LLM integration for generating visualization code
+- **utils/helpers.py**: Helper functions for processing data and displaying results
+- **assets/custom.css**: Custom styling matching the design specifications
+
+### Callbacks
+1. **File Upload**: Validates CSV files, stores data in memory
+2. **Submit**: Validates prompt and data, calls LLM, generates visualizations
+3. **Download**: Provides HTML export functionality
+
+### Error Handling
+- CSV file validation
+- Missing prompt validation
+- Missing file validation
+- API error handling
+- Code execution error handling
+
+## Requirements
+
+See requirements in the Python environment. Main dependencies:
+- Dash
+- Plotly
+- Pandas
+- LangChain (for LLM integration)
+- Dash Mantine Components

app.py

@@ -1,134 +1,750 @@
 import dash
-from dash import html, _dash_renderer
+from dash import html, dcc, callback, Output, Input, State
 import dash_mantine_components as dmc
-import dash_bootstrap_components as dbc
-from dash import dcc, callback, Output, Input
- 
-_dash_renderer._set_react_version("18.2.0")
+import pandas as pd
+from utils import prompt, helpers
+from gallery_data import GALLERY_DATA
 
-from utils import components
+# Initialize the Dash app
+app = dash.Dash(__name__, suppress_callback_exceptions=True)
 
-app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.BOOTSTRAP])
-
-header = dmc.Flex(
+# Define the layout matching design.html
+app.layout = dmc.MantineProvider(
+    html.Div(
     [
-        dmc.Image(
-            src="http://geneaipilot.thermofisher.com/assets/tfs.png",
-            #src=helpers.get_app_file_path("assets", "tfs.png"),
-            h=35, w=185, className="ps-3 position-absolute top-50 start-0 translate-middle-y"
-        ),
-        dmc.Anchor("EmPower.AI", size="xl", fw=530, 
-                                    href="/", underline="never", c="black",
-                                    style={"margin-left": 210},
-                                    className="position-absolute top-50 start-0 translate-middle-y"),
+        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"
+        )
     ],
-    direction={"base": "column", "sm": "row"},
-    gap={"base": "sm", "sm": "lg"},
-    justify={"sm": "center"},
+    className="viewport"
+    )
 )
 
-left_nav_bar = html.Div(
-    [        
-        dcc.Location(id='url', refresh=True),
-        dmc.NavLink(
-            label="Overview",
-            href="/",
-            id="nav-overview"
-        ),
-        dmc.NavLink(
-            label="ChaRtBot",
-            childrenOffset=28,
-            opened=True,
-            children=[
-                dmc.NavLink(label="USA Presidential Elections (1976-2020)", description="Sample dataset", href="/chartbot/us-elections", id="nav-us-elections"),
-                dmc.NavLink(label="English Women's Football Matches (2011-2024)", description="Sample dataset", href="/chartbot/football", id="nav-football"),
-                dmc.NavLink(label="Amazon Purchases 2021 (Sample)", description="Sample dataset", href="/chartbot/amazon-purchases", id="nav-amazon-purchases"),                
-                #dmc.NavLink(label="Space Missions (2000-2022)", description="Sample dataset", href="/chartbot/space-missions", id="nav-space-missions"),                
-                dmc.NavLink(label="Upload your data", href="/chartbot", id="nav-upload"),
-            ],
-        ),
-        dmc.NavLink(
-            label="Product roadmap",
-            href="/product-roadmap",
-            id="nav-roadmap",
-        ),
-        dmc.NavLink(
-            label="FAQs",
-            href="/faqs",
-            id="nav-faqs",
-        )
-    ], 
-    id="navbar",
-    style={"width": 240, "margin-top": 10, "margin-left": 10, "font-weight": "bold"}
+# 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
 
-aside = html.Div(
-    [
-        dmc.Title("On this page", order=4, style={'padding-bottom': 10, "fontFamily": "Helvetica"}),
-        components.aside_link("Dataset", "#dataset", "bx:data"),
-        components.aside_link("Chart", "#chart", "healthicons:chart-line"),
-        components.aside_link("Python code", "#python-code", "ph:code")
-    ], style={"padding-top": 100, "margin-left": 50}
+# 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
 
-app_shell = dmc.AppShell(
-    [
-        dcc.Location(id='current-page'),
-        dmc.AppShellHeader(header),
-        dmc.AppShellNavbar(left_nav_bar),
-        dmc.AppShellAside(aside, id="shell-aside", withBorder=False),
-        dmc.AppShellMain([dash.page_container]),
-    ],
-    header={"height": 70},
-    padding="xl",
-    navbar={
-        "width": 260,
-        "breakpoint": "sm",
-        "collapsed": {"mobile": True},
-    },
-    aside={
-        "width": 300,
-        "breakpoint": "xl",
-    },
-    id="app-shell"
+# 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
+        import os
+        temp_file_path = os.path.join(os.getcwd(), "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"})
+                            )
 
-app.layout = dmc.MantineProvider([app_shell])
+                        ],
+                        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("app-shell", "aside"),
-    Input("current-page", "pathname")
+    Output("download-html", "href"),
+    Input("html-buffer", "data")
 )
-def toggle_aside(pathname):
-    if pathname == "/":
-        return {"width": 0}
-    return {"width": 300}
+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("nav-overview", "style"),
-    Output("nav-us-elections", "style"),
-    Output("nav-football", "style"),
-    Output("nav-amazon-purchases", "style"),
-    #Output("nav-space-missions", "style"),
-    Output("nav-upload", "style"),
-    Output("nav-roadmap", "style"),
-    Output("nav-faqs", "style"),
-    Input("url", "pathname")
+    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 update_navlink_styles(pathname):
-    style = {"backgroundColor": "#FFFFFF"}
-    active_style = {"backgroundColor": "#EEEEEE"}
+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
 
-    return [
-        active_style if pathname == "/" else style,
-        active_style if pathname == "/chartbot/us-elections" else style,
-        active_style if pathname == "/chartbot/football" else style,
-        active_style if pathname == "/chartbot/amazon-purchases" else style,
-        #active_style if pathname == "/chartbot/space-missions" else style,
-        active_style if pathname == "/chartbot" else style,
-        active_style if pathname == "/product-roadmap" else style,
-        active_style if pathname == "/faqs" else style
-    ]
+# 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)

assets/custom.css

@@ -1,8 +1,464 @@
-.app-title {
-    font-size: 3em;
-    font-family: Helvetica;
+/* Import Manrope font */
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
+
+:root {
+  --bg: #F7F8FB;
+  --card: #FFFFFF;
+  --ink: #101828;
+  --muted: #475467;
+  --border: #E4E7EC;
+  --cobalt: #2563EB;
+  --mint: #10B981;
+  --wash-blue: #EEF4FF;
+  --wash-green: #ECFDF3;
+  --shadow: 0 18px 60px rgba(16, 24, 40, .10);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  color: var(--ink);
+  background:
+    radial-gradient(900px 600px at 18% 18%, rgba(37, 99, 235, .10), transparent 60%),
+    radial-gradient(900px 600px at 82% 22%, rgba(16, 185, 129, .10), transparent 62%),
+    linear-gradient(180deg, var(--bg), #FFFFFF);
+}
+
+.viewport {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 28px 16px;
+}
+
+.shell {
+  width: min(1400px, 85vw);
+  position: relative;
+}
+
+.ribbon {
+  position: absolute;
+  width: 320px;
+  height: 140px;
+  border-radius: 999px;
+  filter: blur(28px);
+  opacity: .55;
+  pointer-events: none;
+}
+
+.ribbon.a {
+  top: -40px;
+  left: -40px;
+  background: rgba(37, 99, 235, .22);
+}
+
+.ribbon.b {
+  bottom: -50px;
+  right: -30px;
+  background: rgba(16, 185, 129, .22);
+}
+
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 26px;
+  box-shadow: var(--shadow);
+  padding: 26px;
+}
+
+header {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+
+/* Tab switcher styles */
+.tabs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px;
+  background: rgba(255, 255, 255, 0.70);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.05);
+}
+
+.tab {
+  border: 0;
+  background: transparent;
+  padding: 10px 14px;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(15, 23, 42, 0.70);
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.2s ease;
+}
+
+.tab:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
+}
+
+.tab.active {
+  color: #0b2a7a;
+  background: linear-gradient(180deg, rgba(47, 107, 255, 0.18), rgba(47, 107, 255, 0.08));
+  border: 1px solid rgba(47, 107, 255, 0.22);
+}
+
+.tab:hover:not(.active) {
+  background: rgba(47, 107, 255, 0.05);
+}
+
+.brand {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  min-width: 260px;
+}
+
+.mark {
+  width: 44px;
+  height: 44px;
+  border-radius: 16px;
+  background:
+    radial-gradient(14px 14px at 30% 30%, rgba(255, 255, 255, .9), transparent 60%),
+    linear-gradient(135deg, var(--cobalt), var(--mint));
+  box-shadow: 0 14px 30px rgba(37, 99, 235, .18);
+  flex: 0 0 auto;
+}
+
+h1 {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.sub {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 13.5px;
+  line-height: 1.5;
+  max-width: 62ch;
+}
+
+.pill {
+  border: 1px solid rgba(37, 99, 235, .22);
+  background: var(--wash-blue);
+  color: #1D4ED8;
+  border-radius: 999px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.prompt {
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, var(--wash-blue), transparent 70%),
+    #fff;
+  padding: 14px;
+}
+
+.row {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+
+.pickBtn {
+  border: 1px solid rgba(37, 99, 235, .18);
+  background: var(--wash-blue);
+  color: #1D4ED8;
+  border-radius: 14px;
+  padding: 10px 12px;
+  cursor: pointer;
+  font-weight: 800;
+  font-size: 12px;
+  letter-spacing: .06em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: transform .12s ease, filter .12s ease;
+  user-select: none;
+}
+
+.pickBtn:hover {
+  filter: brightness(.99);
+}
+
+.pickBtn:active {
+  transform: translateY(1px);
+}
+
+.submitBtn {
+  border: none;
+  border-radius: 16px;
+  padding: 12px 16px;
+  cursor: pointer;
+  font-weight: 900;
+  color: #fff;
+  background: linear-gradient(135deg, var(--cobalt), #1D4ED8);
+  box-shadow: 0 14px 30px rgba(37, 99, 235, .22);
+  transition: transform .12s ease, filter .12s ease;
+  flex: 0 0 auto;
+}
+
+.submitBtn:hover {
+  filter: brightness(.98);
+}
+
+.submitBtn:active {
+  transform: translateY(1px);
+}
+
+.submitBtn:disabled {
+  background: linear-gradient(135deg, #94A3B8, #CBD5E1);
+  box-shadow: none;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.submitBtn:disabled:hover {
+  filter: none;
+  transform: none;
+}
+
+.submitBtn:disabled:active {
+  transform: none;
+}
+
+.icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+.icon-blue path {
+  stroke: #1D4ED8;
+}
+
+@media (max-width: 560px) {
+  .row {
+    align-items: stretch;
+  }
+  .submitBtn {
+    width: 100%;
+  }
+}
+
+/* Gallery Page Styles */
+.page-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 8px 10px 14px;
+}
+
+.page-title h2 {
+  margin: 0;
+  font-size: 18px;
+  letter-spacing: -0.02em;
+}
+
+.page-title p {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* Gallery grid: 5 rows x 4 columns = 20 items */
+.gallery-grid {
+  margin: 8px 6px 0;
+  padding: 14px 10px 8px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+/* Gallery Cards */
+.gallery-card {
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
+  overflow: hidden;
+  position: relative;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  display: flex;
+  flex-direction: column;
+  min-height: 250px;
+}
+
+.gallery-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(47, 107, 255, 0.18);
+  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.12);
+}
+
+.gallery-card:focus-within {
+  box-shadow: 0 0 0 4px rgba(31, 209, 192, 0.14), 0 18px 44px rgba(16, 24, 40, 0.12);
+}
+
+/* Thumbnail area */
+.thumb {
+  aspect-ratio: 1 / 1;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+  background:
+    radial-gradient(260px 120px at 20% 30%, rgba(79, 172, 254, 0.25), transparent 60%),
+    radial-gradient(260px 120px at 80% 40%, rgba(31, 209, 192, 0.18), transparent 62%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.thumb img {
+  width: 92%;
+  height: 88%;
+  object-fit: contain;
+  border-radius: 14px;
+  border: 1px solid rgba(15, 23, 42, 0.10);
+  box-shadow: 0 12px 22px rgba(16, 24, 40, 0.10);
+  background: white;
+}
+
+/* Badge/Chip styling */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: #2f6bff;
+  background: rgba(47, 107, 255, 0.1);
+  border: 1px solid rgba(47, 107, 255, 0.2);
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+/* Content */
+.content {
+  padding: 12px 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+}
+
+.gallery-prompt {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.35;
+  color: rgba(15, 23, 42, 0.78);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  min-height: calc(1.35em * 3);
+}
+
+.meta {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.links {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: rgba(15, 23, 42, 0.74);
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.75);
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+
+.link:hover {
+  border-color: rgba(47, 107, 255, 0.22);
+  color: rgba(11, 42, 122, 0.95);
+}
+
+.link:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
+}
+
+.kebab {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.75);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: border-color 0.15s ease;
+  font-size: 18px;
+  line-height: 1;
+  color: rgba(15, 23, 42, 0.74);
+}
+
+.kebab:hover {
+  border-color: rgba(15, 23, 42, 0.18);
+}
+
+.kebab:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
+}
+
+/* Responsive gallery grid */
+@media (max-width: 1200px) {
+  .gallery-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 980px) {
+  .gallery-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-body, a, h1, h2, h3, h4, h5, h6  {
-    font-family: Helvetica;
+@media (max-width: 680px) {
+  .gallery-grid {
+    grid-template-columns: 1fr;
+  }
 }

assets/example_dumbbell_chart.txt

@@ -0,0 +1,61 @@
+import plotly.graph_objects as go
+import pandas as pd
+
+# Sample data for dumbbell chart
+countries = ['Country A', 'Country B', 'Country C', 'Country D', 'Country E']
+year_1952 = [65, 68, 70, 72, 75]
+year_2002 = [72, 76, 78, 80, 82]
+
+# Prepare line coordinates for connecting dots
+line_x = []
+line_y = []
+for i, country in enumerate(countries):
+    line_x.extend([year_1952[i], year_2002[i], None])
+    line_y.extend([country, country, None])
+
+# Create dumbbell chart
+fig = go.Figure(
+    data=[
+        # Add connecting lines
+        go.Scatter(
+            x=line_x,
+            y=line_y,
+            mode='markers+lines',
+            showlegend=False,
+            marker=dict(
+                symbol="arrow",
+                color="black",
+                size=16,
+                angleref="previous",
+                standoff=8
+            )
+        ),
+        # Add first year markers
+        go.Scatter(
+            x=year_1952,
+            y=countries,
+            mode='markers',
+            name='1952',
+            marker=dict(color='green', size=10)
+        ),
+        # Add second year markers
+        go.Scatter(
+            x=year_2002,
+            y=countries,
+            mode='markers',
+            name='2002',
+            marker=dict(color='blue', size=10)
+        ),
+    ]
+)
+
+# Update layout
+fig.update_layout(
+    title='Comparison Between Two Years',
+    height=800,
+    plot_bgcolor='white',
+    legend_itemclick=False
+)
+
+# Show the figure
+fig.show()

assets/example_polar_bar.txt

@@ -0,0 +1,121 @@
+import pandas as pd
+import numpy as np
+import plotly.graph_objects as go
+
+# Sample data for demonstration (full year 2024)
+data = {
+    'date': pd.date_range('2024-01-01', periods=365, freq='D'),
+    'value': np.random.randint(50, 200, 365)
+}
+df = pd.DataFrame(data)
+
+# Extract calendar components
+df['month'] = df['date'].dt.month  # 1..12
+# Convert pandas weekday (Monday=0..Sunday=6) to Sun=0..Sat=6
+df['weekday_sun0'] = (df['date'].dt.dayofweek + 1) % 7
+
+# Aggregate values by month x weekday
+agg = (
+    df.groupby(['month', 'weekday_sun0'], as_index=False)['value']
+    .sum()
+    .rename(columns={'value': 'total_value'})
+)
+
+# Ensure all 12x7 cells exist (fill missing with 0)
+full = pd.MultiIndex.from_product(
+    [range(1, 13), range(0, 7)],
+    names=['month', 'weekday_sun0']
+).to_frame(index=False)
+agg = full.merge(agg, on=['month', 'weekday_sun0'], how='left').fillna({'total_value': 0.0})
+
+# Labels for months and weekdays
+month_labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+weekday_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+agg['month_name'] = agg['month'].map(lambda m: month_labels[m-1])
+agg['weekday_name'] = agg['weekday_sun0'].map(lambda w: weekday_labels[w])
+
+# Polar "cell" geometry
+# Each month occupies a 30-degree sector (360/12 = 30)
+month_width = 360 / 12
+agg['theta'] = (agg['month'] - 1) * month_width  # 0, 30, 60, ..., 330 (Jan at 0)
+agg['width'] = month_width  # sector width
+agg['base'] = agg['weekday_sun0']  # ring start (0..6)
+agg['r'] = 1  # ring thickness (each weekday is one ring)
+
+# Bin values into 5 categories for color coding
+s = agg['total_value'].astype(float)
+nonzero = s[s > 0]
+
+if nonzero.empty:
+    agg['bin'] = 'All zero'
+    bin_labels = ['All zero']
+else:
+    # Quantile binning on non-zero values
+    binned_nz = pd.qcut(nonzero, q=5, duplicates='drop')
+    intervals = binned_nz.cat.categories
+    bin_labels = [f'{iv.left:,.0f}–{iv.right:,.0f}' for iv in intervals]
+    
+    nz_labels = pd.Series(binned_nz.astype(str), index=nonzero.index)
+    interval_to_label = {str(iv): lbl for iv, lbl in zip(intervals, bin_labels)}
+    nz_labels = nz_labels.map(interval_to_label)
+    
+    agg['bin'] = '0'  # default for zeros
+    agg.loc[nonzero.index, 'bin'] = nz_labels.values
+    bin_labels = ['0'] + bin_labels
+
+# Color palette (5 colors)
+palette = ['#edf8fb', '#b2e2e2', '#66c2a4', '#2ca25f', '#006d2c']
+unique_bins = [b for b in bin_labels if b in agg['bin'].unique()]
+colors = palette[:max(1, len(unique_bins))]
+color_map = dict(zip(unique_bins, colors))
+
+# Build figure with one Barpolar trace per bin
+fig = go.Figure()
+
+for b in unique_bins:
+    sub = agg[agg['bin'] == b]
+    fig.add_trace(go.Barpolar(
+        theta=sub['theta'],
+        r=sub['r'],
+        base=sub['base'],
+        width=sub['width'],
+        name=b,
+        marker_color=color_map[b],
+        marker_line_width=0,  # removes gaps between cells
+        hovertemplate=(
+            'Month: %{customdata[0]}<br>'
+            'Weekday: %{customdata[1]}<br>'
+            'Value: %{customdata[2]:,.2f}<extra></extra>'
+        ),
+        customdata=np.stack([sub['month_name'], sub['weekday_name'], sub['total_value']], axis=1),
+    ))
+
+# Radial ticks placed at ring centers (0.5..6.5)
+tickvals = [i + 0.5 for i in range(7)]
+
+fig.update_layout(
+    title='Circular Calendar View - Monthly Values by Weekday (2024)',
+    template='plotly_white',
+    margin=dict(l=40, r=40, t=70, b=40),
+    polar=dict(
+        angularaxis=dict(
+            direction='clockwise',
+            rotation=90,  # puts theta=0 (Jan) at top
+            tickmode='array',
+            tickvals=[i * month_width for i in range(12)],
+            ticktext=month_labels,
+        ),
+        radialaxis=dict(
+            range=[0, 7],
+            tickmode='array',
+            tickvals=tickvals,
+            ticktext=weekday_labels,  # Sun..Sat
+            showline=False,
+            gridcolor='rgba(0,0,0,0.12)',
+        ),
+    ),
+    legend_title_text='Value (binned)',
+)
+
+fig.show()

assets/example_polar_scatter.txt

@@ -0,0 +1,104 @@
+import pandas as pd
+import numpy as np
+import plotly.express as px
+
+# Sample data for demonstration (full year 2024)
+data = {
+    'date': pd.date_range('2024-01-01', periods=365, freq='D'),
+    'value': np.random.randint(50, 200, 365)
+}
+df = pd.DataFrame(data)
+
+# Extract calendar components
+df['month'] = df['date'].dt.month  # 1..12
+# Convert pandas weekday (Monday=0..Sunday=6) to Sun=0..Sat=6
+df['weekday_sun0'] = (df['date'].dt.dayofweek + 1) % 7
+
+# Aggregate values by month x weekday
+agg = (
+    df.groupby(['month', 'weekday_sun0'], as_index=False)['value']
+    .sum()
+    .rename(columns={'value': 'total_value'})
+)
+
+# Ensure all 12x7 cells exist (fill missing with 0)
+full = pd.MultiIndex.from_product(
+    [range(1, 13), range(0, 7)],
+    names=['month', 'weekday_sun0']
+).to_frame(index=False)
+agg = full.merge(agg, on=['month', 'weekday_sun0'], how='left').fillna({'total_value': 0.0})
+
+# Labels for months and weekdays
+month_labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+weekday_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+agg['month_name'] = agg['month'].map(lambda m: month_labels[m-1])
+agg['weekday_name'] = agg['weekday_sun0'].map(lambda w: weekday_labels[w])
+
+# Rings: 1..7 (Sun=1 inner → Sat=7 outer)
+agg['r'] = agg['weekday_sun0'] + 1
+
+# Bubble size normalization (log1p compresses large values; then scale to pixel range)
+max_marker_px = 42
+min_marker_px = 6
+
+s = agg['total_value'].to_numpy(dtype=float)
+s_log = np.log1p(s)
+
+if np.allclose(s_log.max(), s_log.min()):
+    agg['size_px'] = min_marker_px
+else:
+    # Scale log values to [min_marker_px, max_marker_px]
+    scaled = (s_log - s_log.min()) / (s_log.max() - s_log.min())
+    agg['size_px'] = min_marker_px + scaled * (max_marker_px - min_marker_px)
+
+# Sizeref for area sizing
+sizeref = 2.0 * agg['size_px'].max() / (max_marker_px ** 2)
+
+# Build polar scatter chart
+fig = px.scatter_polar(
+    agg,
+    r='r',
+    theta='month_name',
+    size='size_px',
+    size_max=max_marker_px,
+    color='total_value',
+    color_continuous_scale='Viridis',
+    hover_data={
+        'month_name': True,
+        'weekday_name': True,
+        'total_value': ':,.2f',
+        'r': False,
+        'size_px': False,
+        'month': False,
+        'weekday_sun0': False,
+    },
+    title='Circular Calendar View - Monthly Values by Weekday (2024)',
+)
+
+# Force area sizing behavior
+fig.update_traces(marker=dict(sizemode='area', sizeref=sizeref, line=dict(width=0.6)))
+
+# Clockwise months, start Jan at top
+fig.update_layout(
+    polar=dict(
+        angularaxis=dict(
+            direction='clockwise',
+            rotation=90,  # puts Jan at the top
+        ),
+        radialaxis=dict(
+            tickmode='array',
+            tickvals=list(range(1, 8)),
+            ticktext=weekday_labels,  # Sun..Sat
+            range=[0.5, 7.5],
+            showline=False,
+            gridcolor='rgba(0,0,0,0.12)',
+        ),
+    ),
+    coloraxis_colorbar=dict(title='Value'),
+    template='plotly_white',
+    margin=dict(l=40, r=40, t=70, b=40),
+    height=800,
+)
+
+fig.show()

data/1976-2020_president.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f6cb9143a67bdbfa805810e069027f677f56a0765b00e10ea50b7d1a70e45bb5
-size 509865

data/ewf_appearances.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:448f2700a84da26347970f2d97f957b13b484c77112f988e1f7f0b58e4c3a66a
-size 481873

data/space_missions_data.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f95e3afab4a0ea4050125d838381771d700a18e5ae759675b133f9933f858958
-size 137506

gallery_data.py

@@ -0,0 +1,79 @@
+"""
+Gallery data configuration for ChaRtBot
+Add new gallery items by appending to the GALLERY_DATA list
+"""
+
+GALLERY_DATA = [
+    {
+        "image": "/assets/gallery/1_image.png",
+        "prompt": "Create an Animated Choropleth map of the USA displaying state-wise percentage of votes for DEMOCRAT in all the years.",
+        "csv_link": "/assets/gallery/datasets/1976-2020_president.csv",
+        "badge": "Animated choropleth"
+    },
+    {
+        "image": "/assets/gallery/2_image.png",
+        "prompt": "Create a Manhattan-style plot where purchases are grouped along the x-axis by Category, with each point representing an Order_Value. Alternate colours by Category so each group forms its own block, highlighting large spending spikes.",
+        "csv_link": "/assets/gallery/datasets/amazon-purchases-2021-sample-5k.csv",
+        "badge": "Manhattan"
+    },
+    {
+        "image": "/assets/gallery/3_image.png",
+        "prompt": "Create a sunburst chart showing the launch ecosystem hierarchy for the year 2005 Use Company as the first level, Rocket as the second level, Mission as the third level, and MissionStatus as the outer level.",
+        "csv_link": "/assets/gallery/datasets/space_missions_data.csv",
+        "badge": "Hierarchical"
+    },
+    {
+        "image": "/assets/gallery/4_image.png",
+        "prompt": "Create a Sankey diagram where the flow goes from Team → Match Result where: - Source nodes are team_name - Target nodes are result Aggregate the number of matches for each team–opponent–result flow. For readability, limit the visualization to teams with the highest total match counts.",
+        "csv_link": "/assets/gallery/datasets/ewf_appearances.csv",
+        "badge": "Flow"
+    },
+    {
+        "image": "/assets/gallery/5_image.png",
+        "prompt": "Create a calendar-like circular gold price chart for the year 2020, wherein going clock-wise on the chart will move from Jan -> Dec. Each month shall have a number of bars equal to the number of days in that month. The length of each bar will represent the price of gold on that day. Use a mustard colour for all the bars.",
+        "csv_link": "/assets/gallery/datasets/gold prices.csv",
+        "badge": "Circular"
+    },
+    {
+        "image": "/assets/gallery/6_image.png",
+        "prompt": "Depict the sum of the purchase amount per day of the week using a heatmap. The X-axis should represent the months, labeled with month names, and the Y-axis should represent the days of the week. Use colour to depict the purchase amounts, with the X-axis ordered chronologically by both days and months.",
+        "csv_link": "/assets/gallery/datasets/amazon-purchases-2021-sample-5k.csv",
+        "badge": "Heatmap"
+    },
+    {
+        "image": "/assets/gallery/7_image.png",
+        "prompt": "Create a total of four visualizations, (2 rows, 2 columns) which display: 1. Top 5 Categories by Quantity 2. Top 5 Categories by Price 3. Average Purchase Price per State (USA choropleth map) 4. State-wise Quantity Distribution (USA choropleth map)",
+        "csv_link": "/assets/gallery/datasets/amazon-purchases-2021-sample-5k.csv",
+        "badge": "Subplots"
+    },
+    {
+        "image": "/assets/gallery/8_image.png",
+        "prompt": "Create a candle-stick chart of gold prices in the year 2020, add a column named 'Ticker' and make sure all the values in this column are 'Gold'.",
+        "csv_link": "/assets/gallery/datasets/gold prices.csv",
+        "badge": "Financial"
+    },
+    {
+        "image": "/assets/gallery/9_image.png",
+        "prompt": "Create a bubble chart that visualizes rocket launch prices over the years Use Date on the x-axis and Price on the y-axis. Size each bubble by Price to reflect the relative cost of each mission. colour the bubbles by Company. Ensure bubbles are semi-transparent to avoid overlap issues. Add detailed hover tooltips showing Company, Rocket, Mission, Location, MissionStatus, and Price.",
+        "csv_link": "/assets/gallery/datasets/space_missions_data.csv",
+        "badge": "Bubble"
+    },
+    {
+        "image": "/assets/gallery/10_image.png",
+        "prompt": "Create an animated bubble chart where Categories are represented as bubbles that grow, shrink, and gently reposition over time based on total Order_Value, revealing how category importance changes month by month.",
+        "csv_link": "/assets/gallery/datasets/amazon-purchases-2021-sample-5k.csv",
+        "badge": "Animated bubbles"
+    },
+    {
+        "image": "/assets/gallery/11_image.png",
+        "prompt": "Create a calendar-like circular gold price chart for the year 2020, wherein going clock-wise on the chart will move from Jan -> Dec. Each month shall have a number of bars equal to the number of days in that month. Colour of each bar: Based on the price of gold on that day. Length of each bar: Equal to the day of the month.",
+        "csv_link": "/assets/gallery/datasets/gold prices.csv",
+        "badge": "Circular"
+    },
+    {
+        "image": "/assets/gallery/12_image.png",
+        "prompt": "Create a dumbbell chart showing the teams' scores over the years. Each team shall have only two data points in their dumbbells, the first point and the last. Each point must be a sum of goals scored by the team in the specific season. Use blue colour for the first point and red for the second point in the dumbbell. In the tooltips show the following information: - Team name - Score - Season - Year",
+        "csv_link": "/assets/gallery/datasets/ewf_appearances.csv",
+        "badge": "Dumbbell"
+    }
+]

pages/amazon_purchases_chartbot.py

@@ -1,97 +0,0 @@
-import dash
-from dash import callback, Input, Output, State, ctx, html
-import dash_mantine_components as dmc
-
-from utils import chartbot_dataset_layout, prompt, helpers
-
-dash.register_page(__name__, path='/chartbot/amazon-purchases', name="Amazon Purchases 2021 (Sample)", order=4)
-
-DATA_FILE_PATH = helpers.get_app_file_path("data", "amazon-purchases-2021-sample-5k.csv")
-
-BUTTON_PROMPT1_ID = "amazon-purchases-prompt1"
-BUTTON_PROMPT2_ID = "amazon-purchases-prompt2"
-SUBMIT_BUTTON_ID = "amazon-purchases-submit-button"
-
-STARTER_PROMPTS_DICTIONARY = {
-    BUTTON_PROMPT1_ID: {
-        "label": "Purchase amount per day of the week",
-        "text": "Depict the sum of the purchase amount per day of the week using a heatmap. The X-axis should represent the months, labeled with month names, and the Y-axis should represent the days of the week. Use color to depict the purchase amounts, with the X-axis ordered chronologically by both days and months."
-    },
-    BUTTON_PROMPT2_ID: {
-        "label": "General trends",
-        "text": """Create a total of four visualizations, (2 rows, 2 columns) which display:
-1. Top 5 Categories by Quantity
-2. Top 5 Categories by Price
-3. Average Purchase Price per State
-4. State-wise Quantity Distribution
-"""
-    }
-}
-
-layout, df = chartbot_dataset_layout.chartbot_common(
-    "Amazon Purchases 2021 (Sample)",
-    DATA_FILE_PATH,
-    {key: value["label"] for key, value in STARTER_PROMPTS_DICTIONARY.items()},
-    "amazon-purchases-textarea",
-    SUBMIT_BUTTON_ID,
-    "amazon-purchases-chartbot-output",
-    "amazon-purchases-python-content-output",
-    "amazon-purchases-download-html",
-    "amazon-purchases-html-buffer"
-)
-
-@callback(
-    Output("amazon-purchases-textarea", "value"),
-    Input("amazon-purchases-prompt1", "n_clicks"),
-    Input("amazon-purchases-prompt2", "n_clicks")
-)
-def update_prompt1_in_textarea(n_clicks1, n_clicks2):
-    if n_clicks1 or n_clicks2:
-        button_clicked = ctx.triggered_id
-        return STARTER_PROMPTS_DICTIONARY[button_clicked]["text"]
-    
-@callback(
-    Output(SUBMIT_BUTTON_ID, "loading", allow_duplicate=True),
-    Input(SUBMIT_BUTTON_ID, "n_clicks"),
-    prevent_initial_call=True
-)
-def update_submit_loading(n_clicks):
-    if n_clicks != None:
-        return True
-    else:
-        return False
-    
-@callback(
-    Output("amazon-purchases-chartbot-output", "children"),
-    Output("amazon-purchases-python-content-output", "children"),
-    Output("amazon-purchases-download-html", "style"),
-    Output("amazon-purchases-html-buffer", "data"),
-    Output(SUBMIT_BUTTON_ID, "loading"),
-    Input(SUBMIT_BUTTON_ID, "n_clicks"),
-    State("amazon-purchases-textarea", "value"),
-    prevent_initial_call=True
-)
-def create_graph(_, user_prompt):
-    try:
-        df_5_rows = df.head(5)
-        data_top5_csv_string = df_5_rows.to_csv(index=False)
-
-        result_output = prompt.get_response(user_prompt, data_top5_csv_string, DATA_FILE_PATH)
-
-        return helpers.display_response(result_output, DATA_FILE_PATH)
-    
-    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(
-    Output("amazon-purchases-download-html", "href"),
-    Input("amazon-purchases-html-buffer", "data")
-)
-def download_html(encoded):
-    if encoded:
-        return f"data:text/html;base64,{encoded}"
-    return None

pages/chartbot.py

@@ -1,140 +0,0 @@
-import dash
-from dash_iconify import DashIconify
-import dash_mantine_components as dmc
-from dash import html, dcc, callback, Input, Output, State
-
-import pandas as pd
-from utils import prompt, helpers
-
-dash.register_page(__name__, path='/chartbot', name="ChaRtBot", order=6)
-
-UPLOAD_COMPONENT_STYLE = {
-                            'width': '100%',
-                            'height': '60px',
-                            'lineHeight': '60px',
-                            'borderColor': '#A5A5AE',
-                            'borderWidth': '1px',
-                            'borderStyle': 'dashed',
-                            'borderRadius': '10px',
-                            'textAlign': 'center',
-                            'marginTop': '10px',
-                            'fontFamily': 'Helvetica',
-                            'fontWeight': 'bold',
-                        }
-
-layout = html.Div([
-    dcc.Store(id="html-buffer"),
-
-    dmc.Title("Upload your data", id="dataset", order=1, style={'fontFamily': 'Helvetica'}),
-
-    dcc.Upload(
-        id='upload-data',
-        children=html.Div([
-            DashIconify(icon="icon-park-outline:upload-two", color="#70707A", height=40),
-            html.A("Select a file", style={"text-decoration": "none", "color": "#0092F3"}),
-            " or drag and drop here"
-        ]),
-        style=UPLOAD_COMPONENT_STYLE,
-        accept=".csv, .xls", multiple=True
-    ),
-
-    html.Br(),
-
-    html.Div(id='output-grid'),
-
-    dmc.Group([
-        dmc.Textarea(placeholder="Type the prompt here ...", id="textarea", size="lg", w=1170),
-        dmc.Button("Submit", id="submit-button", color="#E71316", className="float-end")
-    ]),
-
-    dmc.Text(id="chart", style={"scrollMarginTop": "60px"}),
-    html.Div(id="chartbot-output"),
-    html.A(
-        dmc.Tooltip(
-            multiline=True,
-            w=200,
-            label="""Download the visualization as an HTML file.
-            The downloaded file can then be opened in a web browser to view the visualization.
-            It can also be embedded in a SharePoint site and shared with others in your team.""",
-            position="right",
-            withArrow=True,
-            arrowSize=6,
-            children=[dmc.Button("Download as HTML", color="#54545C")],
-            className="float-end"
-        ),
-        id="download-html",
-        download="plotly_graph.html",
-        style={"display": "none"}
-    ),
-    dmc.Text(id="python-code", style={"scrollMarginTop": "80px"}),
-    dcc.Markdown(id="python-content-output")
-])
-
-@callback(
-    Output("output-grid", "children"),
-    Input("upload-data", "contents"),
-    State("upload-data", "filename")
-)
-def update_grid(list_of_contents, list_of_names):
-    if list_of_contents is not None:
-        children = [
-            helpers.parse_contents(c, n) for c, n in 
-            zip(list_of_contents, list_of_names)
-        ]
-
-        return children
-    
-@callback(
-    Output("submit-button", "loading", allow_duplicate=True),
-    Input("submit-button", "n_clicks"),
-    prevent_initial_call=True
-)
-def update_submit_loading(n_clicks):
-    if n_clicks != None:
-        return True
-    else:
-        return False
-    
-@callback(
-    Output("chartbot-output", "children"),
-    Output("python-content-output", "children"),
-    Output("download-html", "style"),
-    Output("html-buffer", "data"),
-    Output("submit-button", "loading"),
-    Input("submit-button", "n_clicks"),
-    State("textarea", "value"),
-    State("stored-data", "data"),
-    State("stored-file-name", "data"),
-    prevent_initial_call=True
-)
-def create_graph(n_clicks, user_prompt, file_data, file_name):
-    if n_clicks is None:
-        return dash.no_update, dash.no_update, dash.no_update, dash.no_update, dash.no_update
-    
-    else:
-        try:
-            df = pd.DataFrame(file_data)
-            df_5_rows = df.head(5)
-            data_top5_csv_string = df_5_rows.to_csv(index=False)
-
-            helpers.save_dataframe_to_current_path(df, file_name)
-
-            result_output = prompt.get_response(user_prompt, data_top5_csv_string, file_name)
-
-            return helpers.display_response(result_output, file_name)
-        
-        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(
-    Output("download-html", "href"),
-    Input("html-buffer", "data")
-)
-def download_html(encoded):
-    if encoded:
-        return f"data:text/html;base64,{encoded}"
-    return None

pages/ewf_chartbot.py

@@ -1,95 +0,0 @@
-import dash
-from dash import callback, Input, Output, State, ctx, html
-import dash_mantine_components as dmc
-
-from utils import chartbot_dataset_layout, prompt, helpers
-
-dash.register_page(__name__, path='/chartbot/football', name="English Women's Football Matches (2011-2024)", order=3)
-
-DATA_FILE_PATH = helpers.get_app_file_path("data", "ewf_appearances.csv")
-
-BUTTON_PROMPT1_ID = "ewf-prompt1"
-BUTTON_PROMPT2_ID = "ewf-prompt2"
-SUBMIT_BUTTON_ID = "ewf-submit-button"
-
-STARTER_PROMPTS_DICTIONARY = {
-    BUTTON_PROMPT1_ID: {
-        "label": "Top 5 teams analysis",
-        "text": """Create a total of three visualizations: 
-1. The top 5 teams with the most wins 
-2. The top 5 teams with the most points 
-3. The top 5 teams with the highest attendance"""
-    },
-    BUTTON_PROMPT2_ID: {
-        "label": "Attendance trend",
-        "text": "Scatter plot wherein the x-axis is team name, y-axis is opponent name and the size of each marker is the attendance"
-    }
-}
-
-layout, df = chartbot_dataset_layout.chartbot_common(
-    "English Women's Football Matches (2011 - 2024)",
-    DATA_FILE_PATH,
-    {key: value["label"] for key, value in STARTER_PROMPTS_DICTIONARY.items()},
-    "ewf-textarea",
-    SUBMIT_BUTTON_ID,
-    "ewf-chartbot-output",
-    "ewf-python-content-output",
-    "ewf-download-html",
-    "ewf-html-buffer"
-)
-
-@callback(
-    Output("ewf-textarea", "value"),
-    Input("ewf-prompt1", "n_clicks"),
-    Input("ewf-prompt2", "n_clicks")
-)
-def update_prompt1_in_textarea(n_clicks1, n_clicks2):
-    if n_clicks1 or n_clicks2:
-        button_clicked = ctx.triggered_id
-        return STARTER_PROMPTS_DICTIONARY[button_clicked]["text"]
-    
-@callback(
-    Output(SUBMIT_BUTTON_ID, "loading", allow_duplicate=True),
-    Input(SUBMIT_BUTTON_ID, "n_clicks"),
-    prevent_initial_call=True
-)
-def update_submit_loading(n_clicks):
-    if n_clicks != None:
-        return True
-    else:
-        return False
-    
-@callback(
-    Output("ewf-chartbot-output", "children"),
-    Output("ewf-python-content-output", "children"),
-    Output("ewf-download-html", "style"),
-    Output("ewf-html-buffer", "data"),
-    Output(SUBMIT_BUTTON_ID, "loading"),
-    Input(SUBMIT_BUTTON_ID, "n_clicks"),
-    State("ewf-textarea", "value"),
-    prevent_initial_call=True
-)
-def create_graph(_, user_prompt):
-    try:
-        df_5_rows = df.head(5)
-        data_top5_csv_string = df_5_rows.to_csv(index=False)
-
-        result_output = prompt.get_response(user_prompt, data_top5_csv_string, DATA_FILE_PATH)
-
-        return helpers.display_response(result_output, DATA_FILE_PATH)
-    
-    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(
-    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

pages/overview.py

@@ -1,36 +0,0 @@
-import dash
-from dash import html, dcc
-import dash_mantine_components as dmc
-import dash_bootstrap_components as dbc
-
-from utils import components
-
-dash.register_page(__name__, path='/', name='Overview', order=1)
-
-layout = dbc.Container([
-    dbc.Col([
-
-        dmc.Title("EmPower.AI - A cost-effective reporting ChaRtBot", className="app-title"),
-        html.Hr(),          
-
-        html.Div([
-            dcc.Markdown("### _**Talk to your data, and watch it come to life in charts!**_"),
-            html.Br(),
-            dmc.Text("EmPower.AI transforms the way you interact with data. It's a cost-effective reporting ChaRtBot. A ChaRtBot is like a ChatBot, wherein the user can upload a CSV file and enter a prompt, or ask a question. Unlinke a ChatBot which responds in plain text, this ChaRtBot will generate data visualizations.", size="xl"),
-            dmc.Text("A simple PowerBI dashboard with clean data and few visuals can take 2-4 hours, a medium complexity dashboard which requires data transformations can take 4-8 hours, and a complex dashboard can take 1-3 days. With EmPower.AI, you can get the same results in a matter of seconds.", size="xl"),
-            dmc.Text("No more sifting through spreadsheets — just ask, and ChaRtBot delivers charts tailored to your needs.", size="xl"),
-            dmc.Text(["Plus, ", dmc.Mark("you can download and embed these charts as HTML in SharePoint, eliminating the need for expensive PowerBI premium subscriptions.", color="lime")], size="xl"),
-        ]),
-        
-        html.Br(),
-
-        dmc.Group([
-            components.summary_card("Try the ChaRtBot", "Test the ChaRtBot with popular sample datasets or upload your own .csv or .xlsx data.", isButtonMenu=True),
-
-            components.summary_card("Roadmap for EmPower.AI", "Check out the product roadmap for EmPower.AI and how it can help Thermo Fisher Scientific Inc."),
-
-            components.summary_card("FAQs", "Check out the answers to some of the Frequently Asked Questions regarding EmPower.AI."),     
-
-        ], justify="center"),       
-    ])
-])

pages/space_missions_chartbot.py

@@ -1,95 +0,0 @@
-import dash
-from dash import callback, Input, Output, State, ctx, html
-import dash_mantine_components as dmc
-
-from utils import chartbot_dataset_layout, prompt, helpers
-
-dash.register_page(__name__, path='/chartbot/space-missions', name="Space Missions (2000-2022)", order=5)
-
-DATA_FILE_PATH = helpers.get_app_file_path("data", "space_missions_data.csv")
-
-BUTTON_PROMPT1_ID = "space-missions-prompt1"
-BUTTON_PROMPT2_ID = "space-missions-prompt2"
-SUBMIT_BUTTON_ID = "space-missions-submit-button"
-
-STARTER_PROMPTS_DICTIONARY = {
-    BUTTON_PROMPT1_ID: {
-        "label": "Top 5 companies analysis",
-        "text": """Create a total of three visualizations which display:
-1. Percentage of mission statuses
-2. The top 5 companies with the most missions
-3. The top 5 companies which have spent the most money on missions"""
-    },
-    BUTTON_PROMPT2_ID: {
-        "label": "Correlation between Price and Mission status",
-        "text": "Create a graph to visualize the correlation between the Price and Mission status columns in a heatmap. The visualization should be grouped by Company"
-    }
-}
-
-layout, df = chartbot_dataset_layout.chartbot_common(
-    "Space Missions (2000 - 2022)",
-    DATA_FILE_PATH,
-    {key: value["label"] for key, value in STARTER_PROMPTS_DICTIONARY.items()},
-    "space-missions-textarea",
-    SUBMIT_BUTTON_ID,
-    "space-missions-chartbot-output",
-    "space-missions-python-content-output",
-    "space-missions-download-html",
-    "space-missions-html-buffer"
-)
-
-@callback(
-    Output("space-missions-textarea", "value"),
-    Input("space-missions-prompt1", "n_clicks"),
-    Input("space-missions-prompt2", "n_clicks")
-)
-def update_prompt1_in_textarea(n_clicks1, n_clicks2):
-    if n_clicks1 or n_clicks2:
-        button_clicked = ctx.triggered_id
-        return STARTER_PROMPTS_DICTIONARY[button_clicked]["text"]
-
-@callback(
-    Output(SUBMIT_BUTTON_ID, "loading", allow_duplicate=True),
-    Input(SUBMIT_BUTTON_ID, "n_clicks"),
-    prevent_initial_call=True
-)
-def update_submit_loading(n_clicks):
-    if n_clicks != None:
-        return True
-    else:
-        return False
-    
-@callback(
-    Output("space-missions-chartbot-output", "children"),
-    Output("space-missions-python-content-output", "children"),
-    Output("space-missions-download-html", "style"),
-    Output("space-missions-html-buffer", "data"),
-    Output(SUBMIT_BUTTON_ID, "loading"),
-    Input(SUBMIT_BUTTON_ID, "n_clicks"),
-    State("space-missions-textarea", "value"),
-    prevent_initial_call=True
-)
-def create_graph(_, user_prompt):
-    try:
-        df_5_rows = df.head(5)
-        data_top5_csv_string = df_5_rows.to_csv(index=False)
-
-        result_output = prompt.get_response(user_prompt, data_top5_csv_string, DATA_FILE_PATH)
-
-        return helpers.display_response(result_output, DATA_FILE_PATH)
-    
-    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(
-    Output("space-missions-download-html", "href"),
-    Input("space-missions-html-buffer", "data")
-)
-def download_html(encoded):
-    if encoded:
-        return f"data:text/html;base64,{encoded}"
-    return None

pages/us_elections_chartbot.py

@@ -1,98 +0,0 @@
-import dash
-from dash import callback, Input, Output, State, ctx, html
-import dash_mantine_components as dmc
-
-from utils import chartbot_dataset_layout, prompt, helpers
-
-dash.register_page(__name__, path='/chartbot/us-elections', name="USA Presidential Elections (1976-2020)", order=2)
-
-DATA_FILE_PATH = helpers.get_app_file_path("data", "1976-2020_president.csv")
-
-BUTTON_PROMPT1_ID = "us-elections-prompt1"
-BUTTON_PROMPT2_ID = "us-elections-prompt2"
-BUTTON_PROMPT3_ID = "us-elections-prompt3"
-SUBMIT_BUTTON_ID = "us-elections-submit-button" 
-
-STARTER_PROMPTS_DICTIONARY = {
-    BUTTON_PROMPT1_ID: {
-        "label": "Percentage of votes per state",
-        "text": "Create a choropleth map of the USA which displays the percentage of votes per state for DEMOCRAT in all the years given in the dataset, by adding a year frame."
-    },
-    BUTTON_PROMPT2_ID: {
-        "label": "Percentage of total votes",
-        "text": "Display the percentage of total votes received by each candidate in the DEMOCRAT (blue) and REPUBLICAN (red) parties in the year 1980 in a pie chart."
-    },
-    BUTTON_PROMPT3_ID: {
-        "label": "Who won in each state",
-        "text": "Create a choropleth map of only the USA for the year 2008 which colours the states based on which candidate won in them, either Democrat (blue) or Republican (red). Add the candidate name in the tooltip."
-    }
-}
-
-layout, df = chartbot_dataset_layout.chartbot_common(
-    "USA Presidential Elections (1976 - 2020)",
-    DATA_FILE_PATH,
-    {key: value["label"] for key, value in STARTER_PROMPTS_DICTIONARY.items()},
-    "us-elections-textarea",
-    SUBMIT_BUTTON_ID,
-    "us-elections-chartbot-output",
-    "us-elections-python-content-output",
-    "us-elections-download-html",
-    "us-elections-html-buffer"
-)
-
-@callback(
-    Output("us-elections-textarea", "value"),
-    Input("us-elections-prompt1", "n_clicks"),
-    Input("us-elections-prompt2", "n_clicks"),
-    Input("us-elections-prompt3", "n_clicks")
-)
-def update_prompt1_in_textarea(n_clicks1, n_clicks2, n_clicks3):
-    if n_clicks1 or n_clicks2 or n_clicks3:
-        button_clicked = ctx.triggered_id
-        return STARTER_PROMPTS_DICTIONARY[button_clicked]["text"]
-    
-@callback(
-    Output(SUBMIT_BUTTON_ID, "loading", allow_duplicate=True),
-    Input(SUBMIT_BUTTON_ID, "n_clicks"),
-    prevent_initial_call=True
-)
-def update_submit_loading(n_clicks):
-    if n_clicks != None:
-        return True
-    else:
-        return False
-    
-@callback(
-    Output("us-elections-chartbot-output", "children"),
-    Output("us-elections-python-content-output", "children"),
-    Output("us-elections-download-html", "style"),
-    Output("us-elections-html-buffer", "data"),
-    Output(SUBMIT_BUTTON_ID, "loading"),
-    Input(SUBMIT_BUTTON_ID, "n_clicks"),
-    State("us-elections-textarea", "value"),
-    prevent_initial_call=True
-)
-def create_graph(_, user_prompt):
-    try:
-        df_5_rows = df.head(5)
-        data_top5_csv_string = df_5_rows.to_csv(index=False)
-
-        result_output = prompt.get_response(user_prompt, data_top5_csv_string, DATA_FILE_PATH)
-
-        return helpers.display_response(result_output, DATA_FILE_PATH)
-    
-    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(
-    Output("us-elections-download-html", "href"),
-    Input("us-elections-html-buffer", "data")
-)
-def download_html(encoded):
-    if encoded:
-        return f"data:text/html;base64,{encoded}"
-    return None

requirements.txt

@@ -0,0 +1,60 @@
+annotated-types==0.7.0
+anyio==4.12.0
+blinker==1.9.0
+certifi==2026.1.4
+charset-normalizer==3.4.4
+click==8.3.1
+dash==3.3.0
+dash_ag_grid==32.3.4
+dash_mantine_components==2.4.1
+distro==1.9.0
+Flask==3.1.2
+groq==0.37.1
+h11==0.16.0
+httpcore==1.0.9
+httpx==0.28.1
+idna==3.11
+importlib_metadata==8.7.1
+itsdangerous==2.2.0
+Jinja2==3.1.6
+jsonpatch==1.33
+jsonpointer==3.0.0
+langchain==1.2.0
+langchain-core==1.2.6
+langchain-groq==1.1.1
+langgraph==1.0.5
+langgraph-checkpoint==3.0.1
+langgraph-prebuilt==1.0.5
+langgraph-sdk==0.3.1
+langsmith==0.6.0
+MarkupSafe==3.0.3
+narwhals==2.14.0
+nest-asyncio==1.6.0
+numpy==2.4.0
+orjson==3.11.5
+ormsgpack==1.12.1
+packaging==25.0
+pandas==2.3.3
+plotly==6.5.0
+pydantic==2.12.5
+pydantic_core==2.41.5
+python-dateutil==2.9.0.post0
+python-dotenv==1.2.1
+pytz==2025.2
+PyYAML==6.0.3
+requests==2.32.5
+requests-toolbelt==1.0.0
+retrying==1.4.2
+setuptools==80.9.0
+six==1.17.0
+sniffio==1.3.1
+tenacity==9.1.2
+typing-inspection==0.4.2
+typing_extensions==4.15.0
+tzdata==2025.3
+urllib3==2.6.2
+uuid_utils==0.12.0
+Werkzeug==3.1.4
+xxhash==3.6.0
+zipp==3.23.0
+zstandard==0.25.0

utils/chartbot_dataset_layout.py

@@ -1,78 +0,0 @@
-import pandas as pd
-
-from dash import html, dcc
-import dash_ag_grid as dag
-import dash_mantine_components as dmc
-
-from utils import components
-
-def chartbot_common(
-        page_title: str,
-        csv_file_path: str,
-        starter_prompts: dict,
-        prompt_textarea_id: str,
-        submit_button_id: str,
-        chartbot_output_id: str,
-        python_content_id: str,
-        download_html_button_id: str,
-        html_buffer_id: str              
-    ) -> tuple:
-    df = pd.read_csv(csv_file_path)
-
-    starter_prompts_list = list()
-
-    for key, value in starter_prompts.items():
-        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(),
-
-        dag.AgGrid(
-            rowData=df.to_dict("records"),
-            columnDefs=[{"field": col} for col in df.columns],
-            defaultColDef={"filter": True, "sortable": True, "resizable": True},
-            style={'fontFamily': 'Helvetica'}
-        ),
-
-        dmc.Text("Choose a prompt to get started:", size="lg", fw=500, style={"textAlign": "center", "paddingTop": "25px", "paddingBottom": "15px"}),
-
-        dmc.Group(starter_prompts_list, justify="center"),
-
-        html.Br(),
-
-        dmc.Group([
-            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")
-        ]),
-
-        dmc.Text(id="chart", style={"scrollMarginTop": "60px"}),
-        html.Div(id=chartbot_output_id),
-        html.A(
-            dmc.Tooltip(
-                multiline=True,
-                w=200,
-                label="""Download the visualization as an HTML file.
-                The downloaded file can then be opened in a web browser to view the visualization.
-                It can also be embedded in a SharePoint site and shared with others in your team.""",
-                position="right",
-                withArrow=True,
-                arrowSize=6,
-                children=[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)
-    ])
-
-    return layout, df      
-    
-
-    

utils/components.py

@@ -1,59 +0,0 @@
-from dash import html
-from dash_iconify import DashIconify
-import dash_mantine_components as dmc
-
-def aside_link(
-        label: str,
-        href: str,
-        icon: str
-    ) -> html.Div:
-    return html.Div(
-        dmc.Group([
-            DashIconify(icon=icon, color="#A5A5AE", height=20),
-            html.A(label, href=href, style={"text-decoration": "none", "color": "#A5A5AE", "font-weight": "bold"})
-        ])
-    )
-
-def summary_card(
-        title: str,
-        description: str,
-        isButtonMenu: bool = False
-    ) -> dmc.Card:
-    if isButtonMenu:
-        return dmc.Card([
-            dmc.CardSection([
-                dmc.Text(title, size="xl", fw=500),
-                dmc.Divider(variant="solid"),
-                dmc.Space(h="sm"),
-                dmc.Text(description, size="sm"),
-                dmc.Space(h="md"),
-                dmc.Menu([
-                    dmc.MenuTarget(dmc.Button("Get Started", color="#E71316", className="float-end")),
-                    dmc.MenuDropdown([                        
-                        dmc.MenuItem("USA Presidential Elections (1976-2020)", href="/chartbot/us-elections"),
-                        dmc.MenuItem("English Women's Football Matches (2011-2024)", href="/chartbot/football"),
-                        dmc.MenuItem("Amazon Purchases 2021 (Sample)", href="/chartbot/amazon-purchases"),
-                        #dmc.MenuItem("Space Missions (2000-2022)", href="/chartbot/space-missions"),                        
-                        dmc.MenuItem("Upload your data", href="/chartbot")
-                    ])
-                ])
-            ], style={"margin": 10})                    
-        ], withBorder=True, radius="md", w=320)
-    
-    else:
-        return dmc.Card([
-            dmc.CardSection([
-                dmc.Text(title, size="xl", fw=500),
-                dmc.Divider(variant="solid"),
-                dmc.Space(h="sm"),
-                dmc.Text(description, size="sm"),
-                dmc.Space(h="md"),
-                dmc.Button("Get Started", color="#E71316", className="float-end")
-            ], style={"margin": 10})                    
-        ], withBorder=True, radius="md", w=320)
-    
-def button_with_prompt(
-        identity: str,
-        prompt: str
-    ) -> dmc.Button:
-    return dmc.Button(prompt, id=identity, color="gray", variant="outline", radius="md")

utils/helpers.py

@@ -12,8 +12,15 @@ from base64 import b64encode
 # libraries to help with the Dash app, layout, and callbacks
 import dash_ag_grid as dag
 
+# Add logging import
+import logging
+
 from utils import prompt
 
+# Configure logging
+logging.basicConfig(level=logging.ERROR)
+logger = logging.getLogger(__name__)
+
 # Function to get the path of a file in the app source code
 def get_app_file_path(directory_name: str, file_name: str) -> str:
     return os.path.join(os.path.dirname(__file__), "..", directory_name, file_name)
@@ -34,22 +41,23 @@ def get_fig_from_code(code, file_name):
         exec(code, {}, local_variables)
 
     except Exception as e:
-        try:
-            result_output = prompt.get_python_exception_response(code, str(e))
-            return display_response(result_output, file_name)
-        except Exception as api_error:
-            # If the API call fails, raise the error to be handled by display_response
-            raise api_error
+        # Raise the exception to be handled by the caller
+        # Don't call display_response here as it would cause incorrect return value count
+        raise e
 
     return local_variables["fig"]
 
 def display_response(response, file_name):
     try:
         code_block_match = re.search(r"```(?:[Pp]ython)?(.*?)```", response, re.DOTALL)
-        #print(code_block_match)
 
         if code_block_match:
             code_block = code_block_match.group(1).strip()
+            
+            # Check if code ends with fig.show() and add it if missing
+            if not re.search(r'fig\.show\(\)\s*$', code_block, re.MULTILINE):
+                code_block = code_block + "\nfig.show()"
+            
             cleaned_code = re.sub(r'(?m)^\s*fig\.show\(\)\s*$', '', code_block)
 
             try:
@@ -60,23 +68,62 @@ def display_response(response, file_name):
                 html_bytes = buffer.getvalue().encode()
                 encoded = b64encode(html_bytes).decode()
 
-                return dcc.Graph(figure=fig), response, {"display": "block"}, encoded, False
-
-            except AttributeError as e:
-                return html.Div([
-                    html.Br(),
-                    dmc.Alert("The code generated has errors, please try again.", title="Error", color="red")
-                ]), None, {"display": "none"}, None, False
+                return dcc.Graph(figure=fig), None, {"display": "block"}, encoded, False
+
+            except Exception as e:
+                # Log the original error
+                logger.error(f"Code execution error for file '{file_name}': {str(e)}", exc_info=True)
+                
+                # Try to get corrected code from LLM
+                try:
+                    result_output = prompt.get_python_exception_response(cleaned_code, str(e))
+                    # Parse the corrected code
+                    corrected_code_match = re.search(r"```(?:[Pp]ython)?(.*?)```", result_output, re.DOTALL)
+                    if corrected_code_match:
+                        corrected_code = corrected_code_match.group(1).strip()
+                        corrected_code_clean = re.sub(r'(?m)^\s*fig\.show\(\)\s*$', '', corrected_code)
+                        
+                        # Try to execute corrected code
+                        fig = get_fig_from_code(corrected_code_clean, file_name)
+                        
+                        buffer = io.StringIO()
+                        fig.write_html(buffer)
+                        html_bytes = buffer.getvalue().encode()
+                        encoded = b64encode(html_bytes).decode()
+                        
+                        return dcc.Graph(figure=fig), None, {"display": "block"}, encoded, False
+                    else:
+                        raise ValueError("No code block found in corrected response")
+                        
+                except Exception as api_error:
+                    # Log the retry error
+                    logger.error(f"Retry failed for file '{file_name}': {str(api_error)}", exc_info=True)
+                    
+                    # Show user-friendly error message
+                    return html.Div([
+                        html.Br(),
+                        dmc.Alert(
+                            "We couldn't process your request. Please try modifying your prompt or check your data format.",
+                            title="Unable to Generate Chart",
+                            color="red"
+                        )
+                    ]), None, {"display": "none"}, None, False
         
         else:
-            return "", response, {"display": "none"}, None, False
+            return "", None, {"display": "none"}, None, False
             
     except Exception as e:
-        # Handle API errors gracefully
-        error_message = str(e)
+        # Log API errors
+        logger.error(f"API error: {str(e)}", exc_info=True)
+        
+        # Handle API errors gracefully with user-friendly message
         return html.Div([
             html.Br(),
-            dmc.Alert(error_message, title="API Error", color="red")
+            dmc.Alert(
+                "We couldn't process your request. Please wait a moment and try again.",
+                title="Service Error",
+                color="red"
+            )
         ]), None, {"display": "none"}, None, False
 
 # Function to parse the contents of the uploaded file
@@ -120,4 +167,40 @@ def save_dataframe_to_current_path(df: pd.DataFrame, filename: str) -> None:
         df.to_csv(filename, index=False)
 
     elif 'xls' in filename:
-        df.to_excel(filename, index=False)
+        df.to_excel(filename, index=False)
+
+def create_ag_grid(df):
+    """
+    Create a Dash AG Grid component for data exploration.
+    
+    Args:
+        df: pandas DataFrame
+        
+    Returns:
+        dag.AgGrid component
+    """
+    return dag.AgGrid(
+        id="data-explorer-grid",
+        rowData=df.to_dict("records"),
+        columnDefs=[{
+            "field": col,
+            "filter": True,
+            "sortable": True,
+            "resizable": True,
+            "floatingFilter": True
+        } for col in df.columns],
+        defaultColDef={
+            "filter": True,
+            "sortable": True,
+            "resizable": True,
+            "minWidth": 100
+        },
+        dashGridOptions={
+            "pagination": True,
+            "paginationPageSize": 10,
+            "paginationPageSizeSelector": [10, 20, 50, 100],
+            "animateRows": True
+        },
+        style={"height": "400px", "width": "100%"},
+        className="ag-theme-alpine"
+    )

utils/prompt.py

@@ -1,6 +1,7 @@
 # libraries to help with the environment variables
 import os
 from dotenv import load_dotenv
+import logging
 
 # libraries to help with the AI model
 from langchain_groq import ChatGroq
@@ -9,6 +10,10 @@ from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
 
 from utils import helpers
 
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
 # get the credentials from .env
 load_dotenv()
 GROQ_API_KEY = os.getenv('GROQ_API_KEY')
@@ -23,19 +28,47 @@ if not GROQ_API_KEY or GROQ_API_KEY == 'your_groq_api_key_here':
 # define connectivity to the llm
 try:
     llm = ChatGroq(
-        model="groq/compound-mini",
+        model="llama-3.3-70b-versatile",
         api_key=GROQ_API_KEY,
         temperature=0
     )
 except Exception as e:
     raise ValueError(f"Failed to initialize ChatGroq: {str(e)}")
 
-'''Before creating any visualizations, ensure that any rows with NaN or missing values in the relevant columns are removed. Additionally, 
-            handle missing values appropriately based on the context, ensuring cleaner visualizations.
-            For example, use df.dropna(subset=[column_name]) for data cleaning. Never use this statement: df.dropna(inplace=True).'''
-
 def get_prompt_text() -> str:
-    return """You are a data visualization expert and you only use the graphing library Plotly. 
+    """
+    Get the system prompt for data visualization generation.
+    
+    Returns:
+        str: The system prompt template
+    """
+    return """You are a data visualization expert and you only use the graphing library Plotly.
+            
+            CRITICAL VALIDATION RULES - EXECUTE BEFORE GENERATING ANY CODE:
+            1. RELEVANCE CHECK: Before generating any code, you MUST verify that the user's request is relevant to the provided dataset.
+            2. COLUMN VERIFICATION: Analyze the first 5 rows of data provided. If the user explicitly mentions column names that do NOT exist in the dataset, you MUST return an error message instead of code.
+            3. DATA CONTEXT VERIFICATION: If the user's request asks about metrics, categories, or data points that are clearly incompatible with the dataset columns shown, you MUST return an error message instead of code.
+            4. NON-VISUALIZATION REQUESTS: If the user's request is not about data visualization (e.g., asking for text generation, general questions, unrelated tasks), you MUST return an error message instead of code.
+            
+            ERROR MESSAGE FORMAT - Use this EXACT format when validation fails:
+            ERROR: The request appears to be unrelated to the provided dataset. Please rephrase your request to refer to the actual columns and data available in your file. Available columns are: [list the column names from the data provided].
+            
+            IMPORTANT: Only generate Python code if ALL of the following are true:
+            - The request is about creating a data visualization
+            - The request refers to columns, metrics, or patterns that could reasonably exist in the provided dataset
+            - The user has not explicitly mentioned column names that don't exist in the dataset
+            
+            If any validation rule fails, return ONLY the error message in the format specified above. Do NOT generate any Python code.
+            
+            IF VALIDATION PASSES, PROCEED WITH CODE GENERATION:
+            
+            PANDAS DATA HANDLING BEST PRACTICES:
+            - Always use .copy() when creating a new dataframe from a subset or filtered view to avoid SettingWithCopyWarning.
+            - Example: df_filtered = df[df['column'] > 0].copy()
+            - When modifying data, always work on explicit copies, not chained indexing.
+            - Use .loc[] for setting values: df.loc[condition, 'column'] = value
+            - Avoid chained assignment like df[condition]['column'] = value
+            
             Ensure that before performing any data manipulation or plotting, the code checks for column data types and converts them if necessary. 
             For example, numeric columns should be converted to floats or integers using pd.to_numeric(), and non-numeric columns should be excluded from numeric operations. 
             Before creating any visualizations, ensure that any rows with NaN or missing values in the relevant columns are removed. Additionally, 
@@ -44,11 +77,44 @@ def get_prompt_text() -> str:
             The graphs you plot shall always have a white background and shall follow data visualization best practices. 
             Do not ignore any of the following visualization best practices:  
             {data_visualization_best_practices} 
-            If the user requests a single visualization, create the graph using the plotly.express library and set the fig height to 800.
+            If the user requests a single visualization, figure height to 800.
             Ensure that the graph is clearly labeled with a title, x-axis label, y-axis label, and legend.
-            If the user has requested for a choropleth map of the United States of America (USA), ensure that the locations parameter in the px.choropleth() method is
-            set to the column which contains the two letter code state abbreviations, for example: AL, NY, TN, VT, UT (the column should not be determined by the name of the column, 
-            but by the values it contains) and the scope parameter is set to 'usa'.
+            
+            SPECIFIC CHART TYPE INSTRUCTIONS:
+            
+            CHOROPLETH MAPS:
+            CRITICAL: When creating a choropleth map of the United States, you MUST include ALL of the following parameters:
+            - locations: Set to the column containing two-letter state abbreviations (e.g., 'AL', 'NY', 'CA', 'TX')
+            - locationmode: MUST be set to 'USA-states' (this is CRITICAL - without it, the map will be blank)
+            - scope: Set to 'usa'
+            Example:
+            fig = px.choropleth(df, 
+                              locations='state_code_column',
+                              locationmode='USA-states',
+                              scope='usa',
+                              color='value_column',
+                              title='Map Title')
+            The locations parameter should reference the column with state codes, not the column with full state names.
+            Always verify that locationmode='USA-states' is present in the code.
+            
+            CHOROPLETH MAPS IN SUBPLOTS:
+            When creating a choropleth map of the USA as part of subplots using graph_objects (go.Choropleth), you MUST include the following:
+            1. After creating all traces with fig.add_trace(), add:
+               fig.update_layout(title_text='Your Title', height=800, plot_bgcolor='white', paper_bgcolor='white')
+               Note: Generic background settings don't apply to choropleths in subplots, so this is necessary.
+            2. Force the USA scope on the specific choropleth subplot using:
+               fig.update_geos(scope="usa", projection_type="albers usa", bgcolor="white", row=X, col=Y)
+               Replace X and Y with the actual row and column numbers where the choropleth is located.
+            Example:
+            # After adding all traces
+            fig.update_layout(title_text='E-commerce Data Visualization', height=800, plot_bgcolor='white', paper_bgcolor='white')
+            # Force USA scope on the choropleth subplot (adjust row, col as needed)
+            fig.update_geos(scope="usa", projection_type="albers usa", bgcolor="white", row=2, col=2)
+            
+            {dumbbell_charts_section}
+            
+            {polar_charts_section}
+            
             If the user requests multiple visualizations, create a subplot for each visualization.  
             The libraries required for multiple visualizations are: import plotly.graph_objects as go and from plotly.subplots import make_subplots.
             Utilize the plotly.graph_objects library's make_subplots() method to create subplots, specifying the number of rows and columns, 
@@ -61,7 +127,6 @@ def get_prompt_text() -> str:
             particularly ensuring that pie charts are in domain-type subplots. If an error is detected, correct the subplot type automatically. 
             Validate the layout before adding traces. 
             Ensure each subplot is clearly labeled and formatted according to best practices.  
-            All the labels in the graph should be of the font family Helvetica, be it title, x-axis, y-axis, or legend. 
             Here are examples of how to create multiple visualizations in a single figure: 
             Example 1: \n 
             {example_subplots1} 
@@ -72,7 +137,44 @@ def get_prompt_text() -> str:
             The height of the figure (fig) should be set to 800. 
             Suppose that the data is provided as a {name_of_file} file.  
             Here are the first 5 rows of the data set: {data}. Follow the user's indications when creating the graph.
-            There should be no natural language text in the python code block."""
+            There should be no natural language text in the python code block.
+            
+            REMINDER: Your code MUST end with fig.show() to display the visualization."""
+
+def _should_include_dumbbell_examples(user_input: str) -> bool:
+    """
+    Check if user's request is about dumbbell charts or comparison visualizations.
+    
+    Args:
+        user_input: User's visualization request
+        
+    Returns:
+        bool: True if dumbbell chart examples should be included
+    """
+    dumbbell_keywords = [
+        'dumbbell', 'dumb bell', 'dumbell', 'dumbel', 'comparison', 'before and after', 'before after',
+        'start and end', 'start end', 'range', 'difference', 'gap', 'change over'
+    ]
+    
+    user_input_lower = user_input.lower()
+    return any(keyword in user_input_lower for keyword in dumbbell_keywords)
+
+def _should_include_polar_examples(user_input: str) -> bool:
+    """
+    Check if user's request is about polar charts, calendar views, or circular visualizations.
+    
+    Args:
+        user_input: User's visualization request
+        
+    Returns:
+        bool: True if polar chart examples should be included
+    """
+    polar_keywords = [
+        'polar', 'circular', 'radial', 'circular fashion', 'radar', 'rose'
+    ]
+    
+    user_input_lower = user_input.lower()
+    return any(keyword in user_input_lower for keyword in polar_keywords)
 
 def get_response(user_input: str, data_top5_csv_string: str, file_name: str) -> str:
     """
@@ -84,50 +186,130 @@ def get_response(user_input: str, data_top5_csv_string: str, file_name: str) ->
         file_name: Name of the data file
         
     Returns:
-        LLM response content
+        LLM response content containing Python code or error message
         
     Raises:
-        Exception: If API call fails
+        Exception: If API call fails or validation fails
     """
     try:
-        prompt = ChatPromptTemplate.from_messages(
-                [
-                    (
-                        "system",
-                        get_prompt_text()
-                    ),
-                    MessagesPlaceholder(variable_name="messages")
-                ]
+        # Determine if dumbbell chart examples should be included
+        include_dumbbell = _should_include_dumbbell_examples(user_input)
+        
+        # Determine if polar chart examples should be included
+        include_polar = _should_include_polar_examples(user_input)
+        
+        # Build dumbbell charts section conditionally
+        dumbbell_charts_section = ""
+        if include_dumbbell:
+            dumbbell_example = helpers.read_doc(
+                helpers.get_app_file_path("assets", "example_dumbbell_chart.txt")
+            )
+            dumbbell_charts_section = f"""
+            DUMBBELL PLOTS:
+            When creating a dumbbell plot, use plotly.graph_objects (go) instead of plotly.express (px).
+            Use go.Figure() and add two go.Scatter traces for the two data points, and a go.Scatter trace for the lines connecting them.
+            Ensure proper labeling of axes and title for clarity.
+            Example: \n 
+            {dumbbell_example}
+            """
+        
+        # Build polar charts section conditionally
+        polar_charts_section = ""
+        if include_polar:
+            polar_bar_example = helpers.read_doc(
+                helpers.get_app_file_path("assets", "example_polar_bar.txt")
+            )
+            polar_scatter_example = helpers.read_doc(
+                helpers.get_app_file_path("assets", "example_polar_scatter.txt")
             )
+            polar_charts_section = f"""
+            POLAR CHARTS (RADIAL/CIRCULAR VISUALIZATIONS):
+            Polar charts are effective for displaying calendar views, weekly patterns, or circular data distributions.
+            Use them for innovative visualizations of time-based or cyclical data.
+            
+            Example 1 - Polar Calendar with Cells (Barpolar):
+            {polar_bar_example}
+            
+            Example 2 - Polar Calendar with Scatter:
+            {polar_scatter_example}
+            
+            Use polar charts when the user requests:
+            - Calendar-like views
+            - Weekly or cyclical patterns
+            - Circular representations of data
+            - Radial visualizations
+            """
+            
+        prompt = ChatPromptTemplate.from_messages(
+            [
+                ("system", get_prompt_text()),
+                MessagesPlaceholder(variable_name="messages")
+            ]
+        )
 
         chain = prompt | llm
 
-        response = chain.invoke(
-            {
-                "messages": [HumanMessage(content=user_input)],
-                "data_visualization_best_practices": helpers.read_doc(helpers.get_app_file_path("assets", "data_viz_best_practices.txt")),
-                "example_subplots1": helpers.read_doc(helpers.get_app_file_path("assets", "example_subplots1.txt")),
-                "example_subplots2": helpers.read_doc(helpers.get_app_file_path("assets", "example_subplots2.txt")),
-                "example_subplots3": helpers.read_doc(helpers.get_app_file_path("assets", "example_subplots3.txt")),
-                "data": data_top5_csv_string,
-                "name_of_file": file_name
-            }
-        )
+        invoke_params = {
+            "messages": [HumanMessage(content=user_input)],
+            "data_visualization_best_practices": helpers.read_doc(
+                helpers.get_app_file_path("assets", "data_viz_best_practices.txt")
+            ),
+            "example_subplots1": helpers.read_doc(
+                helpers.get_app_file_path("assets", "example_subplots1.txt")
+            ),
+            "example_subplots2": helpers.read_doc(
+                helpers.get_app_file_path("assets", "example_subplots2.txt")
+            ),
+            "example_subplots3": helpers.read_doc(
+                helpers.get_app_file_path("assets", "example_subplots3.txt")
+            ),
+            "dumbbell_charts_section": dumbbell_charts_section,
+            "polar_charts_section": polar_charts_section,
+            "data": data_top5_csv_string,
+            "name_of_file": file_name
+        }
 
-        return response.content
+        response = chain.invoke(invoke_params)
+
+        # Check if the response is an error message instead of code
+        response_text = response.content.strip()
+
+        if response_text.startswith("ERROR:"):
+            # Extract the error message and raise validation error
+            error_message = response_text.replace("ERROR:", "").strip()
+            raise ValueError(error_message)
+        
+        return response_text
+    
+    except ValueError as ve:
+        # This is our custom validation error from the LLM
+        # Re-raise with user-friendly message
+        raise Exception(f"Unable to process your request: {str(ve)}")
     
     except Exception as e:
         error_msg = str(e)
+        
+        # DEBUG: Log the actual error to understand what's happening
+        logger.info(f"DEBUG - Caught exception type: {type(e).__name__}")
+        logger.info(f"DEBUG - Error message: {error_msg}")
+        
+        # Check for specific API errors (these are real API issues, not validation errors)
         if "rate_limit" in error_msg.lower() or "429" in error_msg:
             raise Exception("Rate limit exceeded. Please wait a moment and try again.")
         elif "authentication" in error_msg.lower() or "401" in error_msg or "api_key" in error_msg.lower():
-            raise Exception("Authentication failed. Please check your GROQ_API_KEY in the .env file.")
+            raise Exception("We're having trouble generating your visualization.")
         elif "timeout" in error_msg.lower():
             raise Exception("Request timed out. Please try again.")
         else:
-            raise Exception(f"Error communicating with Groq API: {error_msg}")
+            raise Exception(f"Unable to process your request: {error_msg}")
 
 def get_python_exception_prompt_text() -> str:
+    """
+    Get the system prompt for fixing Python code errors.
+    
+    Returns:
+        str: The system prompt for error fixing
+    """
     return """The Python code you provided {code} has an error {exception}"""
 
 def get_python_exception_response(code: str, exception: str) -> str:
@@ -146,20 +328,20 @@ def get_python_exception_response(code: str, exception: str) -> str:
     """
     try:
         prompt = ChatPromptTemplate.from_messages(
-                [
-                    (
-                        "system",
-                        get_python_exception_prompt_text()
-                    ),
-                    MessagesPlaceholder(variable_name="messages")
-                ]
-            )
+            [
+                ("system", get_python_exception_prompt_text()),
+                MessagesPlaceholder(variable_name="messages")
+            ]
+        )
 
         chain = prompt | llm
 
         response = chain.invoke(
             {
-                "messages": [HumanMessage(content="Rewrite the entire Python code so that it does not contain any errors. The code should be able to run without any errors.")],
+                "messages": [HumanMessage(
+                    content="Rewrite the entire Python code so that it does not contain any errors. "
+                            "The code should be able to run without any errors."
+                )],
                 "code": code,
                 "exception": exception
             }
@@ -169,11 +351,16 @@ def get_python_exception_response(code: str, exception: str) -> str:
     
     except Exception as e:
         error_msg = str(e)
+
+        # Log the complete error message
+        logger.info(f"Exception fixing failed - Exception type: {type(e).__name__}")
+        logger.info(f"Exception fixing failed - Error message: {error_msg}")
+
         if "rate_limit" in error_msg.lower() or "429" in error_msg:
             raise Exception("Rate limit exceeded. Please wait a moment and try again.")
         elif "authentication" in error_msg.lower() or "401" in error_msg or "api_key" in error_msg.lower():
-            raise Exception("Authentication failed. Please check your GROQ_API_KEY in the .env file.")
+            raise Exception("We're having trouble generating your visualization.")
         elif "timeout" in error_msg.lower():
             raise Exception("Request timed out. Please try again.")
         else:
-            raise Exception(f"Error communicating with Groq API: {error_msg}")
+            raise Exception(f"Unable to process your request: {error_msg}")