advanced_outputs.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/luismendes070/colab/blob/main/advanced_outputs.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "SQM0MFHc6vPI"
      },
      "source": [
        "## Output Handling\n",
        "\n",
        "In Colaboratory the output of each cell is hosted in a separate iframe sandbox with limited access to the global notebook environment. APIs are available to enable some Python to Javascript and Javascript to Python communications, these APIs are generally only available for outputs which have been executed in the current session.\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "k1hRVEM-86df"
      },
      "source": [
        "### Viewing Notebooks\n",
        "\n",
        "Colaboratory attempts to provide a rich viewing experience where all resources needed to view outputs are persisted in the notebook itself and can be used for later viewing when not connected to a kernel.\n",
        "\n",
        "In cases where outputs require execution to work properly this should be communicated to the user."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "iXZ0xoQd2kCe"
      },
      "source": [
        "## display.Javascript to execute JavaScript from Python\n",
        "\n",
        "The Javascript is persisted in the outputs of the notebook document and will be executed when the document is reloaded."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "dBnNMBxm2L6I"
      },
      "outputs": [],
      "source": [
        "import IPython\n",
        "js_code = '''\n",
        "document.querySelector(\"#output-area\").appendChild(document.createTextNode(\"hello world!\"));\n",
        "'''\n",
        "display(IPython.display.Javascript(js_code))"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "MprPsZJa3AQF"
      },
      "source": [
        "## Evaluate a Javascript expression from Python with eval_js\n",
        "\n",
        "Evaluates the Javascript expression within the context of the outputframe of the current cell.\n",
        "\n",
        "This executes the Javascript as a blocking call from Python and returns the result of the expression.\n",
        "\n",
        "If the Javascript expression results in a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) then the call will block until the promise has settled and use the resulting value.\n",
        "\n",
        "**Note:** This differs from `display.Javascript` in that the Javascript expression is not persisted in the notebook document and will not be executed when the document is reloaded.\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "jcAaZiyh47Il"
      },
      "outputs": [],
      "source": [
        "import IPython\n",
        "from google.colab import output\n",
        "\n",
        "display(IPython.display.Javascript('''\n",
        "  window.someValue = new Promise(resolve => {\n",
        "    setTimeout(() => {\n",
        "      resolve(\"hello world!\");\n",
        "    }, 100);\n",
        "  });\n",
        "'''))\n",
        "\n",
        "\n",
        "value = output.eval_js('someValue');\n",
        "value"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Ytn7tY-C9U0T"
      },
      "source": [
        "## Javascript to Python communication\n",
        "\n",
        "Python code can register callbacks which can be invoked by Javascript in the outputframe.\n",
        "\n",
        "**Note:** This is only available to 'trusted' outputs- outputs which have been executed within the current session.\n",
        "\n",
        "The Javascript APIs are documented in Colab's [outputframe type declarations](https://github.com/googlecolab/colabtools/blob/master/packages/outputframe/lib/index.d.ts)."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "NT9vR-4YIwb5"
      },
      "outputs": [],
      "source": [
        "import IPython\n",
        "from google.colab import output\n",
        "\n",
        "def Concat(a, b):\n",
        "  # Use display.JSON to transfer a structured result.\n",
        "  return IPython.display.JSON({'result': ' '.join((a, b))})\n",
        "\n",
        "output.register_callback('notebook.Concat', Concat)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "hTbU3DMfi0wh"
      },
      "outputs": [],
      "source": [
        "%%javascript\n",
        "(async function() {\n",
        "  const result = await google.colab.kernel.invokeFunction(\n",
        "    'notebook.Concat', // The callback name.\n",
        "    ['hello', 'world!'], // The arguments.\n",
        "    {}); // kwargs\n",
        "  const text = result.data['application/json'];\n",
        "  document.querySelector(\"#output-area\").appendChild(document.createTextNode(text.result));\n",
        "})();"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "QS5x4lFf0fJE"
      },
      "source": [
        "### Persisting Updates\n",
        "\n",
        "Since `invokeFunction` is only available for outputs which have executed within the current session\n",
        "then it may be desirable to update the notebook so the changes take effect on notebook reload. An example\n",
        "of doing this."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "bn4q0OAA0ek5"
      },
      "outputs": [],
      "source": [
        "import IPython\n",
        "from google.colab import output\n",
        "\n",
        "display(IPython.display.HTML('''\n",
        "    The items:\n",
        "    <br><ol id=\"items\"></ol>\n",
        "    <button id='button'>Click to add</button>\n",
        "    <script>\n",
        "      document.querySelector('#button').onclick = () => {\n",
        "        google.colab.kernel.invokeFunction('notebook.AddListItem', [], {});\n",
        "      };\n",
        "    </script>\n",
        "    '''))\n",
        "\n",
        "def add_list_item():\n",
        "  # Use redirect_to_element to direct the elements which are being written.\n",
        "  with output.redirect_to_element('#items'):\n",
        "    # Use display to add items which will be persisted on notebook reload.\n",
        "    display(IPython.display.HTML('<li> Another item</li>'))\n",
        "\n",
        "output.register_callback('notebook.AddListItem', add_list_item)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "3DOH-aFJQBho"
      },
      "source": [
        "### Using register_callback to make a button invoke a function"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "QpAfovC1P8Y9"
      },
      "outputs": [],
      "source": [
        "import IPython\n",
        "import uuid\n",
        "from google.colab import output\n",
        "\n",
        "class InvokeButton(object):\n",
        "  def __init__(self, title, callback):\n",
        "    self._title = title\n",
        "    self._callback = callback\n",
        "\n",
        "  def _repr_html_(self):\n",
        "    callback_id = 'button-' + str(uuid.uuid4())\n",
        "    output.register_callback(callback_id, self._callback)\n",
        "\n",
        "    template = \"\"\"<button id=\"{callback_id}\">{title}</button>\n",
        "        <script>\n",
        "          document.querySelector(\"#{callback_id}\").onclick = (e) => {{\n",
        "            google.colab.kernel.invokeFunction('{callback_id}', [], {{}})\n",
        "            e.preventDefault();\n",
        "          }};\n",
        "        </script>\"\"\"\n",
        "    html = template.format(title=self._title, callback_id=callback_id)\n",
        "    return html\n",
        "\n",
        "def do_something():\n",
        "  print('here')\n",
        "\n",
        "InvokeButton('click me', do_something)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "z2O272svIBEV"
      },
      "source": [
        "## Jupyter Widgets\n",
        "\n",
        "[Jupyter Widgets](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Basics.html) can be used to add interactivity to notebooks."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "b0KMmsbsJ1PC"
      },
      "outputs": [],
      "source": [
        "import ipywidgets as widgets\n",
        "\n",
        "slider = widgets.IntSlider(20, min=0, max=100)\n",
        "slider"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "GzCMYaSbJoRD"
      },
      "source": [
        "### Use a Select widget to pick the lines for a chart."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "S6V3OAm2JkVL"
      },
      "outputs": [],
      "source": [
        "import altair as alt\n",
        "import ipywidgets as widgets\n",
        "from vega_datasets import data\n",
        "\n",
        "source = data.stocks()\n",
        "\n",
        "stock_picker = widgets.SelectMultiple(\n",
        "    options=source.symbol.unique(),\n",
        "    value=list(source.symbol.unique()),\n",
        "    description='Symbols')\n",
        "\n",
        "# The value of symbols will come from the stock_picker.\n",
        "@widgets.interact(symbols=stock_picker)\n",
        "def render(symbols):\n",
        "  selected = source[source.symbol.isin(list(symbols))]\n",
        "\n",
        "  return alt.Chart(selected).mark_line().encode(\n",
        "      x='date',\n",
        "      y='price',\n",
        "      color='symbol',\n",
        "      strokeDash='symbol',\n",
        "  )"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "-zTqxvNYbgZU"
      },
      "source": [
        "## Third-party Jupyter widgets\n",
        "\n",
        "Support for third party widgets (widgets outside of the `ipywidgets` package) needs to be enabled separately. Support for these widgets will be loaded from a CDN external from Colab.\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "w_63qoetcY8C"
      },
      "outputs": [],
      "source": [
        "from google.colab import output\n",
        "output.enable_custom_widget_manager()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "LVRIBGuwiQol"
      },
      "source": [
        "Support for third party widgets will remain active for the duration of the session. To disable support:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "3g8cfzyDicSU"
      },
      "outputs": [],
      "source": [
        "from google.colab import output\n",
        "output.disable_custom_widget_manager()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "YOd4khppTskD"
      },
      "source": [
        "## Jupyter Comms\n",
        "\n",
        "[Jupyter Comms](https://jupyter-notebook.readthedocs.io/en/stable/comms.html) can be used for bidirectional communication between the kernel and notebook.\n",
        "\n",
        "The Javascript APIs are documented in Colab's [outputframe type declarations](https://github.com/googlecolab/colabtools/blob/master/packages/outputframe/lib/index.d.ts).\n",
        "\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "_a1iIB10J987"
      },
      "source": [
        "### Establish a comm channel from client to kernel\n",
        "\n",
        "This registers a comm target on the kernel then when the output is displayed in the client it establishes a comm channel from the client to the kernel."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 3,
      "metadata": {
        "id": "rkIDlHcM7lEm",
        "outputId": "62e74ed2-9784-4b84-c851-da9a2c5272e4",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 17
        }
      },
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "\n",
              "(async () => {\n",
              "\n",
              "const {PoligonosApp} = require(\"poligonosapp\");\n",
              "\n",
              "  const buffer = new Uint8Array(10);\n",
              "  for (let i = 0; i < buffer.byteLength; ++i) {\n",
              "    buffer[i] = i\n",
              "  }\n",
              "  const channel = await google.colab.kernel.comms.open('comm_target', 'the data', [buffer.buffer]);\n",
              "  let success = false;\n",
              "  for await (const message of channel.messages) {\n",
              "    if (message.data.response == 'got comm open!') {\n",
              "      const responseBuffer = new Uint8Array(message.buffers[0]);\n",
              "      for (let i = 0; i < buffer.length; ++i) {\n",
              "        if (responseBuffer[i] != buffer[i]) {\n",
              "          console.error('comm buffer different at ' + i);\n",
              "          return;\n",
              "        }\n",
              "      }\n",
              "      // Close the channel once the expected message is received. This should\n",
              "      // cause the messages iterator to complete and for the for-await loop to\n",
              "      // end.\n",
              "      channel.close();\n",
              "    }\n",
              "  }\n",
              "  document.body.appendChild(document.createTextNode('done.'));\n",
              "})()\n"
            ]
          },
          "metadata": {},
          "execution_count": 3
        }
      ],
      "source": [
        "from IPython.display import Javascript\n",
        "\n",
        "def target_func(comm, msg):\n",
        "  # Only send the response if it's the data we are expecting.\n",
        "  if msg['content']['data'] == 'the data':\n",
        "    comm.send({\n",
        "          'response': 'got comm open!',\n",
        "        }, None, msg['buffers']);\n",
        "get_ipython().kernel.comm_manager.register_target('comm_target', target_func)\n",
        "\n",
        "Javascript('''\n",
        "(async () => {\n",
        "\n",
        "const {PoligonosApp} = require(\"poligonosapp\");\n",
        "\n",
        "  const buffer = new Uint8Array(10);\n",
        "  for (let i = 0; i < buffer.byteLength; ++i) {\n",
        "    buffer[i] = i\n",
        "  }\n",
        "  const channel = await google.colab.kernel.comms.open('comm_target', 'the data', [buffer.buffer]);\n",
        "  let success = false;\n",
        "  for await (const message of channel.messages) {\n",
        "    if (message.data.response == 'got comm open!') {\n",
        "      const responseBuffer = new Uint8Array(message.buffers[0]);\n",
        "      for (let i = 0; i < buffer.length; ++i) {\n",
        "        if (responseBuffer[i] != buffer[i]) {\n",
        "          console.error('comm buffer different at ' + i);\n",
        "          return;\n",
        "        }\n",
        "      }\n",
        "      // Close the channel once the expected message is received. This should\n",
        "      // cause the messages iterator to complete and for the for-await loop to\n",
        "      // end.\n",
        "      channel.close();\n",
        "    }\n",
        "  }\n",
        "  document.body.appendChild(document.createTextNode('done.'));\n",
        "})()\n",
        "''')"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "1-FIHCdGKCyO"
      },
      "source": [
        "### Establish a comm channel from kernel to client\n",
        "\n",
        "This registers a comm target in the client and establishes the channel from the kernel to the client."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "dJ6vcgcKKMYf"
      },
      "outputs": [],
      "source": [
        "from IPython.display import Javascript\n",
        "display(Javascript('''\n",
        "(async () => {\n",
        "  google.colab.kernel.comms.registerTarget('comms_testing', (comm, message) => {\n",
        "    comm.send('this is the response', {buffers: message.buffers});\n",
        "    document.body.appendChild(document.createTextNode('comm opened.'))\n",
        "  });\n",
        "})()'''))\n",
        "\n",
        "from ipykernel import comm\n",
        "buffer = b'hello world'\n",
        "channel = comm.Comm(target_name='comms_testing', data={'foo': 1}, buffers=[buffer])\n",
        "\n",
        "message = None\n",
        "def handle_message(msg):\n",
        "  global message\n",
        "  message = msg\n",
        "\n",
        "channel.on_msg(handle_message)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "H238j4VamEsf"
      },
      "source": [
        "## Tagged Outputs\n",
        "\n",
        "Output tagging is useful for removing or replacing chunks of outputs from Python."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "BPyFjT1ImHRQ"
      },
      "outputs": [],
      "source": [
        "import time\n",
        "import sys\n",
        "from google.colab import output\n",
        "\n",
        "print('Starting.')\n",
        "\n",
        "with output.use_tags('some_outputs'):\n",
        "  sys.stdout.write('working....\\n')\n",
        "  sys.stdout.flush();\n",
        "  time.sleep(2)\n",
        "\n",
        "  sys.stdout.write('still working...\\n')\n",
        "  sys.stdout.flush();\n",
        "  time.sleep(2)\n",
        "\n",
        "# Now clear the previous outputs.\n",
        "output.clear(output_tags='some_outputs')\n",
        "print('All done!')\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "7EDBBkAz2USP"
      },
      "source": [
        "## Pausing output processing\n",
        "\n",
        "If your Javascript code is doing an asynchronous operation (such as loading other resources), use `colab.output.pauseOutputUntil` to pause execution of subsequent output messages until the promise has completed.\n",
        "\n",
        "This has an additional benefit that when the notebook is later loaded then output will wait for all messages and pauses to complete before resizing the cell, reducing the amount of jank when loading notebooks."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "n4jRyfCkHW9X"
      },
      "outputs": [],
      "source": [
        "import IPython\n",
        "\n",
        "display(IPython.display.Javascript('''\n",
        "  const promise = new Promise((resolve, reject) => {\n",
        "    const script = document.createElement('script');\n",
        "    script.src = 'data:,window.value = \"hello world!\"';\n",
        "    script.onload = resolve;\n",
        "    script.onerror = reject;\n",
        "    document.head.appendChild(script);\n",
        "  });\n",
        "  // Pause subsequent outputs until the script has been loaded.\n",
        "  google.colab.output.pauseOutputUntil(promise);\n",
        "'''))\n",
        "\n",
        "display(IPython.display.Javascript('''\n",
        "    // Can immediately reference scripts loaded earlier since\n",
        "    // output processing was blocked on them.\n",
        "    document.body.appendChild(document.createTextNode(window.value));\n",
        "'''))\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "R8ZvCXC5A0wT"
      },
      "source": [
        "## Serving resources\n",
        "\n",
        "Outputs in the browser can request resources from the kernel by requesting `https://localhost:{port}`. The protocol will automatically be translated from `https` to `http` and the `localhost` will be the kernel executing the code.\n",
        "\n",
        "By default the responses to any kernel requests will be cached in the notebook JSON to make them available to viewers not connected to the kernel. To skip the caching of resources, set the HTTP header `x-colab-notebook-cache-control: no-cache` to any responses. See the 'Custom server' example below.\n",
        "\n",
        "Outputs can only request resources from the kernel if they have been executed in the current session, when viewed the outputs will only have access to the cached responses."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "nc3OhroVC0UI"
      },
      "source": [
        "### Jupyter nbextensions\n",
        "Jupyter's nbextensions is a mechanism to bundle resources into Python libraries, see the [documentation](http://testnb.readthedocs.io/en/latest/examples/Notebook/Distributing%20Jupyter%20Extensions%20as%20Python%20Packages.html#Defining-the-server-extension-and-nbextension) for details."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "I2mkGbENDqzI"
      },
      "source": [
        "An example of referencing these resources from outputs:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "c9NOx-cXDj0i"
      },
      "outputs": [],
      "source": [
        "%%html\n",
        "<link rel=\"stylesheet\" href=\"/nbextensions/google.colab/tabbar.css\">\n",
        "<div class='goog-tab'>\n",
        "  Some content\n",
        "</div>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "_7dYIo63EdgL"
      },
      "source": [
        "### Custom server\n",
        "\n",
        "A webserver can be started on the kernel to serve up arbitrary resources.\n",
        "\n",
        "The client needs to reference the resource with `https://localhost:{port}` but this will automatically be translated to `http://localhost:{port}`.\n",
        "\n",
        "By default responses will be cached in the notebook for offline access."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "9OyC1_bSEccg"
      },
      "outputs": [],
      "source": [
        "import portpicker\n",
        "import threading\n",
        "import socket\n",
        "import IPython\n",
        "\n",
        "from six.moves import socketserver\n",
        "from six.moves import SimpleHTTPServer\n",
        "\n",
        "class V6Server(socketserver.TCPServer):\n",
        "  address_family = socket.AF_INET6\n",
        "\n",
        "class Handler(SimpleHTTPServer.SimpleHTTPRequestHandler):\n",
        "  def do_GET(self):\n",
        "    self.send_response(200)\n",
        "    # If the response should not be cached in the notebook for\n",
        "    # offline access:\n",
        "    # self.send_header('x-colab-notebook-cache-control', 'no-cache')\n",
        "    self.end_headers()\n",
        "    self.wfile.write(b'''\n",
        "      document.querySelector('#output-area').appendChild(document.createTextNode('Script result!'));\n",
        "    ''')\n",
        "\n",
        "port = portpicker.pick_unused_port()\n",
        "\n",
        "def server_entry():\n",
        "    httpd = V6Server(('::', port), Handler)\n",
        "    # Handle a single request then exit the thread.\n",
        "    httpd.serve_forever()\n",
        "\n",
        "thread = threading.Thread(target=server_entry)\n",
        "thread.start()\n",
        "\n",
        "# Display some HTML referencing the resource.\n",
        "display(IPython.display.HTML('<script src=\"https://localhost:{port}/\"></script>'.format(port=port)))"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "6Ugsim80WVuq"
      },
      "source": [
        "### Browsing to servers executing on the kernel"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "dEcHj7qyXkFi"
      },
      "outputs": [],
      "source": [
        "from google.colab import output\n",
        "output.serve_kernel_port_as_iframe(port)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "uyBtZ2evXw1r"
      },
      "source": [
        "This will create an iframe browsing the HTTP server hosted on the machine your kernel is running on.\n",
        "\n",
        "Alternatively to view the server in a separate browser tab:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "95mvP1VeYETf"
      },
      "outputs": [],
      "source": [
        "from google.colab import output\n",
        "output.serve_kernel_port_as_window(port)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "70y9799QYbwv"
      },
      "source": [
        "The server will only be accessible to the executor of the notebook while the notebook is being viewed in Colab."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "8VlhVnsL-eKX"
      },
      "source": [
        "## Cross-output communication\n",
        "\n",
        "The output of each cell is hosted in a separate sandboxed iframe without direct access to the contents of other cells, but they can create [BroadcastChannel](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel/BroadcastChannel)s to communicate between cells."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "C6EUBnQw87Wj"
      },
      "outputs": [],
      "source": [
        "%%javascript\n",
        "const listenerChannel = new BroadcastChannel('channel');\n",
        "listenerChannel.onmessage = (msg) => {\n",
        "  const div = document.createElement('div');\n",
        "  div.textContent = msg.data;\n",
        "  document.body.appendChild(div);\n",
        "};"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "BW4NH8G89FL7"
      },
      "source": [
        "This second cell will be in a separate sandboxed iframe.\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "Pu5Ru49M9B-H"
      },
      "outputs": [],
      "source": [
        "%%javascript\n",
        "const senderChannel = new BroadcastChannel('channel');\n",
        "senderChannel.postMessage('Hello world!');"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "2viqYx97hPMi"
      },
      "source": [
        "## Camera Capture\n",
        "Using a webcam to capture images for processing on the runtime."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "SucxddsPhOmj"
      },
      "outputs": [],
      "source": [
        "from IPython.display import display, Javascript\n",
        "from google.colab.output import eval_js\n",
        "from base64 import b64decode\n",
        "\n",
        "def take_photo(filename='photo.jpg', quality=0.8):\n",
        "  js = Javascript('''\n",
        "    async function takePhoto(quality) {\n",
        "      const div = document.createElement('div');\n",
        "      const capture = document.createElement('button');\n",
        "      capture.textContent = 'Capture';\n",
        "      div.appendChild(capture);\n",
        "\n",
        "      const video = document.createElement('video');\n",
        "      video.style.display = 'block';\n",
        "      const stream = await navigator.mediaDevices.getUserMedia({video: true});\n",
        "\n",
        "      document.body.appendChild(div);\n",
        "      div.appendChild(video);\n",
        "      video.srcObject = stream;\n",
        "      await video.play();\n",
        "\n",
        "      // Resize the output to fit the video element.\n",
        "      google.colab.output.setIframeHeight(document.documentElement.scrollHeight, true);\n",
        "\n",
        "      // Wait for Capture to be clicked.\n",
        "      await new Promise((resolve) => capture.onclick = resolve);\n",
        "\n",
        "      const canvas = document.createElement('canvas');\n",
        "      canvas.width = video.videoWidth;\n",
        "      canvas.height = video.videoHeight;\n",
        "      canvas.getContext('2d').drawImage(video, 0, 0);\n",
        "      stream.getVideoTracks()[0].stop();\n",
        "      div.remove();\n",
        "      return canvas.toDataURL('image/jpeg', quality);\n",
        "    }\n",
        "    ''')\n",
        "  display(js)\n",
        "  data = eval_js('takePhoto({})'.format(quality))\n",
        "  binary = b64decode(data.split(',')[1])\n",
        "  with open(filename, 'wb') as f:\n",
        "    f.write(binary)\n",
        "  return filename"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "buJCl90WhNfq"
      },
      "outputs": [],
      "source": [
        "from IPython.display import Image\n",
        "try:\n",
        "  filename = take_photo()\n",
        "  print('Saved to {}'.format(filename))\n",
        "  \n",
        "  # Show the image which was just taken.\n",
        "  display(Image(filename))\n",
        "except Exception as err:\n",
        "  # Errors will be thrown if the user does not have a webcam or if they do not\n",
        "  # grant the page permission to access it.\n",
        "  print(str(err))"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "zo9YYDL4SYZr"
      },
      "source": [
        "## Showing CV2 Images\n",
        "\n",
        "The ``cv2.imshow()`` and ``cv.imshow()`` functions from the [opencv-python](https://github.com/skvark/opencv-python) package are incompatible with Jupyter notebook; see https://github.com/jupyter/notebook/issues/3935.\n",
        "\n",
        "As a replacement, you can use the following function:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "lIYdn1woOS1n"
      },
      "outputs": [],
      "source": [
        "from google.colab.patches import cv2_imshow"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "F0kLDqqkdGr2"
      },
      "source": [
        "For example, here we download and display a PNG image of the Colab logo:"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "iU_0F2SVW4Yb"
      },
      "outputs": [],
      "source": [
        "!curl -o logo.png https://colab.research.google.com/img/colab_favicon_256px.png\n",
        "import cv2\n",
        "img = cv2.imread('logo.png', cv2.IMREAD_UNCHANGED)\n",
        "cv2_imshow(img)"
      ]
    }
  ],
  "metadata": {
    "colab": {
      "collapsed_sections": [],
      "name": "advanced_outputs.ipynb",
      "provenance": [],
      "include_colab_link": true
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}