Introducing Gradio Clients

Watch
Gradio logo
  1. Components
  2. MultimodalTextbox

New to Gradio? Start here: Getting Started

See the Release History

To install Gradio from main, run the following command:

pip install https://gradio-builds.s3.amazonaws.com/02798ec170be7c9e8756dec24ef29c7f46fe2060/gradio-4.41.0-py3-none-any.whl

*Note: Setting share=True in launch() will not work.

←

Model3D

Number

→

MultimodalTextbox

gradio.MultimodalTextbox(···)
import gradio as gr with gr.Blocks() as demo: gr.MultimodalTextbox(interactive=True) demo.launch()

Description

Creates a textarea for users to enter string input or display string output and also allows for the uploading of multimedia files.

Behavior

As input component: Passes text value and list of file(s) as a dict into the function.

Your function should accept one of these types:
def predict(
	value: MultimodalValue | None
)
	...

As output component: Expects a dict with "text" and "files", both optional. The files array is a list of file paths or URLs.

Your function should return one of these types:
def predict(···) -> MultimodalValue | None
	...	
	return value

Initialization

Parameters

Shortcuts

Class Interface String Shortcut Initialization

gradio.MultimodalTextbox

"multimodaltextbox"

 Uses default values

Demos

import gradio as gr
import plotly.express as px

# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.

def random_plot():
    df = px.data.iris()
    fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",
                    size='petal_length', hover_data=['petal_width'])
    return fig

def print_like_dislike(x: gr.LikeData):
    print(x.index, x.value, x.liked)

def add_message(history, message):
    for x in message["files"]:
        history.append(((x,), None))
    if message["text"] is not None:
        history.append((message["text"], None))
    return history, gr.MultimodalTextbox(value=None, interactive=False)

def bot(history):
    history[-1][1] = "Cool!"
    return history

fig = random_plot()

with gr.Blocks(fill_height=True) as demo:
    chatbot = gr.Chatbot(
        elem_id="chatbot",
        bubble_full_width=False,
        scale=1,
    )

    chat_input = gr.MultimodalTextbox(interactive=True,
                                      file_count="multiple",
                                      placeholder="Enter message or upload file...", show_label=False)

    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
    bot_msg = chat_msg.then(bot, chatbot, chatbot, api_name="bot_response")
    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])

    chatbot.like(print_like_dislike, None, None)

if __name__ == "__main__":
    demo.launch()

Event Listeners

Description

Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.

Supported Event Listeners

The MultimodalTextbox component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below.

Listener Description

MultimodalTextbox.change(fn, ···)

Triggered when the value of the MultimodalTextbox changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input.

MultimodalTextbox.input(fn, ···)

This listener is triggered when the user changes the value of the MultimodalTextbox.

MultimodalTextbox.select(fn, ···)

Event listener for when the user selects or deselects the MultimodalTextbox. Uses event data gradio.SelectData to carry value referring to the label of the MultimodalTextbox, and selected to refer to state of the MultimodalTextbox. See EventData documentation on how to use this event data

MultimodalTextbox.submit(fn, ···)

This listener is triggered when the user presses the Enter key while the MultimodalTextbox is focused.

MultimodalTextbox.focus(fn, ···)

This listener is triggered when the MultimodalTextbox is focused.

MultimodalTextbox.blur(fn, ···)

This listener is triggered when the MultimodalTextbox is unfocused/blurred.

Event Parameters

Parameters
←

Model3D

Number

→