🔥前端JavaScript使用OpenAi ChatGPT API🔥

第1024次Debug2023-08-08 14:32

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 它给予的一些结果可能并不妥当和完善。

相关推荐
passerby606137 分钟前
完成前端时间处理的另一块版图
前端·github·web components
掘了44 分钟前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅1 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅1 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅2 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment2 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅2 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊2 小时前
jwt介绍
前端
爱敲代码的小鱼2 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
Cobyte2 小时前
AI全栈实战：使用 Python+LangChain+Vue3 构建一个 LLM 聊天应用
前端·后端·aigc
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04Linux下V2Ray安装配置指南05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06UV安装并设置国内源07Claude Code Skills 实用使用手册08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09Vue-skills的中文文档10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南