🔥前端JavaScript使用OpenAi ChatGPT API🔥

ChatGPT 是 OpenAI 开发的一种自然语言处理模型，它基于GPT-3.5 架构。GPT 代表"Generative Pre-trained Transformer"（生成式预训练变换器），是一种基于变换器（Transformer）架构的神经网络模型，能够理解和生成人类语言。ChatGPT专注于实现对话和交流的任务，它可以根据输入的文本生成连贯、有逻辑的回复。

2022年11月底，OpenAI 才发布了「GPT-3.5」的更新，GPT-3.5 架构在模型规模和性能方面都取得了显著的提升。它具有1750亿个参数，使其在理解和生成语言方面更加准确和多样化。ChatGPT 能够进行自由对话、回答问题、提供解释、创作文本等任务，其灵活性和语言能力使其在多个领域都有广泛的应用潜力。距GPT-3.5的更新不久，2023年3月14日，OpenAI 又抛出GPT-4，此次除了正确度高出40%、以整理和搜寻网络上的资讯为主，还可以支援视觉输入、图像辨识等功能。GPT-4 响应禁止内容请求的可能性比 GPT-3.5 低 82%，而产生事实响应的可能性高 40%。下面我们就来看看如何使用ChatGPT API (注：以下代码都是基于GPT-3.5的使用,且一般需要科学上网)

获取ChatGPT API

登录 OpenAI 的官网（关于OpenAI账号的注册和虚拟号码的获取，网上教程很多，在此不再赘述，建议一定走官方渠道，防止账号被封）
- 获取相关的secret key
- 创建secret key，name自定义
- 保存secret key，之后需要用到 注意：这里一定要复制下来，否则之后不予提供展示 key
- 查看创建的secret key

使用h5+Key连接ChatGPT

创建一个 HTML 文件

HTML 代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea id="chatData" maxlength="10000"></textarea>
    <button id="send">Send</button>
    <textarea id="content" maxlength="10000" readonly></textarea>
    <span id="count"></span>
</body>
</html>

创建一个 CSS 文件

CSS 代码

css 复制代码

    * {
        padding: 0;
        margin: 0;
    }
    button {
        width: 15vw;
        color: aquamarine;
        background-color: rgb(0, 0, 0);
        border: none;
        height: 4.5vh;
        margin: 0.25vh;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.3rem;
        cursor: pointer;
        border-radius: 10px;
    }

    button:hover {
        box-shadow: 0px 0px 1px 1px #333;
    }
    textarea {
        resize: none;
        padding: 10px;
        font-size: 1.3rem;
        margin: 2vh 2vw;  
        overflow-x: hidden;
        border-radius: 10px;
        box-sizing: border-box; 
        scrollbar-width: 0px;
        border: 1px solid rgb(255, 115, 0);
    }
    #chatData {
        width: clamp(200px, 100vw, 96vw);
        height: clamp(150px, 35vh, 96vh);
    }
    #content {
        width: clamp(200px, 100vw, 96vw);
        height: clamp(150px, 60vh, 96vh);
    }
    body {
        width: 100vw;
        display: flex;
        align-items: center;
        flex-direction: column;
        height: 100vh;
    }

创建一个 JavaScript 文件

JavaScript 代码

js 复制代码

const apiURLToText = 'https://api.openai.com/v1/chat/completions';
const apiURLToImage = 'https://api.openai.com/v1/images/generations';
const apiURLToEditImage = 'https://api.openai.com/v1/images/edits';
const apiURLToVariationImage = 'https://api.openai.com/v1/images/variations';
const apiURLTotranscription = 'https://api.openai.com/v1/audio/transcriptions';
const input = document.getElementById("chatData");
const textContent = document.getElementById("content");
const apiKey = 'sk-udadsasdsdadskjtyydasdauYutJUJjujjyyuyuyUuu54gfL';  //这里是你的key
input.setAttribute("placeholder", "please input...");
document.getElementById("send").addEventListener("click", async (e) => {
    textContent.textContent = "";
    document.getElementById("count").textContent = '0字';
    textContent.setAttribute("placeholder", "Loading...");
    const data = await sendMessages(input.value);  // 使用
    // const data = await sendImage(input.value);
    // const data = await sendEditImage(input.value);
    // const data = await sendTranscriptionText();
})
// Transcribes audio into the input language.
async function sendTranscriptionText() {
    const form_data = new FormData();
    // 这里的名称需要给成test.mp3 test.wav的形式,否则chatgpt会报错
    // Supported formats: ['m4a', 'mp3', 'webm', 'mp4', 'mpga', 'wav', 'mpeg', 'ogg', 'oga', 'flac']
    form_data.append("file", new File([await fetch("122.mp3").then(res => res.blob())], "test.mp3", { type: "audio/mp3" }));
    form_data.append("model", "whisper-1");
    const data = await fetch(apiURLTotranscription, {
        method: "POST",
        headers: {
            // 'Content-Type': 'multipart/form-data',   // 这里需要注意 不需要给这个type
            'Authorization': `Bearer ${apiKey}`
        },
        body: form_data
    }).then(res => res.json()).catch(reason => reason);
    console.log(data.text)
}
// Creates a variation of a given image.
async function sendVariationImage(message) {
    const form_data = new FormData();
    form_data.append("image", new File([await fetch("rate.png").then(res => res.blob())], "test.png", { type: "image/png" }));
    form_data.append("n", 2);
    form_data.append("size", "1024x1024");
    form_data.append("prompt", message);
    const data = await fetch(apiURLToEditImage, {
        method: "POST",
        headers: {
            // 'Content-Type': 'multipart/form-data',   // 这里需要注意 不需要给这个type
            'Authorization': `Bearer ${apiKey}`
        },
        body: form_data
    }).then(res => res.json()).catch(reason => reason);
    console.log(data?.data)
}
// Creates an edited or extended image given an original image and a prompt.
async function sendEditImage(message) {
    const form_data = new FormData();
    form_data.append("image", new File([await fetch("123.png").then(res => res.blob())], "test1.png", { type: "image/png" }));
    form_data.append("mask", new File([await fetch("rate.png").then(res => res.blob())], "test2.png", { type: "image/png" }));
    form_data.append("prompt", message);
    form_data.append("n", 2);
    form_data.append("size", "1024x1024");
    const data = await fetch(apiURLToEditImage, {
        method: "POST",
        headers: {
            // 'Content-Type': 'multipart/form-data',   // 这里需要注意 不需要给这个type
            'Authorization': `Bearer ${apiKey}`
        },
        body: form_data
    }).then(res => res.json()).catch(reason => reason);
    console.log(data?.data)
}
// Creates an image given a prompt.
async function sendGetImage(message) {
    const data = await fetch(apiURLToImage, {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            // max_tokens: 100,
            // temperature: 0.7,
            size: "1024x1024",
            n: 5,
            model: "image-alpha-001",
            prompt: `${message}`
        })
    }).then(res => res.json()).catch(reason => reason);
    console.log(data?.data)
}
//Creates a completion for the provided message and parameters.
async function sendMessages(message) { 
    const data = await fetch(apiURLToText, {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
            // max_tokens: 100,
            // temperature: 0.7,
            n: 1,
            model: "gpt-3.5-turbo",
            messages: [
                { "role": "system", "content": "Make 720 Great Again" },
                { "role": "user", "content": `${message}` }
            ]
        })
    }).then(res => res.json()).catch(reason => reason);
    textContent.textContent = data?.choices?.[0]?.message?.content || data?.error?.message;
    document.getElementById("count").textContent = textContent.textContent.length + '字';
}

页面效果如下：(以聊天 message 举例)
解释一下上述 body 中的参数意义：
- n: 这是一个控制生成回复数量的参数。在这里设置为1，表示您希望模型生成一条回复。
- model: "gpt-3.5-turbo": 这指定了要使用的模型版本。在这种情况下，您正在使用的是GPT-3.5 Turbo模型，这是一个高性能版本的GPT-3.5模型，适用于更广泛的应用场景。
  - gpt-3.5-turbo：这是一个高性能的模型，适用于广泛的自然语言处理任务，包括生成文本、回答问题、对话交流等。它在多种应用场景中表现出色。
  - text-davinci-003：这个模型较早发布，具有较高的生成能力。它可以用于生成创意文本、短故事等。
  - text-davinci-002：类似于003模型，但稍微较早发布，性能也稍微低一些。
  - curie ：这是一系列的模型，如curie:ft-003和curie:ft-004。它们针对特定领域进行了微调，比如技术、金融等。
  - davinci：这是GPT-3早期版本，具有一定的生成能力，但相对较低。
- messages: 这是一个数组，包含了对话中的不同消息。每条消息都具有两个属性：role和content。
- role: 消息的角色，可以是 "system"（系统角色）或 "user"（用户角色）等。系统角色可以用于在对话中设置一些指导性的指令，而用户角色用于表示用户输入。
- content: 消息的内容，包含实际的文本内容。在这个代码片段中，只有一个用户角色的消息，内容是${mes}。
- max_tokens用于限制生成回复的最大标记数量，在GPT-3中，文本被分割成小的标记（tokens），例如单词、标点符号等。通过设置max_tokens，您可以限制生成文本的长度，避免过长的回复。例如，如果将max_tokens设置为50，模型生成的文本将被截断为不超过50个标记。
- temperature用于调整生成的随机性和多样性。temperature值越高，生成的文本越随机和多样，而值越低则更加稳定和一致。通常，较高的温度值（如0.8或1.0）会导致模型生成更具创意的回复，而较低的温度值（如0.2或0.5）则会使生成的文本更加确定性和规律性。

使用命令行式+Key连接ChatGPT

这里主要使用 Curl 进行简单的操作，也可以使用 ApiFox、PostMan 等工具。以下是 bash 代码：其中 body 中的 data 参数在上文已说明

bash 复制代码

#!/bin/bash
# -*- coding: utf-8 -*-
# USER_INPUT=$(cat "$1")  # 当使用 文本作为参数输入时候，使用 cat 获取文本字符 如：test.txt
USER_INPUT="$1" #正常使用标准输入的字符流作为参数
curl \
  -X POST \   #由于存在 - d 的参数传递 ，这里可以不显示声明请求方式
  -H "Content-Type: application/json" \   # 指定发送时的文本类型
  -H "Connection: keep-alive" \   # 保持链接，和长连接类似，但有所不同
  -H "Authorization: Bearer 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" \   #你自己的密钥 key
  -v \        #用于显示请求和响应时的详细信息，主要是一些连接过程
  # -s \      #用于忽略一些显示请求和响应时的信息，主要是一些连接过程
  -# \        #用于显示下载进度条
  -C - \      #这个参数用于支持断点续传
  # -F image="@otter.png" \     #这个参数用于上传为 `formdata` 类型的数据，对应js中的 `FormData` 数据，下同
  # -F prompt="A cute baby sea otter wearing a beret" \
  # -F n=2 \ 
  # -F size="1024x1024" \
  -d '{
  "temperature": 0.5,
  "n": 1,
  "model": "gpt-3.5-turbo",
  "messages": [
    {"role": "system", "content": " Make 720 Great Again"}, 
    {"role": "user", "content": "'"$USER_INPUT"'"}
  ]
}' \
  --connect-timeout 10 \  #设置链接超时时间
  -x http://127.0.0.1:9999 \  #需要科学上网，设置本地或远程的代理服务器地址
  https://api.openai.com/v1/chat/completions \   # chatgpt api的completions网址
  # >  E:\\Code\\rust_code\\wasm_pack_test\\src\\output.json   标准输出结果到 output.json 文件 （创建和覆盖）
  # >  E:\\Code\\rust_code\\wasm_pack_test\\src\\output.json   标准输出结果到 output.json 文件 （追加到结尾）

注意:在使用命令行输入时，如果 chatGPT 返回的信息是不能识别输入的文本，则你可能需要将字符文本转成 Unicode 的编码格式，也即是：\u0080、\u1030,类似这种的格式,如果需要可以参见，之前的一篇文章，# 前端中JS的字符编码及常用操作字符API

总结：ChatGPT 在许多行业中极大地提供了便利，但是它不是银弹。不能代替现有的许多行业和工作，至少目前不行。而且不要一味的依靠 ChatGPT 它给予的一些结果可能并不妥当和完善。