ChatGPT用于OA聊天助手導(dǎo)致訪問量服務(wù)宕機

更新時間：2023年03月27日 09:06:33 作者：掃地盲僧

這篇文章主要為大家介紹了ChatGPT用于OA聊天助手導(dǎo)致訪問量服務(wù)宕機，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

閑談

最近，火到不行的明星團隊產(chǎn)品 ChatGPT，熱度一度非常高，付費用戶都開始通過邀請制，專屬登陸鏈接來限制流量了。開了Plus以后返回內(nèi)容和速度真是10倍速啊~

但對于小白或普通用戶(也可能非技術(shù)行業(yè)的大佬)，想要訪問和體驗還是挺麻煩的。除了準(zhǔn)備梯子、接碼、賬號以外還可能遇到節(jié)點或網(wǎng)絡(luò)，多次連接失敗的問題。

所以，本著能折騰絕對不休息的原則，2天搞了一個聊天助手，憑借其語義的理解，關(guān)聯(lián)具體業(yè)務(wù)場景，一定會很爽。

由于自己負(fù)責(zé)效率工程，可以免去很多環(huán)節(jié)直奔中心。

開搞

從想法到落地還是要有一個規(guī)劃的，先策劃一下產(chǎn)品邏輯和原型，聚焦解決的問題？

解決普通用戶無法訪問體驗 ChatGPT
為用戶提供基于API自動匹配模型的能力，這點官網(wǎng)已經(jīng)是最好的案例

結(jié)合業(yè)務(wù)思考關(guān)聯(lián)的幫助

有了以上的規(guī)劃，那就先搞內(nèi)測，為一部分VIP提供服務(wù)為主。

面臨的問題

搞一個聊天窗口，帶卡片模板最好，支持自定義
頻次和輪次的限制？
后端能夠通過語義理解匹配到對應(yīng)的模型？

聊天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} />;
};

服務(wù)端接口

<?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);
    }
}

讓我們來體驗一下看看反應(yīng)如何？

對比一下官網(wǎng)的回答

相比官網(wǎng)的回答差些意思，但這是免FQ，免注冊，為讓小白用戶直接對話的節(jié)省了很大的問題。

上線宕機

內(nèi)部上線當(dāng)天，直接把免費18$的額度干廢了，服務(wù)一度崩潰。并且按照官方文檔60次/分鐘的頻次，根本無法滿足多數(shù)人發(fā)起的輪次需求。

我們采用小號隨機機制分發(fā)token，解決了一部分問題。但即使付費版的120$額度，也不能承受大體量用戶的訪問，需要發(fā)送郵件單獨申請額度。

通過內(nèi)部的訪問頻次可知，大家對這項新技術(shù)的追捧熱度，尤其是小白用戶。

優(yōu)化問題處理

反應(yīng)速度，其實接口返回并不慢，只是一次獲取完返回，并沒有流式傳輸?shù)乃俣瓤?/li>
返回體，從接口返回的文本形式，可以優(yōu)化為md模式，官網(wǎng)也是md的格式，自帶代碼塊的高亮hl
返回內(nèi)容，由于走免費api，接口是通過代幣計費，按照返回字節(jié)計算，所以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>
  );
}