Honour line breaks in HighlightedText

[versae]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
When using HighlightedText, line breaks are usually ignored. This is particularly annoying for showing GPT generated text, and even more so for poetry.

Describe the solution you'd like
An option to replace \n with <br> so the resulting HTML is rendered correctly. If I try to write the replace myself it gets escaped and it never renders the actual line break but the characters in the string <br>.

Additional context
Try with the next text

Caminante, son tus huellas
el camino y nada más;
Caminante, no hay camino,
se hace camino al andar.

In the demo here: https://huggingface.co/spaces/bertin-project/bertin-gpt-j-6B (press the Generar button)

[abidlabs]

Thanks for raising the issue @versae! @aliabid94 is there a workaround for this already or do we need to add support for new lines specifically?

[abidlabs]

Hi @versae, you can do this by passing in a little bit of css to your Interface or Blocks, like this:

import gradio as gr

def test(text1):
    return [(text1, "good")]

demo = gr.Interface(
    test,
    "text",
    gr.HighlightedText(elem_id="htext"),
    css="#htext span {white-space: pre}",
)
demo.launch()

See #1951 and #1839 for more info.

[versae]

Interesting. Does this work with the Blocks API as well?

[abidlabs]

Yup, you can pass css into Blocks as well.

[versae]

Awesome!

[versae]

OK, I finally had the chance to try this but now the lines are not breaking at the length of their container. Any idea why?

[aliabid94]

hmm will take a look