Gradio_Intro_STUDENT_COPY.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "provenance": [],
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/akhilesh-kanmanthreddy/AI_Camp_2023/blob/main/Gradio_Intro_STUDENT_COPY.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "\n",
        "# Hello, World\n"
      ],
      "metadata": {
        "id": "zKDsbiL6knjt"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Install Gradio using pip:"
      ],
      "metadata": {
        "id": "KJnQ6xvUlWtp"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "pip install gradio"
      ],
      "metadata": {
        "id": "5ggLYpqDk5fY"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "Running the code below a pop-up window will appear in google colab:"
      ],
      "metadata": {
        "id": "KZS8f5GKrEyp"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "## we shorten gradio to gr for ease of use in code\n",
        "import gradio as gr\n",
        "\n",
        "# function greet which takes name as input and appends it in output text\n",
        "def greet(name):\n",
        "    return \"Hello \" + name + \"!\"\n",
        "\n",
        "demo = gr.Interface(fn=greet , inputs=\"text\", outputs=\"text\")\n",
        "\n",
        "# Launch our interface and create your UI\n",
        "demo.launch()"
      ],
      "metadata": {
        "id": "kR1PqVK4nDdM",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 619
        },
        "outputId": "276efbae-c614-488c-d7d4-ec9a71107cb9"
      },
      "execution_count": 3,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Colab notebook detected. To show errors in colab notebook, set debug=True in launch()\n",
            "Note: opening Chrome Inspector may crash demo inside Colab notebooks.\n",
            "\n",
            "To create a public link, set `share=True` in `launch()`.\n"
          ]
        },
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "(async (port, path, width, height, cache, element) => {\n",
              "                        if (!google.colab.kernel.accessAllowed && !cache) {\n",
              "                            return;\n",
              "                        }\n",
              "                        element.appendChild(document.createTextNode(''));\n",
              "                        const url = await google.colab.kernel.proxyPort(port, {cache});\n",
              "\n",
              "                        const external_link = document.createElement('div');\n",
              "                        external_link.innerHTML = `\n",
              "                            <div style=\"font-family: monospace; margin-bottom: 0.5rem\">\n",
              "                                Running on <a href=${new URL(path, url).toString()} target=\"_blank\">\n",
              "                                    https://localhost:${port}${path}\n",
              "                                </a>\n",
              "                            </div>\n",
              "                        `;\n",
              "                        element.appendChild(external_link);\n",
              "\n",
              "                        const iframe = document.createElement('iframe');\n",
              "                        iframe.src = new URL(path, url).toString();\n",
              "                        iframe.height = height;\n",
              "                        iframe.allow = \"autoplay; camera; microphone; clipboard-read; clipboard-write;\"\n",
              "                        iframe.width = width;\n",
              "                        iframe.style.border = 0;\n",
              "                        element.appendChild(iframe);\n",
              "                    })(7860, \"/\", \"100%\", 500, false, window.element)"
            ]
          },
          "metadata": {}
        },
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": []
          },
          "metadata": {},
          "execution_count": 3
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# The Interface Class"
      ],
      "metadata": {
        "id": "JgwY1arcy9_w"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "The **Interface Class** will create a user interface for your model.\n",
        "\n",
        "This class has 3 required parameters: fn, inputs, and outputs"
      ],
      "metadata": {
        "id": "hE-j4M02zA3V"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "**Interface(fn, inputs, outputs)**\n",
        "\n",
        "**fn**: the function or model that you are creating the UI for\n",
        "\n",
        "**inputs**: which component(s) to use for the input (e.g. \"text\", \"image\" or \"audio\")\n",
        "\n",
        "  *The number of input components needs to match the number of parameters specified in fn.*\n",
        "\n",
        "**outputs**: which component(s) to use for the output (e.g. \"text\", \"image\" or \"label\")\n",
        "\n",
        "  *The number of output components needs to match the number of values that are output by fn.*"
      ],
      "metadata": {
        "id": "2jcYUEabzma5"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "# Lets look at our code from Hello World\n",
        "\n",
        "import gradio as gr\n",
        "\n",
        "def greet(name):\n",
        "    return \"Hello \" + name + \"!\"\n",
        "\n",
        "# Our interface\n",
        "demo = gr.Interface(fn = greet, inputs=\"text\", outputs=\"text\")\n",
        "\n",
        "# We want to input text into our greet function, we tell our interface that by setting inputs=\"text\"\n",
        "# Our greet function returns text, we tell our interface that by setting outputs=\"text\"\n",
        "\n",
        "# Launch our interface and create your UI\n",
        "demo.launch()"
      ],
      "metadata": {
        "id": "C7lGPOnpzJJv",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 619
        },
        "outputId": "20cbdce0-10bb-44dd-d629-aade769cc7f7"
      },
      "execution_count": 5,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Colab notebook detected. To show errors in colab notebook, set debug=True in launch()\n",
            "Note: opening Chrome Inspector may crash demo inside Colab notebooks.\n",
            "\n",
            "To create a public link, set `share=True` in `launch()`.\n"
          ]
        },
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "(async (port, path, width, height, cache, element) => {\n",
              "                        if (!google.colab.kernel.accessAllowed && !cache) {\n",
              "                            return;\n",
              "                        }\n",
              "                        element.appendChild(document.createTextNode(''));\n",
              "                        const url = await google.colab.kernel.proxyPort(port, {cache});\n",
              "\n",
              "                        const external_link = document.createElement('div');\n",
              "                        external_link.innerHTML = `\n",
              "                            <div style=\"font-family: monospace; margin-bottom: 0.5rem\">\n",
              "                                Running on <a href=${new URL(path, url).toString()} target=\"_blank\">\n",
              "                                    https://localhost:${port}${path}\n",
              "                                </a>\n",
              "                            </div>\n",
              "                        `;\n",
              "                        element.appendChild(external_link);\n",
              "\n",
              "                        const iframe = document.createElement('iframe');\n",
              "                        iframe.src = new URL(path, url).toString();\n",
              "                        iframe.height = height;\n",
              "                        iframe.allow = \"autoplay; camera; microphone; clipboard-read; clipboard-write;\"\n",
              "                        iframe.width = width;\n",
              "                        iframe.style.border = 0;\n",
              "                        element.appendChild(iframe);\n",
              "                    })(7861, \"/\", \"100%\", 500, false, window.element)"
            ]
          },
          "metadata": {}
        },
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": []
          },
          "metadata": {},
          "execution_count": 5
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Components Attributes"
      ],
      "metadata": {
        "id": "V42vOLC4nyyT"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "##### To use 'greet' function in Gradio"
      ],
      "metadata": {
        "id": "xmWy67jYqQ7m"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "def greet(name):\n",
        "    return \"Hello \" + name + \"!\"\n",
        "\n",
        "demo = gr.Interface(\n",
        "    fn=greet,\n",
        "    inputs=gr.Textbox(lines=2, placeholder=\"Name Here...\"),\n",
        "    outputs=\"text\",\n",
        ")\n",
        "demo.launch()"
      ],
      "metadata": {
        "id": "w57U0X_OqjLr",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 619
        },
        "outputId": "af876fc4-45cd-4f11-cb06-05ed0165519b"
      },
      "execution_count": 6,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Colab notebook detected. To show errors in colab notebook, set debug=True in launch()\n",
            "Note: opening Chrome Inspector may crash demo inside Colab notebooks.\n",
            "\n",
            "To create a public link, set `share=True` in `launch()`.\n"
          ]
        },
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "(async (port, path, width, height, cache, element) => {\n",
              "                        if (!google.colab.kernel.accessAllowed && !cache) {\n",
              "                            return;\n",
              "                        }\n",
              "                        element.appendChild(document.createTextNode(''));\n",
              "                        const url = await google.colab.kernel.proxyPort(port, {cache});\n",
              "\n",
              "                        const external_link = document.createElement('div');\n",
              "                        external_link.innerHTML = `\n",
              "                            <div style=\"font-family: monospace; margin-bottom: 0.5rem\">\n",
              "                                Running on <a href=${new URL(path, url).toString()} target=\"_blank\">\n",
              "                                    https://localhost:${port}${path}\n",
              "                                </a>\n",
              "                            </div>\n",
              "                        `;\n",
              "                        element.appendChild(external_link);\n",
              "\n",
              "                        const iframe = document.createElement('iframe');\n",
              "                        iframe.src = new URL(path, url).toString();\n",
              "                        iframe.height = height;\n",
              "                        iframe.allow = \"autoplay; camera; microphone; clipboard-read; clipboard-write;\"\n",
              "                        iframe.width = width;\n",
              "                        iframe.style.border = 0;\n",
              "                        element.appendChild(iframe);\n",
              "                    })(7862, \"/\", \"100%\", 500, false, window.element)"
            ]
          },
          "metadata": {}
        },
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": []
          },
          "metadata": {},
          "execution_count": 6
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Multiple Input and Output Components\n",
        "Now that we've seen how to create a simple component where users can input some data and see output, let's see how we can use multiple components. Below, multiple inputs and outputs can be passed in as a list when creating our gradio interface."
      ],
      "metadata": {
        "id": "vrkl_Ijjsl4j"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "def greet(name, is_morning, temperature): # takes in three values\n",
        "    salutation = \"Good morning\" if is_morning else \"Good evening\"\n",
        "    greeting = f\"{salutation} {name}. It is {temperature} degrees today\"\n",
        "    celsius = ((temperature-32) * 5) / 9 #celsius is ((F-32) * 5) / 9\n",
        "    return greeting, round(celsius, 2) # returns two values\n",
        "\n",
        "demo = gr.Interface(\n",
        "    fn=greet,\n",
        "    inputs=[\"text\", \"checkbox\", gr.Slider(0, 100)], # list of inputs that correspond to the parameters of the function.\n",
        "    outputs=[\"text\", \"number\"], # list of outputs that correspond to the returned values in the function, some text and a number.\n",
        ")\n",
        "demo.launch()"
      ],
      "metadata": {
        "id": "BhCSDatMss8O",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 619
        },
        "outputId": "41a470a0-b946-4dc7-82c8-202d42088033"
      },
      "execution_count": 10,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Colab notebook detected. To show errors in colab notebook, set debug=True in launch()\n",
            "Note: opening Chrome Inspector may crash demo inside Colab notebooks.\n",
            "\n",
            "To create a public link, set `share=True` in `launch()`.\n"
          ]
        },
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "(async (port, path, width, height, cache, element) => {\n",
              "                        if (!google.colab.kernel.accessAllowed && !cache) {\n",
              "                            return;\n",
              "                        }\n",
              "                        element.appendChild(document.createTextNode(''));\n",
              "                        const url = await google.colab.kernel.proxyPort(port, {cache});\n",
              "\n",
              "                        const external_link = document.createElement('div');\n",
              "                        external_link.innerHTML = `\n",
              "                            <div style=\"font-family: monospace; margin-bottom: 0.5rem\">\n",
              "                                Running on <a href=${new URL(path, url).toString()} target=\"_blank\">\n",
              "                                    https://localhost:${port}${path}\n",
              "                                </a>\n",
              "                            </div>\n",
              "                        `;\n",
              "                        element.appendChild(external_link);\n",
              "\n",
              "                        const iframe = document.createElement('iframe');\n",
              "                        iframe.src = new URL(path, url).toString();\n",
              "                        iframe.height = height;\n",
              "                        iframe.allow = \"autoplay; camera; microphone; clipboard-read; clipboard-write;\"\n",
              "                        iframe.width = width;\n",
              "                        iframe.style.border = 0;\n",
              "                        element.appendChild(iframe);\n",
              "                    })(7864, \"/\", \"100%\", 500, false, window.element)"
            ]
          },
          "metadata": {}
        },
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": []
          },
          "metadata": {},
          "execution_count": 10
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "Now you try! Below is an already written function that encodes and decodes some text. Finish the TODOs to create an interface with inputs and outputs that match the function below. Note: Encoding is useful when we want to protect sensitive information!"
      ],
      "metadata": {
        "id": "pHoe5hhBtBKH"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "def map(text, encoded): # no need to change this function\n",
        "  decode_encoded = ''\n",
        "  encode_text = ''\n",
        "  for c in encoded:\n",
        "    decode_encoded += chr(ord(c) + 5)\n",
        "  for c in text:\n",
        "    encode_text += chr(ord(c) - 5)\n",
        "  return encode_text, decode_encoded\n",
        "\n",
        "practice = gr.Interface(\n",
        "    fn= map, # TODO - Change this so our interface uses the function above.\n",
        "    inputs=[\"text\", \"text\"], # TODO - Add corresponding input types based off the function above.\n",
        "    outputs=[\"text\", \"text\"], # TODO - Add two output text boxes so that we can see both encoded and decoded text.\n",
        ")\n",
        "practice.launch()"
      ],
      "metadata": {
        "id": "jyC37dAFs_E-",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 619
        },
        "outputId": "33b83524-cef0-4c88-d64b-bc6133f36ce6"
      },
      "execution_count": 11,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Colab notebook detected. To show errors in colab notebook, set debug=True in launch()\n",
            "Note: opening Chrome Inspector may crash demo inside Colab notebooks.\n",
            "\n",
            "To create a public link, set `share=True` in `launch()`.\n"
          ]
        },
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "(async (port, path, width, height, cache, element) => {\n",
              "                        if (!google.colab.kernel.accessAllowed && !cache) {\n",
              "                            return;\n",
              "                        }\n",
              "                        element.appendChild(document.createTextNode(''));\n",
              "                        const url = await google.colab.kernel.proxyPort(port, {cache});\n",
              "\n",
              "                        const external_link = document.createElement('div');\n",
              "                        external_link.innerHTML = `\n",
              "                            <div style=\"font-family: monospace; margin-bottom: 0.5rem\">\n",
              "                                Running on <a href=${new URL(path, url).toString()} target=\"_blank\">\n",
              "                                    https://localhost:${port}${path}\n",
              "                                </a>\n",
              "                            </div>\n",
              "                        `;\n",
              "                        element.appendChild(external_link);\n",
              "\n",
              "                        const iframe = document.createElement('iframe');\n",
              "                        iframe.src = new URL(path, url).toString();\n",
              "                        iframe.height = height;\n",
              "                        iframe.allow = \"autoplay; camera; microphone; clipboard-read; clipboard-write;\"\n",
              "                        iframe.width = width;\n",
              "                        iframe.style.border = 0;\n",
              "                        element.appendChild(iframe);\n",
              "                    })(7865, \"/\", \"100%\", 500, false, window.element)"
            ]
          },
          "metadata": {}
        },
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": []
          },
          "metadata": {},
          "execution_count": 11
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Hello, Blocks\n",
        "\n",
        "With Gradio, we can use one of two tools to design the user interface of our apps. The **Interface** class is a simple way to deal with inputs and outputs without much customizability; this is what we've been using with Gradio so far.\n",
        "\n",
        "However if we want more customizability in our apps, we can use the **Blocks** API. Here are some unique things that Blocks allows you to do that are not accessible with the Interface class:\n",
        "  - Feature multiple data flows and demos\n",
        "  - control where components appear on the page\n",
        "  - handle complex data flows (e.g. outputs can serve as inputs to other functions)\n",
        "  - update properties/visibility of components based on user interaction\n",
        "\n",
        "Let's recreate the greeting function from earlier using Blocks instead!"
      ],
      "metadata": {
        "id": "huAuzj4L09qW"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "import gradio as gr\n",
        "\n",
        "def greet(name):\n",
        "    return \"Hello \" + name + \"!\"\n",
        "\n",
        "with gr.Blocks() as demo:\n",
        "    gr.Markdown(\"Hello world\")\n",
        "    name = gr.Textbox(label=\"what is your name\")\n",
        "    output = gr.Textbox\n",
        "    greet_btn = gr.Button(\"Greet\")\n",
        "    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n",
        "\n",
        "\n",
        "demo.launch()\n"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 397
        },
        "id": "xPEPtz_i1Bqt",
        "outputId": "d0342397-31fe-4201-f24f-3a7863280d7d"
      },
      "execution_count": 14,
      "outputs": [
        {
          "output_type": "error",
          "ename": "AttributeError",
          "evalue": "ignored",
          "traceback": [
            "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
            "\u001b[0;31mAttributeError\u001b[0m                            Traceback (most recent call last)",
            "\u001b[0;32m<ipython-input-14-537872d395f7>\u001b[0m in \u001b[0;36m<cell line: 6>\u001b[0;34m()\u001b[0m\n\u001b[1;32m      9\u001b[0m     \u001b[0moutput\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mgr\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mTextbox\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     10\u001b[0m     \u001b[0mgreet_btn\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mgr\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mButton\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m\"Greet\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m---> 11\u001b[0;31m     \u001b[0mgreet_btn\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mclick\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mfn\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mgreet\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0minputs\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0mname\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0moutputs\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0moutput\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mapi_name\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;34m\"greet\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m     12\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     13\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n",
            "\u001b[0;32m/usr/local/lib/python3.10/dist-packages/gradio/events.py\u001b[0m in \u001b[0;36m__call__\u001b[0;34m(self, fn, inputs, outputs, api_name, status_tracker, scroll_to_output, show_progress, queue, batch, max_batch_size, preprocess, postprocess, cancels, every, _js)\u001b[0m\n\u001b[1;32m    137\u001b[0m             \u001b[0mshow_progress\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;34m\"full\"\u001b[0m \u001b[0;32mif\u001b[0m \u001b[0mshow_progress\u001b[0m \u001b[0;32melse\u001b[0m \u001b[0;34m\"hidden\"\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    138\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 139\u001b[0;31m         dep, dep_index = self.trigger.set_event_trigger(\n\u001b[0m\u001b[1;32m    140\u001b[0m             \u001b[0mself\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mevent_name\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    141\u001b[0m             \u001b[0mfn\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
            "\u001b[0;32m/usr/local/lib/python3.10/dist-packages/gradio/blocks.py\u001b[0m in \u001b[0;36mset_event_trigger\u001b[0;34m(self, event_name, fn, inputs, outputs, preprocess, postprocess, scroll_to_output, show_progress, api_name, js, no_target, queue, batch, max_batch_size, cancels, every, collects_event_data, trigger_after, trigger_only_on_success)\u001b[0m\n\u001b[1;32m    280\u001b[0m             \u001b[0;34m\"trigger\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mevent_name\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    281\u001b[0m             \u001b[0;34m\"inputs\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0;34m[\u001b[0m\u001b[0mblock\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0m_id\u001b[0m \u001b[0;32mfor\u001b[0m \u001b[0mblock\u001b[0m \u001b[0;32min\u001b[0m \u001b[0minputs\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 282\u001b[0;31m             \u001b[0;34m\"outputs\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0;34m[\u001b[0m\u001b[0mblock\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0m_id\u001b[0m \u001b[0;32mfor\u001b[0m \u001b[0mblock\u001b[0m \u001b[0;32min\u001b[0m \u001b[0moutputs\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m    283\u001b[0m             \u001b[0;34m\"backend_fn\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mfn\u001b[0m \u001b[0;32mis\u001b[0m \u001b[0;32mnot\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    284\u001b[0m             \u001b[0;34m\"js\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mjs\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
            "\u001b[0;32m/usr/local/lib/python3.10/dist-packages/gradio/blocks.py\u001b[0m in \u001b[0;36m<listcomp>\u001b[0;34m(.0)\u001b[0m\n\u001b[1;32m    280\u001b[0m             \u001b[0;34m\"trigger\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mevent_name\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    281\u001b[0m             \u001b[0;34m\"inputs\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0;34m[\u001b[0m\u001b[0mblock\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0m_id\u001b[0m \u001b[0;32mfor\u001b[0m \u001b[0mblock\u001b[0m \u001b[0;32min\u001b[0m \u001b[0minputs\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 282\u001b[0;31m             \u001b[0;34m\"outputs\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0;34m[\u001b[0m\u001b[0mblock\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0m_id\u001b[0m \u001b[0;32mfor\u001b[0m \u001b[0mblock\u001b[0m \u001b[0;32min\u001b[0m \u001b[0moutputs\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m    283\u001b[0m             \u001b[0;34m\"backend_fn\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mfn\u001b[0m \u001b[0;32mis\u001b[0m \u001b[0;32mnot\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    284\u001b[0m             \u001b[0;34m\"js\"\u001b[0m\u001b[0;34m:\u001b[0m \u001b[0mjs\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
            "\u001b[0;31mAttributeError\u001b[0m: type object 'Textbox' has no attribute '_id'"
          ]
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "Note that here we have additional parameters that we get to specify outselves, like the addition of the submit button that we get to name \"Greet\". Feel free to change the name of this button, or the textbox labels to see how you can change the look of your interface.\n",
        "\n",
        "The last line of the block is a click listening event. Note that it is very similar to the syntax of the **Interface** class definition. It is activated and the function is called when the user clicks on the button that we specify.\n",
        "\n",
        "Also note that we use the **with** clause to add components to our Blocks. Anything inside of that with clause will be added to the interface and displayed in the order it was created."
      ],
      "metadata": {
        "id": "nK2KKFKA1LwI"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "# More Complexity\n",
        "In this section, we wanted to show off two cool things that we can do when we really get to know gradio. We're going to make one page that can wither flip text or flip an image!\n"
      ],
      "metadata": {
        "id": "APqDvtcD2AfA"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "#Our imports\n",
        "import numpy as np"
      ],
      "metadata": {
        "id": "kXlHo_S-2Doi"
      },
      "execution_count": 15,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "First we need our methods, the heart of our program."
      ],
      "metadata": {
        "id": "_SsNGJCW2FAz"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "#Flip text\n",
        "def flip_text(s):\n",
        "    pass # delete me!"
      ],
      "metadata": {
        "id": "KKBZqnEZ2GsP"
      },
      "execution_count": 16,
      "outputs": []
    },
    {
      "cell_type": "code",
      "source": [
        "#Flip an image\n",
        "def flip_image(p):\n",
        "    #use a method called fliplr from the numpy library (np) with a parameter of p\n",
        "    temp = np.fliplr(p)\n",
        "    return temp"
      ],
      "metadata": {
        "id": "u7LzWk6n2I0_"
      },
      "execution_count": 18,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "Now, we can use the with keyword to build our page!"
      ],
      "metadata": {
        "id": "yLzx8nO32Kdu"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "with gr.Blocks() as demo:\n",
        "    gr.Markdown(\"Flip text or image files.\")\n",
        "    # add the flip text tab!\n",
        "    with gr.Tab(\"Flip Text\"):\n",
        "        text_input = gr.Textbox()\n",
        "        text_output = gr.Textbox()\n",
        "        text_button = gr.Button(\"Flip\")\n",
        "\n",
        "    # add the flip picture tab!\n",
        "    with gr.Tab(\"Flip Image\"):\n",
        "        with gr.Row():\n",
        "            image_input = gr.Image()\n",
        "            image_output = gr.Image()\n",
        "            image_button = gr.Image(\"Flip\")\n",
        "\n",
        "    # add a little secret\n",
        "    with gr.Accordion(\"One secret about me...\"):\n",
        "        gr.Markdown(\"is.\")\n",
        "\n",
        "    #add the buttons to run the program\n",
        "    text_button.click(flip_text, inputs=text_input, outputs=text_output)\n",
        "    image_button.click(flip_image, inputs=image_input, outputs=image_output)\n",
        "\n",
        "# all thats left to do is run it!\n",
        "demo.launch()"
      ],
      "metadata": {
        "id": "yshXuvYf2ML1"
      },
      "execution_count": null,
      "outputs": []
    }
  ]
}