Gradio 中如何让 Chatbot 自动滚动

news2024/12/27 11:34:24

在 Gradio 中， Chatbot 是对话组件，接受 history 参数，在目前版本中（gradio==4.44.0），不支持自动滚动，用起来很不方便，该功能在社区中已经提出了，目前该功能还没有发布。本文将通过自定义 JS 来实现滚动事件。

在这里插入图片描述
Gradio 中支持自定义 JS，通过 JS 添加滚动事件，启动时间传入 JS 代码，JS代码如下

js = """
function createScrollListener() {
    const target = document.querySelector('.chatbot .bubble-wrap');
    // Function to scroll to the bottom
    function scrollToBottom() {
        if (target) {
            target.scrollTop = target.scrollHeight;
        }
    }

    // Function to scroll if needed
    function scrollToBottomIfNeeded() {
        if (target) {
            target.scrollTop = target.scrollHeight;
        }
    }

    // Mutation Observer with Debounce
    let timeout;
    function debounce(func, delay) {
        clearTimeout(timeout);
        timeout = setTimeout(func, delay);
    }

    if (target) {
        const observer = new MutationObserver((mutations) => {
            debounce(scrollToBottomIfNeeded, 100);
        });

        observer.observe(target, { childList: true, subtree: true });

        // Initial scroll to bottom
        scrollToBottom();

        // Scroll on window resize
        window.addEventListener('resize', scrollToBottom);
    }

    console.log(target)
}
"""
with gr.Blocks(js=js) as demo:
    chatbot = gr.Chatbot(elem_classes="chatbot")
    msg = gr.Textbox()
    clear = gr.Button("Clear")