Gradio 流式输出教程_gradio流式输出

Gradio 流式输出教程

随着AIGC的发展，我逐渐发现我有许多项目，如果都是等待生成结束才传输出去，就会导致等待时间非常长，影响用户使用体验。在这里流式输出就显得很有必要了，同时也是为后续的实时处理积累一下前置条件。

一、具体思路

核心步骤主要参考上一篇博客：如何使用渐变块创建自定义聊天机器人中的 流式传输部分。

1、流式输出的ChatBot 示例一

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.Button("Clear")


    def user(user_message, history):
        return "", history + [[user_message, None]]


    def bot(history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        history[-1][1] = ""
        for character in bot_message:
            history[-1][1] += character
            time.sleep(0.05)
            yield history


    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
        bot, chatbot, chatbot
    )
    clear.click(lambda: None, None, chatbot, queue=False)

demo.queue()
demo.launch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

运行结果

流式输出在上面的例子里面就实现了，不过不属于最小理解单位，我对其进一步拆分为：输入框-输出框用于理解。

2、流式输出示例二

代码功能：

1. 在输入框输入 任何字符串
2. 在输出框流式输出 拼接的字符串。

实现逻辑：
1、将输入和输入处理、输出拆分成两个函数user()、bot()。
2、user只负责输入用户输入的内容，bot负责对输入的内容进行处理，并使用yield关键词（可以理解为特殊的 return），在每次循环都会返回当前累积到的消息字符串，从而实现逐字显示的效果。
3、拆分成的两个函数，第一个跟平常的button绑定函数没有什么区别，第二个函数就是在第一个的基础上放到.then()
里面，表示在执行完第一个函数之后的return 结果 做为then的输入执行第二个函数。

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Textbox(placeholder='输出框...')
    msg = gr.Textbox(placeholder='输入框...')
    with gr.Column():
        submit=gr.Button('上传')
        clear = gr.Button("Clear")


    def user(user_message):

        return  user_message


    def bot(history):
        print(history)
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        bot_message+=history
        botmess=''
        for character in bot_message:
            botmess += character
            time.sleep(0.05)
            yield botmess


    msg.submit(user, msg, chatbot, queue=False).then(bot, chatbot, chatbot)
    submit.click(user,msg,msg,queue=False).then(bot,msg,chatbot)

    clear.click(lambda: None, None, chatbot, queue=False)

demo.queue()
demo.launch()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

运行结果如下：