====== 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|Hugging Face]] Spaces integration.((source [[https://www.gradio.app/guides/quickstart|Gradio Quickstart]]))

===== Building ML Demos =====

Gradio demos wrap a Python function with input and output components. The simplest approach uses the ''Interface'' class:((source [[https://www.geeksforgeeks.org/creating-interactive-machine-learning-demos-with-gradio/|Creating ML Demos with Gradio - GeeksforGeeks]]))

  * 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.

===== Blocks API vs Interface =====

Gradio offers two primary APIs for building UIs:((source [[https://odsc.com/speakers/a-practical-tutorial-on-building-machine-learning-demos-with-gradio-2/|Gradio Tutorial - ODSC]]))

**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

===== Component System =====

Gradio provides 20+ pre-built components:((source [[https://www.gradio.app/guides/quickstart|Gradio Quickstart]]))

  * **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.

===== Event Handling =====

In Blocks, events are attached to components for dynamic behavior:((source [[https://odsc.com/speakers/a-practical-tutorial-on-building-machine-learning-demos-with-gradio-2/|Gradio Tutorial - ODSC]]))

  * ''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

===== Hugging Face Spaces Integration =====

Gradio demos deploy instantly to Hugging Face Spaces for free hosting:((source [[https://www.gradio.app/guides/quickstart|Gradio Quickstart]]))

  * 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

===== Sharing and Deployment =====

  * **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

===== Custom Components =====

Gradio supports creating custom components for specialized needs:((source [[https://www.gradio.app/guides/quickstart|Gradio Quickstart]]))

  * 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

===== See Also =====

  * [[hugging_face|Hugging Face]]
  * [[streamlit_ai|Streamlit for AI]]

===== References =====