多轮对话现已开放！

省流：

经过升级，ChatGPT – wljay Network Service 的服务现已支持多轮对话，欢迎体验！

技术要点：

在原来的代码中，用户每次与 GPT 模型的对话都不会被保存，这样就导致用户不能基于同一个问题对 GPT 进行追问。为了解决这个问题，我在定义 CallGPT 函数前先建立了一个数组。其中将用户定义为 "user"；将 GPT 定义为 "assistant"，来保存用户与 GPT 之间的对话。同时，数组的初始值包含一个系统消息，用于给予 GPT 回答问题的背景。

此外，我对数组的最大长度进行限制，以保证 Prompt 的正常 POST。限制为10，意思是用户最多能和 GPT 进行5轮对话（用户提出1个问题，GPT 回答1个问题被视为1轮对话）。

//定义数组 conversationHistory 储存对话历史
var conversationHistory = [
 {"role": "system", "content": "You are a helpful assistant on wljay Network Service."}
  ];
  
// 最大对话历史长度
var maxConversationLength = 10;

//callGPT 函数
async function callCHATGPT() {
...

然后，在用户输入问题后，抓取用户的 input 并 push 至数组中；然后再对数组的长度进行检查，当长度大于设置的 max 值时，删除数组中最早的数据。

...
// 将用户的输入消息添加到对话历史中
    conversationHistory.push({
      "role": "user",
      "content": document.getElementById("chat-gpt-input").value
    });
  
// 保留前五次的对话历史（10条消息）
    while (conversationHistory.length > maxConversationLength) {
      conversationHistory.shift();
    }
...

配置发送的内容，messages 部分直接发送整个数组内容，来达到多轮对话的效果。

...
var data = JSON.stringify({
      "messages": conversationHistory, // 将整个数组发送到 API
      "temperature": 0.5,
      "top_p": 1,
      "frequency_penalty": 0,
      "presence_penalty": 0,
      "model": "gpt-3.5-turbo"
    });
...

在 GPT 回答后，抓取 GPT 的 Response并 push 至数组中；然后再对数组的长度进行检查，当长度大于设置的 max 值时，删除数组中最早的数据。

...
// 在处理完成后，抓取并将 GPT 的回复添加到对话历史中
    xhr.onload = function() {
      if (xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        var response = json.choices[0].message.content;
  
        conversationHistory.push({
          "role": "assistant",
          "content": response
        });
  
 // 保留前五次的对话历史（10条消息）
       while (conversationHistory.length > maxConversationLength) {
       conversationHistory.shift();
        }
...

最后，在页面加载完成后，设置一个事件监听器，用于监听清除对话历史按钮的点击事件。当单击按钮时，清空数组并重置为初始值，并清除页面上的聊天记录。

其中我使用了 if...else 语句来检查元素是否存在。如果元素未找到，它将在控制台输出错误信息，以便于开发中的调试。如果不想使用 if...else 语句，代码量将会进一步减少。

... 
document.addEventListener("DOMContentLoaded", function() {
  // 添加清除对话历史按钮的事件监听器
  var clearConversationButton = document.getElementById("clear-conversation");
  if (clearConversationButton) {
    clearConversationButton.addEventListener("click", function() {
      // 清除 conversationHistory 数组
      conversationHistory = [
        {"role": "system", "content": "You are a helpful assistant on wljay Network Service."}
      ];
      // 清除页面上的聊天记录
      document.getElementById("chatgpt-response").innerHTML = "";
    });
  } else {
    console.error("clear-conversation element not found");
  }
...

升级后的网页更加人性化了，不会像之前一样无法让 GPT 解释它的答案，欢迎大家体验！

网址：ChatGPT – wljay Network Service

Github 链接：MOLAaaaaaaa/chatgpt-html-Chatgpt3.5-support: chatgpt html online (github.com)

鸣谢 @sbaliyun