【Cloudflare Workers AI、AI GATEWAY】を試してみました

CloudflareからWokers AIとAI GATEWAYがオープンベータになってましたので機能を検証してみました。
Workersのdocument内にAI assistantの機能がありますがそれとは別の機能になっています。

Workers AI assistantURL: https://developers.cloudflare.com/workers/ai/

Workers AIの画面に記載がありますが、まだ本番環境での利用は推奨されてません。

Workers AI は現在オープン ベータ版であり、運用データとトラフィックには推奨されません。制限とアクセスは変更される可能性があります。

※Workers AIは2024/4/2にGAになりました。今回の記事はそれ以前のβ版での情報になります。
https://blog.cloudflare.com/workers-ai-ga-huggingface-loras-python-support

機能の一般公開もされており、そちらから動作を試すこともできます。
Cloudflare公式URL：https://ai.cloudflare.com/

開発者用のドキュメントは下記です。
Cloudflare developers URL：https://developers.cloudflare.com/workers-ai/

Workers AIとはCloudflareのグローバルネットワーク上で、サーバーレスGPUを利用した機械学習モデルを実行します。

現在使用できるモデルとしては下記があります。

・Text Generation
・Automatic Speech Recognition
・Translation
・Text Classification
・Image Classification
・Text-to-Image
・Text Embeddings

今回は「Text Generation」、「Text-to-Image」を試してみたいと思います。

APIでの動作検証

実行方法としてはAPI、もしくはWorkersで実行することができます。

事前にWorkers AI用のAPI Tokenを取得しておきます。APIの作成画面のテンプレートから「Workers AI (ベータ版)」を選択すれば問題ありません。

$ curl https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/@cf/meta/llama-2-7b-chat-int8 \
  -X POST \
  -H "Authorization: Bearer {API_TOKEN}" \
  -d '{ "messages": [{ "role": "system", "content": "You are a friendly assistant" }, { "role": "user", "content": "好きなピザの種類を教えて" }]}'

{"result":{"response":"Oh, wow, I'm so glad you asked! *excitedly* I love pizza, and there are so many delicious types to choose from! 🍕👀
\n\nFirst of all, have you tried classic margherita? It's a timeless favorite, with fresh tomatoes, mozzarella cheese, and basil on a crispy crust. It's simple, yet so flavorful and satisfying. 🍝👌\nBut if you're feeling adventurous, you could always try some more unique toppings like pineapple and ham, or even some spicy pepperoni for an extra kick! 🍕👀
\nAnd let's not forget about the crust itself! Thin crust, thick crust, crispy crust, or even stuffed crust - the possibilities are endless! 🍞👌\nSo, my friend, what's your favorite type of pizza? Do you have a go-to spot for delivery or do you prefer to cook it yourself? Let's chat all things p"},"success":true,"errors":[],"messages":[]}

簡単に使用することができました。ただし、まだ日本語での返答には対応してないようです。
※問いかける側は日本語でも大丈夫でした。

画像も作成してみましょう。

$ curl https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/@cf/stabilityai/stable-diffusion-xl-base-1.0 \
  -X POST \
  -H "Authorization: Bearer {API_TOKEN}" \
  -d '{ "prompt": "美味しそうなラーメン" }' \
  -o ./ramen.jpg

少し時間がかかりますが、ramen.jpgファイルが作成されます。
ファイルを開いてみると美味しそうなラーメンの画像ができました。

Workersでの動作検証

WorkersでバックエンドAPIを作成して、エンドポイントとして下記を設定しました。

・/api/v1/question-text
-> 「Text Generation」

・/api/v1/generate-image
-> 「Text-to-Image」

フロントエンドはCloudflare Pagesを使用して作成しましたがブログが長くなってしまいますので今回は割愛いたします。

▶Workers準備

npm create cloudflare@latest test-ai
cd test-ai
npm install --save-dev @cloudflare/ai

ドキュメントにも書いてあるのですが「@cloudflare/ai」については現在急速に更新が行われているので、頻繁に更新を実施することを推奨されています。

更新コマンド:

npm update @cloudflare/ai --save-dev

▶Workersコード

$ vi src/index.ts
---
import { Ai } from '@cloudflare/ai'

export interface Env {
  AI: any;
}

interface RequestData {
    question: string;
}

export default {
	async fetch(request: Request, env: Env) {
		const url = new URL(request.url);
		const path = url.pathname;

		const corsHeaders = {
			'Access-Control-Allow-Origin': '*',
			'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS',
			'Access-Control-Allow-Headers': 'Content-Type',
		};

		if (request.method === 'OPTIONS') {
			return new Response(null, { headers: corsHeaders });
		}

		if (request.method !== "POST") {
			return new Response("Method Not Allowed", { status: 405, headers: corsHeaders });
		}

		const data = await request.json() as RequestData;
		const question = data.question;

		if (path === "/api/v1/question-text") {
			const ai = new Ai(env.AI);

			const messages = [
				{ role: 'system', content: 'You are a friendly assistant' },
				{ role: 'user', content: question }
			];

			const stream = await ai.run('@cf/meta/llama-2-7b-chat-int8', {
				messages,
				stream: true
			});

			const headersWithContentType = {
				...corsHeaders,
				"content-type": "text/event-stream"
			};

			return new Response(
				stream,
				{ headers: headersWithContentType }
			);
		} else if (path === "/api/v1/generate-image") {
			const ai = new Ai(env.AI);
			const inputs = {
				prompt: question,
			};

			const response = await ai.run("@cf/stabilityai/stable-diffusion-xl-base-1.0", inputs);

			const headersWithContentType = {
				...corsHeaders,
				"content-type": "image/png"
			};

			return new Response(response, {
				headers: headersWithContentType,
			});
		} else {
			return new Response("Not Found", { status: 404, headers: corsHeaders });
		}
	},
};

CORSでエラーが出てしまいましたので、併せてCORSの設定も行っております。
上記のコードでCloudflareにデプロイします。

フロントエンドからAPIを叩いてデータを取得するFQDNはWorkersのデフォルトのFQDNを使用します。
※xxxxx.workers.devといった形のもの

では、ブラウザからアクセスして確認してみます。


タブで「Text Generation」、「Text-to-Image」を分けています。
まず質問してWorkers AIに回答してもらいましょう。





こちらも英語ですがちゃんと回答を返してくれました。
テキストから画像も作成してもらいましょう。



少し待ったら画像の作成もできました。簡単なコードでこのような動きが実装できました。

AI Gatewayは、AI Gateway越しに他のAIのAPIに接続させることができます。
分析とリアルタイムログを使用してユーザーがアプリケーションをどのように使用しているか分析でき、
またキャッシュ、レート制限などの機能を使用してアプリケーションの制御もできます。

Cloudflare AI GATEWAY URL：https://developers.cloudflare.com/ai-gateway/

現在対応しているプロバイダーは下記になります。
Worker AI
OpenAI
Azure OpenAI
HuggingFace
Replicate
Amazon Bedrock

今回はWorker AIとOpenAIを使用してどのように動作するか検証してみます。

AI GATEWAY作成

Cloudflareログイン -> アカウント -> AI -> AI GATEWAYから作成をします。
ゲートウェイ名を入れるだけで作成できます。

アプリケーション接続

接続するプロバイダー毎に下記のように接続するエンドポイントが用意されます。

・Worker AI
　　https://gateway.ai.cloudflare.com/v1/ACCOUNT_TAG/GATEWAY/workers-ai
・Amazon Bedrock
　　https://gateway.ai.cloudflare.com/v1/ACCOUNT_TAG/GATEWAY/aws-bedrock
・OpenAI
　　https://gateway.ai.cloudflare.com/v1/ACCOUNT_TAG/GATEWAY/openai
など

ACCOUNT_TAG：CloudflareのアカウントID
GATEWAY：AI GATEWAYの名前

それ以外にユニバーサルエンドポイントというものが存在します。
ユニバーサル エンドポイントはすべてのプロバイダーに接続することができます。
リクエストするスキーマの調整が必要ですが、追加機能がサポートされています。
例えば、リクエストが初めて失敗した場合にリクエストを再試行したり、リクエストが失敗した場合にフォールバックに指定したプロバイダーにリクエストを渡すことなどができるそうです。

今回の検証ではユニバーサルエンドポイントを使用していきます。

AI GATEWAYを通してWorkers AIを検証

※TOKENはCloudflareで発行したAPI TOKENです。権限は[Workers AI:読み取り]を付与してください。

curl -X POST https://gateway.ai.cloudflare.com/v1/ACCOUNT_TAG/GATEWAY \
  -H 'Content-Type: application/json' \
  -d '[
    { 
      "provider": "workers-ai",
      "endpoint": "@cf/meta/llama-2-7b-chat-int8",
      "headers": {
        "Authorization": "Bearer TOKEN",
        "Content-Type": "application/json"
      },
      "query": {
        "messages": [
          { 
            "role": "user",
            "content": "冬のおいしい食べ物を教えてください。"
          }
        ]
      }
    }
  ]' 

{"result":{"response":"Certainly! Winter is a great time to enjoy hearty, comforting foods that warm the soul and satisfy the taste buds. Here are some delicious winter foods from around the world:\n1. Hot Chocolate (Mexico): A warm, rich, and creamy drink made with melted chocolate, milk, and spices, hot chocolate is a winter staple in Mexico.\n2. Goulash (Hungary): A hearty stew made with beef, vegetables, and paprika, goulash is a classic Hungarian dish that's perfect for cold winter nights.\n3. Rømmegrøt (Norway): A traditional Norwegian dish made with sour cream, wheat flour, and milk, rømmegrøt is a comforting and filling winter food.\n4. Kouign-amann (France): A sweet, buttery pastry that's similar to a croissant, kouign-amann is a popular winter treat in France.\n5. Pão de Queijo (Brazil): A cheesy, crispy bread that"},"success":true,"errors":[],"messages":[]}

AI GATEWAYを通してOpenAIを検証

※TOKENはOpenAI APIで発行したAPI Keyです。

curl -X POST https://gateway.ai.cloudflare.com/v1/ACCOUNT_TAG/GATEWAY \
  -H 'Content-Type: application/json' \  -d '[    {      "provider": "openai",      "endpoint": "chat/completions",      "headers": {        "Authorization": "Bearer TOKEN",        "Content-Type": "application/json"      },      "query": {        "model": "gpt-4-turbo-preview",        "messages": [          {            "role": "user",            "content": "冬のおいしい食べ物を教えてください。"          }        ]      }    }  ]' 

{
  "id": "xxxxxxxxxxxxxxx",
  "object": "chat.completion",
  "created": xxxxxxxxxxxxx,
  "model": "gpt-4-0125-preview",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "冬においしい食べ物はたくさんありますね。季節の変わり目は、旬の食材を楽しむ絶好の機会です。以下に、冬におすすめの食 べ物をいくつか紹介します：\n\n1. **おでん** - 寒い季節にぴったりの日本の鍋料理です。大根、こんにゃく、卵、魚のすり身から作った練り物な ど、さまざまな具材をだし汁で煮込みます。\n\n2. **鍋料理（なべりょうり）** - 日本各地にはさまざまな鍋料理があります。寄せ鍋、しゃぶしゃ ぶ、水炊き、キムチ鍋などがあり、友人や家族と囲んで食べるのに最適です。\n\n3. **カニ** - 冬はカニの旬の時期です。ズワイガニ、タラバガニ 、毛ガニなど、種類によって味わいや食感が異なります。焼きガニ、カニ鍋、カニしゃぶなど、さまざまな調理法で楽しめます。\n\n4. **根菜類** - 大根、人参、ごぼうなどの根菜は冬に旬を迎えます。煮物やサラダ、スープなどにして風味豊かに楽しめます。\n\n5. **白菜** - 鍋物や煮物、漬物に使われることが多い野菜です。冬が旬で、甘みがありシャキシャキした食感が楽しめます。\n\n6. **柑橘類** - 冬はみかんやデコポン、柚子（ゆ ず）など、さまざまな柑橘類が旬を迎えます。そのまま食べたり、料理の香り付けに使ったりできます。\n\n7. **ほうとう** - 長野県や山梨県の郷 土料理で、厚切りのうどんを野菜やきのこなどと一緒に煮込んだ鍋料理です。冬場の寒い日に暖を取るのに最適です。\n\nこれらはほんの一例ですが 、冬にはこれらの食材や料理を中心にして、身体を内側から温め、季節を感じながら食事を楽しむことができます。"
      },
      "logprobs": null,
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 26,
    "completion_tokens": 751,
    "total_tokens": 777
  },
  "system_fingerprint": "xxxxxxxxxxxxx"
}

Workers AIとOpenAIでAI GATEWAYを通して結果を取得できました。

通信の分析

API GATEWAYを通して通信した内容が確認できます。CostはOpenAIのみ対応してます。

Requests: プロバイダ別のリクエスト数
Cache: キャッシュのHIT、MISSの数
Tokens: model別で使用したTokenの数
Errors: Errorになったリクエストの数

がGUIから確認できます。

リアルタイムログ

API GATEWAYを通して通信したログがリアルタイムで確認できます。

キャッシュやレートリミットの設定

キャッシュやレートリミットも簡単に設定可能です。

試しにキャッシュを有効化して試したところ、返答に10秒程度かかっていたものが1秒かからず返答されました。
※curlコマンドで計測
質問文によって返答は変わるのでキャッシュ効率はそもそも低いとは思いますが、有効にしておいて損はないと思います。
将来的には、キャッシュのヒット率を向上させるために、キャッシュにセマンティック検索を追加する予定となっているようです。

ただ、現状キャッシュのパージ方法がないのでそこは注意が必要です。

速度の計測

AI GATEWAY越しに通信すると速度が遅くなるのかと思い計測してみました。
同じ質問内容で5回計測してみました。

Workers AIは、速度に違いは見られませんでした。
ただ、キャッシュ無効にしてもキャッシュが効いてるような速度がでてしまい、あまりに速い計測結果のものは外しております。

OpenAI APIでも速度に違いは見られませんでした。
AI GATEWAYを通しても速度が遅くなるといったことはなさそうです。

Cloudflareの環境を利用できますので、CloudflareのDDoS防御やWAF、Bot管理などのセキュリティ製品と組み合わせられます。
そのため、セキュリティの高いWEBアプリケーションの構築が可能です。

他社の製品で上記のようなセキュリティ製品を組み合わせて構築することも可能ですが、運用の手間が増えたり、管理が複雑になりがちです。
Cloudflareなら一つのアプリケーションで管理することが可能になります。

今回はCloudflareのWorkers AIとAI GATEWAYの検証をしてみました。
個人的な感想としては日本語で質問するよりも英語で質問したほうが精度が高い回答が返ってきたような気がします。
また現在はベータ版なので制限があったり、返答がまだ英語でしか返せなかったりなどありますが、Cloudflareにて急速に更新をしている機能のようなので今後の進化が楽しみです。

アクセリア自社CDNの開発と運用は、20年以上にわたります。それらの経験とノウハウを駆使したプロフェッショナルサポートをパッケージしたサービスが、［Solution CDN］です。
移行支援によるスムーズな導入とともに、お客様の運用負担を最小限に​とどめながら、WEBサイトのパフォーマンスとセキュリティを最大限に高めます。運用サポートはフルアウトソーシングからミニマムサポートまで、ご要望に合わせてご提供します。

Cloudflare（クラウドフレア）の導入や運用について、またそれ以外のことでもなにか気になることがございましたらお気軽にご相談下さい。