[Docs] Tidy Vizro-ai docs (#466)

vizro-ai/changelog.d/20240508_210432_nadija_ratkusic_graca_vizro_ai_tidy_docs.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-ai/docs/index.md

@@ -18,24 +18,25 @@ Vizro-AI uses a large language model and Plotly to generate code for an interact
     [:octicons-arrow-right-24: Quickstart tutorial](pages/tutorials/quickstart/)
 
 
--   :fontawesome-solid-keyboard:{ .lg .middle } __Get hands-on__
+- :fontawesome-solid-keyboard:{ .lg .middle } __Get hands-on__
 
     ---
 
     [:octicons-arrow-right-24: Ways to run Vizro-AI](pages/user-guides/run-vizro-ai/)</br>
+    [:octicons-arrow-right-24: Customize models](pages/user-guides/customize-vizro-ai/)</br>
     [:octicons-arrow-right-24: Create advanced charts](pages/user-guides/create-advanced-charts/)</br>
     [:octicons-arrow-right-24: Use different languages](pages/user-guides/use-different-languages/)</br>
     [:octicons-arrow-right-24: Add charts to a dashboard](pages/user-guides/add-generated-chart-usecase/)
 
--   :material-format-font:{ .lg .middle } __Find out more__
+- :material-format-font:{ .lg .middle } __Find out more__
 
     ---
 
     [:octicons-arrow-right-24: FAQs](pages/explanation/faq/) </br>
     [:octicons-arrow-right-24: Safeguard dynamic code execution](pages/explanation/safeguard/) </br>
     [:octicons-arrow-right-24: Guidelines for use of LLMs](pages/explanation/safety-in-vizro-ai//)
 
--   :fontawesome-solid-chart-column:{ .lg .middle } __Vizro__
+- :fontawesome-solid-chart-column:{ .lg .middle } __Vizro__
 
     ---
 

vizro-ai/docs/pages/API-reference/vizro-ai.md

@@ -0,0 +1,10 @@
+# VizroAI
+
+<!-- vale off -->
+::: vizro_ai
+    options:
+      merge_init_into_class: false
+      docstring_options:
+        ignore_init_summary: false
+
+<!-- vale on -->

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

@@ -60,6 +60,7 @@ Next, we instantiate `VizroAI`:
 ```python
 vizro_ai = VizroAI()
 ```
+To learn how to customize the `VizroAI` class, check out the guide on [how to customize models](../user-guides/customize-vizro-ai.md).
 
 Finally, we call the `plot()` method with our English language instruction, to generate the visualization:
 

vizro-ai/docs/pages/user-guides/add-generated-chart-usecase.md

@@ -1,6 +1,8 @@
 # How to add Vizro-AI created charts into a Vizro dashboard
 
-This guide explains how to add a chart generated by Vizro-AI to your [Vizro](https://github.com/mckinsey/vizro/tree/main/vizro-core) dashboard.
+This guide explains the different ways in which you can add a chart generated by Vizro-AI to your [Vizro](https://github.com/mckinsey/vizro/tree/main/vizro-core) dashboard.
+
+###  Use Vizro-AI's generated code
 
 1. Create a chart with Vizro-AI that you would like to visualize in a dashboard.
 
@@ -103,4 +105,55 @@ This object must then be passed to the `figure` argument of the Vizro [Graph](ht
     [VizroDashboard]: ../../assets/user_guides/chart_into_dashboard_large.gif
 
 
+### Use Vizro-AI dynamically to return a `fig` object
+
+Alternatively, we can use Vizro-AI dynamically and assign the output of `plot()` directly to the fig variable, enabling its reuse in the `vm.Graph.figure` argument.
+This method offers streamlined efficiency, eliminating the need for code copying.
+However, it is important to note that each dashboard run triggers an API call to OpenAI, potentially escalating costs, although this can be avoided if the `fig` object is stored and retrieved as needed, instead of making repeated calls to `plot()`.
+
+Executing the code below yields the identical dashboard as the example above.
+
+
+!!! example "Use Vizro-AI fig directly in vizro dashboard"
+    === "Code for the cell"
+        ```py
+        from vizro import Vizro
+        import vizro.models as vm
+        import pandas as pd
+        import plotly.express as px
+        import vizro_ai
+        from vizro_ai import VizroAI
+
+        from dotenv import load_dotenv
+        load_dotenv()
+        df = px.data.gapminder()
+        vizro_ai = VizroAI(model="gpt-4-0613")
+
+        fig = vizro_ai.plot(df,
+                      """Plot a bubble chart to show the changes in life expectancy
+                       and GDP per capita for each country over time.
+                       Color the bubbles by continent.
+                       Add animation on yearly basis, and do not use facets.
+                       Put the legend on top""")
+
+        page = vm.Page(
+            title = 'Demographics',
+            components = [
+                vm.Graph(id='bubble chart', figure=fig),
+                vm.Graph(id='histogram', figure = px.box(df,
+                                                         x='continent',
+                                                         y='lifeExp',
+                                                         color='continent',
+                                                         title='Life Expectancy per Continent'))],
+            controls = [
+                vm.Filter(column='country'),
+                vm.Filter(column='continent')])
+
+        Vizro().build(vm.Dashboard(pages=[page])).run(port=8000)
+        ```
+    === "Result"
+        [![VizroDashboard2]][VizroDashboard2]
+
+    [VizroDashboard2]: ../../assets/user_guides/chart_into_dashboard_2.gif
+
 With Vizro-AI you can create visually captivating charts and plug them into your [Vizro](https://github.com/mckinsey/vizro/tree/main/vizro-core) dashboard in seconds!

vizro-ai/mkdocs.yml

@@ -18,6 +18,8 @@ nav:
       - Disclaimer: pages/explanation/disclaimer.md
       - Safeguard code execution: pages/explanation/safeguard.md
       - Safety in Vizro-AI: pages/explanation/safety-in-vizro-ai.md
+  - API Reference:
+      - VizroAI: pages/API-reference/vizro-ai.md
   #- Contribute:
   #      - Contributing: pages/contribute/contributing.md
   - Vizro:

vizro-ai/src/vizro_ai/_vizro_ai.py

@@ -114,7 +114,7 @@ def plot(
             max_debug_retry: Maximum number of retries to debug errors. Defaults to `3`.
 
         Returns:
-            go.Figure
+            Plotly Figure object or a dictionary containing data
 
         """
         output_dict = self._run_plot_tasks(df, user_input, explain=explain, max_debug_retry=max_debug_retry)