diff --git a/docs/notes/dev-tools/google-colab/filesystem.ipynb b/docs/notes/dev-tools/google-colab/filesystem.ipynb index 9f093b3..19c91e6 100644 --- a/docs/notes/dev-tools/google-colab/filesystem.ipynb +++ b/docs/notes/dev-tools/google-colab/filesystem.ipynb @@ -6,7 +6,7 @@ "id": "EfWz5wVcHyYH" }, "source": [ - "# Accessing the Filesystem in Colab" + "# Accessing the Filesystem in Google Colab" ] }, { diff --git a/docs/notes/dev-tools/google-colab/form-inputs.ipynb b/docs/notes/dev-tools/google-colab/form-inputs.ipynb index ccf602b..345dedc 100644 --- a/docs/notes/dev-tools/google-colab/form-inputs.ipynb +++ b/docs/notes/dev-tools/google-colab/form-inputs.ipynb @@ -1,156 +1,39 @@ { - "nbformat": 4, - "nbformat_minor": 0, - "metadata": { - "colab": { - "provenance": [], - "toc_visible": true - }, - "kernelspec": { - "name": "python3", - "display_name": "Python 3" - }, - "language_info": { - "name": "python" - }, - "widgets": { - "application/vnd.jupyter.widget-state+json": { - "af6a2992bee5428aaf1b92e34ab8aee7": { - "model_module": "@jupyter-widgets/controls", - "model_name": "DropdownModel", - "model_module_version": "1.5.0", - "state": { - "_dom_classes": [], - "_model_module": "@jupyter-widgets/controls", - "_model_module_version": "1.5.0", - "_model_name": "DropdownModel", - "_options_labels": [ - "MSFT", - "GOOGL", - "NVDA", - "SPOT", - "NFLX" - ], - "_view_count": null, - "_view_module": "@jupyter-widgets/controls", - "_view_module_version": "1.5.0", - "_view_name": "DropdownView", - "description": "Symbol: ", - "description_tooltip": null, - "disabled": false, - "index": 2, - "layout": "IPY_MODEL_d7d8264ada2048d59aca65e41182fca4", - "style": "IPY_MODEL_a03a7e16c502430b93c5a9dbc06a2927" - } - }, - "d7d8264ada2048d59aca65e41182fca4": { - "model_module": "@jupyter-widgets/base", - "model_name": "LayoutModel", - "model_module_version": "1.2.0", - "state": { - "_model_module": "@jupyter-widgets/base", - "_model_module_version": "1.2.0", - "_model_name": "LayoutModel", - "_view_count": null, - "_view_module": "@jupyter-widgets/base", - "_view_module_version": "1.2.0", - "_view_name": "LayoutView", - "align_content": null, - "align_items": null, - "align_self": null, - "border": null, - "bottom": null, - "display": null, - "flex": null, - "flex_flow": null, - "grid_area": null, - "grid_auto_columns": null, - "grid_auto_flow": null, - "grid_auto_rows": null, - "grid_column": null, - "grid_gap": null, - "grid_row": null, - "grid_template_areas": null, - "grid_template_columns": null, - "grid_template_rows": null, - "height": null, - "justify_content": null, - "justify_items": null, - "left": null, - "margin": null, - "max_height": null, - "max_width": null, - "min_height": null, - "min_width": null, - "object_fit": null, - "object_position": null, - "order": null, - "overflow": null, - "overflow_x": null, - "overflow_y": null, - "padding": null, - "right": null, - "top": null, - "visibility": null, - "width": null - } - }, - "a03a7e16c502430b93c5a9dbc06a2927": { - "model_module": "@jupyter-widgets/controls", - "model_name": "DescriptionStyleModel", - "model_module_version": "1.5.0", - "state": { - "_model_module": "@jupyter-widgets/controls", - "_model_module_version": "1.5.0", - "_model_name": "DescriptionStyleModel", - "_view_count": null, - "_view_module": "@jupyter-widgets/base", - "_view_module_version": "1.2.0", - "_view_name": "StyleView", - "description_width": "" - } - } - } - } - }, "cells": [ { "cell_type": "markdown", - "source": [ - "# Form Inputs in Google Colab" - ], "metadata": { "id": "QwBmtMzEQ5ib" - } + }, + "source": [ + "# Forms and Inputs in Google Colab" + ] }, { "cell_type": "markdown", + "metadata": { + "id": "--0cSuSxR1bU" + }, "source": [ "When creating data dashboards and user facing applications, it may be helpful to ask the user for inputs.\n", "\n", "Besides capturing a textual inputs using the `input` function, we can use a form to capture a variety of other kinds of inputs.\n", "\n", - "To implement a form in Googl Colab, we can use Colab Form Inputs, or leverage the capabilities of the Jupyter Widgets package." - ], - "metadata": { - "id": "--0cSuSxR1bU" - } + "To implement a form in Google Colab, we can use Colab Form Inputs, or leverage the capabilities of the Jupyter Widgets package." + ] }, { "cell_type": "markdown", - "source": [ - "## The `input` Function" - ], "metadata": { "id": "tQdbmlndUtYe" - } + }, + "source": [ + "## The `input` Function" + ] }, { "cell_type": "code", - "source": [ - "symbol = input(\"Please enter a stock symbol (e.g. 'MSFT'): \")\n", - "print(symbol)" - ], + "execution_count": 15, "metadata": { "colab": { "base_uri": "https://localhost:8080/" @@ -158,56 +41,54 @@ "id": "jNVWlz3sTRUo", "outputId": "0b94ad85-ff20-4632-a50a-c28b92c58fac" }, - "execution_count": 15, "outputs": [ { - "output_type": "stream", "name": "stdout", + "output_type": "stream", "text": [ "Please enter a stock symbol (e.g. 'MSFT'): NVDA\n", "NVDA\n" ] } + ], + "source": [ + "symbol = input(\"Please enter a stock symbol (e.g. 'MSFT'): \")\n", + "print(symbol)" ] }, { "cell_type": "markdown", - "source": [ - "## The `getpass` Module" - ], "metadata": { "id": "0Vp7ncedUu_w" - } + }, + "source": [ + "## The `getpass` Module" + ] }, { "cell_type": "markdown", + "metadata": { + "id": "RgDVmooKUxfo" + }, "source": [ "When using the `input` function in Python to capture user inputs, we end up seeing the resulting value as the user types it.\n", "\n", "But what if we want to ask for more sensitive inputs, like secret passwords or credentials? We need a way to prevent them from showing up in the program's output.\n", "\n" - ], - "metadata": { - "id": "RgDVmooKUxfo" - } + ] }, { "cell_type": "markdown", - "source": [ - "To hide or \"mask\" user-inputted values, we can use the `getpass` function from the [`getpass` module](https://docs.python.org/3/library/getpass.html) instead:\n" - ], "metadata": { "id": "YevMLazFVEOh" - } + }, + "source": [ + "To hide or \"mask\" user-inputted values, we can use the `getpass` function from the [`getpass` module](https://docs.python.org/3/library/getpass.html) instead:\n" + ] }, { "cell_type": "code", - "source": [ - "from getpass import getpass\n", - "\n", - "my_password = getpass(\"Please input your secret password: \")\n", - "print(my_password)" - ], + "execution_count": 14, "metadata": { "colab": { "base_uri": "https://localhost:8080/" @@ -215,39 +96,49 @@ "id": "PsvqMVgEU5EC", "outputId": "0f2420ba-a21e-470f-9a91-e1e96e404a9e" }, - "execution_count": 14, "outputs": [ { - "output_type": "stream", "name": "stdout", + "output_type": "stream", "text": [ "Please input your secret password: ··········\n", "super-secret\n" ] } + ], + "source": [ + "from getpass import getpass\n", + "\n", + "my_password = getpass(\"Please input your secret password: \")\n", + "print(my_password)" ] }, { "cell_type": "markdown", + "metadata": { + "id": "zTQYRQV5QxJ0" + }, "source": [ "\n", "## Colab Form Inputs" - ], - "metadata": { - "id": "zTQYRQV5QxJ0" - } + ] }, { "cell_type": "markdown", - "source": [ - "One helpful way to create form inputs is to add the \"Adding form fields\" code snippet, which provides example form fields of various kinds. Adding the snippet yeilds the following example form:" - ], "metadata": { "id": "7aL9Xk0DRQAm" - } + }, + "source": [ + "One helpful way to create form inputs is to add the \"Adding form fields\" code snippet, which provides example form fields of various kinds. Adding the snippet yeilds the following example form:" + ] }, { "cell_type": "code", + "execution_count": null, + "metadata": { + "id": "ADEXhZVqRNVA" + }, + "outputs": [], "source": [ "# @title Example form fields\n", "# @markdown Forms support many types of fields.\n", @@ -260,19 +151,11 @@ "pick_me = \"monday\" # @param ['monday', 'tuesday', 'wednesday', 'thursday']\n", "select_or_input = \"apples\" # @param [\"apples\", \"bananas\", \"oranges\"] {allow-input: true}\n", "# @markdown ---" - ], - "metadata": { - "id": "ADEXhZVqRNVA" - }, - "execution_count": null, - "outputs": [] + ] }, { "cell_type": "code", - "source": [ - "print(slider_value)\n", - "print(date)" - ], + "execution_count": null, "metadata": { "colab": { "base_uri": "https://localhost:8080/" @@ -280,54 +163,57 @@ "id": "m3Ebd61t2KfI", "outputId": "adc6fda7-a324-4992-d51b-3f3600ef3a98" }, - "execution_count": null, "outputs": [ { - "output_type": "stream", "name": "stdout", + "output_type": "stream", "text": [ "142\n", "2024-06-23\n" ] } + ], + "source": [ + "print(slider_value)\n", + "print(date)" ] }, { "cell_type": "markdown", - "source": [ - "We see the form inputs are implemented by structured comments to the right of the variable assignment." - ], "metadata": { "id": "2WQQfsxiQs2F" - } + }, + "source": [ + "We see the form inputs are implemented by structured comments to the right of the variable assignment." + ] }, { "cell_type": "markdown", + "metadata": { + "id": "mbi4JQfxRUIL" + }, "source": [ "\n", "\n", "In practice, we'll probably only need one or two of these, and we can copy the corresponding code snippet and adapt it to fit the use case.\n", "\n", "For example, creating a drop-down menu prompting a user to select a stock symbol:" - ], - "metadata": { - "id": "mbi4JQfxRUIL" - } + ] }, { "cell_type": "code", "execution_count": null, "metadata": { - "id": "fEkxfBb1QsO5", "colab": { "base_uri": "https://localhost:8080/" }, + "id": "fEkxfBb1QsO5", "outputId": "62b63fb1-bf9c-46ab-def4-6c5651aff972" }, "outputs": [ { - "output_type": "stream", "name": "stdout", + "output_type": "stream", "text": [ "NVDA\n" ] @@ -340,52 +226,49 @@ }, { "cell_type": "markdown", + "metadata": { + "id": "jMIl-crD12m6" + }, "source": [ ":::{.callout-note title=\"Note\"}\n", "To make the Colab form inputs work, we first choose an option from the form on the right. This updates the code cell contents on the left. Then we run the cell to store the selected value in memory.\n", ":::" - ], - "metadata": { - "id": "jMIl-crD12m6" - } + ] }, { "cell_type": "markdown", - "source": [ - "## Jupyter Widgets" - ], "metadata": { "id": "knUJVbRympxg" - } + }, + "source": [ + "## Jupyter Widgets" + ] }, { "cell_type": "markdown", + "metadata": { + "id": "MAJ3W3-Qmru5" + }, "source": [ "You'll notice the Colab form approach requires us to hard-code the selectable options in code comments. This may work in many cases, but there may be some situations where you would want to dynamically compile the list of options instead.\n", "\n", "There's another option for creating form inputs in a Python notebook, using the [Jupyter Widgets (`ipywidgets`) package](https://ipywidgets.readthedocs.io/en/stable/).\n", "\n", "\n" - ], - "metadata": { - "id": "MAJ3W3-Qmru5" - } + ] }, { "cell_type": "markdown", - "source": [ - "Compiling dropdown selections from a list:\n" - ], "metadata": { "id": "cyaonQYOXhD3" - } + }, + "source": [ + "Compiling dropdown selections from a list:\n" + ] }, { "cell_type": "code", - "source": [ - "symbols = ['MSFT', 'GOOGL', 'NVDA', 'SPOT', 'NFLX']\n", - "print(symbols)" - ], + "execution_count": 1, "metadata": { "colab": { "base_uri": "https://localhost:8080/" @@ -393,33 +276,23 @@ "id": "1Md1hpCmt5Ws", "outputId": "bc74691b-414a-44bf-c45e-fc8e6a91c77f" }, - "execution_count": 1, "outputs": [ { - "output_type": "stream", "name": "stdout", + "output_type": "stream", "text": [ "['MSFT', 'GOOGL', 'NVDA', 'SPOT', 'NFLX']\n" ] } + ], + "source": [ + "symbols = ['MSFT', 'GOOGL', 'NVDA', 'SPOT', 'NFLX']\n", + "print(symbols)" ] }, { "cell_type": "code", - "source": [ - "from ipywidgets.widgets import Dropdown\n", - "\n", - "# configure the dropdown menu:\n", - "dropdown = Dropdown(\n", - " options=symbols,\n", - " value=symbols[0], # default value\n", - " description='Symbol: ',\n", - " disabled=False,\n", - ")\n", - "\n", - "# display the dropdown menu:\n", - "display(dropdown)" - ], + "execution_count": 18, "metadata": { "colab": { "base_uri": "https://localhost:8080/", @@ -433,38 +306,49 @@ "id": "ohctqwc8m4K_", "outputId": "2887a32a-fc02-48b7-8b47-9b046738402e" }, - "execution_count": 18, "outputs": [ { - "output_type": "display_data", "data": { - "text/plain": [ - "Dropdown(description='Symbol: ', options=('MSFT', 'GOOGL', 'NVDA', 'SPOT', 'NFLX'), value='MSFT')" - ], "application/vnd.jupyter.widget-view+json": { + "model_id": "af6a2992bee5428aaf1b92e34ab8aee7", "version_major": 2, - "version_minor": 0, - "model_id": "af6a2992bee5428aaf1b92e34ab8aee7" - } + "version_minor": 0 + }, + "text/plain": [ + "Dropdown(description='Symbol: ', options=('MSFT', 'GOOGL', 'NVDA', 'SPOT', 'NFLX'), value='MSFT')" + ] }, - "metadata": {} + "metadata": {}, + "output_type": "display_data" } + ], + "source": [ + "from ipywidgets.widgets import Dropdown\n", + "\n", + "# configure the dropdown menu:\n", + "dropdown = Dropdown(\n", + " options=symbols,\n", + " value=symbols[0], # default value\n", + " description='Symbol: ',\n", + " disabled=False,\n", + ")\n", + "\n", + "# display the dropdown menu:\n", + "display(dropdown)" ] }, { "cell_type": "markdown", - "source": [ - "Using the selected value:" - ], "metadata": { "id": "L8cVJ7aRCF7_" - } + }, + "source": [ + "Using the selected value:" + ] }, { "cell_type": "code", - "source": [ - "print(dropdown.value)" - ], + "execution_count": 19, "metadata": { "colab": { "base_uri": "https://localhost:8080/" @@ -472,27 +356,143 @@ "id": "y-5jjLg7CD0w", "outputId": "faffe3ed-40c8-4db9-e8d3-d26a35fae2ea" }, - "execution_count": 19, "outputs": [ { - "output_type": "stream", "name": "stdout", + "output_type": "stream", "text": [ "NVDA\n" ] } + ], + "source": [ + "print(dropdown.value)" ] }, { "cell_type": "markdown", + "metadata": { + "id": "U8Tso3x0Xnu8" + }, "source": [ ":::{.callout-note title=\"Note\"}\n", "To make the Jupyter Widgets work in this simple use case, we first choose an option from the form. This updates the selected value displayed within the dropdown menu. Then we can reference the currently selected value.\n", ":::" - ], - "metadata": { - "id": "U8Tso3x0Xnu8" + ] + } + ], + "metadata": { + "colab": { + "provenance": [], + "toc_visible": true + }, + "kernelspec": { + "display_name": "Python 3", + "name": "python3" + }, + "language_info": { + "name": "python" + }, + "widgets": { + "application/vnd.jupyter.widget-state+json": { + "a03a7e16c502430b93c5a9dbc06a2927": { + "model_module": "@jupyter-widgets/controls", + "model_module_version": "1.5.0", + "model_name": "DescriptionStyleModel", + "state": { + "_model_module": "@jupyter-widgets/controls", + "_model_module_version": "1.5.0", + "_model_name": "DescriptionStyleModel", + "_view_count": null, + "_view_module": "@jupyter-widgets/base", + "_view_module_version": "1.2.0", + "_view_name": "StyleView", + "description_width": "" + } + }, + "af6a2992bee5428aaf1b92e34ab8aee7": { + "model_module": "@jupyter-widgets/controls", + "model_module_version": "1.5.0", + "model_name": "DropdownModel", + "state": { + "_dom_classes": [], + "_model_module": "@jupyter-widgets/controls", + "_model_module_version": "1.5.0", + "_model_name": "DropdownModel", + "_options_labels": [ + "MSFT", + "GOOGL", + "NVDA", + "SPOT", + "NFLX" + ], + "_view_count": null, + "_view_module": "@jupyter-widgets/controls", + "_view_module_version": "1.5.0", + "_view_name": "DropdownView", + "description": "Symbol: ", + "description_tooltip": null, + "disabled": false, + "index": 2, + "layout": "IPY_MODEL_d7d8264ada2048d59aca65e41182fca4", + "style": "IPY_MODEL_a03a7e16c502430b93c5a9dbc06a2927" + } + }, + "d7d8264ada2048d59aca65e41182fca4": { + "model_module": "@jupyter-widgets/base", + "model_module_version": "1.2.0", + "model_name": "LayoutModel", + "state": { + "_model_module": "@jupyter-widgets/base", + "_model_module_version": "1.2.0", + "_model_name": "LayoutModel", + "_view_count": null, + "_view_module": "@jupyter-widgets/base", + "_view_module_version": "1.2.0", + "_view_name": "LayoutView", + "align_content": null, + "align_items": null, + "align_self": null, + "border": null, + "bottom": null, + "display": null, + "flex": null, + "flex_flow": null, + "grid_area": null, + "grid_auto_columns": null, + "grid_auto_flow": null, + "grid_auto_rows": null, + "grid_column": null, + "grid_gap": null, + "grid_row": null, + "grid_template_areas": null, + "grid_template_columns": null, + "grid_template_rows": null, + "height": null, + "justify_content": null, + "justify_items": null, + "left": null, + "margin": null, + "max_height": null, + "max_width": null, + "min_height": null, + "min_width": null, + "object_fit": null, + "object_position": null, + "order": null, + "overflow": null, + "overflow_x": null, + "overflow_y": null, + "padding": null, + "right": null, + "top": null, + "visibility": null, + "width": null + } + } } } - ] -} \ No newline at end of file + }, + "nbformat": 4, + "nbformat_minor": 0 +}