Axios および JavaScript で OpenAI API を使用する方法

大手 AI 研究ラボ OpenAI は、開発者が最先端の AI 機能を活用し、GPT3 などを使用して言語モデルを生成できる強力な API を作成しました。このチュートリアルでは、Axios および JavaScript で OpenAI API を使用する方法を示し、AI を活用した Web 開発の未来を垣間見ることができます。

Axios は、HTTP リクエストを作成し、API と統合するための人気のある JavaScript ライブラリであり、OpenAI API にアクセスするための完璧なツールです。ラップトップから音が出なくなった場合の対処方法経験豊富な開発者でも、開発を始めたばかりでも、このガイドでは OpenAI API の使用方法を説明します。 Axios と JavaScript は連携して動作するため、革新的な AI を活用したアプリケーションの作成を今すぐ開始できます。

Axios ライブラリの詳細については、https://axios-http.com/: をご覧ください。 >

OpenAI APIキーを取得する

OpenAI API の API キーを取得するには、OpenAI Web サイト (https://openai.com/) に API キーを登録する必要があります。無料の OpenAI アカウント:

アカウントに登録するには、ホームページの右上隅にある「登録」ボタンをクリックし、画面の指示に従って新しいアカウントを作成します。アカウントを作成した後、アカウント設定の API セクションにアクセスして API キーを取得できます。

「API」セクションには、「API キーの生成」というラベルのボタンがあります。このボタンをクリックして新しい API キーを生成します。このキーを使用して、Web アプリケーションから OpenAI API にリクエストを行うことができます。 API キーは安全に保管し、他の人と共有しないでください。

設定項目

まず新しいプロジェクトフォルダーを作成して、JavaScript プロジェクトをセットアップしましょう。

$ mkdir openai-axios
$ cd openai-axios

新しいプロジェクトフォルダーに、Node.js パッケージマネージャー (NPM) を使用して新しい初期 package.json ファイルを作成します。これは、NPM を使用してさらに依存関係をインストールできるようにするための前提条件です。

$ npm init -y

このコマンドを実行すると、コンソールで package.json に何が書き込まれているかを確認できるはずです。

次に、NPM を使用して、dotenv および axios パッケージをインストールします。

$ npm install dotenv axios

Dotenv は、環境変数を .env ファイルから process.env にロードする依存関係のないモジュールです。環境変数を使用して、OpenAI ダッシュボードから取得した API キーを保存します。

次に、プロジェクトフォルダーに 2 つのファイルを作成する必要があります。

$ touch index.js .env

Axios を使用して OpenAI API にアクセスする

まず、.env に環境変数を作成しましょう。

OPENAI_API_KEY=[INSERT YOUR OPENAI API KEY HERE]

次に、index.js ファイルに切り替えて、次のコード行から始めます。

const axios = require("axios");

この require ステートメントは、Axios ライブラリをインクルードするために必要です。 dotenv ライブラリをアクティブ化し、process.env を通じて環境変数にアクセスできるようにするには、別の require ステートメントが必要です。

const apiKey = process.env.OPENAI_API_KEY;

次に、axios.create メソッドを使用して Axios クライアントインスタンスを作成します。同時に、OpenAI API キーを含む認証ヘッダーを設定します。

const client = axios.create({
  headers: {
    Authorization: "Bearer " + apiKey,
  },
});

Axios クライアントオブジェクトを使用して、OpenAI API エンドポイントの 1 つに HTTP POST リクエストを送信してみましょう。

const params = {
  prompt: "How are you?",
  model: "text-davinci-003",
  max_tokens: 10,
  temperature: 0,
};

client
  .post("https://api.openai.com/v1/completions", params)
  .then((result) => {
    console.log(result.data.choices[0].text);
  })
  .catch((err) => {
    console.log(err);
  });

このコードは、Axios ライブラリを使用して、HTTP POST リクエストを OpenAI API に送信します。エンドポイント「https://api.openai.com/v1/completions」にリクエストを送信します。 OpenAI API のこのエンドポイントを使用すると、開発者は特定のプロンプトに対してテキスト補完を生成できます。

params オブジェクトは、完了するためのプロンプト、使用するモデル、生成するトークンの最大数、生成時に使用する温度など、API リクエストのパラメーターを含む JavaScript オブジェクトです。

リクエストはクライアントオブジェクトの .post() メソッドを使用して行われます。 .post() メソッドは、URL エンドポイントとパラメーターオブジェクトの 2 つのパラメーターを取ります。

リクエストに対する応答は、リクエストが成功したときに呼び出される Promise .then() メソッドを使用して処理されます。 API によって返された結果オブジェクトは、応答データの選択配列内の最初の選択のテキストとともにコンソールに記録されます。

エラーが発生した場合は、Promise .catch() メソッドが呼び出されます。エラーメッセージがコンソールに記録されるため、開発者は API リクエストに関する問題を診断できます。

次のリストには、index.js の完全なソースコードが含まれています。

const axios = require("axios");

require("dotenv").config();

const apiKey = process.env.OPENAI_API_KEY;

const client = axios.create({
  headers: {
    Authorization: "Bearer " + apiKey,
  },
});

const params = {
  prompt: "How are you?",
  model: "text-davinci-003",
  max_tokens: 10,
  temperature: 0,
};

client
  .post("https://api.openai.com/v1/completions", params)
  .then((result) => {
    console.log(result.data.choices[0].text);
  })
  .catch((err) => {
    console.log(err);
  });

node コマンドを使用してアプリケーションを実行してみましょう。

$ node index.js

出力として、OpenAI によって生成され返された応答を確認できるはずです。

結論は

このチュートリアルでは、環境のセットアップから最初の API 呼び出しの実行まで、JavaScript で OpenAI API と Axios の使用を開始する方法に関する包括的なガイドを提供します。このガイドが、AI の力を活用してプロジェクトのイノベーションを推進する方法を示す一助となることを願っています。