Gradio

Gradio is an open-source Python library for rapidly building interactive web demos and applications for machine learning models. It requires no JavaScript, CSS, or web hosting knowledge, enabling developers to create shareable UIs in minutes with seamless Hugging Face Spaces integration.¹⁾

Gradio demos wrap a Python function with input and output components. The simplest approach uses the Interface class:²⁾

• Define a prediction function (e.g., model inference)
• Specify input components (image, text, audio, file)
• Specify output components (label, text, image, JSON)
• Launch with demo.launch() to start a local web server

Enhancements include titles, descriptions (supporting Markdown and HTML), and pre-loaded examples for user guidance.

Gradio offers two primary APIs for building UIs:³⁾

Interface:

• Simplified for quick single-function demos
• Specify fn, inputs, and outputs
• Linear input-output flow
• Ideal for rapid prototypes

Blocks API:

• Flexible for complex, multi-component layouts
• Declarative component arrangement in rows and columns
• Support for real-time updates and custom logic
• Enables dashboards, leaderboards, and multi-step workflows
• Full control over event handling and state

Gradio provides 20+ pre-built components:⁴⁾

• Text – gr.Textbox, gr.Markdown, gr.Code
• Media – gr.Image, gr.Audio, gr.Video
• Data – gr.Dataframe, gr.JSON, gr.Label
• Input – gr.Slider, gr.Dropdown, gr.Checkbox, gr.Radio
• File – gr.File, gr.UploadButton

Components are customizable via properties like labels, placeholders, and styling. Shortcuts (e.g., “textbox” instead of gr.Textbox()) enable rapid setup.

In Blocks, events are attached to components for dynamic behavior:⁵⁾

• click – button press actions
• change – input value changes
• submit – form submissions
• Support for stateful interactions without full page reloads
• Chaining multiple events for complex workflows

Gradio demos deploy instantly to Hugging Face Spaces for free hosting:⁶⁾

• Upload code to a Space repository
• Automatic build and deployment
• Public URL for sharing
• Direct model loading from the Hub with gr.load()
• Support for leaderboards, datasets, and collaborative demos

• Quick share – launch(share=True) creates a temporary public URL via Gradio's tunneling service
• Hugging Face Spaces – permanent free hosting
• Docker – containerize for production deployment
• Self-hosted – run on any server with Python

Gradio supports creating custom components for specialized needs:⁷⁾

• Subclass existing components in Python and JavaScript
• Register and use like built-in components
• Share via pip-installable packages
• Extend for unique visualizations or domain-specific inputs

• Hugging Face
• Streamlit for AI