OpenAIで電話とWhatsAppを統合する

はじめに

ジェネレーティブAIが主流になりつつある。この1年で、ChatGPTやDALL-E 2のようなモデルや製品が登場し、テキスト、画像、音声を生成できるようになった。ChatGPTやDALL-E 2の開発者であるOpenAIは、開発者がこれらの強力なツールにアクセスし、想像力豊かな新しいアプリケーションを作成できるように開放した。

この記事では、まず Vonage Voice APIと OpenAI API.ユーザーからの電話によるプロンプトを受信し、それを生成AIサービスに送信するアプリケーションを作成します。AIの応答をユーザーに送るには VonageメッセージAPI.さっそく見てみよう！

前提条件

すでにVonageのスターターアプリケーションを開発し、通話を受信し、ユーザーの応答をキャッチし、それをOpenAIに送信し、そしてWhatsAppの返信をメッセージする。スターターアプリケーションでは、.env ファイルに認証情報を追加し、Github Codespaces を使ってアプリをデプロイするだけです。また、スターターアプリケーションを編集して実験することもできます。

始めよう：

• フォーク このリポジトリ.コードスペースで "Create codespace on main" をクリックして開きます。

• Vonage CLI- Node.jsをインストールしたら、npm install -g @vonage/cliを使ってインストールできます。このツールでVonageアプリケーションを作成・管理できます。

あるいは、アプリを Node.jsと ngrok.

新しいVonageアプリを作成する

サインイン/無料登録 developer.vonage.comを使用できるようにするには Voice API を使用するにはを使うには Vonage アプリケーションを作成する必要があります。

Vonage Voice APIへのリクエストにはすべて認証が必要です。そのため、Applications APIでプライベートキーを生成し、JSON Web Tokens (JWT)を作成してリクエストを行う必要があります。デモでは、API キーと API シークレットを使用します。

左のメニュー ここでをクリックします。APIキータブの下にAPIキーとアカウントシークレット（APIシークレット）があります。

Codespaces環境内で、.envファイルのAPIキーとAPIシークレットをコピー＆ペーストする。この情報をGithubリポジトリ自体に保存しないように注意してください。

API_KEY=b**********
API_SECRET=******************

Vonageアプリケーションには、Vonage Voice APIとのやりとりに必要なセキュリティおよび設定情報が含まれています。

Vonage Developer Dashboardを使ってアプリケーションを作成してみましょう。

左側のメニューからApplicationsをクリックします。新規アプリケーションの作成」をクリックします。アプリケーションに名前を付けます。例えば "VoiceApp "などです。また、公開鍵と秘密鍵を生成する必要があります。最後に、Voice機能を有効にします。

Vonage CLIを使って確認してください。

設定

期待される成果

アプリで電話を受けるためにバーチャル番号を購入する必要があります。これはVonage CLIでできる：

• バーチャル電話番号の検索と購入。

• 能力欄の Voiceを選択してください。

• 国番号でNumbersを検索できます。Vonage Numbers APIはISO Alpha-2コードを使用しています。国コード一覧は ここで.

次のCLIコマンドでバーチャル番号を購入できる：

バーチャル電話番号の検索と購入には Vonageダッシュボード.ドロップダウンメニューからVoice機能を選択します。

アプリを探す

電話番号とアプリのリンク

例えば

期待される反応

また、Vonage Dashboardを使用して番号をリンクすることもできます。[Applications]に移動し、関連するApp（例：VoiceApp）を開き、番号のリストで[Link]ボタンをクリックします。

呼制御オブジェクトの作成

音声認識 (ASR)

自動音声認識（ASR）は、IVR、本人確認、さまざまな種類の音声ボット/アシスタントなどのケースで、アプリが音声入力をサポートすることを可能にします。この機能を使用すると、アプリは、ユーザーが数字（DTMF）を入力するのではなく、口に出して質問に答えることを期待すると、書き起こされたユーザーの音声（テキスト形式）を受信します。次のスキームは、Nexmo Call Control Object (NCCO)を介して、アプリケーションがVonage APIとどのようにやりとりするかを示しています。

入力アクションを使用して、ユーザーの入力した数字または音声入力を収集できます。このアクションは同期です。Vonageは入力を処理し、Webhookエンドポイントに転送します。 eventUrlに転送します。リクエストでこの入力を受け取るように設定します。Webhookエンドポイントは、既存のNCCOを置き換える別のNCCOを返し、ユーザー入力に基づいて通話を制御する必要があります。

これがどのように機能するかは index.jsファイルで見ることができる。まず、アプリはエンドポイントである webhook/answerでトリガーされるのを待っている。その後、アプリケーションは3つのアクションを続ける：

{
      action: 'talk',
      text: 'Hi, describe an image that you want to generate'
    },
    {
      eventMethod: 'POST',
      action: 'input',
      eventUrl: [
        '[Codespace-or-server-URL]/webhooks/asr'],
      type: [ "speech" ],
      speech: {
        language: 'en-gb',
        endOnSilence: 0.1
      }
    },
    {
      action: 'talk',
      text: 'Thank you'
    }

役立つリンク

• Nexmoコールコントロールオブジェクト(NCCO)の検証

• 認識設定

オープンAIの設定

OpenAIはDALL-Eモデルで新しい画像生成機能をリリースした。Open AI APIには非常にクールな点がいくつかある。まず、2023年1月現在、ユーザーには最初の3ヶ月間に使える18ドルの無料クレジットが付与されている。これは遊べるクレジットだ！例えば、900枚の画像を作成または編集することができる。 1024x1024.次に、OpenAIの利用規約の「あなたのコンテンツ」の章によると、「...」です。OpenAIは、Outputに関するすべての権利、権原、利益をあなたに譲渡します。つまり、生成された画像は、商業目的であっても、どのような使用であっても、完全にあなたのものです。

まず 登録電話番号を確認した後、APIキーを生成する必要があります。 APIキー.

このAPIキーがあれば、前に進むことができる。

これを .envファイルに貼り付けます。

API_KEY=b**********
API_SECRET=******************
OPENAI_API_KEY=sk-**************************************

このチュートリアルでは 画像APIを使って画像を生成します。

画像を生成するには、以下のPOSTリクエストを使用する。

var req = unirest('POST', 'https://api.openai.com/v1/images/generations')
    .headers({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + openaiApiKey
    })

以下のJSONペイロードで。パラメータ

• n- 一度に1～10枚の画像をリクエストできます。

• size- サイズは256x256、512x512、1024x1024ピクセルがあります。小さいサイズの方が生成速度が速い。

.send(JSON.stringify({
      "prompt": promptText,
      "n": 1,
      "size": "1024x1024"
    }))

プロンプトテキストは、Webhookとして受け取るユーザーのレスポンスから解析されます。

let promptText = request.body.speech.results[0].text

OpenAI APIからレスポンスを受け取ったら、ボディから画像のURLを解析します。

let imgUrl = res.body.data[0].url

VonageメッセージAPIの設定

Vonage Messages APIでは、SMS、MMS、Facebook Messenger、Viber、WhatsAppでメッセージを送受信できます！ここではWhatsAppを使用していますが、コードを変更してFacebookやViberを使用することも可能です。詳しくはMessages APIのドキュメントをご覧ください。"

Vonage Messages API WhatsAppサンドボックスを使用し、コンテンツやリンクを含むメッセージを受信します。

つのパラメータを受け取る sentMsg関数を作成した、 phoneNumberこれは発信者の電話番号に関する情報を含む。そして imgUrlこれはOpenAIのレスポンスから解析したものです。

function sentMsg(phoneNumber, imgUrl)

スマートフォンでWhatsAppを開き、写真アイコンをクリック。次にQRコードをスキャンし、入力済みメッセージの送信をクリック。

開く メッセージAPIサンドボックス追加情報が必要な場合、または他のメッセンジャーを使用したい場合。

コードスペースにアプリをデプロイする

GitHub Codespaceをフォークで開く。

Codespaceターミナルで以下のコマンドを実行し、Nodeパッケージをインストールします：

npm install

ターミナルで以下のコマンドを実行し、ウェブフック用のGitHubコードスペースURLを受け取る。

echo "https://${CODESPACE_NAME}-3000.preview.app.github.dev/webhooks/asr"

出力をコピーして EVENT_URL=を .envファイル

API_KEY=b**********
API_SECRET=******************
OPENAI_API_KEY=sk-**************************************
EVENT_URL=https://******************************************-3000.preview.app.github.dev/webhooks/asr

ここで、Vonageアプリの設定を更新して、CodeSpaceのウェブフックをリッスンする必要があります。これは ダッシュボード.左のメニューからApplicationに進みます。現在のアプリを選択し、'Edit'ボタンをクリックします。

Vonage CLIを使用してアプリの設定を更新します。の代わりにコードスペースのURLまたはサーバーのURLを次のCLIコマンドに貼り付けます。 [Codespace-or-server-URL]を次のCLIコマンドに貼り付けます。

アプリの実行

ターミナルで Portタブを開く。タブの Privateをクリックして Visibility列をクリックし Public.

準備万端

• アプリとリンクしている電話番号に電話して試してみてください。 **732**56**

• ボットにチップを伝える

• 対応するメッセンジャーのコンテンツを待つ

• コンソールをモニターする

以下は、あなたの電話で受信できるサンプル画像です。

プロンプトテキストウクライナ カルパティア山脈 モンテネ草原, 写真, 8K, HD

まとめ

おめでとうございます！これで、Vonage Voice API を使ってインバウンドコールのボット応答サービスを構築し、Vonage Messages API を使ってメッセージを送信できるようになりました。すべて GitHub Codespaces でホストされています。このプロジェクトを Vonage AI Studioを使ってこのプロジェクトを拡張することもできます。あるいは、我々はすでにOpenAIと統合しているので、ChatGPTを統合することもできます。

あなたのAI作品を披露してください！私たちの VonageコミュニティSlackまたは ツイッター.