Create a custom component that adds color and formatting to the text field

[apolinario]

Is your feature request related to a problem? Please describe.
Currently the text-field can only iterate on input/output using the same color/font, making interacting with LLMs a bit tricky as you can't clearly identify what was the input and output

Describe the solution you'd like
A OpenAI Playground GPT-3-like text-field where one could style parts of the text with a different color

Additional context
Would be even cooler if "iterative outputs" where the words leave word by word could be achieved, that's a gimmick but looks cool on GPT-3 et. al

[abidlabs]

Hi @apolinario this is mostly possible! Here's an example: https://huggingface.co/spaces/gradio/autocomplete (code reproduced below):
`

import gradio as gr
import os

# save your HF API token from https:/hf.co/settings/tokens as an env variable to avoid rate limiting
auth_token = os.getenv("auth_token")

# load a model from https://hf.co/models as an interface, then use it as an api 
# you can remove the api_key parameter if you don't care about rate limiting. 
api = gr.Interface.load("huggingface/EleutherAI/gpt-j-6B", api_key=auth_token)

def complete_with_gpt(text):
    return text[:-50] + api(text[-50:])

with gr.Blocks() as demo:
    textbox = gr.Textbox(placeholder="Type here...", lines=4)
    btn = gr.Button("Autocomplete")
    
    # define what will run when the button is clicked, here the textbox is used as both an input and an output
    btn.click(fn=complete_with_gpt, inputs=textbox, outputs=textbox, queue=False)

demo.launch()

The only thing that would be missing is the colored completion. But I think style/formatting is out of scope for the Textbox component. (Might be possible with some custom css, js?)

[apolinario]

Very cool @abidlabs! Thanks for the demo. In regards to styling and having iterative outputs - I understand (re being out of scope for the text component) - but on the other hand this seems such a common place UI/UX for language generation that I somehow miss being able to interact with LLMs like that with Gradio - and hacking with JS/CSS would be done by a small minority of users

Maybe this is the usecase for a custom community component?

[abidlabs]

That's very true. I agree with your suggestion, we could open this up to be a community component (a richer Textbox that can support color and maybe formatting as well). Would you like to rename and reframe this issue @apolinario?

[apolinario]

Updated!

[abidlabs]

Thank you @apolinario!

[austinmw]

Are there any updates on this feature?

[abidlabs]

Not yet, but might be addressed as part of #4668

[abidlabs]

Hi @apolinario and all! We've released a custom Gradio Component called gradio_rich_textbox that accomplishes this.

You can add color/bold/italics using BBCode, e.g. [color=green][b]Hello![/b] My name is Abubakar[/color]. You just add gradio_rich_textbox to your requirements.txt file and then you can use it in your Gradio apps just like would normally:

import gradio as gr
from gradio_rich_textbox import RichTextbox


example = RichTextbox().example_inputs()

demo = gr.Interface(
    lambda x:x,
    RichTextbox(),  # interactive version of your component
    RichTextbox(),  # static version of your component
    examples=[[example]],  # uncomment this line to view the "example version" of your component
)


demo.launch()

Demo: https://huggingface.co/spaces/abidlabs/gradio_rich_textbox

[abidlabs]

More generally, we've made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here is another example a of custom Gradio component:

• A "Folium Map Viewer" component that allows you to use interactive maps: https://huggingface.co/spaces/freddyaboulton/gradio_folium

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. If you'd like to get started, we've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help.

[marco-ve]

Hi @apolinario and all! We've released a custom Gradio Component called gradio_rich_textbox that accomplishes this.

You can add color/bold/italics using BBCode, e.g. [color=green][b]Hello![/b] My name is Abubakar[/color]. You just add gradio_rich_textbox to your requirements.txt file and then you can use it in your Gradio apps just like would normally:

import gradio as gr
from gradio_rich_textbox import RichTextbox


example = RichTextbox().example_inputs()

demo = gr.Interface(
    lambda x:x,
    RichTextbox(),  # interactive version of your component
    RichTextbox(),  # static version of your component
    examples=[[example]],  # uncomment this line to view the "example version" of your component
)


demo.launch()

Demo: https://huggingface.co/spaces/abidlabs/gradio_rich_textbox

The interactive argument on RichTextbox seems broken.

Even if set to False, the box is editable, and if a BBC or HTML string is assigned to the RichTextBox, clicking on it will expand the box and show the full markup string.

[abidlabs]

Since this is not a core Gradio component, I'd suggest opening a discussion here: https://huggingface.co/spaces/abidlabs/gradio_rich_textbox/discussions