ChatGPT用于OA聊天助手导致访问量服务宕机

 更新时间:2023年03月27日 09:06:33   作者:扫地盲僧  
这篇文章主要为大家介绍了ChatGPT用于OA聊天助手导致访问量服务宕机,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

闲谈

最近,火到不行的明星团队产品 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聊天助手的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序 Toast自定义实例详解

    微信小程序 Toast自定义实例详解

    这篇文章主要介绍了微信小程序 Toast自定义实例详解的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 toast 详解及实例代码

    微信小程序 toast 详解及实例代码

    这篇文章主要介绍了微信小程序 toast 详解及实例代码的相关资料,需要的朋友可以参考下
    2016-11-11
  • 前端JavaScript大管家 package.json

    前端JavaScript大管家 package.json

    这篇文章主要介绍了前端JavaScript大管家 package.json,在每个前端项目中,都有package.json文件,它是项目的配置文件,常见的配置有配置项目启动、打包命令,声明依赖包等,下面我们就来学习 package.json的详细内容,需要的朋友可以参考一下
    2021-10-10
  • JS前端面试手写apply和bind实例

    JS前端面试手写apply和bind实例

    这篇文章主要为大家介绍了JS前端面试手写apply和bind实例的轻松实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Three.js Interpolant实现动画插值

    Three.js Interpolant实现动画插值

    这篇文章主要为大家介绍了Three.js Interpolant实现动画插值示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 微信小程序 绘图之饼图实现

    微信小程序 绘图之饼图实现

    这篇文章主要介绍了微信小程序 绘图之饼图实现的相关资料,需要的朋友可以参考下
    2016-10-10
  • ChatGPT在前端领域的初步探索

    ChatGPT在前端领域的初步探索

    这篇文章主要为大家介绍了ChatGPT在前端领域的初步探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JS前端设计模式之发布订阅模式详解

    JS前端设计模式之发布订阅模式详解

    这篇文章主要为大家介绍了JS前端设计模式之发布订阅模式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序使用navigateTo数据传递的实例

    微信小程序使用navigateTo数据传递的实例

    这篇文章主要介绍了微信小程序使用navigateTo数据传递的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • JavaScript 实现点击关闭全屏示例详解

    JavaScript 实现点击关闭全屏示例详解

    这篇文章主要为大家介绍了JavaScript 实现点击关闭全屏示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论