From 2d27caba81abaab926ac6eaed7158c67539f726b Mon Sep 17 00:00:00 2001 From: Ali Abid Date: Wed, 25 Aug 2021 21:25:53 +0000 Subject: [PATCH] updated readme --- README.md | 84 ++++++++++++++++++++++++++++++++++++--- demo/calculator_live.py | 20 ++++++++++ demo/diff_texts.py | 19 ++++----- demo/sales_projections.py | 6 +-- readme_template.md | 24 ++++++++++- 5 files changed, 132 insertions(+), 21 deletions(-) create mode 100644 demo/calculator_live.py diff --git a/README.md b/README.md index 210f8b658d..3d66da7f60 100644 --- a/README.md +++ b/README.md @@ -122,16 +122,56 @@ iface.launch() Additionally, our `Image` input interface comes with an 'edit' button which opens tools for cropping, flipping, rotating, drawing over, and applying filters to images. We've found that manipulating images in this way will often reveal hidden flaws in a model. -### Example Data +In addition to images, Gradio supports other media input types, such as audio or video uploads. Read about these in the [Docs](https://gradio.app/docs). + +### Working with Data + +You can use Gradio to support inputs and outputs from your typical data libraries, such as numpy arrays, pandas dataframes, and plotly graphs. Take a look at the demo below (ignore the complicated data manipulation in the function!) + +```python +import gradio as gr +import numpy as np +import pandas as pd +import matplotlib.pyplot as plt + +def sales_projections(employee_data): + sales_data = employee_data.iloc[:, 1:4].astype("int").to_numpy() + regression_values = np.apply_along_axis(lambda row: + np.array(np.poly1d(np.polyfit([0,1,2], row, 2))), 0, sales_data) + projected_months = np.repeat(np.expand_dims( + np.arange(3,12), 0), len(sales_data), axis=0) + projected_values = np.array([ + month * month * regression[0] + month * regression[1] + regression[2] + for month, regression in zip(projected_months, regression_values)]) + plt.plot(projected_values.T) + plt.legend(employee_data["Name"]) + return employee_data, plt.gcf(), regression_values + +iface = gr.Interface(sales_projections, + gr.inputs.Dataframe( + headers=["Name", "Jan Sales", "Feb Sales", "Mar Sales"], + default=[["Jon", 12, 14, 18], ["Alice", 14, 17, 2], ["Sana", 8, 9.5, 12]] + ), + [ + "dataframe", + "plot", + "numpy" + ], + description="Enter sales figures for employees to predict sales trajectory over year." +) +iface.launch() + +``` +![sales_projections interface](demo/screenshots/sales_projections/1.gif) + +### Example Inputs You can provide example data that a user can easily load into the model. This can be helpful to demonstrate the types of inputs the model expects, as well as to provide a way to explore your dataset in conjunction with your model. To load example data, you provide a **nested list** to the `examples=` keyword argument of the Interface constructor. Each sublist within the outer list represents a data sample, and each element within the sublist represents an input for each input component. The format of example data for each component is specified in the [Docs](https://gradio.app/docs). ```python import gradio as gr -import random def calculator(num1, operation, num2): - print(num1, operation, num2) if operation == "add": return num1 + num2 elif operation == "subtract": @@ -152,7 +192,7 @@ iface = gr.Interface(calculator, ], title="test calculator", description="heres a sample toy calculator. enjoy!", - flagging_options=["this", "or", "that"] + flagging_options=["this", "or", "that"], ) iface.launch() @@ -162,6 +202,36 @@ iface.launch() You can load a large dataset into the examples to browse and interact with the dataset through Gradio. The examples will be automatically paginated (you can configure this through the `examples_per_page` argument of Interface) and you can use CTRL + arrow keys to navigate through the examples quickly. +### Live Interfaces + +You can make interfaces automatically responsive by setting `live=True` in the interface. Now the interface will recalculate as soon as the user input. + +```python +import gradio as gr + +def calculator(num1, operation, num2): + if operation == "add": + return num1 + num2 + elif operation == "subtract": + return num1 - num2 + elif operation == "multiply": + return num1 * num2 + elif operation == "divide": + return num1 / num2 + +iface = gr.Interface(calculator, + ["number", gr.inputs.Radio(["add", "subtract", "multiply", "divide"]), "number"], + "number", + live=True +) + +iface.launch() + +``` +![calculator_live interface](demo/screenshots/calculator_live/1.gif) + +Note there is no submit button, because the interface resubmits automatically on change, + ### Flagging Underneath the output interfaces, there is a button marked "Flag". When a user testing your model sees input with interesting output, such as erroneous or unexpected model behaviour, they can flag the input for the interface creator to review. Within the directory provided by the `flagging_dir=` argument to the Interface constructor, a CSV file will log the flagged inputs. If the interface involves file data, such as for Image and Audio components, folders will be created to store those flagged data as well. @@ -220,6 +290,10 @@ Share links expire after 72 hours. For permanent hosting, see below. ![Sharing diagram](demo/images/sharing.svg) +### Authentication + +You may wish to put an authentication page in front of your interface to limit access. With the `auth=` keyword argument in the `launch()` method, you can pass a list of acceptable username/password tuples; or, for custom authentication handling, pass a function that takes a username and password as arguments, and returns True to allow authentication, False otherwise. + ### Permanent Hosting You can share your interface publicly and permanently by hosting on Gradio's infrastructure. You will need to create a Gradio premium account. First, log into Gradio on [gradio.app](https://gradio.app) and click Sign In at the top. Once you've logged in with your Github account, you can specify which repositories from your Github profile you'd like to have hosted by Gradio. You must also specify the file within the repository that runs the Gradio `launch()` command. Once you've taken these steps, Gradio will launch your interface and provide a public link you can share. @@ -280,7 +354,7 @@ def interpret_gender(sentence): iface = gr.Interface( fn=gender_of_sentence, inputs=gr.inputs.Textbox(default="She went to his house to get her keys."), - outputs="label", interpretation=interpret_gender) + outputs="label", interpretation=interpret_gender, enable_queue=True) iface.launch() ``` ![gender_sentence_custom_interpretation interface](demo/screenshots/gender_sentence_custom_interpretation/1.gif) diff --git a/demo/calculator_live.py b/demo/calculator_live.py new file mode 100644 index 0000000000..75b47e7eec --- /dev/null +++ b/demo/calculator_live.py @@ -0,0 +1,20 @@ +import gradio as gr + +def calculator(num1, operation, num2): + if operation == "add": + return num1 + num2 + elif operation == "subtract": + return num1 - num2 + elif operation == "multiply": + return num1 * num2 + elif operation == "divide": + return num1 / num2 + +iface = gr.Interface(calculator, + ["number", gr.inputs.Radio(["add", "subtract", "multiply", "divide"]), "number"], + "number", + live=True +) + +if __name__ == "__main__": + iface.launch() diff --git a/demo/diff_texts.py b/demo/diff_texts.py index c72f23cb9b..4d1d5cea69 100644 --- a/demo/diff_texts.py +++ b/demo/diff_texts.py @@ -3,26 +3,21 @@ import gradio as gr from difflib import Differ - def diff_texts(text1, text2): d = Differ() return [ (token[2:], token[0] if token[0] != " " else None) for token in d.compare(text1, text2) ] - iface = gr.Interface( diff_texts, [ - gr.inputs.Textbox(lines=3, default="The quick brown fox jumped over the lazy dogs."), - gr.inputs.Textbox(lines=3, default="The fast brown fox jumps over lazy dogs."), + gr.inputs.Textbox( + lines=3, default="The quick brown fox jumped over the lazy dogs."), + gr.inputs.Textbox( + lines=3, default="The fast brown fox jumps over lazy dogs."), ], - gr.outputs.HighlightedText(color_map={ - "+": "lightgreen", - "-": "pink", - })) - -iface.test_launch() - + gr.outputs.HighlightedText(color_map={"+": "lightgreen", "-": "pink", }), + live=True) if __name__ == "__main__": - iface.launch() + iface.launch() \ No newline at end of file diff --git a/demo/sales_projections.py b/demo/sales_projections.py index 8774d9a835..f6b27a609d 100644 --- a/demo/sales_projections.py +++ b/demo/sales_projections.py @@ -5,8 +5,8 @@ import matplotlib.pyplot as plt def sales_projections(employee_data): sales_data = employee_data.iloc[:, 1:4].astype("int").to_numpy() - regression_values = sales_data.apply_along_axis(lambda row: - np.array(np.poly1d(np.polyfit([0,1,2], row, 2)))) + regression_values = np.apply_along_axis(lambda row: + np.array(np.poly1d(np.polyfit([0,1,2], row, 2))), 0, sales_data) projected_months = np.repeat(np.expand_dims( np.arange(3,12), 0), len(sales_data), axis=0) projected_values = np.array([ @@ -23,7 +23,7 @@ iface = gr.Interface(sales_projections, ), [ "dataframe", - "figure", + "plot", "numpy" ], description="Enter sales figures for employees to predict sales trajectory over year." diff --git a/readme_template.md b/readme_template.md index e0d06954c6..a93fad51a7 100644 --- a/readme_template.md +++ b/readme_template.md @@ -73,7 +73,16 @@ $demo_sepia_filter Additionally, our `Image` input interface comes with an 'edit' button which opens tools for cropping, flipping, rotating, drawing over, and applying filters to images. We've found that manipulating images in this way will often reveal hidden flaws in a model. -### Example Data +In addition to images, Gradio supports other media input types, such as audio or video uploads. Read about these in the [Docs](https://gradio.app/docs). + +### Working with Data + +You can use Gradio to support inputs and outputs from your typical data libraries, such as numpy arrays, pandas dataframes, and plotly graphs. Take a look at the demo below (ignore the complicated data manipulation in the function!) + +$code_sales_projections +$demo_sales_projections + +### Example Inputs You can provide example data that a user can easily load into the model. This can be helpful to demonstrate the types of inputs the model expects, as well as to provide a way to explore your dataset in conjunction with your model. To load example data, you provide a **nested list** to the `examples=` keyword argument of the Interface constructor. Each sublist within the outer list represents a data sample, and each element within the sublist represents an input for each input component. The format of example data for each component is specified in the [Docs](https://gradio.app/docs). @@ -82,6 +91,15 @@ $demo_calculator You can load a large dataset into the examples to browse and interact with the dataset through Gradio. The examples will be automatically paginated (you can configure this through the `examples_per_page` argument of Interface) and you can use CTRL + arrow keys to navigate through the examples quickly. +### Live Interfaces + +You can make interfaces automatically responsive by setting `live=True` in the interface. Now the interface will recalculate as soon as the user input. + +$code_calculator_live +$demo_calculator_live + +Note there is no submit button, because the interface resubmits automatically on change, + ### Flagging Underneath the output interfaces, there is a button marked "Flag". When a user testing your model sees input with interesting output, such as erroneous or unexpected model behaviour, they can flag the input for the interface creator to review. Within the directory provided by the `flagging_dir=` argument to the Interface constructor, a CSV file will log the flagged inputs. If the interface involves file data, such as for Image and Audio components, folders will be created to store those flagged data as well. @@ -140,6 +158,10 @@ Share links expire after 72 hours. For permanent hosting, see below. ![Sharing diagram](demo/images/sharing.svg) +### Authentication + +You may wish to put an authentication page in front of your interface to limit access. With the `auth=` keyword argument in the `launch()` method, you can pass a list of acceptable username/password tuples; or, for custom authentication handling, pass a function that takes a username and password as arguments, and returns True to allow authentication, False otherwise. + ### Permanent Hosting You can share your interface publicly and permanently by hosting on Gradio's infrastructure. You will need to create a Gradio premium account. First, log into Gradio on [gradio.app](https://gradio.app) and click Sign In at the top. Once you've logged in with your Github account, you can specify which repositories from your Github profile you'd like to have hosted by Gradio. You must also specify the file within the repository that runs the Gradio `launch()` command. Once you've taken these steps, Gradio will launch your interface and provide a public link you can share.