3_Creación_y_hosting_de_demos_de_machine_learning_con_Gradio_y_Hugging_Face.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "Español - Creación y hosting de demos de machine learning con Gradio y Hugging Face",
      "provenance": [],
      "collapsed_sections": [],
      "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/omarespejel/Hugging-Face-101-ES/blob/main/3_Creaci%C3%B3n_y_hosting_de_demos_de_machine_learning_con_Gradio_y_Hugging_Face.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "**Notebook original en inglés [aquí](https://colab.research.google.com/drive/1K5tP5NBWwtezBg3Kp4wpD5KI6JZ6oCg9).**"
      ],
      "metadata": {
        "id": "7M5cWHxEXS6U"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "💡 **¡Bienvenidos!**\n",
        "\n",
        "Hemos reunido un conjunto de herramientas que los instructores universitarios pueden usar para preparar fácilmente laboratorios, tareas o clases. El contenido está diseñado de manera autónoma, de modo que se puede incorporar fácilmente al plan de estudios existente. Este contenido es gratuito y utiliza tecnologías Open Source ampliamente conocidas (`transformers`, `gradio`, etc).\n",
        "\n",
        "Alternativamente, puede solicitar que alguien del equipo de Hugging Face ejecute los tutoriales para su clase a través de la iniciativa [ML demo.cratization tour](https://huggingface2.notion.site/ML-Demo-cratization-tour-with-66847a294abd4e9785e85663f5239652)!\n",
        "\n",
        "Puede encontrar todos los tutoriales y recursos que hemos reunido [aquí](https://huggingface2.notion.site/Education-Toolkit-7b4a9a9d65ee4a6eb16178ec2a4f3599). "
      ],
      "metadata": {
        "id": "gh6QOr-qO4Ym"
      }
    },
    {
      "cell_type": "code",
      "source": [
        ""
      ],
      "metadata": {
        "id": "ucv3LzuNH73L"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Tutorial: Cree y aloje demostraciones de aprendizaje automático con Gradio ⚡ & Hugging Face 🤗 "
      ],
      "metadata": {
        "id": "NkJmA-r5L0EB"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "**Objetivos de aprendizajes:** \n",
        "1. Crear una demostración rápida para su modelo de machine learning en Python usando la libreria `gradio` \n",
        "2. Organizar las demostraciones de forma gratuita con Hugging Face Spaces\n",
        "3. Agregar su demostración a la organización Hugging Face para su clase o conferencia. Esto incluye:\n",
        "  *  Un paso de configuración para instructores (o organizadores de conferencias)\n",
        "  *   Subir instrucciones para los estudiantes (o participantes de conferencias)\n",
        "\n",
        "**Duración**: 20-40\n",
        " minutos\n",
        "\n",
        "**Rrequisitos previos:** Conocimiento de Python y familiaridad básica de machine learning \n",
        "\n",
        "\n",
        "**Autor**: [Abubakar Abid](https://twitter.com/abidlabs) (siéntase libre de enviarme un ping con cualquier pregunta sobre este tutorial) \n",
        "\n",
        "¡Todos estos pasos se pueden hacer gratis! Todo lo que necesita es un navegador de Internet y un lugar donde pueda escribir Python 👩‍💻"
      ],
      "metadata": {
        "id": "D_Iv1CJZPekG"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## ¿Por qué demostraciones?\n",
        "\n",
        "Las **demostraciones** de modelos de machine learning son una parte cada vez más importante de los _cursos_ y _conferencias_ de machine learning. Las demostraciones permiten:\n",
        "* desarrolladores de modelos para **presentar** fácilmente su trabajo a una amplia audiencia\n",
        "* aumentar la **reproducibilidad** de la investigación de machine learning\n",
        "* diversos usuarios para **identificar y depurar** más fácilmente los puntos de falla de los modelos\n",
        "\n",
        "\n",
        "Como un ejemplo rápido de lo que nos gustaría construir, echa un vistazo a [Keras Org on Hugging Face](https://huggingface.co/keras-io), que incluye una tarjeta de descripción y una colección de Modelos y Espacios construidos por la comunidad de Keras. Cualquier espacio se puede abrir en su navegador y puede usar el modelo inmediatamente como se muestra aquí:\n",
        "\n",
        "![](https://i.ibb.co/7y6DGjB/ezgif-5-cc52b7e590.gif)\n",
        "\n",
        "\n"
      ],
      "metadata": {
        "id": "PR9faV2NWTrG"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## 1. Cree demostraciones rápidas de ML en Python usando la libreria Gradio"
      ],
      "metadata": {
        "id": "g0KzbU4lQtv3"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "`gradio` es una práctica librería de Python que le permite crear demostraciones web simplemente especificando la lista de componentes de entrada y salida que espera su modelo de machine learning.\n",
        "\n",
        "¿Qué quiero decir con componentes de entrada y salida? Gradio viene con un montón de componentes predefinidos para diferentes tipos de modelos de aprendizaje automático. Aquí hay unos ejemplos:\n",
        "\n",
        "* Para un **clasificador de imágenes**, el tipo de entrada esperado es una `Imagen` y el tipo de salida es una `Etiqueta`. \n",
        "* Para un **modelo de reconocimiento de voz**, el componente de entrada esperado es un 'Micrófono' (que permite a los usuarios grabar desde el navegador) o 'Audio' (que permite a los usuarios arrastrar y soltar archivos de audio), mientras que el tipo de salida es `Texto`.\n",
        "* Para un **modelo de respuesta a preguntas**, esperamos **2 entradas**: [`Texto`, `Texto`], un cuadro de texto para el párrafo y otro para la pregunta, y el tipo de salida es un solo `Texto` correspondiente a la respuesta. \n",
        "\n",
        "Tienes la idea... (para todos los componentes compatibles, [ver los documentos](https://gradio.app/docs/))\n",
        "\n",
        "Además de los tipos de entrada y salida, Gradio espera un tercer parámetro, que es la propia función de predicción. Este parámetro puede ser ***cualquier* función normal de Python** que tome los parámetros correspondientes a los componentes de entrada y devuelva los valores correspondientes a los componentes de salida.\n",
        "\n",
        "Basta de palabras. ¡Veamos algo de código!"
      ],
      "metadata": {
        "id": "rlSs72oUQ1VW"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "# Primero, instale Gradio\n",
        "!pip install --quiet gradio"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "p0MkPbbZbSiP",
        "outputId": "e143c5df-5b98-46c6-f2f7-7fc7abebd3d7"
      },
      "execution_count": null,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "\u001b[K     |████████████████████████████████| 871 kB 5.1 MB/s \n",
            "\u001b[K     |████████████████████████████████| 2.0 MB 41.5 MB/s \n",
            "\u001b[K     |████████████████████████████████| 52 kB 787 kB/s \n",
            "\u001b[K     |████████████████████████████████| 1.1 MB 25.8 MB/s \n",
            "\u001b[K     |████████████████████████████████| 52 kB 1.1 MB/s \n",
            "\u001b[K     |████████████████████████████████| 210 kB 56.5 MB/s \n",
            "\u001b[K     |████████████████████████████████| 94 kB 2.8 MB/s \n",
            "\u001b[K     |████████████████████████████████| 271 kB 58.7 MB/s \n",
            "\u001b[K     |████████████████████████████████| 144 kB 58.8 MB/s \n",
            "\u001b[K     |████████████████████████████████| 10.9 MB 44.8 MB/s \n",
            "\u001b[K     |████████████████████████████████| 58 kB 5.3 MB/s \n",
            "\u001b[K     |████████████████████████████████| 79 kB 6.6 MB/s \n",
            "\u001b[K     |████████████████████████████████| 856 kB 60.6 MB/s \n",
            "\u001b[K     |████████████████████████████████| 61 kB 374 kB/s \n",
            "\u001b[K     |████████████████████████████████| 3.6 MB 50.0 MB/s \n",
            "\u001b[K     |████████████████████████████████| 58 kB 4.5 MB/s \n",
            "\u001b[?25h  Building wheel for ffmpy (setup.py) ... \u001b[?25l\u001b[?25hdone\n",
            "  Building wheel for python-multipart (setup.py) ... \u001b[?25l\u001b[?25hdone\n"
          ]
        }
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "# Definir una función simple \"Hola mundo\"\n",
        "def greet(name):\n",
        "    return \"Hello \" + name + \"!!\""
      ],
      "metadata": {
        "id": "SjTxhry8bWS7"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "source": [
        "# Escriba 2 líneas de Python para crear una GUI simple\n",
        "import gradio as gr\n",
        "\n",
        "gr.Interface(fn=greet, inputs=\"text\", outputs=\"text\").launch();"
      ],
      "metadata": {
        "id": "OgqlIG2DbrJq"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "Ejecutar el código anterior debería producir una GUI simple dentro de este cuaderno que le permita escribir entradas de ejemplo y ver el resultado devuelto por su función. \n",
        "\n",
        "Note que definimos una 'Interfaz' usando los 3 ingredientes mencionados anteriormente:\n",
        "* Una función\n",
        "* Componente(s) de entrada\n",
        "* Componente(s) de salida\n",
        "\n",
        "Este es un ejemplo simple para texto, pero el mismo principio es válido para cualquier otro tipo de tipo de datos. Por ejemplo, aquí hay una interfaz que genera un tono musical cuando se le proporcionan algunos parámetros diferentes (el código específico dentro de `generate_tone()` no es importante para el propósito de este tutorial):"
      ],
      "metadata": {
        "id": "0TyTGpSsb7bs"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "import numpy as np\n",
        "import gradio as gr\n",
        "\n",
        "def generate_tone(note, octave, duration):\n",
        "    sampling_rate = 48000\n",
        "    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)\n",
        "    frequency = a4_freq * 2 ** (tones_from_a4 / 12)\n",
        "    audio = np.linspace(0, int(duration), int(duration) * sampling_rate)\n",
        "    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)\n",
        "    return sampling_rate, audio\n",
        "\n",
        "gr.Interface(\n",
        "    generate_tone,\n",
        "    [\n",
        "        gr.inputs.Dropdown([\"C\", \"C#\", \"D\", \"D#\", \"E\", \"F\", \"F#\", \"G\", \"G#\", \"A\", \"A#\", \"B\"], type=\"index\"),\n",
        "        gr.inputs.Slider(4, 6, step=1),\n",
        "        gr.inputs.Textbox(type=\"number\", default=1, label=\"Duration in seconds\"),\n",
        "    ],\n",
        "    \"audio\",\n",
        "    title=\"Generate a Musical Tone!\"\n",
        ").launch()"
      ],
      "metadata": {
        "id": "cHiZAO6ub6kA",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 643
        },
        "outputId": "ee9e8bfd-4b86-4ddf-c96d-d389cdc0730e"
      },
      "execution_count": null,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Colab notebook detected. To show errors in colab notebook, set `debug=True` in `launch()`\n",
            "Running on public URL: https://20619.gradio.app\n",
            "\n",
            "This share link expires in 72 hours. For free permanent hosting, check out Spaces (https://huggingface.co/spaces)\n"
          ]
        },
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "        <iframe\n",
              "            width=\"900\"\n",
              "            height=\"500\"\n",
              "            src=\"https://20619.gradio.app\"\n",
              "            frameborder=\"0\"\n",
              "            allowfullscreen\n",
              "        ></iframe>\n",
              "        "
            ],
            "text/plain": [
              "<IPython.lib.display.IFrame at 0x7f84a6eaeb10>"
            ]
          },
          "metadata": {}
        },
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "(<fastapi.applications.FastAPI at 0x7f84a8c6f850>,\n",
              " 'http://127.0.0.1:7860/',\n",
              " 'https://20619.gradio.app')"
            ]
          },
          "metadata": {},
          "execution_count": 3
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "**Desafío #1**: cree una demostración de Gradio que tome una imagen y aplique un *filtro sepia* en menos de 10 líneas de código Python. Puedes encontrar [\n",
        "este enlace útil](https://www.yabirgb.com/sepia_filter/). "
      ],
      "metadata": {
        "id": "23gD280-w-kT"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "There are a lot more examples you can try in Gradio's [getting started page](https://gradio.app/getting_started/), which cover additional features such as:\n",
        "* Adding example inputs\n",
        "* Adding _state_ (e.g. for chatbots)\n",
        "* Sharing demos easily using one parameter called `share` (<-- this is pretty cool 😎)\n",
        "\n",
        "It is especially easy to demo a `transformers` model from Hugging Face's Model Hub, using the special `gr.Interface.load` method. For example, here is the code to build a demo for [GPT-J](https://huggingface.co/EleutherAI/gpt-j-6B), a large language model & add a couple of examples inputs:"
      ],
      "metadata": {
        "id": "DSE6TZF5e9Oz"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "import gradio as gr\n",
        "\n",
        "examples = [[\"The Moon's orbit around Earth has\"], [\"There once was a pineapple\"]]\n",
        "\n",
        "gr.Interface.load(\"huggingface/EleutherAI/gpt-j-6B\", examples=examples).launch();"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 608
        },
        "id": "N_Cobhx8e8v9",
        "outputId": "2bac3837-feff-42ea-a577-60343f19535b"
      },
      "execution_count": null,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Fetching model from: https://huggingface.co/EleutherAI/gpt-j-6B\n",
            "Colab notebook detected. To show errors in colab notebook, set `debug=True` in `launch()`\n",
            "Running on public URL: https://30262.gradio.app\n",
            "\n",
            "This share link expires in 72 hours. For free permanent hosting, check out Spaces (https://huggingface.co/spaces)\n"
          ]
        },
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "        <iframe\n",
              "            width=\"900\"\n",
              "            height=\"500\"\n",
              "            src=\"https://30262.gradio.app\"\n",
              "            frameborder=\"0\"\n",
              "            allowfullscreen\n",
              "        ></iframe>\n",
              "        "
            ],
            "text/plain": [
              "<IPython.lib.display.IFrame at 0x7f1a12d753d0>"
            ]
          },
          "metadata": {}
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "**Challenge #2**: Go to the [Hugging Face Model Hub](https://huggingface.co/models), and pick a model that performs one of the other tasks supported in the `transformers` library (other than text generation). Create a Gradio demo for that model using `gr.Interface.load`."
      ],
      "metadata": {
        "id": "EoUYf0rYksA9"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## 2. Host the Demo (for free) on Hugging Face Spaces\n",
        "\n",
        "Once you made a Gradio demo, you can host it permanently on Hugging Spaces very easily:\n",
        "\n",
        "Here are the steps to that (shown in the GIF below):\n",
        "\n",
        "A. First, create a Hugging Face account if you do not already have one, by visiting https://huggingface.co/ and clicking \"Sign Up\"\n",
        "\n",
        "B. Once you are logged in, click on your profile picture and then click on \"New Space\" underneath it to get to this page: https://huggingface.co/new-space\n",
        "\n",
        "C. Give your Space a name and a license. Select \"Gradio\" as the Space SDK, and then choose \"Public\" if you are fine with everyone accessing your Space and the underlying code\n",
        "\n",
        "D. Then you will find a page that provides you instructions on how to upload your files into the Git repository for that Space. You may also need to add a `requirements.txt` file to specify any Python package dependencies.\n",
        "\n",
        "E. Once you have pushed your files, that's it! Spaces will automatically build your Gradio demo allowing you to share it with anyone, anywhere!\n",
        "\n",
        "![GIF](https://huggingface.co/blog/assets/28_gradio-spaces/spaces-demo-finalized.gif)\n",
        "\n",
        "\n",
        "\n"
      ],
      "metadata": {
        "id": "b6Ek7cORgDkQ"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "You can even embed your Gradio demo on any website -- in a blog, a portfolio page, or even in a colab notebook, like I've done with a Pictionary sketch recognition model below:"
      ],
      "metadata": {
        "id": "d4XCmQ_RILoq"
      }
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "IwNP5DJOKUql"
      },
      "outputs": [],
      "source": [
        "from IPython.display import IFrame\n",
        "IFrame(src='https://hf.space/gradioiframe/abidlabs/Draw/+', width=1000, height=800)"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "**Challenge #3**: Upload your Gradio demo to Hugging Face Spaces and get a permanent URL for it. Share the permanent URL with someone (a colleague, a collaborator, a friend, a user, etc.) -- what kind of feedback do you get on your machine learning model?"
      ],
      "metadata": {
        "id": "Dw6H-iQAlF8I"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## 3. Add your demo to the Hugging Face org for your class or conference"
      ],
      "metadata": {
        "id": "MqD0O1PKIg3g"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "#### **Setup** (for instructors or conference organizers)"
      ],
      "metadata": {
        "id": "DrMObQbwLOHm"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "A. First, create a Hugging Face account if you do not already have one, by visiting https://huggingface.co/ and clicking \"Sign Up\"\n",
        "\n",
        "B. Once you are logged in, click on your profile picture and then click on \"New Organization\" underneath it to get to this page: https://huggingface.co/organizations/new\n",
        "\n",
        "C. Fill out the information for your class or conference. We recommend creating a separate organization each time that a class is taught (for example, \"Stanford-CS236g-20222\") and for each year of the conference.\n",
        "\n",
        "D. Your organization will be created and now now users will be able request adding themselves to your organizations by visiting the organization page.\n",
        "\n",
        "E. Optionally, you can change the settings by clicking on the \"Organization settings\" button. Typically, for classes and conferences, you will want to navigate to `Settings > Members` and set the \"Default role for new members\" to be \"write\", which allows them to submit Spaces but not change the settings. "
      ],
      "metadata": {
        "id": "_45C7MnXNbc0"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "#### For students or conference participants"
      ],
      "metadata": {
        "id": "iSqzO-w8LY0R"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "A. Ask your instructor / coneference organizer for the link to the Organization page if you do not already have it\n",
        "\n",
        "B. Visit the Organization page and click \"Request to join this org\" button, if you are not yet part of the org.\n",
        "\n",
        "C. Then, once you have been approved to join the organization (and built your Gradio Demo and uploaded it to Spaces -- see Sections 1 and 2), then simply go to your Space and go to `Settings > Rename or transfer this space` and then select the organization name under `New owner`. Click the button and the Space will now be added to your class or conference Space!   "
      ],
      "metadata": {
        "id": "3x1Oyh4wOdOK"
      }
    }
  ]
}