如何利用niceGUI构建一个流式单轮对话界面

官方文档
参考文档

import asyncio
import time
import requests
from fastapi import FastAPI
from nicegui import app, ui


class ChatPage:
    temperature: ui.slider = None
    top_p: ui.slider = None
    api_key: ui.input = None
    model_name: ui.input = None
    prompt: ui.textarea = None
    send: ui.button = None
    spinner: ui.spinner = None
    chat_messages: ui.markdown = None

    def __init__(self, api_key="", model_name=""):
        self.left_page(api_key=api_key, model_name=model_name)
        self.chat_page()

    def left_page(self, api_key="", model_name=""):
        with ui.left_drawer(top_corner=True, bottom_corner=True).style('background-color: #d7e3f4;margin: auto'):
            self.api_key = ui.input(label='api 密钥', placeholder='请输入', value=api_key).props('filled')
            self.model_name = ui.input(label='模型名称', placeholder='请输入', value=model_name).props('filled')
            if api_key:
                self.api_key.disable()
            if model_name:
                self.model_name.disable()
            with ui.label("Temperature") as Temperature:
                self.temperature = ui.slider(min=0, max=1, value=0.7, step=0.01,
                                             on_change=lambda e: Temperature.set_text(f"Temperature: {e.value}"))
            with ui.label("Top_p") as Top_p:
                self.top_p = ui.slider(min=0, max=1, value=0.75, step=0.01,
                                       on_change=lambda e: Top_p.set_text(f"Top_p: {e.value}"))
            self.prompt = ui.textarea(label='Prompt', placeholder='请输入你的问题').props('filled')
            self.send = ui.button(icon="reply", text="发送", on_click=self.on_send).style(
                "width: 100%;")

    def chat_page(self):
        self.chat_messages = ui.markdown()

    async def set_chat(self):
        content_ = ""
        for i in self.prompt.value:
            content_ += i
            await asyncio.sleep(0.03)
            self.chat_messages.set_content(content_ + "```")
            self.chat_messages.set_content(content_ + "```")
        self.chat_messages.set_content(content_)
        await ui.run_javascript('window.scrollTo(0, document.body.scrollHeight)', respond=False)

    async def on_send(self, e):
        self.send.visible = False
        self.spinner = ui.spinner(size="lg")
        await self.set_chat()
        self.spinner.set_visibility(False)
        self.send.visible = True


@ui.page('/')
def page(api_key="", model_name=""):
    ui.colors(primary="#1d1d1d")
    ChatPage(api_key=api_key, model_name=model_name)


def frontend(app_: FastAPI) -> None:
    ui.run_with(
        app_,
        storage_secret='pick your private secret here',
        # NOTE setting a secret is optional but allows for persistent storage per user
    )

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

• 左侧输入
• 右侧流式渲染markdown