Dify のアプリケーション（OpenAIのチャットボット）をWorkersから起動する
最近注目を集めているDifyでOpenAIのチャットボットをノーコードで作成してそのAPIをWorkersからテストしてみます。
Dify とは
AI開発ツールやプラットフォームで、特にAIアプリケーションや機械学習の開発を支援するサービスです。AIモデルやアプリケーションを簡単に作成、テスト、デプロイできる環境が提供されます。主に以下のような特徴がある可能性があります。
いわゆるローコードツールに分類され、複雑なコードを書かずにAIモデルの開発を行えるようにするため、ユーザーインターフェースで様々な設定が可能になっています。これにより、AIに関する専門的な知識がなくても、基本的なAIシステムの作成ができるようになります。
さっそくやってみる
1. 事前準備
まずは以下のものを準備しておきます。
・OpenAI API Key (sk-projから始まる文字列です。）
・OpenAI Organization ID (org-から始まる文字列です）
この記事ではその手順は割愛しますが、以下のサイトから入手可能です。
OpenAIは通常のキーとAPI用キーは別々に定義されています。上のAPI専用サイトからAPIキーを入手します。
2. Dify のアカウント開設
画面右上で始めるをクリックします。
ログイン情報を登録してログインしてください。
ログインが成功すれば以下の画面へ遷移します。
3. OpenAIを活用した簡単なAPIの設定
画面右上のプロフィールから設定をクリックします。
モデルプロバイダーからOpenAIのAPIKeyセットアップをクリックします。
先ほど入手したOpenAIのAPIキーとOrgIDを入力して保存をクリックします。
API Baseは空欄でかまいません。
以下のようにみどりのライトがつけば設定完了です。
4. シンプルなチャットボットの作成
次に画面上部スタジオタブで最初から作成をクリックします。
チャットボットを選択し、適当な名前を付け作成するをクリックします。
簡単なテストを行ってレスポンスが戻ってきたら公開するをクリックします。
これで今作成したチャットボットに外部からのアクセスが可能となりました。
5. APIキーの取得
左ペインからAPIアクセスをクリックし、画面右のAPIキーをクリックします。
新しいキーを作成してコピーしておきます。
6. Workers プロジェクトの作成
次にWorkersのプロジェクトを以下のコマンドでinitします。
基本的なhello worldの使い方はこちら。
wrangler init dify
その後index.jsを以下に置換してwrangler deployを行います。
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
// リクエストのURLからクエリパラメータを取得
const url = new URL(request.url);
const queryParam = url.searchParams.get('query'); // URLパラメータ 'query' を取得
// クエリパラメータが存在しない場合、デフォルトの文字列を使用
const query = queryParam ? queryParam : "こんにちは。今日は何日ですが？"; // デフォルトの文字列を設定
// リクエストのデータを定義
const payload = {
inputs: {},
query: query, // URLパラメータから取得した文字列を使用
response_mode: "blocking",
conversation_id: "",
user: "abc-123",
};
// fetchでPOSTリクエストを送信
const response = await fetch('https://api.dify.ai/v1/chat-messages', {
method: 'POST',
headers: {
'Authorization': 'Bearer app-xxxxx',
'Content-Type': 'application/json'
},
body: JSON.stringify(payload) // JSON形式で送信
});
// APIのレスポンスをJSONとして解析
const result = await response.json();
// 'answer'フィールドだけを抽出してレスポンスとして返す
const answer = result.answer;
// 文字エンコーディングをUTF-8に設定して返す
return new Response(answer, {
headers: { 'Content-Type': 'text/plain; charset=utf-8' } // UTF-8エンコーディングを指定
});
}
以下の箇所は先ほど取得したAPIキーに置換しておきます。
'Authorization': 'Bearer app-xxxxx',
URLパラメータのqueryで質問を投入すると以下のように回答が戻ってきます。
Discussion