ChatGPT用于OA聊天助手导致访问量服务宕机
闲谈
开搞
面临的问题
聊天UI
服务端接口
上线宕机
优化问题处理
流式传输
MD格式
看看效果
闲谈最近，火到不行的明星团队产品 ChatGPT，热度一度非常高，付费用户都开始通过邀请制，专属登陆链接来限制流量了。开了Plus以后返回内容和速度真是10倍速啊~
但对于小白或普通用户(也可能非技术行业的大佬)，想要访问和体验还是挺麻烦的。除了准备梯子、接码、账号以外还可能遇到节点或网络，多次连接失败的问题。
所以，本着能折腾绝对不休息的原则，2天搞了一个聊天助手，凭借其语义的理解，关联具体业务场景，一定会很爽。
由于自己负责效率工程，可以免去很多环节直奔中心。
开搞从想法到落地还是要有一个规划的，先策划一下产品逻辑和原型，聚焦解决的问题？
解决普通用户无法访问体验 ChatGPT
为用户提供基于API自动匹配模型的能力，这点官网已经是最好的案例
结合业务思考关联的帮助
有了以上的规划，那就先搞内测，为一部分VIP提供服务为主。
面临的问题搞一个聊天窗口，带卡片模板最好，支持自定义
频次和轮次的限制？
后端能够通过语义理解匹配到对应的模型？
聊天UI我们找个聊天UI简单搭建一下页面
import React, { useEffect, useRef } from "react";
export default () => {
const wrapper = useRef();
useEffect(() => {
const bot = new window.ChatSDK({
root: wrapper.current,
config: {
navbar: {
title: "OA聊天助手",
},
robot: {
avatar: robtAvatar,
},
messages: [
{
type: "system",
content: {
text: "OA聊天助手，已进入对话",
},
},
],
},
requests: {
/* ... */
},
handlers: {
/* ... */
},
});
bot.run();
}, []);
return <div style={{ height: "100%" }} ref={wrapper} />;
};
<?php
declare(strict_types=1);
namespace App\Controller;
use App\Kernel\Response\DetachStream;
use App\Library\ChatGPT\Bean\GPTMessageBean;
use App\Library\ChatGPT\Client;
use App\Library\OpenAi\OpenAi;
use App\Service\KeyService;
use HPlus\Route\Annotation\ApiController;
use HPlus\Route\Annotation\GetApi;
use Hyperf\Di\Annotation\Inject;
use Swow\Psr7\Message\Psr17Factory;
#[ApiController]
class Chat extends AbstractController
{
#[Inject]
protected Client $ChatGPTApi;
#[GetApi]
public function message()
{
$context = $this->request->query('text');
$response = $this->response->withHeader('Content-Type', 'text/event-stream;charset=UTF-8');
return (new OpenAi(KeyService::getKey()))->completion([
'model' => 'text-davinci-003',
'prompt' => 'test',
'temperature' => 0.9,
'max_tokens' => 150,
'stream' => true,
'frequency_penalty' => 0,
'presence_penalty' => 0.6,
], function ($curl_info, $data) {
p($data);
});
return $response->withBody(new DetachStream());
}
#[GetApi]
public function send()
{
$context = $this->request->query('content');
$message = new GPTMessageBean('帮我写代码：' . $context . '<|endoftext|>');
return json_encode($this->ChatGPTApi->sendMessage($message), 256);
}
}
让我们来体验一下看看反应如何？
对比一下官网的回答
相比官网的回答差些意思，但这是免FQ，免注册，为让小白用户直接对话的节省了很大的问题。
上线宕机内部上线当天，直接把免费18$的额度干废了，服务一度崩溃。并且按照官方文档60次/分钟的频次，根本无法满足多数人发起的轮次需求。
我们采用小号随机机制分发token，解决了一部分问题。但即使付费版的120$额度，也不能承受大体量用户的访问，需要发送邮件单独申请额度。
通过内部的访问频次可知，大家对这项新技术的追捧热度，尤其是小白用户。
优化问题处理反应速度，其实接口返回并不慢，只是一次获取完返回，并没有流式传输的速度快
返回体，从接口返回的文本形式，可以优化为md模式，官网也是md的格式，自带代码块的高亮hl
返回内容，由于走免费api，接口是通过代币计费，按照返回字节计算，所以api形式尽可能简洁为主
流式传输let source = new EventSource('/stream');
source.onmessage = function(event) {
var streamDiv = document.getElementById('stream');
streamDiv.innerHTML += event.data + '<br>';
};
MD格式
import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism";
export default function MyCard({ data, ctx, meta }) {
return (
<Card size="xl">
<CardTitle>{data.title}</CardTitle>
<CardText>
<ReactMarkdown
children={data.content}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<SyntaxHighlighter
children={String(children).replace(/\n$/, "")}
style={darcula}
language={match[1]}
PreTag="div"
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
/>
</CardText>
</Card>
);
}
看看效果
还是比较快的，md格式需要转成html才能出现打字机效果
后续会持续优化和业务落地....
以上就是ChatGPT用于OA聊天助手导致访问量服务宕机的详细内容，更多关于ChatGPT OA聊天助手的资料请关注软件开发网其它相关文章！
