Skip to content
Snippets Groups Projects
Commit 3105d340 authored by Colbry, Dirk's avatar Colbry, Dirk
Browse files

Merge branch 'manar_branch1' into 'main' 

Fix issue

See merge request CMSE/datatools_tutorial_demo!46
parents a9ed445a fcfcc99c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 12 additions and 10 deletions
GUI_Tutorial.ipynb
+ 12
− 10
View file @ 3105d340
%% Cell type:markdown id:7227f3fa tags: %% Cell type:markdown id: tags:
## Gradio: How you can build a GUI within a Jupyter Notebook ## Gradio: How you can build a GUI within a Jupyter Notebook
#### By Team JACT #### By Team JACT
%% Cell type:markdown id:ba81c68d tags: %% Cell type:markdown id: tags:
## GUI Background
A graphical user interface (GUI) is an interface through which a user interacts with electronic devices such as computers and smartphones through the use of icons, menus and other visual indicators or representations (graphics). GUIs graphically display information and related user controls, unlike text-based interfaces, where data and commands are strictly in text. GUI representations are manipulated by a pointing device such as a mouse, trackball, stylus, or by a finger on a touch screen.
Source:
https://www.techopedia.com/definition/5435/graphical-user-interface-gui
%% Cell type:markdown id: tags:
## Getting Started ## 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: 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: %% Cell type:code id:cdfdbb3e tags:
``` python ``` python
!python --version !python --version
``` ```
%% Output %% Output
Python 3.8.2 Python 3.8.2
%% Cell type:markdown id:b8de36df tags: %% Cell type:markdown id:b8de36df tags:
On your terminal, On your terminal,
%% Cell type:code id:8f5edb3b tags: %% Cell type:code id:8f5edb3b tags:
``` python ``` python
#!pip install gradio #!pip install gradio
``` ```
%% Cell type:markdown id:f76c9232 tags: %% Cell type:markdown id: tags:
Next, import the library as follows: Next, import the library as follows:
%% Cell type:code id:227461d8 tags: %% Cell type:code id:227461d8 tags:
``` python ``` python
import gradio as gr import gradio as gr
``` ```
%% Cell type:markdown id:c3d4eb50 tags: %% Cell type:markdown id: 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. 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. 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: %% Cell type:code id:92c83d6b tags:
``` python ``` python
def greet(name): def greet(name):
return "Hello " + name + "!!" return "Hello " + name + "!!"
iface = gr.Interface(fn=greet, inputs="text", outputs="text") iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch() iface.launch()
``` ```
%% Output %% 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()`. To create a public link, set `share=True` in `launch()`.
%% Cell type:markdown id:8469e7e7 tags: %% Cell type:markdown id: tags:
### The Interface ### The Interface
The core interface has three parameters: The core interface has three parameters:
1. fn: The function. 1. fn: The function.
2. inputs: The input component. 2. inputs: The input component.
3. outputs: The output component. 3. outputs: The output component.
With these components, you can quickly create and launch an interface. With these components, you can quickly create and launch an interface.
%% Cell type:markdown id:d4bd4273 tags: %% Cell type:markdown id:d4bd4273 tags:
### Adding additional Inputs: ### 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. 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/ Source: https://gradio.app/quickstart/
%% Cell type:code id:dcc87cd1 tags: %% Cell type:code id:dcc87cd1 tags:
``` python ``` python
def greet(name, is_morning, temperature): def greet(name, is_morning, temperature):
salutation = "Good morning" if is_morning else "Good evening" salutation = "Good morning" if is_morning else "Good evening"
greeting = f"{salutation} {name}. It is {temperature} degrees today" greeting = f"{salutation} {name}. It is {temperature} degrees today"
celsius = (temperature - 32) * 5 / 9 celsius = (temperature - 32) * 5 / 9
return greeting, round(celsius, 2) return greeting, round(celsius, 2)
demo = gr.Interface( demo = gr.Interface(
fn=greet, fn=greet,
inputs=["text", "checkbox", gr.Slider(0, 100)], inputs=["text", "checkbox", gr.Slider(0, 100)],
outputs=["text", "number"], outputs=["text", "number"],
) )
demo.launch() demo.launch()
``` ```
%% Output %% Output
Running on local URL: http://127.0.0.1:7861 Running on local URL: http://127.0.0.1:7861
To create a public link, set `share=True` in `launch()`. To create a public link, set `share=True` in `launch()`.
%% Cell type:markdown id:46e5071f tags: %% Cell type:markdown id:46e5071f tags:
### Uses of Gradio ### Uses of Gradio
%% Cell type:markdown id:94a5d6f2 tags: %% Cell type:markdown id: 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. 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: Applications:
- Machine learning interface - Machine learning interface
- Image classification. - Image classification.
- Text generation interface (e.g. ChatBot). - Text generation interface (e.g. ChatBot).
- Audio and video editing - Audio and video editing
- Reverse audio files. - Reverse audio files.
- Flip video files. - Flip video files.
- Using machine learning, gradio can detect the main note in an inputted audio file. - Using machine learning, gradio can detect the main note in an inputted audio file.
- File Outputs: - File Outputs:
- Zip files directly within Python. - Zip files directly within Python.
- Output your data in various file formats including JSON, HTML, PNG, etc. - 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. - Using a function called `.Carousel()`, Gradio can output a set of components that can be easily scrolled through.
%% Cell type:markdown id:17bf993f tags: %% Cell type:markdown id: tags:
An example of a question could be, what is the conclusion of the sentence: Today will be a good day. An example of a question could be, what is the conclusion of the sentence: Today will be a good day.
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. 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.
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 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: %% Cell type:markdown id: tags:
How this data or tool could be used in some of the team projects (maybe not your own) How this data or tool could be used in some of the team projects (maybe not your own)
- For projects with time series modeling - For projects with time series modeling
* Hope Village * Hope Village
* Argonne * Argonne
(Include example of implemntation here) (Include example of implemntation here)
- For image analysis - For image analysis
* Neogen * Neogen
* Ford * Ford
(Include example of implemntation here) (Include example of implemntation here)
- Machine learning group - Machine learning group
* Kelloggs * Kelloggs
* AFRL * AFRL
(Include example of implemntation here) (Include example of implemntation here)
%% Cell type:markdown id:500e9ab6 tags: %% Cell type:markdown id: tags:
Sources:<br> Sources:<br>
[Analytics Vidhya](https://www.analyticsvidhya.com/blog/2021/04/create-interface-for-your-machine-learning-models-using-gradio-python-library/) [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/) [Gradio Documentation](https://gradio.app/getting_started/)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment