Skip to content
Snippets Groups Projects
GUI_Tutorial.ipynb 6.61 KiB
Newer Older
krupczak's avatar
krupczak committed
{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "7227f3fa",
   "metadata": {},
   "source": [
    "## Gradio: How you can build a GUI within a Jupyter Notebook\n",
    "\n",
    "#### By Team JACT"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ba81c68d",
   "metadata": {},
   "source": [
    "## Getting Started\n",
    "\n",
    "First, the gradio library must be installed on your computer. It requires Python 3.7 or later. If you have not done so already, please check your version of Python and run the following line of code:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "cdfdbb3e",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Python 3.9.7\r\n"
     ]
    }
   ],
   "source": [
    "!python --version"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "8f5edb3b",
   "metadata": {},
   "outputs": [],
   "source": [
    "#!pip install gradio"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f76c9232",
   "metadata": {},
   "source": [
    "Next, import the library as follows:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "227461d8",
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "import gradio as gr"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c3d4eb50",
   "metadata": {},
   "source": [
    "Gradio can be used with a wide range of media-text, pictures, video, and sound. It is most useful for demonstrating machine learning algorithms.\n",
    "\n",
    "To get a feel for how it works, run the cell below this one. An interface will automatically pop up within the Jupyter Notebook. You can type your input directing into the interface."
   ]
  },
  {
   "cell_type": "code",
krupczak's avatar
krupczak committed
   "execution_count": 2,
krupczak's avatar
krupczak committed
   "id": "92c83d6b",
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
krupczak's avatar
krupczak committed
      "Running on local URL:  http://127.0.0.1:7860/\n",
krupczak's avatar
krupczak committed
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"900\"\n",
       "            height=\"500\"\n",
krupczak's avatar
krupczak committed
       "            src=\"http://127.0.0.1:7860/\"\n",
krupczak's avatar
krupczak committed
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "            \n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
krupczak's avatar
krupczak committed
       "<IPython.lib.display.IFrame at 0x7fcaf03ab5b0>"
krupczak's avatar
krupczak committed
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
krupczak's avatar
krupczak committed
       "(<fastapi.applications.FastAPI at 0x7fcac199eee0>,\n",
       " 'http://127.0.0.1:7860/',\n",
krupczak's avatar
krupczak committed
       " None)"
      ]
     },
krupczak's avatar
krupczak committed
     "execution_count": 2,
krupczak's avatar
krupczak committed
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def greet(name):\n",
    "    return \"Hello \" + name + \"!!\"\n",
    "\n",
    "iface = gr.Interface(fn=greet, inputs=\"text\", outputs=\"text\")\n",
    "iface.launch()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8469e7e7",
   "metadata": {},
   "source": [
    "### The Interface\n",
    "\n",
    "The core interface has three parameters:\n",
    " 1. fn: The function.\n",
    " 2. inputs: The input component.\n",
    " 3. outputs: The output component.\n",
    " \n",
    "With these components, you can quickly create and launch an interface."
   ]
  },
krupczak's avatar
krupczak committed
  {
   "cell_type": "markdown",
   "id": "46e5071f",
   "metadata": {},
   "source": [
    "### Uses of Gradio"
   ]
  },
krupczak's avatar
krupczak committed
  {
   "cell_type": "markdown",
   "id": "94a5d6f2",
   "metadata": {},
   "source": [
krupczak's avatar
krupczak committed
    "Gradio can load in data, similar to pandas frames, by using the command `gradio.inputs.Dataframe(data_name)`. It can only take in strings, numbers, bools, and dates as data types. Gradio does not contain a library of datasets, so data must be input by the user. It can also work with time series, images, audio, video, and generic file uploads.\n",
    "\n",
    "Applications:\n",
    "- Machine learning interface\n",
    "    - Image classification.\n",
    "    - Text generation interface (e.g. ChatBot).\n",
    "\n",
    "- Audio and video editing \n",
    "    - Reverse audio files.\n",
    "    - Flip video files.\n",
    "    - Using machine learning, gradio can detect the main note in an inputted audio file. \n",
    " \n",
    "- File Outputs:\n",
    "    - Zip files directly within Python.\n",
    "    - Output your data in various file formats including JSON, HTML, PNG, etc.\n",
    "    - Using a function called `.Carousel()`, Gradio can output a set of components that can be easily scrolled through. "
krupczak's avatar
krupczak committed
   ]
  },
  {
   "cell_type": "markdown",
krupczak's avatar
krupczak committed
   "id": "17bf993f",
krupczak's avatar
krupczak committed
   "metadata": {},
   "source": [
nitkiew2's avatar
nitkiew2 committed
    "An example of a question could be, what is the conclusion of the sentence: Today will be a good day.\n",
krupczak's avatar
krupczak committed
    "\n",
nitkiew2's avatar
nitkiew2 committed
    "A user could use Gardio to create an input field, then use the information from that field to generate a response.  For example, the input could be sent to a text generation model such as GPT-2 to generate a response. \n",
krupczak's avatar
krupczak committed
    "\n",
krupczak's avatar
krupczak committed
    "For a visual from data, you could create a cat/dog image classification model and Gradio demo to upload new images for class prediction. The model will be a Keras convolutional neural network (CNN) that would be trained on images of cats and dogs as features and their class names as labels"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1196a4c1",
   "metadata": {},
   "source": [
krupczak's avatar
krupczak committed
    "How this data or tool could be used in some of the team projects (maybe not your own)\n",
krupczak's avatar
krupczak committed
    "- For projects with time series modeling\n",
    "    * Hope Village\n",
    "    * Argonne\n",
    "- For image analysis\n",
    "    * Neogen\n",
    "    * Ford\n",
    "- Machine learning group\n",
    "    * Kelloggs\n",
    "    * AFRL"
krupczak's avatar
krupczak committed
   ]
  },
  {
   "cell_type": "markdown",
   "id": "500e9ab6",
   "metadata": {},
   "source": [
krupczak's avatar
krupczak committed
    "Sources:<br>\n",
    "[Analytics Vidhya](https://www.analyticsvidhya.com/blog/2021/04/create-interface-for-your-machine-learning-models-using-gradio-python-library/)\n",
krupczak's avatar
krupczak committed
    "\n",
krupczak's avatar
krupczak committed
    "[Gradio Documentation](https://gradio.app/getting_started/)\n"
krupczak's avatar
krupczak committed
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}