Advanced Text Styling with Gradio
Learn how to format text as code, and highlight text in 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
...