ant-design / pro-chat

🤖 Components Library for Quickly Building LLM Chat Interfaces.
https://pro-chat.antdigital.dev
MIT License
667 stars 83 forks source link

🧐[问题]stream模式下内容显示自动换行并且部分‘data: ’没有被替换 #172

Closed wangzi1204 closed 4 months ago

wangzi1204 commented 4 months ago

🧐 问题描述

stream模式下内容显示自动换行并且有部分‘data: ’没有被替换

💻 示例代码

                    const response = await fetch('/conversation', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                        },
                        body: JSON.stringify({messages: messages}),
                    });
                    const reader = response.body.getReader();
                    const decoder = new TextDecoder('utf-8');
                    const encoder = new TextEncoder();

                    const readableStream = new ReadableStream({
                        async start(controller) {
                            function push() {
                                reader
                                    .read()
                                    .then(({done, value}) => {
                                        if (done) {
                                            controller.close();
                                            return;
                                        }
                                        const message = decoder.decode(value, {stream: true}).replace('data: ', '');
                                        controller.enqueue(encoder.encode(message));
                                        push();
                                    })
                                    .catch((err) => {
                                        console.error('读取流中的数据时发生错误', err);
                                        controller.error(err);
                                    });
                            }

                            push();
                        },
                    });
                    return new Response(readableStream);

🚑 其他信息

截屏2024-04-22 16 03 23

版本信息

@ant-design/pro-chat 版本: [1.12.2] 浏览器环境 [谷歌浏览器] 开发环境 [mac OS]

ONLY-yours commented 4 months ago

还是 reader 解析器的问题,如果你用的是 chatgpt 的话,可以直接用三方解析库:

详细可见该文:

https://pro-chat.antdigital.dev/guide/sse

wangzi1204 commented 4 months ago

还是 reader 解析器的问题,如果你用的是 chatgpt 的话,可以直接用三方解析库:

详细可见该文:

https://pro-chat.antdigital.dev/guide/sse

不是使用的chatgpt,后台函数中返回的就是文本内容,并根据这个demo 改写了reader。

ONLY-yours commented 4 months ago

感觉需要根据这里的 chunk 做你的特殊业务逻辑了

const message = decoder.decode(value, {stream: true}).replace('data: ', '');

尝试打印下这个 message 然后决定看看 怎么 replace 之类的处理呢

wangzi1204 commented 4 months ago

感觉需要根据这里的 chunk 做你的特殊业务逻辑了

const message = decoder.decode(value, {stream: true}).replace('data: ', '');

尝试打印下这个 message 然后决定看看 怎么 replace 之类的处理呢

我更改了一下后台函数,从SSE Response改为了stream Response,规避了replace的问题。

uniquejava commented 3 months ago

我和你的问题一模一样, 我后台用的 spring boot/ spring ai, 我也不是 chatgpt, 用的免费的 llama3, 很香