🚀

Dify のアプリケーション（OpenAIのチャットボット）をWorkersから起動する

に公開
Cloudflare
Dify
tech

最近注目を集めているDifyでOpenAIのチャットボットをノーコードで作成してそのAPIをWorkersからテストしてみます。

Dify とは

https://dify.ai/jp
AI開発ツールやプラットフォームで、特にAIアプリケーションや機械学習の開発を支援するサービスです。AIモデルやアプリケーションを簡単に作成、テスト、デプロイできる環境が提供されます。主に以下のような特徴がある可能性があります。
いわゆるローコードツールに分類され、複雑なコードを書かずにAIモデルの開発を行えるようにするため、ユーザーインターフェースで様々な設定が可能になっています。これにより、AIに関する専門的な知識がなくても、基本的なAIシステムの作成ができるようになります。
image.png

さっそくやってみる

1. 事前準備

まずは以下のものを準備しておきます。
・OpenAI API Key (sk-projから始まる文字列です。）
・OpenAI Organization ID (org-から始まる文字列です）
この記事ではその手順は割愛しますが、以下のサイトから入手可能です。
https://openai.com/index/openai-api/
OpenAIは通常のキーとAPI用キーは別々に定義されています。上のAPI専用サイトからAPIキーを入手します。

2. Dify のアカウント開設

https://dify.ai/jp
画面右上で始めるをクリックします。
image.png
ログイン情報を登録してログインしてください。
image.png
ログインが成功すれば以下の画面へ遷移します。
image.png

3. OpenAIを活用した簡単なAPIの設定

画面右上のプロフィールから設定をクリックします。
image.png
モデルプロバイダーからOpenAIのAPIKeyセットアップをクリックします。
image.png
先ほど入手したOpenAIのAPIキーとOrgIDを入力して保存をクリックします。
API Baseは空欄でかまいません。
以下のようにみどりのライトがつけば設定完了です。
image.png

4. シンプルなチャットボットの作成

次に画面上部スタジオタブで最初から作成をクリックします。
image.png
チャットボットを選択し、適当な名前を付け作成するをクリックします。
image.png
簡単なテストを行ってレスポンスが戻ってきたら公開するをクリックします。
image.png
image.png
これで今作成したチャットボットに外部からのアクセスが可能となりました。

5. APIキーの取得

左ペインからAPIアクセスをクリックし、画面右のAPIキーをクリックします。
image.png
新しいキーを作成してコピーしておきます。
image.png

6. Workers プロジェクトの作成

次にWorkersのプロジェクトを以下のコマンドでinitします。
基本的なhello worldの使い方はこちら。
https://zenn.dev/kameoncloud/articles/1fac9762aab4ec

wrangler init dify

その後index.jsを以下に置換してwrangler deployを行います。

index.js
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