Component Libraries • Project Templates
Docs • Install • Tutorials • Developer Guides • Contribute • Blog • Discord

Xircuits Component Library to interface with Gradio! Create interactive user interfaces effortlessly.

---

Xircuits Component Library for Gradio

This library integrates Gradio with Xircuits, enabling the creation of customizable user interfaces, including chatbots, input components, and visual outputs. It supports seamless interaction with machine learning models and real-time data processing.

Table of Contents

• Preview
• Prerequisites
• How It Works
• Main Xircuits Components
• Try the Examples
• Installation

Preview

Cat Adoption Form Example

CatAdoptionForm Result

Data Collection Interface Example

Data Collection Interface Result

Gradio Chat Example

Gradio Chat Result

Gradio Agent Example

Gradio Agent Result

Prerequisites

Before you begin, you will need the following:

1. Python3.9+.
2. Xircuits.

How it Works

The Gradio component library follows this workflow pattern:

1. Input Components: Select input components from the component library (e.g., GradioTextbox, GradioImage, GradioSlider, etc.) based on your interface needs.

2. Output Components: Choose output components (e.g., GradioTextbox, GradioJSONOutput, GradioPlotOutput, etc.) to display your results.

3. GradioInterface Connection:

• Connect input components to GradioInterface's inputs InPort
• Connect output components to GradioInterface's outputs InPort
• Define corresponding parameter names in parameterNames InPort

4. Completing the Flow:

• Connect GradioInterface's interface outPort to GradioLaunch
• Connect processing logic to GradioInterface's fn branch
• Use GradioFnReturn to process and return values

Main Xircuits Components

GradioChatInterface Component:

Creates a chatbot interface supporting text and image uploads.

GradioFnReturn Component:

Processes return values for a Gradio function, integrates with OpenAI or custom agent responses, and appends them to chat history.

GradioInterface Component:

Builds a Gradio interface using dynamic inputs and outputs, allowing flexible integration with workflows.

GradioLaunch Component:

Launches a Gradio interface or block as a standalone app.

Try The Examples

Cat Adoption Form Example

This example creates a cat adoption form using Gradio components. Users input the cat's name, adoption date, age, vaccination status, and upload an image. Submitted details are displayed alongside the image, and data can be saved by clicking the "Save" button.

Data Collection Interface Example

This example creates an interactive form using Gradio components to collect user data, including name, gender, age, language, and voice recording. Submitted data is displayed as a result, and the workflow supports saving the inputs for further use.

Gradio Chat Example

This example creates an interactive Gradio chatbot interface that integrates OpenAI responses and predefined replies. The bot can respond to common greetings such as "hello" or "bye" using predefined responses and utilizes OpenAI's GPT for more complex queries. The chat interface is interactive, tracks conversation history, and allows seamless user interaction.

Additional Example Requirement:

pip install openai==1.57

Gradio Agent Example

This example creates an interactive Gradio chatbot interface powered by an OpenAI agent. The bot can respond to user queries, such as providing current weather information and the time in specific locations, by using predefined tools like get_weather and get_current_time. The chatbot tracks the conversation history and saves the responses for further interaction.

Installation

To use this component library, ensure that you have an existing Xircuits setup. You can then install the Gradio library using the component library interface, or through the CLI using:

xircuits install gradio

You can also do it manually by cloning and installing it:

# base Xircuits directory
git clone https://github.com/XpressAI/xai-gradio xai_components/xai_gradio 
pip install -r xai_components/xai_gradio/requirements.txt