写点什么

使用 OpenAI 接口释放 ChatGPT API 的力量

作者:devpoint
  • 2023-03-12
    广东
  • 本文字数:4496 字

    阅读完需:约 15 分钟

使用OpenAI接口释放ChatGPT API 的力量

使用 OpenAI 接口释放 ChatGPT API 的力量构建 JavaScript 代码生成器。



ChatGPT 是由 OpenAI 开发的聊天机器人平台,允许开发人员使用 GPT-3 语言模型构建自定义聊天机器人。GPT-3(Generative Pre-training Transformer 3 的缩写)语言模型是由 OpenAI 开发的大型、最先进的自然语言处理 (NLP) 模型。它在大量人工生成的文本数据集上进行训练,能够生成多种语言和风格的类人文本。


GPT-3 模型使用 transformer 架构,这是一种特别适合处理顺序数据(例如文本)的神经网络。它能够执行各种与语言相关的任务,包括翻译、摘要和问答,以及生成难以与人类生成的文本区分开来的文本。


ChatGPT 平台允许开发人员使用 GPT-3 模型构建聊天机器人,这些聊天机器人可以与用户进行自然的、类似人类的对话。它为开发人员提供了一个简单、直观的界面来使用和自定义,从而可以轻松创建可集成到各种应用程序和平台中的聊天机器人。


本文将使用 Next.js 构建一个简单的 JavaScript 代码生成器


对于使用 Next.js(一种用于构建 Web 应用程序的流行 React 框架)的开发人员来说,集成 ChatGPT API 可以为对话式 AI 开启新的可能性。将探索 ChatGPT API 的强大功能,并展示如何将其与 Next.js 结合使用来构建更智能、更具吸引力的聊天机器人。由于涉及一些环境问题,在本文就不过多介绍了。

OpenAI API

为了能够在 Next.js 应用程序中使用 OpenAI 的 API,需要先从 OpenAI 申请 API 密钥。要获取 OpenAI API 密钥,需要在 https://openai.com/ 创建一个帐户然后访问 OpenAI 仪表板中的 API 密钥部分以创建一个新的 API 密钥。


密钥是私密的内容,不得与任何其他人共享,对于一个普通的 OPEN AI 账号来说,免费的额度大概 $5


使用 OpenAI API 创建了一个 JavaScript 代码生成器。在这篇文章中,将实现一个简单的前端代码生成器。

创建应用

从这里开始主要涉及跟 Next.js 应用开发的内容,对于前端开发者来说就是熟悉的流程了。


对于开发环境需要声明的时候 node.js 版本,必须是 v16 以上。如果涉及多版本问题,推荐使用 nvm 来管理版本。


首先创建一个 App:


npx create-next-app@latest
复制代码


react-openai 为项目名称,使用 javascript。



完成之后进入项目目录:


cd react-openai
复制代码


启动项目:


npm run dev
复制代码


将会看到 nextjs App 欢迎界面:



接下来创建一个 .env 文件并粘贴 openAI API 密钥。


OPENAI_API_KEY="秘钥"
复制代码


接下来安装项目所需的依赖库:


npm install openai bootstrap sass showdown sanitizeHtml --save
复制代码


接下来创建一个布局组件,文件路径为 src/components/Layout.js,代码如下:


/* eslint-disable @next/next/no-page-custom-font */import Head from "next/head";export default function Layout({    title,    keywords,    description,    author,    children,}) {    return (        <div>            <Head>                <title>{title}</title>                <meta name="description" content={description} />                <meta name="keywords" content={keywords} />                <meta name="author" content={author} />                <link rel="icon" type="image/png" href="images/favicon.png" />            </Head>
{children} </div> );}Layout.defaultProps = { title: "OpenAI ChatGPT App", description: "一个基于 React、NextJs、OPENAI、ChartGPT 学习项目", keywords: "chatgpt, openai, nextjs, react, tailwind", author: "QuintionTang",};
复制代码


接下来移除 src/pages/index.js 的代码,


import { useState } from "react";import sanitizeHtml from "sanitize-html";import Layout from "../components/Layout";const showdown = require("showdown");const converter = new showdown.Converter();
export default function Home() { const [userInput, setUserInput] = useState(""); const [apiOutput, setApiOutput] = useState("结果将在这里输出……"); const [inputError, setInputError] = useState(""); const [loading, setLoading] = useState(false);
const onUserChangedText = (event) => { setInputError(""); setUserInput(event.target.value); };
const callGenerateEndpoint = async () => { setInputError(""); if (userInput !== "") { setApiOutput(`请耐心等待……`); setLoading(true); const response = await fetch("/api/coder", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ userInput }), });
const data = await response.json(); const output = data.output.message;
const formattedText = output.content; const sanitizedOutput = sanitizeHtml( converter.makeHtml(formattedText) ); setLoading(false); setApiOutput(`${sanitizedOutput}`); } else { setInputError("请输入需要实现的功能"); } };
return ( <> <Layout> <main className="relative-fullscreen"> <div className="sidebar-block"> <div className="px-4 py-4 text-left flex-grow-1"> <h4 className="sidebar-title"> Generate JavaScript Code </h4> <br></br> <div className="sidebar-form"> <textarea name="" className="form-control" rows={4} placeholder="e.g 使用代理模式创建一个类 " value={userInput} onChange={onUserChangedText} ></textarea> <br></br> {inputError !== "" && ( <div className="error-tips"> {inputError} </div> )} <div className="py-4 d-grid gap-2 d-sm-flex justify-content-sm-center"> <button type="button" disabled={loading} className="btn btn-primary btn-lg px-4" onClick={callGenerateEndpoint} > Coding </button> </div> </div> </div>
<div className="sidebar-copy"></div> </div> <div className="sidebar-codebox"> <div className="codebox-main text-left flex-grow-1"> <div> {apiOutput && ( <div className="output"> <div className="output-content"> <div style={{ padding: "10px", }} dangerouslySetInnerHTML={{ __html: apiOutput, }} ></div> </div> </div> )} </div> </div> </div> </main> </Layout> </> );}
复制代码


其它代码就不贴出来了,主要看下 api 的代码,路径 src/pages/api/coder.js,代码如下:


import { Configuration, OpenAIApi } from "openai";
const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY,});
const openai = new OpenAIApi(configuration);
const basePromptPrefix = `在JavaScript中使用 ES6 实现`;const tip = "并给出详细的注释和说明";const coder = async (req, res) => { try { const prompt = `${basePromptPrefix}${req.body.userInput}${tip}`; const content = prompt.substring(0, 80); const baseCompletion = await openai.createChatCompletion({ model: "gpt-3.5-turbo", messages: [ { role: "user", content }, { role: "system", content }, ], temperature: 0.7, max_tokens: 4000, });
const dataOutput = baseCompletion.data.choices.pop(); res.status(200).json({ output: dataOutput }); } catch (error) { res.status(400).json({ error: error }); }};
export default coder;
复制代码


线上体验地址是:https://experimental.crayon.dev/


访问效果如图:


总结

OpenAI 的 ChatGPT API 是一项改变游戏规则的技术,可以帮助开发人员创建更像人类且更具吸引力的聊天机器人。通过将这个强大的 API 与 `Next.js` 集成,开发人员可以为对话式 AI 开启新的可能性,使他们的应用程序能够根据上下文智能地响应用户输入。OpenAI 不只是对话,还有图片生成接口、专门的代码生成等等,合理利用其开放接口还是可以构建很多意想不到的应用场景。

发布于: 刚刚阅读数: 6
用户头像

devpoint

关注

细节的追求者 2011-11-12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
使用OpenAI接口释放ChatGPT API 的力量_React_devpoint_InfoQ写作社区