Can't add newline when using Highlighted Context

[dyxohjl666]

The newlines don’t seem to work when I try to split the multiple results. I realized it maybe due to escaping but have no idea how to solve the problem.
What can I do for that? Or I have to switch to a html output?

[aliabid94]

Thanks for letting us know about this. Will take a look!

[aliabid94]

For now the best way to handle this would be to affect the white-space css property of the HighlightedText component. In the example below, I've given the HighlightedText component the id 'htext', and then passed CSS to target the whitespace of the spans within the Component:

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()

[aliabid94]

Let me know if this works for you, or if you have any questions!

[dyxohjl666]

Thanks for your reply!
It looks quite perfect now when I apply a single Interface component.
But I met the same problem when adding the Interface into TabbedInterface. It seems like that the CSS is invalid in TabbedInterface. I'm confused about that.

[dyxohjl666]

I generate the Interface like this:

import gradio as gr

parse_str = gr.Interface(
    fn=pred_str,
    inputs=gr.Textbox(
        label="String",
        lines=5,
    ),
    outputs=gr.HighlightedText(
        label="The Result of Parsing",
        combine_adjacent=True,
        adjacent_separator=" ",
    )
)

parse_file = gr.Interface(
    fn=pred_file,
    inputs="file",
    outputs=gr.HighlightedText(
        elem_id="htext",
        label="The Result of Parsing",
        combine_adjacent=True,
        adjacent_separator=" ",
    ),
    css="#htext span {white-space: pre-line}",
)
demo = gr.TabbedInterface([parse_str, parse_file], ["Parsing reference string", "Parsing reference for PDF"])

demo.launch(share=True)

[aliabid94]

Ahh hmm seems like a bug where custom CSS isn't passed up in a TabbedInterface. @abidlabs can you take a look?

[freddyaboulton]

This is a dupe of #1683. Going to keep both open so as to not lose all the discussion and add to 3.2 milestone.

[abidlabs]

Hi @dyxohjl666, this is now fixed. See #1951 for more information, but the summary is that you will have to pass in a css parameter to TabbedInterface with your desired css, like this:

import gradio as gr

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

demo = gr.Interface(
    test,
    "text",
    gr.HighlightedText(elem_id="htext"),
)

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

demo2 = gr.Interface(
    test,
    "text",
    gr.HighlightedText(elem_id="htext2"),
)

gr.TabbedInterface([demo, demo2], css="#htext span {white-space: pre} #htext2 span {white-space: pre}").launch()

[dyxohjl666]

It works well now ! Thanks a lot!

[emptystack1024]

你好，我的 gradio 版本是 4.32.0，当我运行上面的代码时，实现仍然与我的问题#8425相同，第二个选项卡上的操作仍然反馈到第一个选项卡，而第二个选项卡仍然没有得到任何输出。

solution：
See also: #8425
Thanks, @ Phillweston
The version that can be run is 4.31.5 version