使用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 申请KEY。要获取 OpenAI KEY，需要在 https://openai.com/ 创建一个帐户然后访问 OpenAI 仪表板中的部分以创建一个新的凭证。
KEY是私密的内容，不得与任何其他人共享，对于一个普通的OPEN AI账号来说，免费的额度大概 $5。
使用 OpenAI API 创建了一个 JavaScript 代码生成器。在这篇文章中，将实现一个简单的前端代码生成器。
创建应用
从这里开始主要涉及跟 Next.js 应用开发的内容，对于前端开发者来说就是熟悉的流程了。
对于开发环境需要声明的时候 node.js 版本，必须是 v16 以上。如果涉及多版本问题，推荐使用 nvm 来管理版本。
首先创建一个 App：
npx create-next-app@latest
react-openai 为项目名称，使用 javascript。
完成之后进入项目目录：
启动项目：
将会看到 nextjs App 欢迎界面：
接下来创建一个 .env 文件并粘贴 openAI 凭证。
接下来安装项目所需的依赖库：
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 data-tomark-pass></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 不只是对话，还有图片生成接口、专门的代码生成等等，合理利用其开放接口还是可以构建很多意想不到的应用场景。
