Merge branch 'JoshWolfBranch' into 'main'

Added Gradio example w/ multiple inputs See merge request CMSE/datatools_tutorial_demo!13

Merge branch 'JoshWolfBranch' into 'main'
Added Gradio example w/ multiple inputs See merge request CMSE/datatools_tutorial_demo!13
9e55be1d · Colbry, Dirk · 75fb18c1 · ae1e5dca · 9e55be1d
Commit 9e55be1d authored 2 years ago by Colbry, Dirk
--- a/GUI_Tutorial.ipynb
+++ b/GUI_Tutorial.ipynb
@@ -22,7 +22,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": 1,
   "id": "cdfdbb3e",
   "metadata": {},
   "outputs": [
@@ -30,7 +30,7 @@
     "name": "stdout",
     "output_type": "stream",
     "text": [
-      "Python 3.9.7\r\n"
+      "Python 3.8.2\r\n"
     ]
    }
   ],
@@ -40,7 +40,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 2,
   "id": "8f5edb3b",
   "metadata": {},
   "outputs": [],
@@ -58,7 +58,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 3,
   "id": "227461d8",
   "metadata": {
    "scrolled": false
@@ -80,7 +80,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 4,
   "id": "92c83d6b",
   "metadata": {
    "scrolled": true
@@ -90,7 +90,7 @@
     "name": "stdout",
     "output_type": "stream",
     "text": [
-      "Running on local URL:  http://127.0.0.1:7860/\n",
+      "Running on local URL:  http://127.0.0.1:7860\n",
      "\n",
      "To create a public link, set `share=True` in `launch()`.\n"
     ]
@@ -98,19 +98,10 @@
    {
     "data": {
      "text/html": [
-       "\n",
-       "        <iframe\n",
-       "            width=\"900\"\n",
-       "            height=\"500\"\n",
-       "            src=\"http://127.0.0.1:7860/\"\n",
-       "            frameborder=\"0\"\n",
-       "            allowfullscreen\n",
-       "            \n",
-       "        ></iframe>\n",
-       "        "
+       "<div><iframe src=\"http://127.0.0.1:7860/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
      ],
      "text/plain": [
-       "<IPython.lib.display.IFrame at 0x7fcaf03ab5b0>"
+       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
@@ -118,13 +109,9 @@
    },
    {
     "data": {
-      "text/plain": [
-       "(<fastapi.applications.FastAPI at 0x7fcac199eee0>,\n",
-       " 'http://127.0.0.1:7860/',\n",
-       " None)"
-      ]
+      "text/plain": []
     },
-     "execution_count": 2,
+     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
@@ -152,6 +139,70 @@
    "With these components, you can quickly create and launch an interface."
   ]
  },
+  {
+   "cell_type": "markdown",
+   "id": "d4bd4273",
+   "metadata": {},
+   "source": [
+    "### Adding additional Inputs:\n",
+    "\n",
+    "Suppose you had a more complex function, with multiple inputs and outputs. In the example below, we define a function that takes a string, boolean, and number, and returns a string and number. Take a look how you pass a list of input and output components.\n",
+    "\n",
+    "\n",
+    "Source: https://gradio.app/quickstart/"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "dcc87cd1",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Running on local URL:  http://127.0.0.1:7861\n",
+      "\n",
+      "To create a public link, set `share=True` in `launch()`.\n"
+     ]
+    },
+    {
+     "data": {
+      "text/html": [
+       "<div><iframe src=\"http://127.0.0.1:7861/\" width=\"100%\" height=\"500\" allow=\"autoplay; camera; microphone; clipboard-read; clipboard-write;\" frameborder=\"0\" allowfullscreen></iframe></div>"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "text/plain": []
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "def greet(name, is_morning, temperature):\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\n",
+    "    return greeting, round(celsius, 2)\n",
+    "\n",
+    "demo = gr.Interface(\n",
+    "    fn=greet,\n",
+    "    inputs=[\"text\", \"checkbox\", gr.Slider(0, 100)],\n",
+    "    outputs=[\"text\", \"number\"],\n",
+    ")\n",
+    "demo.launch()"
+   ]
+  },
  {
   "cell_type": "markdown",
   "id": "46e5071f",
@@ -242,7 +293,7 @@
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
-   "version": "3.9.7"
+   "version": "3.8.2"
  }
 },
 "nbformat": 4,

 %% Cell type:markdown id:7227f3fa tags:

 ## Gradio: How you can build a GUI within a Jupyter Notebook

 #### By Team JACT

 %% Cell type:markdown id:ba81c68d tags:

 ## Getting Started

 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 id:cdfdbb3e tags:

 ``` python
 !python --version
 ```

 %% Output

-    Python 3.9.7
+    Python 3.8.2

 %% Cell type:code id:8f5edb3b tags:

 ``` python
 #!pip install gradio
 ```

 %% Cell type:markdown id:f76c9232 tags:

 Next, import the library as follows:

 %% Cell type:code id:227461d8 tags:

 ``` python
 import gradio as gr
 ```

 %% Cell type:markdown id:c3d4eb50 tags:

 Gradio can be used with a wide range of media-text, pictures, video, and sound. It is most useful for demonstrating machine learning algorithms.

 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 id:92c83d6b tags:

 ``` python
 def greet(name):
    return "Hello " + name + "!!"

 iface = gr.Interface(fn=greet, inputs="text", outputs="text")
 iface.launch()
 ```

 %% Output

-    Running on local URL:  http://127.0.0.1:7860/
+    Running on local URL:  http://127.0.0.1:7860
    
    To create a public link, set `share=True` in `launch()`.


-    (<fastapi.applications.FastAPI at 0x7fcac199eee0>,
-     'http://127.0.0.1:7860/',
-     None)

 %% Cell type:markdown id:8469e7e7 tags:

 ### The Interface

 The core interface has three parameters:
 1. fn: The function.
 2. inputs: The input component.
 3. outputs: The output component.

 With these components, you can quickly create and launch an interface.

+%% Cell type:markdown id:d4bd4273 tags:
+
+### Adding additional Inputs:
+
+Suppose you had a more complex function, with multiple inputs and outputs. In the example below, we define a function that takes a string, boolean, and number, and returns a string and number. Take a look how you pass a list of input and output components.
+
+
+Source: https://gradio.app/quickstart/
+
+%% Cell type:code id:dcc87cd1 tags:
+
+``` python
+def greet(name, is_morning, temperature):
+    salutation = "Good morning" if is_morning else "Good evening"
+    greeting = f"{salutation} {name}. It is {temperature} degrees today"
+    celsius = (temperature - 32) * 5 / 9
+    return greeting, round(celsius, 2)
+
+demo = gr.Interface(
+    fn=greet,
+    inputs=["text", "checkbox", gr.Slider(0, 100)],
+    outputs=["text", "number"],
+)
+demo.launch()
+```
+
+%% Output
+
+    Running on local URL:  http://127.0.0.1:7861
+    
+    To create a public link, set `share=True` in `launch()`.
+
+
+
 %% Cell type:markdown id:46e5071f tags:

 ### Uses of Gradio

 %% Cell type:markdown id:94a5d6f2 tags:

 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.

 Applications:
 - Machine learning interface
    - Image classification.
    - Text generation interface (e.g. ChatBot).

 - Audio and video editing
    - Reverse audio files.
    - Flip video files.
    - Using machine learning, gradio can detect the main note in an inputted audio file.

 - File Outputs:
    - Zip files directly within Python.
    - Output your data in various file formats including JSON, HTML, PNG, etc.
    - Using a function called `.Carousel()`, Gradio can output a set of components that can be easily scrolled through.

 %% Cell type:markdown id:17bf993f tags:

 An example of a question could be, what is the conclusion of the sentence.....

 Today will be a good day.

 For that you would be using a text generation model called GPT-2 and the example given user's Text Interface.

 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 tags:

 How this data or tool could be used in some of the team projects (maybe not your own)
 - For projects with time series modeling
    * Hope Village
    * Argonne
 - For image analysis
    * Neogen
    * Ford
 - Machine learning group
    * Kelloggs
    * AFRL

 %% Cell type:markdown id:500e9ab6 tags:

 Sources:<br>
 [Analytics Vidhya](https://www.analyticsvidhya.com/blog/2021/04/create-interface-for-your-machine-learning-models-using-gradio-python-library/)

 [Gradio Documentation](https://gradio.app/getting_started/)