Closed apolinario closed 11 months ago
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?)
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?
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?
Updated!
Thank you @apolinario!
Are there any updates on this feature?
Not yet, but might be addressed as part of #4668
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
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:
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.
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 addgradio_rich_textbox
to yourrequirements.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.
Since this is not a core Gradio component, I'd suggest opening a discussion here: https://huggingface.co/spaces/abidlabs/gradio_rich_textbox/discussions
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