Package: gradio-frp
Build & share delightful machine learning apps easilyWebsite|Documentation|Guides|Getting Started|Examples|中文Gradio: Build Machine Learning Web Apps — in PythonGradio is an open-source Python library that is used to build machine learning and data science demos and web applications.With Gradio, you can quickly create a beautiful user interface around your machine learning models or data science workflow and let people "try it out" by dragging-and-dropping in their own images,
pasting text, recording their own voice, and interacting with your demo, all through the browser.Gradio is useful for:Demoingyour machine learning models for clients/collaborators/users/students.Deployingyour models quickly with automatic shareable links and getting feedback on model performance.Debuggingyour model interactively during development using built-in manipulation and interpretation tools.QuickstartPrerequisite: Gradio requires Python 3.8 or higher, that's all!What Does Gradio Do?One of thebest ways to shareyour machine learning model, API, or data science workflow with others is to create aninteractive appthat allows your users or colleagues to try out the demo in their browsers.Gradio allows you tobuild demos and share them, all in Python.And usually in just a few lines of code! So let's get started.Hello, WorldTo get Gradio running with a simple "Hello, World" example, follow these three steps:1. Install Gradio using pip:pipinstallgradio2. Run the code below as a Python script or in a Jupyter Notebook (orGoogle Colab):importgradioasgrdefgreet(name):return"Hello "+name+"!"demo=gr.Interface(fn=greet,inputs="text",outputs="text")demo.launch()We shorten the imported name togrfor better readability of code using Gradio. This is a widely adopted convention that you should follow so that anyone working with your code can easily understand it.3. The demo below will appear automatically within the Jupyter Notebook, or pop in a browser onhttp://localhost:7860if running from a script:When developing locally, if you want to run the code as a Python script, you can use the Gradio CLI to launch the applicationin reload mode, which will provide seamless and fast development. Learn more about reloading in theAuto-Reloading Guide.gradioapp.pyNote: you can also dopython app.py, but it won't provide the automatic reload mechanism.TheInterfaceClassYou'll notice that in order to make the demo, we created agr.Interface. ThisInterfaceclass can wrap any Python function with a user interface. In the example above, we saw a simple text-based function, but the function could be anything from music generator to a tax calculator to the prediction function of a pretrained machine learning model.The coreInterfaceclass is initialized with three required parameters:fn: the function to wrap a UI aroundinputs: which component(s) to use for the input (e.g."text","image"or"audio")outputs: which component(s) to use for the output (e.g."text","image"or"label")Let's take a closer look at these components used to provide input and output.Components AttributesWe saw some simpleTextboxcomponents in the previous examples, but what if you want to change how the UI components look or behave?Let's say you want to customize the input text field — for example, you wanted it to be larger and have a text placeholder. If we use the actual class forTextboxinstead of using the string shortcut, you have access to much more customizability through component attributes.importgradioasgrdefgreet(name):return"Hello "+name+"!"demo=gr.Interface(fn=greet,inputs=gr.Textbox(lines=2,placeholder="Name Here..."),outputs="text",)demo.launch()Multiple Input and Output ComponentsSuppose 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.importgradioasgrdefgreet(name,is_morning,temperature):salutation="Good morning"ifis_morningelse"Good evening"greeting=f"{salutation}{name}. It is{temperature}degrees today"celsius=(temperature-32)*5/9returngreeting,round(celsius,2)demo=gr.Interface(fn=greet,inputs=["text","checkbox",gr.Slider(0,100)],outputs=["text","number"],)demo.launch()You simply wrap the components in a list. Each component in theinputslist corresponds to one of the parameters of the function, in order. Each component in theoutputslist corresponds to one of the values returned by the function, again in order.An Image ExampleGradio supports many types of components, such asImage,DataFrame,Video, orLabel. Let's try an image-to-image function to get a feel for these!importnumpyasnpimportgradioasgrdefsepia(input_img):sepia_filter=np.array([[0.393,0.769,0.189],[0.349,0.686,0.168],[0.272,0.534,0.131]])sepia_img=input_img.dot(sepia_filter.T)sepia_img/=sepia_img.max()returnsepia_imgdemo=gr.Interface(sepia,gr.Image(shape=(200,200)),"image")demo.launch()When using theImagecomponent as input, your function will receive a NumPy array with the shape(height, width, 3), where the last dimension represents the RGB values. We'll return an image as well in the form of a NumPy array.You can also set the datatype used by the component with thetype=keyword argument. For example, if you wanted your function to take a file path to an image instead of a NumPy array, the inputImagecomponent could be written as:gr.Image(type="filepath",shape=...)Also note that our inputImagecomponent comes with an edit button 🖉, which allows for cropping and zooming into images. Manipulating images in this way can help reveal biases or hidden flaws in a machine learning model!You can read more about the many components and how to use them in theGradio docs.ChatbotsGradio includes a high-level class,gr.ChatInterface, which is similar togr.Interface, but is specifically designed for chatbot UIs. Thegr.ChatInterfaceclass also wraps a function but this function must have a specific signature. The function should take two arguments:messageand thenhistory(the arguments can be named anything, but must be in this order)message: astrrepresenting the user's inputhistory: alistoflistrepresenting the conversations up until that point. Each inner list consists of twostrrepresenting a pair:[user input, bot response].Your function should return a single string response, which is the bot's response to the particular user inputmessage.Other than that,gr.ChatInterfacehas no required parameters (though several are available for customization of the UI).Here's a toy example:importrandomimportgradioasgrdefrandom_response(message,history):returnrandom.choice(["Yes","No"])demo=gr.ChatInterface(random_response)demo.launch()You canread more aboutgr.ChatInterfacehere.Blocks: More Flexibility and ControlGradio offers two approaches to build apps:1.InterfaceandChatInterface, which provide a high-level abstraction for creating demos that we've been discussing so far.2.Blocks, a low-level API for designing web apps with more flexible layouts and data flows. Blocks allows you to do things like feature multiple data flows and demos, control where components appear on the page, handle complex data flows (e.g. outputs can serve as inputs to other functions), and update properties/visibility of components based on user interaction — still all in Python. If this customizability is what you need, tryBlocksinstead!Hello, BlocksLet's take a look at a simple example. Note how the API here differs fromInterface.importgradioasgrdefgreet(name):return"Hello "+name+"!"withgr.Blocks()asdemo:name=gr.Textbox(label="Name")output=gr.Textbox(label="Output Box")greet_btn=gr.Button("Greet")greet_btn.click(fn=greet,inputs=name,outputs=output,api_name="greet")demo.launch()Things to note:Blocksare made with awithclause, and any component created inside this clause is automatically added to the app.Components appear vertically in the app in the order they are created. (Later we will cover customizing layouts!)AButtonwas created, and then aclickevent-listener was added to this button. The API for this should look familiar! Like anInterface, theclickmethod takes a Python function, input components, and output components.More ComplexityHere's an app to give you a taste of what's possible withBlocks:importnumpyasnpimportgradioasgrdefflip_text(x):returnx[::-1]defflip_image(x):returnnp.fliplr(x)withgr.Blocks()asdemo:gr.Markdown("Flip text or image files using this demo.")withgr.Tab("Flip Text"):text_input=gr.Textbox()text_output=gr.Textbox()text_button=gr.Button("Flip")withgr.Tab("Flip Image"):withgr.Row():image_input=gr.Image()image_output=gr.Image()image_button=gr.Button("Flip")withgr.Accordion("Open for More!"):gr.Markdown("Look at me...")text_button.click(flip_text,inputs=text_input,outputs=text_output)image_button.click(flip_image,inputs=image_input,outputs=image_output)demo.launch()A lot more going on here! We'll cover how to create complexBlocksapps like this in thebuilding with blockssection for you.Congrats, you're now familiar with the basics of Gradio! 🥳 Go to ournext guideto learn more about the key features of Gradio.Open Source StackGradio is built with many wonderful open-source libraries, please support them as well!LicenseGradio is licensed under the Apache License 2.0 found in theLICENSEfile in the root directory of this repository.CitationAlso check out the paperGradio: Hassle-Free Sharing and Testing of ML Models in the Wild, ICML HILL 2019, and please cite it if you use Gradio in your work.@article{abid2019gradio,
  title = {Gradio: Hassle-Free Sharing and Testing of ML Models in the Wild},
  author = {Abid, Abubakar and Abdalla, Ali and Abid, Ali and Khan, Dawood and Alfozan, Abdulrahman and Zou, James},
  journal = {arXiv preprint arXiv:1906.02569},
  year = {2019},
}