Advanced Text Styling with Gradio

Further text formatting

In this lesson, we are going to look into other ways we can display and format the text in Gradio, using the Code and HighlightedText components.

Text highlighting

Sometimes, we want to emphasize certain words or characters in a block of text to draw the attention of the user to these parts of the text. For example, if we were looking at the listing description, we may be interested in highlighting certain keywords that are of interest, such as proximity to schools, parks, newly renovated, etc. This is exactly what the HighlightedText component in Gradio allows us to do.

Highlighted text in Gradio

Gradio has a built-in component for formatting text so that certain characters are highlighted. It is commonly used when we are given some text, and are looking to highlight and extract keywords from the text. Typically, we read some text in Gradio, and a function will be applied to the text to return a list of tuples, with each tuple containing a string, and a label. This list of tuples is passed to the HighlightedText component, which displays these string label pairs in the UI.

• The string just contains some characters, and it will look for these characters in the text. For example, if the string is ‘school’, it will match with whenever school appears in the text.

• The label is a tag that is applied to each string and helps categorize the strings. Different strings can have the same label.

The HighlightedText ...