[Docs] colab notebook for chart

vizro-ai/README.md

@@ -7,6 +7,7 @@
 [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/mckinsey/vizro/blob/main/LICENSE.md)
 [![Documentation](https://readthedocs.org/projects/vizro-ai/badge/?version=latest)](https://vizro-ai.readthedocs.io/)
 [![OpenSSF Best Practices](https://www.bestpractices.dev/projects/7858/badge)](https://www.bestpractices.dev/projects/7858)
+[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/mckinsey/vizro/blob/docs/add_colab_link/vizro-ai/examples/colab-example-chart.ipynb)
 
 <img src="./docs/assets/readme/readme_animation.gif" alt="Gif to demonstrate vizro-ai">
 

vizro-ai/changelog.d/20240807_005926_lingyi_zhang_add_colab_link.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/examples/chart_by_vizro_ai.ipynb

@@ -0,0 +1,218 @@
+{
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "id": "b72a43eb-2991-45da-844a-a88c1b9b6f1e",
+      "metadata": {
+        "id": "b72a43eb-2991-45da-844a-a88c1b9b6f1e"
+      },
+      "source": [
+        "[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/mckinsey/vizro/blob/docs/add_colab_link/vizro-ai/examples/chart_by_vizro_ai.ipynb)"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "id": "fbc65f78",
+      "metadata": {
+        "id": "fbc65f78"
+      },
+      "source": [
+        "# Use Vizro-AI to generate Vizro charts"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "source": [
+        "#### Disclaimer: Using Google Colab\n",
+        "Please read carefully before proceeding:\n",
+        "\n",
+        "1. Google's Servers: This notebook runs on Google's servers. Your code and data will be processed and temporarily stored on Google's infrastructure.\n",
+        "2. Data Privacy: Be mindful of the data you upload or process here. Avoid using sensitive, confidential, or personal information that shouldn't be shared with third parties.\n",
+        "3. Security Considerations: Colab is a shared environment. While Google implements security measures, treat it as a public environment and act accordingly.\n",
+        "4. Terms of Service: Ensure your usage complies with Google Colab's Terms of Service and Google Cloud's Terms of Service.\n",
+        "5. Data Persistence: Data in Colab notebooks is not permanently stored. Save important data and results to your local machine or a secure cloud storage.\n",
+        "6. Resource Limitations: Colab provides free resources, but these are subject to availability and usage limits.\n",
+        "\n",
+        "By using this Colab notebook, you acknowledge that you understand and accept these conditions. Please use Colab at your own discretion and responsibility."
+      ],
+      "metadata": {
+        "id": "zNloarZrwORG"
+      },
+      "id": "zNloarZrwORG"
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "id": "rdnxbyKfNZkT",
+      "metadata": {
+        "cellView": "form",
+        "id": "rdnxbyKfNZkT"
+      },
+      "outputs": [],
+      "source": [
+        "# @title ## Setup\n",
+        "#@markdown <-- click the `Run cell` button to activate this cell\n",
+        "#@markdown #### 1. Install Vizro-AI\n",
+        "print(\"Installing dependencies\")\n",
+        "!pip install \"orjson<3.10.7\" -q -q -q\n",
+        "!pip install vizro-ai -q -q -q\n",
+        "print(\"✅ Installation finished\")\n",
+        "\n",
+        "#@markdown #### 2. Secure your LLM API key as environment variable\n",
+        "#@markdown - click the `Secrets` button on the left\n",
+        "#@markdown - click `Add new secret`\n",
+        "#@markdown - insert \"OPENAI_API_KEY\" under `Name`\n",
+        "#@markdown - insert the API key value under `Value`\n",
+        "#@markdown - [optional] you might also need to insert \"OPENAI_BASE_URL\" and its value, based on the requirements from your API key provider.\n",
+        "#@markdown - click the `Notebook access` toggle to make it available for the notebook run\n",
+        "\n",
+        "import os\n",
+        "from google.colab import userdata\n",
+        "\n",
+        "def safe_get_userdata(key):\n",
+        "    try:\n",
+        "        return userdata.get(key)\n",
+        "    except Exception as e:\n",
+        "        print(f\"Warning: Unable to access {key}. Reason: {str(e)}\")\n",
+        "        return None\n",
+        "\n",
+        "# Always try to set the OPENAI_API_KEY\n",
+        "api_key = safe_get_userdata(\"OPENAI_API_KEY\")\n",
+        "if api_key:\n",
+        "    os.environ[\"OPENAI_API_KEY\"] = api_key\n",
+        "else:\n",
+        "    print(\"❌ OPENAI_API_KEY not set. Click `Secrets` icon on the left to setup.\")\n",
+        "\n",
+        "# Conditionally set OPENAI_BASE_URL if provided and accessible\n",
+        "openai_base_url = safe_get_userdata(\"OPENAI_BASE_URL\")\n",
+        "if openai_base_url:\n",
+        "    os.environ[\"OPENAI_BASE_URL\"] = openai_base_url\n",
+        "else:\n",
+        "    print(\"User defined OPENAI_BASE_URL not set. Using default URL.\")\n",
+        "\n",
+        "print(\"\\nCurrent environment variables:\")\n",
+        "print(f\"OPENAI_API_KEY: {'✅ Set' if 'OPENAI_API_KEY' in os.environ else 'Not set'}\")\n",
+        "print(f\"OPENAI_BASE_URL: {'✅ Set' if 'OPENAI_BASE_URL' in os.environ else 'Not set by user, use default'}\")"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "id": "c6ac1b7d-5830-495b-94be-1ad7bf3022d3",
+      "metadata": {
+        "cellView": "form",
+        "id": "c6ac1b7d-5830-495b-94be-1ad7bf3022d3"
+      },
+      "outputs": [],
+      "source": [
+        "# @title ## Set user input\n",
+        "\n",
+        "#@markdown <-- click the `Run cell` button to activate this cell\n",
+        "#@markdown #### 1. Choose the LLM model\n",
+        "\n",
+        "LLM = 'gpt-3.5-turbo' # @param [\"gpt-4o\", \"gpt-3.5-turbo\", \"gpt-4-turbo\", \"gpt-4o-mini\"]\n",
+        "\n",
+        "# print(f\"Selected LLM: {LLM}\")\n",
+        "\n",
+        "#@markdown ---\n",
+        "#@markdown #### 2. Upload your CSV data (only 1 dataframe accepted per chart)\n",
+        "#@markdown - click `Choose Files` if you'd like to upload and use your own data\n",
+        "#@markdown - or click `Cancel upload` and use the default example data for initial exploration\n",
+        "\n",
+        "import pandas as pd\n",
+        "from plotly.express.data import gapminder\n",
+        "from google.colab import files\n",
+        "\n",
+        "uploaded = files.upload()\n",
+        "\n",
+        "if not uploaded:\n",
+        "    print(\"No files uploaded. Use the plotly gapminder dataset as an example.\")\n",
+        "    df = gapminder()\n",
+        "else:\n",
+        "    for fn in uploaded.keys():\n",
+        "        print('User uploaded file \"{name}\"'.format(\n",
+        "            name=fn, length=len(uploaded[fn])))\n",
+        "\n",
+        "        df = pd.read_csv(fn)\n",
+        "print(f\"Dataframe used for plotting: \\n{df.head()}\")\n",
+        "\n",
+        "#@markdown ---\n",
+        "#@markdown #### 3. Input your chart question\n",
+        "\n",
+        "# @markdown #### Instructions:\n",
+        "user_input = 'Describe the composition of gdp in continent' # @param {type:\"string\", placeholder:\"Enter the requirements for the chart\"}\n",
+        "\n",
+        "# print(user_input)"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "id": "_yeVqs9nUgYH",
+      "metadata": {
+        "cellView": "form",
+        "id": "_yeVqs9nUgYH"
+      },
+      "outputs": [],
+      "source": [
+        "# @title ## Create the chart using Vizro-AI\n",
+        "\n",
+        "#@markdown <-- click the `Run cell` button to activate this cell\n",
+        "\n",
+        "import ipywidgets as widgets\n",
+        "from IPython.display import display\n",
+        "\n",
+        "def run_code(button):\n",
+        "    print(\"Running VizroAI...\")\n",
+        "    from vizro_ai import VizroAI\n",
+        "\n",
+        "    vizro_ai = VizroAI()\n",
+        "    button1.result = vizro_ai.plot(df, user_input, explain=True)\n",
+        "\n",
+        "button1 = widgets.Button(description=\"Create chart!\", button_style=\"info\")\n",
+        "display(button1)\n",
+        "\n",
+        "button1.on_click(run_code)"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "id": "B9P0eNoqc7gd",
+      "metadata": {
+        "cellView": "form",
+        "id": "B9P0eNoqc7gd"
+      },
+      "outputs": [],
+      "source": [
+        "# @title ## Show the chart\n",
+        "#@markdown <-- click the `Run cell` button to activate this cell\n",
+        "button1.result.show()"
+      ]
+    }
+  ],
+  "metadata": {
+    "colab": {
+      "provenance": []
+    },
+    "kernelspec": {
+      "display_name": "Python 3 (ipykernel)",
+      "language": "python",
+      "name": "python3"
+    },
+    "language_info": {
+      "codemirror_mode": {
+        "name": "ipython",
+        "version": 3
+      },
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "nbconvert_exporter": "python",
+      "pygments_lexer": "ipython3",
+      "version": "3.9.7"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 5
+}