Twilio と OpenAI を Azure Functions でつないだ ChatGPT っぽいもの

はじめに

Twilio と OpenAI 使って、お手軽な SMS チャットボットを作ってみます。1時間くらいでできちゃいます。

上図で右から順に準備していきます。

OpenAI の準備

今回は OpenAI の Create completion API を使います。

OpenAI にサインアップして、https://beta.openai.com/account/api-keys から API Key を取得しておきます。

Azure Functions の準備

今回は Node ランタイムを選択しました。
アプリケーション設定に、OPENAI_API_KEY として、先程取得したキーを保存しておきます。

今回は、送受信両方¹を行うのでHTTP Trigger 関数 を作ります。

やることはとてもシンプルです。

1. OPENAI_API_KEY を使って OpenAI の Configのセットアップ。
   これは export する関数の外側で実施します。
2. HTTP リクエストフォームから入力の取得
   Twilio からの WebHookは、application/x-www-form-urlencoded で届き、Body という要素に SMS の本文が含まれています。本来はシグネチャの検証などをするべきですが、デモなので省略します。
3. OpenAI の Create Completion API を呼び出す
   text-davinci-003 モデルを使ってみます。各種パラメータの詳細はこちら
4. SMS 返却用のデータ作成
   TwiMLというフォーマットに整形します。今回はメッセージ本文のみの利用です。
5. Azure Functions としてのレスポンス整形
   Azure Functions として　HTTP トリガー関数のレスポンスを生成します。

const { MessagingResponse } = require('twilio').twiml;
const { Configuration, OpenAIApi } = require("openai");

// 1. OpenAI の Configのセットアップ
const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
module.exports = async function (context, req) {
    // 2. HTTP リクエストフォームから入力の取得
    // SMS incoming message Webhook fornated as "application/x-www-form-urlencoded"
    // https://www.twilio.com/docs/messaging/guides/webhook-request
    // How to parse formdata in Azure Functions
    // https://github.com/Azure/azure-functions-nodejs-worker/issues/347#issuecomment-984036447
    const form = req.parseFormBody();
    const input = form.get("Body").value.toString() || "Say Hello";

    // 3. OpenAI の Create Completion API を呼び出す
    // CreateCompletion API
    // https://beta.openai.com/docs/api-reference/completions/create
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: input,
        max_tokens: 1000,
        temperature: 0.9,
        n: 1,
    });
    const resBody = response.data.choices[0].text || "Sorry";

    // context.log({In: input, Out: resBody})

    // 4.SMS 返却用のデータ作成
    // Generate TwiML response
    // https://www.twilio.com/docs/sms/tutorials/how-to-receive-and-reply-node-js#generating-twiml-in-your-web-application
    const twiml = new MessagingResponse();
    twiml.message(resBody);

    // 5. Azure Functions としてのレスポンス整形
    context.res = {
        headers: {
            "Content-Type": "text/xml"
        },
        body: twiml.toString()
    };
}

Twilio の準備

無料トライアル用のアカウントを作成し、番号を取得、Messaging の WebHookに、Azure Functions の URL を 関数レベルのキーとともに設定します。

動かしてみた

トライアルアカウントなので、Sent from your Twilio trial account - が入ってしまいますが、無事に小麦粉入りの炒飯ができました。やったぜ。
※長文だと Azure Functions が完了しても、スマホ側に SMS が届くまでに結構時間がかかることがあるようです。

1. Azure Functions には Twilio バインディング が用意されていますが、これは Output バインディングのみとなるため受信ができません。SMS 受信の Twilio からの WebHook を HTTP トリガー関数で受付、レスポンスを WebHook に返すことで SMS の送信も行います。 ↩