我的官网创作之路（九）-ChatGPT搭建

OpenByteCode
139 阅读2分钟

前言

这篇主要讲编写 ChatGPT 对话，核心代码不足 50 行，先来看下效果

image.png

体验地址：openbytecode.com/chat

ChatGPT 对话开篇

先说下大体实现思路：那就是用户的问答和 ChatGPT 的回答会形成一个对话列表，那我们可以用 useState 去存储这个对话列表，例如这样 const [chatList, setChatList] = useState<ChatItem[]>([]);，也就是说用每问一个问题就往这个数组里放一条数据，ChatGPT 每次的回答也往这个数组里放一条数据。

用户提问的代码例如下面这样：

const ask = (question: any) => {
  if (question) {
    const q: ChatItem = {
      content: question,
      type: 'me',
    };
    setChatList((chatList: any) => [...chatList, q]);
  }
};

ChatGPT 的回答代码例如下面这样：

const reply = (response: any) => {
  if (response) {
      const answer: ChatItem = {
      content: response,
      type: 'bot',
    };
    setChatList((chatList: any) => [...chatList, answer]);
};

那这样是不是就完了呢？

那我们要知道用户的每次提问都是一口气就问完了的，但是 ChatGPT 的回答并不是一下子就都返回来吧，这个原因我想你是知道的，如果你不知道可以想想 chat 后面的 GPT 到底是什么意思，所以 ChatGPT 的回答是一个字一个字返回的，那你想想我们上面写的 reply 方法能满足现在的情况吗？

显然不能是不是，如果这么写你会看到 ChatGPT 每次的回答会变成一排，假设 ChatGPT 的回答是 Hello! 欢迎使用 OpenByteCode 问答机器人，该机器人目前底层使用的是 ChatGPT3.5，快来和 ChatGPT 对话吧!，那么结果可能就是下面这样

image.png

好了，那我要问你了，你来描述下我们现在遇到的问题，我们说找到问题其实就离答案不远了是不是。

如果你能清楚描述现在遇到的问题，并且想到了解决方法，我想那后面的文章就没有必要再看了，否则那就跟着我看下一篇吧。

最后

如果喜欢我的文章，欢迎关注我，同时也欢迎关注我的个人网站，里面有多个我一直迭代的项目， 还有我的 b 站，我会定期在 b 站分享一些你意想不到的知识。

avatar
文章
阅读
粉丝