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 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!