🔥前端JavaScript使用OpenAi ChatGPT API🔥

ChatGPTOpenAI 开发的一种自然语言处理模型,它基于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 keyname自定义
    • 保存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-003curie:ft-004。它们针对特定领域进行了微调,比如技术、金融等。
        • davinci:这是GPT-3早期版本,具有一定的生成能力,但相对较低。
      • messages: 这是一个数组,包含了对话中的不同消息。每条消息都具有两个属性:rolecontent
      • 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 进行简单的操作,也可以使用 ApiFoxPostMan 等工具。 以下是 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 它给予的一些结果可能并不妥当和完善。

相关推荐
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos