Skip to content

Instantly share code, notes, and snippets.

@rmitra34

rmitra34/Conversational-Interaction-Colab.ipynb

Last active October 19, 2022 02:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rmitra34/bb90b21eb19b0aa131d8d64f908ffdcb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rmitra34/bb90b21eb19b0aa131d8d64f908ffdcb to your computer and use it in GitHub Desktop.
Download ZIP
Conversational Interaction Demo for NL4DV. This can be opened and run in Colab.
Display the source blob
Display the rendered blob
Raw
Conversational-Interaction-Colab.ipynb
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Installations"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"^C\r\n"
]
}
],
"source": [
"!pip install nl4dv &> /dev/null\n",
"!python -m nltk.downloader popular &> /dev/null\n",
"!python -m spacy download en_core_web_sm &> /dev/null\n",
"!pip install --upgrade notebook &> /dev/null\n",
"!jupyter nbextension install --sys-prefix --py vega &> /dev/null\n",
"!jupyter nbextension enable vega --py --sys-prefix &> /dev/null\n",
"!pip install altair &> /dev/null"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Imports"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"import json\n",
"from nl4dv import NL4DV\n",
"import os\n",
"import altair as alt\n",
"from altair import vega, VegaLite\n",
"vega.renderers.enable('colab')\n",
"vegalite.renderers.enable('colab')\n",
"from IPython.display import display"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Initializing NL4DV with a Housing Dataset"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [],
"source": [
"data_url = \"https://raw.githubusercontent.com/nl4dv/nl4dv/master/examples/assets/data/housing.csv\"\n",
"label_attribute = None\n",
"dependency_parser_config = {\"name\": \"spacy\", \"model\": \"en_core_web_sm\", \"parser\": None}\n",
"nl4dv_instance = NL4DV(verbose=False, \n",
" debug=True, \n",
" data_url=data_url, \n",
" label_attribute=label_attribute, \n",
" dependency_parser_config=dependency_parser_config\n",
" )"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Rendering the Most Relevant Visualization\n"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Conversation ID: 0\n",
"Context ID: 0\n"
]
},
{
"data": {
"text/html": [
"\n",
"<div id=\"altair-viz-3b3b43a192964d99a8fed2286fcda2eb\"></div>\n",
"<script type=\"text/javascript\">\n",
" var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
" (function(spec, embedOpt){\n",
" let outputDiv = document.currentScript.previousElementSibling;\n",
" if (outputDiv.id !== \"altair-viz-3b3b43a192964d99a8fed2286fcda2eb\") {\n",
" outputDiv = document.getElementById(\"altair-viz-3b3b43a192964d99a8fed2286fcda2eb\");\n",
" }\n",
" const paths = {\n",
" \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
" \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
" \"vega-lite\": \"https://cdn.jsdelivr.net/npm//[email protected]?noext\",\n",
" \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
" };\n",
"\n",
" function maybeLoadScript(lib, version) {\n",
" var key = `${lib.replace(\"-\", \"\")}_version`;\n",
" return (VEGA_DEBUG[key] == version) ?\n",
" Promise.resolve(paths[lib]) :\n",
" new Promise(function(resolve, reject) {\n",
" var s = document.createElement('script');\n",
" document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
" s.async = true;\n",
" s.onload = () => {\n",
" VEGA_DEBUG[key] = version;\n",
" return resolve(paths[lib]);\n",
" };\n",
" s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
" s.src = paths[lib];\n",
" });\n",
" }\n",
"\n",
" function showError(err) {\n",
" outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
" throw err;\n",
" }\n",
"\n",
" function displayChart(vegaEmbed) {\n",
" vegaEmbed(outputDiv, spec, embedOpt)\n",
" .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
" }\n",
"\n",
" if(typeof define === \"function\" && define.amd) {\n",
" requirejs.config({paths});\n",
" require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
" } else {\n",
" maybeLoadScript(\"vega\", \"5\")\n",
" .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
" .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
" .catch(showError)\n",
" .then(() => displayChart(vegaEmbed));\n",
" }\n",
" })({\"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\", \"mark\": {\"type\": \"line\", \"tooltip\": true}, \"encoding\": {\"y\": {\"field\": \"Price\", \"type\": \"quantitative\", \"aggregate\": \"mean\", \"axis\": {\"format\": \"s\"}}, \"color\": {\"field\": \"Home Type\", \"type\": \"nominal\"}, \"x\": {\"field\": \"Year\", \"type\": \"temporal\"}}, \"transform\": [], \"data\": {\"url\": \"../../assets/data/housing.csv\", \"format\": {\"type\": \"csv\"}}}, {\"mode\": \"vega-lite\"});\n",
"</script>"
],
"text/plain": [
"<altair.vegalite.v4.display.VegaLite at 0x11b4117c0>"
]
},
"execution_count": 7,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"response = nl4dv_instance.analyze_query(\"Show average prices for different home types over the years\")\n",
"display(alt.display.html_renderer(response['visList'][0]['vlSpec']), raw=True)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Auto-detecting Follow Up Queries"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Previous Query: \n",
"Show average prices for different home types over the years\n",
"\n",
"Current Context: \n",
"Conversation ID: 0\n",
"Context ID: 1\n"
]
},
{
"data": {
"text/html": [
"\n",
"<div id=\"altair-viz-a50bdb3828bd40348a0d744e2e996b1f\"></div>\n",
"<script type=\"text/javascript\">\n",
" var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
" (function(spec, embedOpt){\n",
" let outputDiv = document.currentScript.previousElementSibling;\n",
" if (outputDiv.id !== \"altair-viz-a50bdb3828bd40348a0d744e2e996b1f\") {\n",
" outputDiv = document.getElementById(\"altair-viz-a50bdb3828bd40348a0d744e2e996b1f\");\n",
" }\n",
" const paths = {\n",
" \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
" \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
" \"vega-lite\": \"https://cdn.jsdelivr.net/npm//[email protected]?noext\",\n",
" \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
" };\n",
"\n",
" function maybeLoadScript(lib, version) {\n",
" var key = `${lib.replace(\"-\", \"\")}_version`;\n",
" return (VEGA_DEBUG[key] == version) ?\n",
" Promise.resolve(paths[lib]) :\n",
" new Promise(function(resolve, reject) {\n",
" var s = document.createElement('script');\n",
" document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
" s.async = true;\n",
" s.onload = () => {\n",
" VEGA_DEBUG[key] = version;\n",
" return resolve(paths[lib]);\n",
" };\n",
" s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
" s.src = paths[lib];\n",
" });\n",
" }\n",
"\n",
" function showError(err) {\n",
" outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
" throw err;\n",
" }\n",
"\n",
" function displayChart(vegaEmbed) {\n",
" vegaEmbed(outputDiv, spec, embedOpt)\n",
" .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
" }\n",
"\n",
" if(typeof define === \"function\" && define.amd) {\n",
" requirejs.config({paths});\n",
" require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
" } else {\n",
" maybeLoadScript(\"vega\", \"5\")\n",
" .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
" .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
" .catch(showError)\n",
" .then(() => displayChart(vegaEmbed));\n",
" }\n",
" })({\"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\", \"mark\": {\"type\": \"bar\", \"tooltip\": true}, \"encoding\": {\"y\": {\"field\": \"Price\", \"type\": \"quantitative\", \"aggregate\": \"mean\", \"axis\": {\"format\": \"s\"}}, \"x\": {\"field\": \"Home Type\", \"type\": \"nominal\"}, \"column\": {\"field\": \"Year\", \"type\": \"temporal\"}, \"color\": {\"field\": \"Home Type\", \"type\": \"nominal\"}}, \"transform\": [], \"data\": {\"url\": \"../../assets/data/housing.csv\", \"format\": {\"type\": \"csv\"}}}, {\"mode\": \"vega-lite\"});\n",
"</script>"
],
"text/plain": [
"<altair.vegalite.v4.display.VegaLite at 0x11fde9b20>"
]
},
"execution_count": 8,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"response = nl4dv_instance.analyze_query(\"As a bar chart\", dialog='auto')\n",
"display(alt.display.html_renderer(response['visList'][0]['vlSpec']), raw=True)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Generating a New Standalone Visualization"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Conversation ID: 1\n",
"Context ID: 0\n"
]
},
{
"data": {
"text/html": [
"\n",
"<div id=\"altair-viz-6382722720f64b8287c0b6543a558eef\"></div>\n",
"<script type=\"text/javascript\">\n",
" var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
" (function(spec, embedOpt){\n",
" let outputDiv = document.currentScript.previousElementSibling;\n",
" if (outputDiv.id !== \"altair-viz-6382722720f64b8287c0b6543a558eef\") {\n",
" outputDiv = document.getElementById(\"altair-viz-6382722720f64b8287c0b6543a558eef\");\n",
" }\n",
" const paths = {\n",
" \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
" \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
" \"vega-lite\": \"https://cdn.jsdelivr.net/npm//[email protected]?noext\",\n",
" \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
" };\n",
"\n",
" function maybeLoadScript(lib, version) {\n",
" var key = `${lib.replace(\"-\", \"\")}_version`;\n",
" return (VEGA_DEBUG[key] == version) ?\n",
" Promise.resolve(paths[lib]) :\n",
" new Promise(function(resolve, reject) {\n",
" var s = document.createElement('script');\n",
" document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
" s.async = true;\n",
" s.onload = () => {\n",
" VEGA_DEBUG[key] = version;\n",
" return resolve(paths[lib]);\n",
" };\n",
" s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
" s.src = paths[lib];\n",
" });\n",
" }\n",
"\n",
" function showError(err) {\n",
" outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
" throw err;\n",
" }\n",
"\n",
" function displayChart(vegaEmbed) {\n",
" vegaEmbed(outputDiv, spec, embedOpt)\n",
" .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
" }\n",
"\n",
" if(typeof define === \"function\" && define.amd) {\n",
" requirejs.config({paths});\n",
" require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
" } else {\n",
" maybeLoadScript(\"vega\", \"5\")\n",
" .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
" .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
" .catch(showError)\n",
" .then(() => displayChart(vegaEmbed));\n",
" }\n",
" })({\"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\", \"mark\": {\"type\": \"point\", \"tooltip\": true}, \"encoding\": {\"x\": {\"field\": \"Lot Area\", \"type\": \"quantitative\", \"axis\": {\"format\": \"s\"}}, \"y\": {\"field\": \"Price\", \"type\": \"quantitative\", \"axis\": {\"format\": \"s\"}}}, \"transform\": [], \"data\": {\"url\": \"../../assets/data/housing.csv\", \"format\": {\"type\": \"csv\"}}}, {\"mode\": \"vega-lite\"});\n",
"</script>"
],
"text/plain": [
"<altair.vegalite.v4.display.VegaLite at 0x11fde9f70>"
]
},
"execution_count": 9,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"response = nl4dv_instance.analyze_query(\"Correlate Price and Lot Area\", dialog=False)\n",
"display(alt.display.html_renderer(response['visList'][0]['vlSpec']), raw=True)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Following Up on a Previous Conversation"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Previous Query: \n",
"As a bar chart\n",
"\n",
"Current Context: \n",
"Conversation ID: 0\n",
"Context ID: 2\n"
]
},
{
"data": {
"text/html": [
"\n",
"<div id=\"altair-viz-59edaf675b63427186e1622f6fa9be68\"></div>\n",
"<script type=\"text/javascript\">\n",
" var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
" (function(spec, embedOpt){\n",
" let outputDiv = document.currentScript.previousElementSibling;\n",
" if (outputDiv.id !== \"altair-viz-59edaf675b63427186e1622f6fa9be68\") {\n",
" outputDiv = document.getElementById(\"altair-viz-59edaf675b63427186e1622f6fa9be68\");\n",
" }\n",
" const paths = {\n",
" \"vega\": \"https://cdn.jsdelivr.net/npm//vega@5?noext\",\n",
" \"vega-lib\": \"https://cdn.jsdelivr.net/npm//vega-lib?noext\",\n",
" \"vega-lite\": \"https://cdn.jsdelivr.net/npm//[email protected]?noext\",\n",
" \"vega-embed\": \"https://cdn.jsdelivr.net/npm//vega-embed@6?noext\",\n",
" };\n",
"\n",
" function maybeLoadScript(lib, version) {\n",
" var key = `${lib.replace(\"-\", \"\")}_version`;\n",
" return (VEGA_DEBUG[key] == version) ?\n",
" Promise.resolve(paths[lib]) :\n",
" new Promise(function(resolve, reject) {\n",
" var s = document.createElement('script');\n",
" document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
" s.async = true;\n",
" s.onload = () => {\n",
" VEGA_DEBUG[key] = version;\n",
" return resolve(paths[lib]);\n",
" };\n",
" s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
" s.src = paths[lib];\n",
" });\n",
" }\n",
"\n",
" function showError(err) {\n",
" outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
" throw err;\n",
" }\n",
"\n",
" function displayChart(vegaEmbed) {\n",
" vegaEmbed(outputDiv, spec, embedOpt)\n",
" .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
" }\n",
"\n",
" if(typeof define === \"function\" && define.amd) {\n",
" requirejs.config({paths});\n",
" require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
" } else {\n",
" maybeLoadScript(\"vega\", \"5\")\n",
" .then(() => maybeLoadScript(\"vega-lite\", \"4.17.0\"))\n",
" .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
" .catch(showError)\n",
" .then(() => displayChart(vegaEmbed));\n",
" }\n",
" })({\"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\", \"mark\": {\"type\": \"bar\", \"tooltip\": true}, \"encoding\": {\"y\": {\"field\": \"Price\", \"type\": \"quantitative\", \"aggregate\": \"mean\", \"axis\": {\"format\": \"s\"}}, \"x\": {\"field\": \"Home Type\", \"type\": \"nominal\"}, \"column\": {\"field\": \"Year\", \"type\": \"temporal\"}, \"color\": {\"field\": \"Home Type\", \"type\": \"nominal\"}}, \"transform\": [{\"filter\": {\"field\": \"Home Type\", \"oneOf\": [\"Condo\", \"Duplex\"]}}], \"data\": {\"url\": \"../../assets/data/housing.csv\", \"format\": {\"type\": \"csv\"}}}, {\"mode\": \"vega-lite\"});\n",
"</script>"
],
"text/plain": [
"<altair.vegalite.v4.display.VegaLite at 0x11a44cdc0>"
]
},
"execution_count": 10,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"response = nl4dv_instance.analyze_query(\"Just show condos and duplexes\", dialog=True, dialog_id = \"0\", query_id = \"1\")\n",
"display(alt.display.html_renderer(response['visList'][0]['vlSpec']), raw=True)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"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.8.5"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment