js调用gpt3.5

参考链接：直接在前端调用 GPT-3 API

效果图：

注意：
1. 需要apiKey，自用安全，不要给别人
2. 需要梯子
3. 选择稳定、人少的代理ip
4. 不要频繁切换ip，防止封号
5. api调用上限高，请遵守openAI审核政策 [doge]

DOCTYPE html>
html>
  head>
    meta charset="UTF-8" />
    title>ChatGPT Web Exampletitle>
  head>

  body>
    div id="chatgpt_demo_container">div>
  body>

  
  
  script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
  script
    src="https://unpkg.com/react@18/umd/react.production.min.js"
    crossorigin
  >script>
  script
    src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
    crossorigin
  >script>

  
  script type="text/babel">
    // openAI接口文档 https://platform.openai.com/docs/guides/chat
    const e = React.createElement;

    class RootComponent extends React.Component {
      state = {
        endpoint: "https://api.openai.com/v1/chat/completions",
        apiKey: localStorage.getItem("localApiKey") || "",
        model: "gpt-3.5-turbo",
        temperature: 0.6,
        max_tokens: 1000,
        overTime: 20000,
        historyMessageNum: 4,
        historyMessage: [],
        prompts: [
          {
            role: "system",
            content: "",
          },
        ],
        question: "",
        loading: false,
        controller: null,
        conversationId:
          localStorage.getItem("localConversionId") || "conversion1",
        conversationIds: ["conversion1", "conversion2", "conversion3"],
      };

      constructor(props) {
        super(props);
      }

      addMessage(text, sender) {
        let historyMessage = this.state.historyMessage;
        if (
          sender !== "assistant" ||
          historyMessage[historyMessage.length - 1].role !== "assistant"
        ) {
          historyMessage = [
            ...this.state.historyMessage.filter(
              (v) =>
                ["system", "user", "assistant"].includes(v.role) &&
                v.content !== ""
            ),
            { role: sender, content: text, time: Date.now() },
          ];
        } else {
          historyMessage[historyMessage.length - 1].content += text;
        }

        this.setState({ historyMessage });
        setTimeout(() => {
          this.scrollToBottom(sender !== "assistant");
        }, 0);
      }

      editMessage(idx) {
        this.stopStreamFetch();
        this.state.question = this.state.historyMessage[idx].content;
        const historyMessage = this.state.historyMessage.slice(0, idx);
        this.setState({ historyMessage });
      }

      stopStreamFetch = () => {
        if (this.state.controller) {
          this.state.controller.abort("__ignore");
        }
      };

      regenerateStreamFetch = () => {
        this.stopStreamFetch();
        if (
          this.state.historyMessage.length &&
          this.state.historyMessage[this.state.historyMessage.length - 1]
            .role !== "user"
        )
          this.setState({
            historyMessage: this.state.historyMessage.slice(0, -1),
          });
        setTimeout(() => {
          this.handleSearch(true);
        }, 0);
      };

      async getResponseFromAPI(text) {
        const controller = new AbortController();
        this.setState({ controller });
        const signal = controller.signal;
        const timeout = setTimeout(() => {
          controller.abort();
        }, this.state.overTime);
        const messages = [
          ...this.state.historyMessage,
          { role: "user", content: text },
        ]
          .filter(
            (v) => ["system", "user", "assistant"].includes(v.role) && v.content
          )
          .map((v) => ({ role: v.role, content: v.content }))
          .slice(-this.state.historyMessageNum - 1); // 上文消息
        const response = await fetch(this.state.endpoint, {
          signal,
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${this.state.apiKey}`,
          },
          body: JSON.stringify({
            model: this.state.model,
            messages: this.state.prompts.concat(messages),
            max_tokens: this.state.max_tokens,
            n: 1,
            stop: null,
            temperature: this.state.temperature,
            stream: true,
          }),
        });
        clearTimeout(timeout);
        if (!response.ok) {
          throw new Error(response.status);
        }
        const reader = response.body.getReader();
        const decoder = new TextDecoder("utf-8");
        const stream = new ReadableStream({
          start(controller) {
            return pump();
            function pump() {
              return reader.read().then(({ done, value }) => {
                // When no more data needs to be consumed, close the stream
                if (done) {
                  controller.close();
                  return;
                }
                // Enqueue the next data chunk into our target stream
                // 'data: {"id":"chatcmpl-705I7nqSPYDvCTBv3OdNMatVEI85o","object":"chat.completion.chunk","created":1680254695,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"role":"assistant"},"index":0,"finish_reason":null}]}nndata: {"id":"chatcmpl-705I7nqSPYDvCTBv3OdNMatVEI85o","object":"chat.completion.chunk","created":1680254695,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"ä½ "},"index":0,"finish_reason":null}]}nn'
                // 'data: {"id":"chatcmpl-705I7nqSPYDvCTBv3OdNMatVEI85o","object":"chat.completion.chunk","created":1680254695,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"好"},"index":0,"finish_reason":null}]}nn'
                // 'data: {"id":"chatcmpl-705I7nqSPYDvCTBv3OdNMatVEI85o","object":"chat.completion.chunk","created":1680254695,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"ï¼x81"},"index":0,"finish_reason":null}]}nn'
                // '[DONE]nn'
                let text = "";
                const str = decoder.decode(value);
                const strs = str.split("data: ").filter((v) => v);
                for (let i = 0; i  strs.length; i++) {
                  const val = strs[i];
                  if (val.includes("[DONE]")) {
                    controller.close();
                    return;
                  }
                  const data = JSON.parse(val);
                  data.choices[0].delta.content &&
                    (text += data.choices[0].delta.content);
                }
                controller.enqueue(text);
                return pump();
              });
            }
          },
        });
        return new Response(stream);
      }

      handleSearch(regenerateFlag) {
        const input = this.state.question;

        if (!regenerateFlag) {
          if (!input) {
            alert("请输入问题");
            return;
          }
          this.addMessage(input, "user");
          this.setState({ question: "" });
        }
        this.state.loading = true;
        // 使用 OpenAI API 获取 ChatGPT 的回答
        this.getResponseFromAPI(input)
          .then(async (response) => {
            if (!response.ok) {
              const error = await response.json();
              throw new Error(error.error);
            }
            const data = response.body;
            if (!data) throw new Error("No data");

            const reader = data.getReader();
            let done = false;

            while (!done) {
              const { value, done: readerDone } = await reader.read();
              if (value) {
                this.addMessage(value, "assistant");
                this.scrollToBottom();
              }
              done = readerDone;
            }
          })
          .catch((error) => {
            if (this.state.controller.signal.reason === "__ignore") {
              return;
            }
            this.addMessage(
              error.name === "AbortError" ? "Network Error" : error.message,
              "warning"
            );
          })
          .finally(() => {
            this.setState({ loading: false });
          });
      }

      handleChangePromots = () => {
        const input = prompt(
          `请输入你的prompts，合适的prompts可以极大地提高回答的专业度`,
          this.state.prompts[0].content ||
            `CR： Capacity and Role（能力与角色）。你希望 ChatGPT 扮演怎样的角色。I： Insight（洞察力），背景信息和上下文（坦率说来我觉得用 Context 更好）。S： Statement（指令），你希望 ChatGPT 做什么。P： Personality（个性），你希望 ChatGPT 以什么风格或方式回答你。E： Experiment（尝试），要求 ChatGPT 为你提供多个答案。`
        );
        if (input != null) {
          const prompts = this.state.prompts;
          prompts[0].content = input;
          this.setState({ prompts });
        }
      };

      handleChangeApiKey = () => {
        const input = prompt(`请输入你的apiKey`, this.state.apiKey);
        if (input != null) {
          this.setState({ apiKey: input });
        }
      };

      saveLocalData = () => {
        localStorage.setItem(
          `${this.state.conversationId}_localMessage`,
          JSON.stringify(this.state.historyMessage)
        );
        localStorage.setItem(
          `${this.state.conversationId}_localPrompts`,
          this.state.prompts[0].content
        );
        localStorage.setItem(`localConversionId`, this.state.conversationId);
        localStorage.setItem(`localApiKey`, this.state.apiKey);
      };

      loadLocalData = (conversationId) => {
        this.setState({
          historyMessage: localStorage.getItem(`${conversationId}_localMessage`)
            ? JSON.parse(localStorage.getItem(`${conversationId}_localMessage`))
            : [],
          prompts: [
            {
              role: "system",
              content:
                localStorage.getItem(`${conversationId}_localPrompts`) || "",
            },
          ],
        });
      };

      handleChangeConversion = (val) => {
        this.stopStreamFetch();
        this.saveLocalData();
        this.setState({ conversationId: val });
        this.loadLocalData(val);
        setTimeout(() => {
          this.scrollToBottom();
        }, 0);
      };

      scrollToBottom(force = true) {
        const dom = document.getElementById("chatbox");
        dom.scrollTo({ top: dom.scrollHeight, behavior: "smooth" });
      }

      componentDidMount() {
        this.loadLocalData(this.state.conversationId);
        document.addEventListener("keydown", (event) => {
          if (event.shiftKey && event.keyCode === 13) {
            this.handleSearch();
            event.preventDefault();
          }
        });
        window.addEventListener("beforeunload", () => {
          this.saveLocalData();
        });
        setTimeout(() => {
          this.scrollToBottom();
        }, 0);
      }

      render() {
        return (
          React.Fragment>
            div id="chatbox">
              {this.state.historyMessage.map((msg, idx) => (
                div className={`message ${msg.role}-message`} key={msg.time}>
                  pre>{msg.content}/pre>
                  {msg.role === "user" ? (
                    button
                      className="user_edit_btn func_button"
                      onClick={() => this.editMessage(idx)}
                    >
                      rewrite
                    /button>
                  ) : (
                    ""
                  )}
                /div>
              ))}
            /div>
            div className="button_wrap">
              {this.state.loading ? (
                p className="loading_wrap">AI is thinking.../p>
              ) : (
                ""
              )}
              button onClick={() => this.handleSearch()}>submit/button>
              button
                onClick={() => this.stopStreamFetch()}
                className="warning_button"
              >
                stop
              /button>
              button
                onClick={() => this.regenerateStreamFetch()}
                className="func_button"
              >
                regenerate
              /button>
              button
                onClick={() => this.handleChangePromots()}
                className={
                  this.state.prompts[0].content ? "func_button" : "desc_button"
                }
              >
                prompts
              /button>
              {this.state.conversationIds.map((v) => (
                button
                  onClick={() => this.handleChangeConversion(v)}
                  className={
                    this.state.conversationId === v ? "" : "desc_button"
                  }
                  key={v}
                >
                  {v}
                /button>
              ))}
              button
                onClick={() => this.handleChangeApiKey()}
                className={this.state.apiKey ? "func_button" : "desc_button"}
              >
                ApiKey(自备)
              /button>
            /div>
            div id="input-container">
              textarea
                id="inputbox"
                type="text"
                placeholder="请输入您的问题，shift+enter发送消息"
                rows="5"
                value={this.state.question}
                onChange={(e) => this.setState({ question: e.target.value })}
              >/textarea>
            /div>
          /React.Fragment>
        );
      }
    }

    const domContainer = document.querySelector("#chatgpt_demo_container");
    const root = ReactDOM.createRoot(domContainer);
    root.render(e(RootComponent));
  script>

  style>
    body {
      font-family: "Helvetica Neue", Arial, sans-serif;
    }

    button {
      border: none;
      background-color: #3f88c5;
      color: white;
      padding: 5px 10px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .warning_button {
      background-color: #e07a5f;
    }

    .func_button {
      background-color: #4c956c;
    }

    .desc_button {
      background-color: #8d99ae;
    }

    #chatbox {
      border: 1px solid gray;
      height: calc(100vh - 210px);
      overflow-y: scroll;
      padding: 10px;
      position: relative;
    }

    #chatbox .user_edit_btn {
      position: absolute;
      right: 0px;
      top: 0;
    }

    .message {
      margin-bottom: 10px;
      font-size: 18px;
      position: relative;
    }

    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .user-message {
      color: #00695c;
      /* text-align: right; */
    }

    .assistant-message {
      color: #ef6c00;
    }

    .warning-message {
      color: red;
    }

    .chatgpt-message {
      text-align: left;
    }

    .loading_wrap {
      margin: 0;
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translate(-50%, 0);
      color: #4c956c;
      font-size: 17px;
    }

    .button_wrap {
      margin: 8px 0;
      display: flex;
      justify-content: center;
      position: relative;
      flex-wrap: wrap;
      margin-bottom: -7px;
    }

    .button_wrap button {
      margin-right: 10px;
      margin-bottom: 14px;
    }

    .button_wrap button:last-child {
      margin-right: 0px;
    }

    #input-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #inputbox {
      font-size: 1rem;
      padding: 10px;
      width: 100%;
    }
  style>
html>

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net