运用OpenAI接口开释ChatGPT API 的力气构建 JavaScript 代码生成器。

  • 源码地址：github.com/QuintionTan…
  • 体会地址：experimental.crayon.dev/

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

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

为了可以在 Next.js 运用程序中运用 OpenAI 的 API，需求先从 OpenAI 请求 API 密钥。要获取 OpenAI API 密钥，需求在 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。

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

完结之后进入项目目录：

cd react-openai

发动项目：

npm run dev

将会看到 nextjs App 欢迎界面：

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

接下来创立一个 .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;

线上体会地址是：experimental.crayon.dev/

拜访作用如图：

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

总结

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

  • 源码地址：github.com/QuintionTan…
  • 体会地址：experimental.crayon.dev/

本文正在参加「金石方案」” 感谢支持