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

1024小神 2023-06-10 原文

使用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 密钥，需要在 OpenAI 创建一个帐户然后访问 OpenAI 仪表板中的 API 密钥部分以创建一个新的 API 密钥。

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

使用 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 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;

线上体验地址是：OpenAI ChatGPT App | DevPoint开发要点分享中心 | 前端人工智能开发

访问效果如图：

总结

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

力量 ChatGPT 34 code xff ai gpt

有关使用OpenAI接口释放ChatGPT API 的力量的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 在 Ruby 中使用匿名模块 - 2
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？最佳答案三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
ruby - 使用 ruby 和 savon 的 SOAP 服务 - 2
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2
我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

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

OpenAI API

创建应用

总结

有关使用OpenAI接口释放ChatGPT API 的力量的更多相关文章

随机推荐