目的
deiucanta/chatpad をフォーク・修正した kyouheicf/chatpad を使って、以下のような構成を組んで、Cloudflare AI Gateway がどのように使えるかを試してみます。
参考：Cloudflare AI Gateway とは
主な機能は以下の通りです：
- 分析： リクエスト数、トークン数、アプリケーションの実行にかかるコストなどのメトリクスを表示します。
- リアルタイムログ： リクエストとエラーに関する洞察を得る
- キャッシュ: 元のモデルプロバイダーの代わりにCloudflareのキャッシュから直接リクエストを配信することで、リクエストの高速化とコスト削減を実現します。
- レート制限： アプリケーションが受け取るリクエスト数を制限することで、アプリケーションのスケールをコントロール
- リクエストの再試行とフォールバック： エラー発生時のリクエストの再試行とモデルのフォールバックを定義することで、回復力を向上させます。
- お気に入りのプロバイダーのサポート Workers AI、OpenAI、Azure OpenAI、HuggingFace、ReplicateはすべてAI Gatewayで動作します。
- レスポンスストリーミング：AI Gatewayはレスポンスストリーミングをサポートします。
Cloudflare Pages にデプロイ
以下のガイドに沿って進めます。
ビルド設定では、以下のようにしてください。
- Framework preset :
Create React App - ビルド出力先
/dist - 環境変数
NODE_VERSION = 18.15.0 - 環境変数
YARN_VERSION = 1
デプロイ成功時のログは以下のような形になります。
Cloudflare Access 設定
後ほど API キーを入力して利用する場面が出てくるため、Cloudflare Access で認証を設定します。
Pages プロジェクトの Settings > Access policy から有効化します。
Manage Policies から Cloudflare Access の設定を確認できます。
デフォルトだと *.chatpadXXXX.pages.dev は登録されますが、chatpadXXXX.pages.dev は対象外となってしまっているため、ワイルドカードなしの chatpadXXXX.pages.dev も登録します。
デフォルトでは以下のように Email で One Time PIN を求められるような認証です。
Cloudflare AI Gateway 設定
以下の手順で Cloudflare AI Gateway のエンドポイントを作成します。
エンドポイント作成後、リアルタイムログを有効化します。
また、上記の API Endpoints から OpenAI 等の AI プロバイダ向けエンドポイントが確認できます。
このたった1行のコードで始められるというところがミソですね。
Chatpad 設定
Cloudflare Access によって保護された Cloudflare Pages 上に Chatpad がデプロイされたので、Chatpad でカスタムプロバイダを設定します。
今回は OpenAI の API キーを使って Cloudflare AI Gateway のエンドポイントを設定します。
保存すると、ブラウザ開発者ツール内のコンソールでも以下の表示が得られます。
Cloudflare AI Gateway の分析とログ
この状態でチャットを開始すると、返答を得られました。
Cloudflare AI Gateway のリアルタイムログでもストリーミングデータが Parsed された状態でのレスポンスが確認できます。
分析画面では、トークン数やコストも含めた統計的な傾向が把握できました。
また、以下のファイル内で返答トークン数を制限していますが、必要に応じて変えてみてください。
max_tokens: 256,
まとめ
Chatpad のツールと簡単なコード変更で Cloudflare AI Gateway を通して OpenAI の chat/completions API を使い始めることができました。
Cloudflare AI Gateway に接続することで、分析やロギングによってアプリケーションの利用状況を把握し、キャッシングやレート制限、リクエストの再試行、モデルのフォールバックなどの機能によってアプリケーションのスケールを制御することができます。ぜひ活用してみてください。