merge main

.github/workflows/vizro-qa-tests-trigger.yml

@@ -22,6 +22,7 @@ jobs:
         include:
           - label: integration tests
           - label: notebooks tests
+          - label: vizro-ai ui tests
     steps:
       - name: Passed fork step
         run: echo "Success!"
@@ -36,6 +37,7 @@ jobs:
         include:
           - label: integration tests
           - label: notebooks test
+          - label: vizro-ai ui tests
     steps:
       - uses: actions/checkout@v4
       - name: Tests trigger
@@ -46,6 +48,8 @@ jobs:
             export INPUT_WORKFLOW_FILE_NAME=${{ secrets.VIZRO_QA_INTEGRATION_TESTS_WORKFLOW }}
           elif [ "${{ matrix.label }}" == "notebooks test" ]; then
             export INPUT_WORKFLOW_FILE_NAME=${{ secrets.VIZRO_QA_NOTEBOOKS_TESTS_WORKFLOW }}
+          elif [ "${{ matrix.label }}" == "vizro-ai ui tests" ]; then
+            export INPUT_WORKFLOW_FILE_NAME=${{ secrets.VIZRO_QA_VIZRO_AI_UI_TESTS_WORKFLOW }}
           fi
           export INPUT_GITHUB_TOKEN=${{ secrets.VIZRO_SVC_PAT }}
           export INPUT_REF=main # because we should send existent branch to dispatch workflow

CODEOWNERS

@@ -1,3 +1,2 @@
-* @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL
-vizro-ai/ @Joseph-Perkins @Anna-Xiong @lingyielia @maxschulz-COL
+* @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL @lingyielia
 docs/ @stichbury @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL

README.md

@@ -78,7 +78,7 @@ Optional high-code extensions enable almost infinite customization in a modular
 
 Visit ["Why should I use Vizro?"](https://vizro.readthedocs.io/en/stable/pages/explanation/faq/#why-should-i-use-vizro) for a more detailed explanation of Vizro use cases.
 
-### What is Vizro-AI?
+## What is Vizro-AI?
 
 Vizro-AI is a separate package and extends Vizro to enable the use of natural language queries to build Plotly charts.
 
@@ -102,10 +102,19 @@ See the [Vizro-AI documentation](https://vizro.readthedocs.io/projects/vizro-ai/
 
 You can see Vizro in action by clicking on the following image or by visiting [the examples gallery at vizro.mckinsey.com](https://vizro.mckinsey.com).
 
-<p align="left">
 <a href="http://vizro.mckinsey.com/">
-<img border="0" src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_examples_gallery.png" width="525" height="296">  </a>
-</p>
+<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/vizro_examples_gallery.png" width="550">
+</a>
+
+## Vizro visual vocabulary
+
+Our visual vocabulary dashboard helps you to select and create various types of charts. It helps you decide when to use
+each chart type, and offers sample Python code to create these charts with [Plotly](https://plotly.com/python/) and
+embed them into a Vizro dashboard.
+
+<a href="https://huggingface.co/spaces/vizro/demo-visual-vocabulary/">
+<img src="https://raw.githubusercontent.com/mckinsey/vizro/main/.github/images/visual_vocabulary.png" width="550">
+</a>
 
 ## Dashboard screenshots
 

vizro-ai/CHANGELOG.md

@@ -11,6 +11,22 @@ See the fragment files in the [changelog.d directory](https://github.com/mckinse
 
 <!-- scriv-insert-here -->
 
+<a id='changelog-0.2.3'></a>
+
+# 0.2.3 — 2024-09-09
+
+## Added
+
+- Added Docker image of `VizroAI.plot` UI for local use ([#1177](https://github.com/mckinsey/vizro/pull/1177))
+
+<a id='changelog-0.2.2'></a>
+
+# 0.2.2 — 2024-09-06
+
+## Fixed
+
+- Documented the step for instantiating `VizroAI` in text-to-dashboard pages ([#685](https://github.com/mckinsey/vizro/pull/685))
+
 <a id='changelog-0.2.1'></a>
 
 # 0.2.1 — 2024-08-28

vizro-ai/docs/pages/tutorials/quickstart-dashboard.md

@@ -42,8 +42,14 @@ print(vizro_ai.__version__)
 
 You should see a return output of the form `x.y.z`.
 
+## 3. Instantiate VizroAI
+```py
+from vizro_ai import VizroAI
+
+vizro_ai = VizroAI()
+```
 
-## 3. Prepare the data
+## 4. Prepare the data
 Next, prepare the data to pass to Vizro-AI. In this example, we use the [gapminder data](https://plotly.com/python-api-reference/generated/plotly.express.data.html#plotly.express.data.gapminder).
 
 ```py
@@ -52,7 +58,7 @@ import vizro.plotly.express as px
 df = px.data.gapminder(datetimes=True, pretty_names=True)
 ```
 
-## 4. Prepare the user prompt
+## 5. Prepare the user prompt
 
 Put together a string of text which is the prompt to request Vizro-AI to generate the dashboard.
 
@@ -65,7 +71,7 @@ Vizro-AI can generate a multi-page dashboard that includes the following feature
 
 ```text
 user_question = """
-Create a page showing 1 card, 1 chart, and 1 filter.
+Create a page showing 1 card, 1 chart.
 The first card says 'The Gapminder dataset is a detailed collection of global socioeconomic indicators over several decades. It includes data on GDP per capita, life expectancy, and population for numerous countries and regions. This dataset allows users to analyze development trends, health outcomes, economic growth, and demographic changes globally.'
 The chart is a box plot showing life expectancy distribution. Put Life expectancy on the y axis, continent on the x axis, and color by continent.
 The card takes 1 grid of the page space on the left and the box plot takes 3 grid space on the right.
@@ -74,20 +80,45 @@ Add a filter to filter the box plot by year.
 """
 ```
 
-## 5. Call Vizro-AI
+## 6. Call Vizro-AI
 
 Next, submit the data and prompt string:
 
 ```py
 dashboard = vizro_ai._dashboard([df], user_question)
 ```
 
-The call to `_dashboard()` triggers the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can launch the dashboard with `build()`.
+The call to `_dashboard()` initiates dashboard generation. By default, it generates the Vizro `Dashobard` Object.
+
+## 7. Build dashboard
+Once dashboard generation is complete, launch the dashboard with `build()`.
+
+```py
+from vizro import Vizro
+Vizro().build(dashboard).run()
+```
 
 !!! example "Generated dashboard"
 
-    === "Code"
+    === "Code for the cell"
         ```py
+        from vizro import Vizro
+        from vizro_ai import VizroAI
+        import vizro.plotly.express as px
+
+        df = px.data.gapminder(datetimes=True, pretty_names=True)
+        vizro_ai = VizroAI()
+
+        user_question = """
+        Create a page showing 1 card and 1 chart.
+        The first card says 'The Gapminder dataset is a detailed collection of global socioeconomic indicators over several decades. It includes data on GDP per capita, life expectancy, and population for numerous countries and regions. This dataset allows users to analyze development trends, health outcomes, economic growth, and demographic changes globally.'
+        The chart is a box plot showing life expectancy distribution. Put Life expectancy on the y axis, continent on the x axis, and color by continent.
+        The card takes 1 grid of the page space on the left and the box plot takes 3 grid space on the right.
+
+        Add a filter to filter the box plot by year.
+        """
+
+        dashboard = vizro_ai._dashboard([df], user_question)
         Vizro().build(dashboard).run()
         ```
 

vizro-ai/docs/pages/user-guides/create-complex-dashboard.md

@@ -99,6 +99,9 @@ It's worth noting that a more structured user request is also more machine reada
 Next, submit the data and prompt string:
 
 ```py
+from vizro_ai import VizroAI
+
+vizro_ai = VizroAI(model="gpt-4o")
 dashboard = vizro_ai._dashboard([df1, df2], user_question)
 ```
 

vizro-ai/docs/pages/user-guides/retrieve-dashboard-code.md

@@ -31,6 +31,9 @@ Create a one-page dashboard layout with the following components:
 
 ## 2. Generate and launch the dashboard
 ```py
+from vizro_ai import VizroAI
+
+vizro_ai = VizroAI(model="gpt-4o-mini")
 result = vizro_ai._dashboard([df], user_question, return_elements=True)
 ```
 This will trigger the dashboard building process. Once Vizro-AI finishes the dashboard generation process, you can now launch the dashboard.

vizro-ai/examples/dashboard_ui/.dockerignore

@@ -0,0 +1,41 @@
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Docker
+Dockerfile
+docker-compose.yml
+.dockerignore
+
+# Python
+*.pyc
+*.pyo
+*.pyd
+__pycache__
+.pytest_cache
+.coverage
+htmlcov/
+.tox/
+.venv
+venv/
+*.egg-info/
+dist/
+build/
+
+# Editors
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS generated
+.DS_Store
+Thumbs.db
+
+# Application specific
+*.log
+*.sqlite3
+
+# csv
+*.csv

vizro-ai/examples/dashboard_ui/Dockerfile

@@ -0,0 +1,37 @@
+FROM python:3.12-slim AS builder
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+WORKDIR $HOME/app
+
+COPY --chown=user requirements.txt .
+RUN pip install --user --no-cache-dir --upgrade pip && \
+    pip install --user --no-cache-dir -r requirements.txt
+
+# Production stage
+FROM python:3.12-slim
+
+RUN apt-get update && apt-get upgrade -y && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+WORKDIR $HOME/app
+
+COPY --from=builder --chown=user $HOME/.local/lib/python3.12/site-packages $HOME/.local/lib/python3.12/site-packages
+COPY --from=builder --chown=user $HOME/.local/bin $HOME/.local/bin
+
+COPY --chown=user . $HOME/app
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "app:server"]

vizro-ai/examples/dashboard_ui/README.md

@@ -0,0 +1,11 @@
+---
+title: Vizro Ai UI
+emoji: 🌖
+colorFrom: blue
+colorTo: pink
+sdk: docker
+pinned: false
+license: apache-2.0
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

vizro-ai/examples/dashboard_ui/actions.py

@@ -13,6 +13,9 @@
 from vizro.models.types import capture
 from vizro_ai import VizroAI
 
+logger = logging.getLogger(__name__)
+logger.setLevel(logging.INFO)  # TODO: remove manual setting and make centrally controlled
+
 SUPPORTED_VENDORS = {"OpenAI": ChatOpenAI}
 
 
@@ -62,6 +65,7 @@ def create_response(ai_response, figure, user_prompt, filename):
         return create_response(ai_response, figure, user_prompt, data["filename"])
 
     try:
+        logger.info("Attempting chart code.")
         df = pd.DataFrame(data["data"])
         ai_outputs = get_vizro_ai_plot(
             user_prompt=user_prompt,
@@ -76,10 +80,12 @@ def create_response(ai_response, figure, user_prompt, filename):
         formatted_code = black.format_str(ai_code, mode=black.Mode(line_length=100))
 
         ai_response = "\n".join(["```python", formatted_code, "```"])
+        logger.info("Successful query produced.")
         return create_response(ai_response, figure, user_prompt, data["filename"])
 
     except Exception as exc:
-        logging.exception(exc)
+        logger.debug(exc)
+        logger.info("Chart creation failed.")
         ai_response = f"Sorry, I can't do that. Following Error occurred: {exc}"
         figure = go.Figure()
         return create_response(ai_response, figure, user_prompt, data["filename"])
@@ -109,7 +115,7 @@ def data_upload_action(contents, filename):
         return {"data": data, "filename": filename}
 
     except Exception as e:
-        logging.exception(e)
+        logger.debug(e)
         return {"error_message": "There was an error processing this file."}