目录

闲谈开搞面临的问题聊天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 
;
};

服务端接口

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 + "
"; 
};

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 (
    
      {data.title}
      
        
              ) : (
                
                  {children}
                
              );
            },
          }}
        />
      
    
  );
}

看看效果

还是比较快的，md格式需要转成html才能出现打字机效果

后续会持续优化和业务落地....

以上就是ChatGPT用于OA聊天助手导致访问量服务宕机的详细内容，更多关于ChatGPT OA聊天助手的资料请关注脚本之家其它相关文章！