玩转chat-gpt ——入门级(一)

开篇

自从进到公司实习以后,我就发现自己所学的知识真的很渺小,每每跟进一个需求都要因为一些很幼稚的问题去问其他同事老师,所以啊,我觉得哪怕是进了一个更好的平台,但是也不能自大,固步自封,也要不断的去学习更多的知识,去提升自我。

正好赶上这段时间的AI热潮,这里我也是在不断的去学习,会一篇一篇的写出来怎么去学习的,如果对感兴趣的你有帮助,我也会很开心,那么我们开始咯,新的篇章。

介绍

什么是open AI?

open AI是生成式AI的简称,以前我们可以称它为文本生成式AI,但是随着不断的进步,不断的进化,它已经不仅仅局限于"文本"生成,体验过chatgpt-4.0的同学可能也知道,这里就不过多的讲这些概念了。

开始使用

注册拥有chatgpt账号

方法一:请国外的朋友帮你们用国外的号码帮你们注册

方法二:直接购买成品号,价格在10-20RMB左右,不算贵

有了之后直接上chatgpt登入账号:chat.openai.com/

生成 API 密钥

生成地址(前提是你需要有gpt账号):platform.openai.com/api-keys

生成的密钥可以先保存着,待会儿要用到。

安装开发工具或者环境语言

这里因为我是前端,这里使用的是node.js的环境,语言是javascript,已经安装 node.js 的同学可以跳过这一步,没有安装的同学可以去这个网站安装: nodejs.org/en

安装的版本不要低的离谱就可以了,我这里用的 16 的版本;

安装 OpenAI 依赖

安装了 node.js 会同时自己安装对应版本的 npm 包管理工具,可以直接使用 npm 相关的命令行;如果要使用 yarn 就可以使用 npm 去安装;(没用过npm的同学可以去搜一下)

自己创一个项目文件夹,这里我创建了一个名叫OpenAiText1的文件夹,然后在该文件夹对应的终端里执行该命令:

csharp 复制代码
npm install --save openai
# or
yarn add openai

这样做之后,我们创的文件夹里会出现这些文件:

打开其中的 package.json 文件里有这个就是装上了:

设置API密钥

这里注意一下,mac和window设置方法不同;

  • mac设置方法:

    方法一:

    1. 打开终端,使用命令:nano ~/.bash_profilenano ~/.zshrc(对于较新的 MacOS 版本)会在终端打开编辑该文件模式。

    2. 添加环境变量 :在编辑器中,添加以下行,替换your-api-key-here为您的实际 API 密钥:export OPENAI_API_KEY='your-api-key-here'

    3. 保存并退出:按 Ctrl+O 写入更改,然后按 Ctrl+X 关闭编辑器。

    4. 加载您的配置文件 :使用命令source ~/.bash_profilesource ~/.zshrc加载更新的配置文件

    5. 验证 :通过在终端中输入echo $OPENAI_API_KEY来验证设置。它应该显示您的 API 密钥。

    方法二:去到文件夹,使用 shift + com + . 三个按键,把.bash_profile.zshrc这两个隐藏文件显示出来,直接点开文件进行编辑(即直接在原有文件的后面加上export OPENAI_API_KEY='your-api-key-here'),记得将密钥改成自己的就行,后续走上面的步骤四和步骤五验证下即可。

  • window设置方法:

    1. 打开终端;

    2. 在当前会话中设置环境变量 :在当前终端中设置环境变量,使用以下命令:setx OPENAI_API_KEY "your-api-key-here",后面替换成自己的api密钥。

    3. 如果要永久设置这个环境变量,就执行这些操作:

      · 右键单击"此电脑"或"我的电脑",然后选择"属性"。

      · 单击"高级系统设置"。

      · 单击"环境变量"按钮。

      · 在"系统变量"部分中,单击"新建..."并输入 OPENAI_API_KEY 作为变量名称,输入您的 API 密钥作为变量值。

    4. 验证 :要验证设置,请重新打开命令提示符并键入以下命令。它应该显示您的 API 密钥: echo %OPENAI_API_KEY%

调用 gpt 接口API

到了这一步,我们就可以开始准备使用chatgpt给出的接口 API 了。

在刚才创建的项目文件夹下创建一个入口文件,叫 app.js;

然后打开它,我们就可以开始操作啦;

这里我们先写一个简单的demo吧,方便大家理解。

引入我们刚才用npm装的依赖:

javascript 复制代码
const OpenAI = require("openai");

然后通过关键词 new 出一个实例对象:

注意这里要传入一个对象作为参数,其中有一个键值对,键名叫apiKey,值为你自己的密钥,是你自己的密钥。

javascript 复制代码
const openai = new OpenAI({apiKey: 'your-API-key'});

接下来,咱们就要开始正式操作与 gpt 对话了;

定义一个函数,名叫res(注意要加上async,因为接口请求gpt是一个异步过程):

javascript 复制代码
async function res() {
  
}

在函数里面定义一个变量来承接我们调用gpt接口后得到的答案;

openai.chat.completions.create是gpt内部提供的创建一个请求响应聊天的API,通过创建它可以调用对话gpt;

javascript 复制代码
const result = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages:[
        {"role": "user", "content": "你可以告诉我如果喜欢一个女孩子该怎么做吗?"}
    ]
})

这里咱们暂时先只了解两个参数吧;

  • model: gpt模型ID
  • messages: 消息列表,role字段为"user"代表用户提问,content字段为提问内容;

这里我们提问"你可以告诉我如果喜欢一个女孩子该怎么做吗?",为了方便看结果,我们用console.log去打印获取到的结果吧:

javascript 复制代码
console.log(completion.choices[0].message);

那么完整代码现在应该长这样:

javascript 复制代码
const OpenAI = require("openai");  // 引入openAI依赖

const openai = new OpenAI({apiKey: 'your-API-key'});  // 创建openai实例对象


async function res() {
  const completion = await openai.chat.completions.create({  // 调用API创建聊天请求
    model: "gpt-3.5-turbo",  // 模型ID
    messages:[
        {"role": "user", "content": "你可以告诉我如果喜欢一个女孩子该怎么做吗?"}
      ]  // 提问内容
  });

  console.log(completion.choices[0].message);  // 打印返回内容
}

res();  // 调用写好的函数

在该文件夹下的终端调用

node app.js

我们会得到这样一个的结果:

可以看到,我们得到了一个对于我们提出来的问题的回答,对吧!我们成功了!

到这一步,我们学习使用gpt的第一步就算是走完啦,后面我会继续更新这系列篇章,如果觉得写得不错,可以点个关注➕收藏哦

相关推荐
叫我菜菜就好27 分钟前
【Flutter_Web】Flutter编译Web第三篇(网络请求篇):dio如何改造方法,变成web之后数据如何处理
前端·网络·flutter
NoneCoder33 分钟前
CSS系列(26)-- 动画性能优化详解
前端·css·性能优化
滚雪球~33 分钟前
@vue/cli启动异常:ENOENT: no such file or directory, scandir
前端·javascript·vue.js
GDAL44 分钟前
vue3入门教程:ref函数
前端·vue.js·elementui
GISer_Jing1 小时前
Vue3状态管理——Pinia
前端·javascript·vue.js
好开心331 小时前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo1 小时前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec2 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
m0_748257182 小时前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工2 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性