Chunked Scrolling in Chatbot

[jonathanasdf]

When doing streaming generation, every time the streaming output starts a new line it shifts everything already on the screen and makes it hard to read stuff while the generation is still going on.

Is there any way to do chunked scrolling, so eg. the scrolling only happens in intervals of x lines, so when scrolling does happen it scrolls past the end of the last message and leaves some space for that last message to expand a bit

[abidlabs]

Hi @jonathanasdf I think chunking in this way would be inconsistent with our other components such as the gr.Textbox, but we could implement the suggestion here: https://github.com/gradio-app/gradio/issues/5785, would that address your issue?

[jonathanasdf]

Hmm, this is a different situation where you do still want the autoscrolling to happen -- new output is being generated and the user should be able to see it as it is getting generated. This is less of an issue with smaller models that generate quickly -- you can usually wait for them to finish generating before reading the whole message, but for bigger models that generate say 10tokens/sec it's slow enough that you want to start reading the message even while it's still generating but fast enough that shifting everything upwards every 1-2 seconds when a new line starts makes it really hard to read it.

I understand this is probably difficult to design and implement so it's more of a nice-to-have feature suggestion and nothing critical. OpenAI's web ui doesn't do anything to try to fix this problem either.

[abidlabs]

Yeah I would say that this a bit niche, but we're working on making it possible for Gradio users to create their own custom components -- meaning that you'll be able to take an existing Gradio component and clone it, modify the backend or the frontend, and use it in your Gradio apps. If you're interested, I can share instructions for how to create a custom component, and you could see if you could implement, say a ChunkedScrollingTextbox that you or anyone else could use as a Gradio component

[jonathanasdf]

That sounds interesting! I don't think I know enough web dev to be able to create such that component but maybe someone else might see this thread and make something.

[abidlabs]

Hey! We've now 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 are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

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. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.

[abidlabs]

I'll go ahead and close this issue since we are not planning to include this in the core Gradio library. But happy to help if you are interested in making this a custom Gradio component (feel free to ask questions in this issue).