Cloudflare Workers AI 使ってみた
「Cloudflare Workers AI」といって、Cloudflare Workers 内で色んな AI を呼び出せるようなので使ってみた。
まずは wrangler.jsonc に ai バインディングを追加する。D1 SQLite Database のように Cloudflare のウェブ管理画面でのバインディングなどは必要なく、ただ以下のように設定ファイルに書けば良いだけ。
wrangler.jsonc
{
"$schema": "node_modules/wrangler/config-schema.json",
"ai": {
"binding": "AI"
}
}
コレを書くと、Hono で実装している場合 context.env.AI で利用できるようになる。
context.env.AI.run() でモデル名とプロンプトを指定すればレスポンスが得られる。以下は Llama のモデル llama-3.3-70b-instruct-fp8-fast を呼び出している例。
server/app.ts
import { Hono } from 'hono';
// TypeScript 向けの型定義
type HonoBindings = { AI: Ai; };
const app = new Hono<{ Bindings: HonoBindings; }>();
app.post('/', async context => {
try {
const body = await context.req.json().catch(() => null);
const messages = [{
role: 'user',
content: body.prompt // ← 任意の質問文など
}];
const result = await context.env.AI.run('@cf/meta/llama-3.3-70b-instruct-fp8-fast', { messages });
return context.json({ result }, 200);
}
catch(error) {
return context.json({ error }, 500);
}
});
export default app;
フロントエンドから呼び出すならこんな感じ。React に ky という Fetch API のラッパーライブラリを使っているが、大体読み取れるかと。
client/ai.tsx
import ky from 'ky';
import { useState, type ReactElement, type SubmitEvent } from 'react';
export default function AiPage(): ReactElement {
const [prompt, setPrompt] = useState<string>(''); // 入力欄のテイ
const [answer, setAnswer] = useState<string>(''); // 回答を表示する欄のテイ
const onSubmit = async (event: SubmitEvent<HTMLFormElement>): Promise<void> => {
event.preventDefault();
try {
const result = await ky.post(`/ai`, {
json: { prompt }
}).json<{ result: { response: string; }; }>();
setAnswer(result.result.response); // 実際の回答文だけを表示するテイ・その他に `usage` (トークン使用量) などが返されている
}
catch(error) {
console.error(error);
}
};
return (
<form onSubmit={onSubmit}>
<textarea value={prompt} onChange={event => setPrompt(event.target.value)} />
<button type="submit">送信する</button>
{answer !== '' && (<p>{answer}</p>)}
</form>
);
}
コレだけで OK。Cloudflare の管理画面で予め何か AI サービスを利用するような設定も要らないし、Cloudflare アカウントにクレジットカードを登録していない無料枠ユーザでも、無料枠内であれば利用できる。
レスポンスは今回 Streaming にしていないものの、数秒以内に回答が得られるので、ChatGPT や Gemini をブラウザで使う程度の感覚で問題なく使えると思う。
利用可能な LLM のモデルも豊富にあり、好きなモノを選べる。今回は対話形式のいわゆる「テキスト生成」モデルを使っているが、画像や音声も取り扱えるモデルもあるようだ。
無料枠としては、1日あたり10,000ニューロン利用可能。この「ニューロン」というのは LLM における「トークン」を抽象化した独自の単位らしく、単発の簡単な質問だと1回の質問・応答で大体100ニューロンくらいを消費した。なので、無料枠内では1日に大体100回くらいのチャットとして利用できそうな感覚。
- 参考 : Pricing - Cloudflare Workers AI docs
- 無料枠の上限に達したらエラー扱いとなる
- クレカを登録して Workers Paid プランを設定すると、無料枠を超えた部分について従量課金が始まる。予算アラートや AI Gateway による流量制限といった機能はあるが、「予算に到達したら絶対に実行させない」というようなハードキャップ機能はないので、必要であれば使用量を D1 や KV に記録しておいて制限をかけるロジックを独自実装することになる
というワケで、Cloudflare Workers にデプロイしているアプリ内のいち機能として、「投稿時にユーザの文章を添削して何らかの処理を行う」とか、Workers で使える Cron Triggers 機能と組み合わせて定時で行うバッチ処理内で利用したり、といった活用方法が考えられる。クレカ登録していないユーザでも無料枠内で気軽に使えるのでオススメ。
