HonoとWranglerを使って、ローカルでCloudflare Workers AIを試す

LLMに興味があるけど、なかなか触るタイミングを逃している感じがずっとあったのですが、Cloudflare Workers AIが出たので、ようやく触ってみました。

APIを公開すると、アクセス制限とかの設定が必要かなと思ったので、今回はローカル環境でのみ使えるAPIとして作ります。

APIをHonoで作る

まずはHonoでAPIプロジェクトを作りましょう。ディレクトリを作成しておきます。

% mkdir hono-ai
% cd hono-ai

その後、npx create-honoで作りましょう。

% npx create-hono
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "nx > @swc-node/register@1.5.1" has unmet peer dependency "typescript@>= 4.3".
[4/4] 🔨  Building fresh packages...

success Installed "create-hono@0.2.6" with binaries:
      - create-hono

create-hono version 0.2.6
? Which template do you want to use? › - Use arrow-keys. Return to submit.
    aws-lambda
    bun
    cloudflare-pages
❯   cloudflare-workers

この辺りは通常のAPI作成時と同じですね。Workers AIを手軽に扱うため、テンプレートはcloudflare-workersを選んでいます。おそらく、cloudflare-pagesでも同様に使えるとは思います。

✔ Which template do you want to use? › cloudflare-workers
cloned honojs/starter#main to /Users/development/examples/hono-ai
✔ Copied project files
✨  Done in 3.82s.

作成完了したら準備OKです。

Workers AIをセットアップする

Workers AIをHonoから使えるようにしましょう。2023/10時点では、wrangler.tomlにWorkers AIのbindingsを追加すればOKです。

name = "hono-ai-demo"
compatibility_date = "2023-01-01"

[ai]
binding = "AI" #available in your worker via env.AI

あとはAI用のクライアントライブラリも入れておきましょう。

% npm i @cloudflare/ai

TypeScriptの場合、Honoのセットアップ部分に型情報を入れましょう。2023/10時点では、利用する側のコードnew Ai()の引数もanyでしたので、ここはanyのまま進めます。

const app = new Hono<{
    Bindings: {
        // Aiクラスの型定義もanyなので、とりあえずこれでよさそう
        AI: any
    }
}>()

HonoからCloudflare Workers AIを呼び出す

準備ができたので、早速コードを書きましょう。

Aiクラスを利用し、ai.runコマンドを実行すると、LLMの生成結果を受け取れます。

import { Ai } from '@cloudflare/ai'
import { Hono } from 'hono'

const app = new Hono<{
    Bindings: {
        // Aiクラスの型定義もanyなので、とりあえずこれでよさそう
        AI: any
    }
}>()

app.get('/', async (c) => {
    const ai = new Ai(c.env.AI)
    const response = await ai.run('@cf/meta/llama-2-7b-chat-int8', {
        prompt: "Cloudflareの使い方を、日本語で教えてください。"
    })
    return c.json(response)
})

export default app

ローカルでWorkers AIを利用する場合は、—-remoteフラグを添えよう

AI系のプロダクト（Workers AI / vectoriseなど）をローカルで利用する場合は、—-remoteフラグを追加する必要があります。

% npm run dev -- --remote
$ wrangler dev src/index.ts --remote
 ⛅️ wrangler 3.13.1
-------------------
Your worker has access to the following bindings:
- AI:
  - Name: AI
⬣ Listening at http://0.0.0.0:53287
- http://127.0.0.1:53287
- http://192.168.128.9:53287
Total Upload: 113.72 KiB / gzip: 25.43 KiB

あとはcurlで呼び出せばOKです。

% curl http://127.0.0.1:53287 | jq .
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   721    0   721    0     0     77      0 --:--:--  0:00:09 --:--:--   177
{
  "response": "\n\nCloudflareは、DNS、CDN、WAF、SSL/TLS、およびOther security featuresを提供するサービスです。以下は、Cloudflareの使い方の基本的なポイントです。\n1. アカウント作成: Cloudflareには、無料のアカウントを作成することができます。作成したら、管理画面にアクセスして、設定を行うことができます。\n2. DNS設定: Cloudflareは、DNSを管理することができます。DNS設定をCloudflareに移行するには、管理画面でDNS設定を行う必要があります。\n3. CDN設定: Cloudflareは、CDNを使用して、Webサイトの負荷を分散することができます。CDN設定を行うには、"
}

簡単ですね。

LLMアプリの開発に向けて

ここをきっかけに開発を進めていく場合、避けて通れないのはStream形式でのレスポンスを作る方法かなと思います。LLMによるテキスト生成が完了するまで数秒の時間がかかりますので、それを完全に待ってからAPIレスポンスを作ると、REST APIとしては「遅いAPI」ができあがります。それを避けるために、テキストが生成される度にStreamでレスポンスを返すことで、ChatGPTがテキストを少しずつ出していくようなインタラクションが作れます。

Honoについては、Streamでレスポンスを返すためのAPIが用意されています。触ったことがない方は、OpenAI APIも含めたAI系APIを触る前に、こちらも触ってみると良いかなと思います。