ChatGPT

ChatGPT

---

OpenAI API 代理

https://www.openai-proxy.com/
直接将官方接口域名 api.openai.com 替换为 https://api.openai-proxy.com 即可在国内网络环境下直接调用，支持SSE。

https://openai-sb.com/

---

ChatGPT 聊天 API

https://platform.openai.com/docs/api-reference/chat/create

基本上使用 https://api.openai.com/v1/chat/completions 这个核心 API 就行。

认证

sk 放 header 中即可

messages 角色 role

• user 用户问的问题或指令放 messages 中的 user role
• assistant 多轮对话时，gpt返回的内容放 assistant 中
• system 角色扮演的 promt 放 system 中

多轮对话

传入 messages 列表，将之前 gpt 的返回放到 assistant role 中

流式返回

stream 传 true，会开启 Server-Send Events(SSE)，服务端主动将回答内容流式推送给客户端。

温度参数 temperature

默认值 1
值越大（如0.8或0.9），回答越随机越有创造性，适合：写故事、创意写作等
当温度值接近0时如0.2或0.3），模型生成的文本将更加确定和一致，适合：回答问题、提供事实等

示例：

{
    "model": "gpt-3.5-turbo",
    "temperature": 0.5,
    "stream": true,
    "messages": [
        {
            "role": "user",
            "content": "如何使用Postman来测试ChatGPT的Stream API"
        }
    ]
}

---

SpringBoot 对接 ChatGPT 流式 API

使用 chatgpt-spring-boot-starter 快速接入

<dependency>
    <groupId>com.lzhpo</groupId>
    <artifactId>chatgpt-spring-boot-starter</artifactId>
    <version>${chatgpt-spring-boot-starter.version}</version>
</dependency>

websocket

@OnMessage
public void onMessage(Session session, String message) {
    log.info("Received sessionId={} message={}", session.getId(), message);
    ChatCompletionRequest request = ChatCompletionRequest.create(message);
    WebSocketEventSourceListener listener = new WebSocketEventSourceListener(session);
    SpringUtil.getBean(OpenAiClient.class).streamChatCompletions(request, listener);
}

lzhpo / chatgpt-spring-boot-starter
https://github.com/lzhpo/chatgpt-spring-boot-starter

---

langchain4j

https://github.com/langchain4j/langchain4j

---

前端流式输出（打字机效果）

1、一开始直接将每次返回的 choice.delta.content 内容 append 到 div 末尾，可以实现打字机流式输出，但没有 Markdown 渲染。
2、后来使用一个字符串变量累加每次回答的结果，每收到服务端发来的一次数据，都累加后用 marked 进行 Markdown 渲染并替换 div 内容，可实现打字机流式输出 + 实时 Markdown 渲染及代码高亮，但代码高亮效果不太好。

<script type="text/javascript">
  var websocket;
  var chatGptStreaming = false; // true: ChatGpt 流式回答中
  var chatGptFullResp = ""; // ChatGpt 累积完整回答

  //markdown解析，代码高亮设置
  marked.setOptions({
      highlight: function (code, language) {
          // const hljs = require('highlight.js');
          const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
          return hljs.highlight(code, { language: validLanguage }).value;
      },
  });

  if ( 'WebSocket' in window) {
    // 实例化WebSocket对象，指定要连接的服务器地址与端口建立连接
    websocket = new WebSocket("ws://localhost:8001/ws/chat");
    // 连接打开事件
    websocket.onopen = function() {
        console.log("Socket 已打开");
    };

    // 收到消息事件
    websocket.onmessage = function(msg) {
        console.log("收到消息：" + msg.data);
        // ChatGpt 流式回答结束
        if (msg.data === "[DONE]") {
            console.log("ChatGpt 流式回答结束");
            chatGptStreaming = false;
            chatGptFullResp = "";
            return;
        }
        var time = new Date().toLocaleString();
        var resp = JSON.parse(msg.data);
        $("#div-status").css("background-color", "rgb(82, 196, 26)");

        // ChatGpt 流式回答
        if (resp.object == "chat.completion.chunk") {
          if (!chatGptStreaming) {
            chatGptStreaming = true;
          }
          choices = JSON.parse(event.data).choices;
          choices.filter(choice => choice.delta.content).forEach(choice => {
              if (choice.delta.content.indexOf("\n") >= 0) {
                  choice.delta.content = choice.delta.content.replace("\n", "<br>");
              }
              console.log(chatGptFullResp);
              chatGptFullResp += choice.delta.content;
              // $(`#${resp.id}`).append(choice.delta.content); // 未加 Markdown 渲染的版本，每次往 div 末尾 append 添加返回的流式内容
              // 添加 Markdown 渲染的版本，用全局变量累加记录本地的完整回答，每次渲染后替换 div 内容
              $(`#${resp.id}`).html(marked.parse(chatGptFullResp)); 
          });
        } 
        // 始终显示滚动条最底部
        $("#div-msg").scrollTop($("#div-msg").prop("scrollHeight"));
    };
  } else {
      console.log("当前浏览器不支持WebSocket");
  }
</script>

扒一扒 Chatgpt 背后的 web 开发技术（二）
https://zhaozhiming.github.io/2023/04/18/chatgpt-technical-part-two/

使用marked和highlight.js对GPT接口返回的代码块渲染，高亮显示，支持复制，和选择不同的高亮样式
https://juejin.cn/post/7255557296951738429

---