GPT - 3と次を使用してあなたのServerless SQLジェネレータアプリケーションをビルドします.js

21313 ワード
nextjs serverless openai gpt3 テキストリンク
このような規則的な英語構文からSQLクエリを作成する単純なサーバーレスアプリケーションを作成できます.Create a SQL request to find all users who visited from Chrome and Safariこれは特にGoogle AnalyticsからのBigQuery SQLクエリにとって非常に有用です.
あなたはgithubレポにジャンプする場合は、から得ることができますhere
このような複雑なSQLクエリを作成するのは本当に面白いです.開始する前に、あなたのオープンAIアカウントの請求方法を知っているhere .
基本的に、複数のモデルは、それぞれ異なる機能と価格ポイント.ダヴィンチは最も強力ですが、Adaは最速モデルです.
例トークンの使用量:価格は1000トークンあたりです.あなたはトークン1000のトークンは約1000語の単語として考えることができます.この項は35トークンです.
あなたのダッシュボードで計算された各モデルリクエスト

このプロジェクトではGPT-3 Engine and Ada model ところで.


オープンAIアカウントの作成
移動するOpen AI そして、あなたが1を持たないならば、新しい口座をつくってください.からAPIキーに移動here そして、あなたがAPIキーを持っていることを確認してください.
APIキーを他のユーザーと共有したり、ブラウザやその他のクライアント側のコードで公開したりしないでください.それで、私は使用をお勧めします.環境変数


アプリを作成
空の次を作成します.JSアプリ:
yarn create-next-app
追加openai 糸を使ったパッケージ
yarn add openai
次に、CPT - 3リクエスト用の新しいAPIファイルを作成します.
//pages/api/ai.js

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  let promptData = req.body.promptData;
  const response = await openai.createCompletion("text-ada-001", {
    prompt: promptData,
    temperature: 0.3,
    max_tokens: 60,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });
  res.status(200).json({ data: `${response.data.choices[0].text}` });
}
JSONレスポンスのビルド関数
//pages/index.js

useEffect(() => {
    const fetchData = async () => {
      if (search) {
        setIsLoading(true);
        const res = await fetch(`/api/ai`, {
          body: JSON.stringify({
            promptData: search,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        });
        const data = await res.json();
        setData(data);
        setIsLoading(false);
      }
    };
    fetchData();
  }, [search])
あなたの完全なインデックス.JSコードは次のようになります.
//pages/index.js

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useState, useEffect } from "react";

export default function Home() {
  const [data, setData] = useState({ data: "" });
  const [query, setQuery] = useState();
  const [search, setSearch] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      if (search) {
        setIsLoading(true);
        const res = await fetch(`/api/ai`, {
          body: JSON.stringify({
            promptData: search,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        });
        const data = await res.json();
        setData(data);
        setIsLoading(false);
      }
    };
    fetchData();
  }, [search]);

  const defaultPrompt =
    "Create a SQL request to find all users who visited from Chrome and Safari";

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <br />{" "}
          <a href="https://openai.com/api/">Open AI SQL Generator</a>
        </h1>

        <div>
          <div>
            <h3>Your SQL request: </h3>
            <textarea
              type="text"
              cols="50"
              rows="3"
              placeholder={defaultPrompt}
              defaultValue={defaultPrompt}
              value={query}
              onChange={(event) => setQuery(event.target.value)}
            />
            <br />
            <button
              type="button"
              className={styles.button}
              onClick={() => setSearch(query)}
            >
              Generate
            </button>
            {isLoading ? (
              <div>Loading ...</div>
            ) : (
              <>
                <p className={styles.description}>Your SQL query 👇</p>
                <code className={styles.code}>{data.data} </code>
              </>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}
あなたのアプリケーションを構築し、新しいSQL要求を作成するために起動します.⚡️
yarn dev
私のリポジトリをクローンしてくださいhere
ソース
  • https://harishgarg.com/writing/how-to-build-a-serverless-gpt-3-powered-using-nextjs-react/
  • https://www.twilio.com/blog/getting-started-with-openai-s-gpt-3-in-node-js
    • peekメソッド
    2017年12月学習心得報告