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

LLMに興味があり、Cloudflare Workers AIを使ってAPIを作る方法について説明されています。まず、Honoを使ってAPIプロジェクトを作成し、Workers AIをセットアップします。また、Aiクラスを利用してLLMの生成結果を受け取り、ローカルでWorkers AIを利用する場合は–remoteフラグを追加する必要があります。最後に、curlコマンドでAPIを呼び出す例が示されています。LLMアプリの開発にはStream形式でのレスポンスを作る方法が重要であり、HonoのStreamでレスポンスを返すAPIが利用できます。

広告ここから
広告ここまで

目次

    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/[email protected]" has unmet peer dependency "typescript@>= 4.3".
    [4/4] 🔨  Building fresh packages...
    
    success Installed "[email protected]" 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を触る前に、こちらも触ってみると良いかなと思います。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark