😊

Cloudflare Workers AIを利用したLLM

2024/02/17に公開

Cloudflare Workers AI

tech

Cloudflare、wrangler実行環境は揃っているものとします

Cloudflare Workers AIを使う

まず開発を行うディレクトリ配下でCloudflareの環境を作成します

cloudflareのコマンドを利用して、新規Wokersを作成します

$ npm create cloudflare@latest cloudflare-ai

次の用に選択してください。

Need to install the following packages:
create-cloudflare@2.12.0
Ok to proceed? (y) y

using create-cloudflare version 2.12.0

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./cloudflare-ai
│
├ What type of application do you want to create?
│ type "Hello World" Worker
│
├ Do you want to use TypeScript?
│ yes typescript
│
├ Copying template files
│ files copied to project directory
│
├ Updating name in `package.json`
│ updated `package.json`
│
├ Installing dependencies
│ installed via `npm install`
│
╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing @cloudflare/workers-types
│ installed via npm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Retrieving current workerd compatibility date
│ compatibility date 2024-02-08
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run deploy
│
│ Navigate to the new directory cd cloudflare-ai
│ Run the development server npm run start
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!

続いて、Cloudflare Workers AIを利用するために@cloudflare/ai
ルーティングなどに利用するhonoをインストールします。

$ cd cloudflare-ai/
$ npm install @cloudflare/ai
$ npm install hono

wrangler.tomlを開いてAIのbinding設定を最後に追加します。
もちろんVSCodeなどのEditorを使って頂いて問題有りません。

$ vim wrangler.toml

[ai]
binding = "AI"

次のコードを src/index.ts に貼り付ける

import { Ai } from '@cloudflare/ai'
import { Hono } from "hono"
const app = new Hono()

export interface Env {
  AI: any;
}

app.get('/', async (c :any) => {
    const ai = new Ai(c.env.AI)
    const { text } = c.req.query()
    if (!text) {
        return c.text("Missing text", 400);
    }
    const answer = await ai.run(
      '@cf/meta/llama-2-7b-chat-int8',
      {
        messages: [
          { role: 'user', content: text }
        ]
      }
    )
    return c.json(answer)
  },
)
export default app

コードを編集したら、以下のコマンドを利用してdeployを行います。
以下表示があるかどうか、確認してください。

Your worker has access to the following bindings:

AI:
- Name: AI

$ npx wrangler deploy
 ⛅️ wrangler 3.28.3
-------------------
Your worker has access to the following bindings:
- AI:
  - Name: AI
Total Upload: 107.36 KiB / gzip: 25.79 KiB
Uploaded cloudflare-ai (1.93 sec)
Published cloudflare-ai (3.97 sec)
  https://XxxxxX.YyyyyY.workers.dev
Current Deployment ID:

ブラウザにて以下のようなアクセスを行う

https://XxxxxX.YyyyyY.workers.dev?text=Where%20is%20Fukuoka%20located

福岡に対する答えが返ってくれば成功

UIをつけてみる

ここからCloudflare Workers AIのレスポンスを利用して、
対話的なUIをもつアプリケーションを作ります。

既に高品質なUIが提供されていますので、
yusukebeさんの以下のコードを利用させていただきます。

git clone https://github.com/yusukebe/my-first-workers-ai.git
cd my-first-workers-ai
npm install
npm run dev
npm run deploy

出来上がった環境にアクセスして、　英語で いろいろな質問をしてみてください

まるでChatGPTを利用しているようなインタラクティブに応答してくれるUIを提供してくれます。
ぜひyusukebeさんの記事も参照ください。あとぜひスターを押していきましょう。

RAGの入口であるVectorDBを利用してみる

今回Cloudflare Wokersの上で動くVectorDBを利用するために、Pineconeを利用します。
アカウント解説する必要がありますので、以下の用にアカウント作成お願いします。

以下サイトにアクセスします

https://www.pinecone.io

アカウント作成を作成します

Create Indexを選択して、Indexの作成を行います。
cloudflare-ai　という名前にしておくと、この後修正箇所が減ります。

METRIC cosine
DIMENSIONS　768にしてください

※Cloudflare AIの設定です OpenAIを利用するときは１５３６にする必要があります。

画面左のAPI KEYS を選択して、API KEYのコピーしてください。

ここまで行ったら、ターミナルに戻ります。

※latestではないことに注意ください

次のコードを src/index.ts に貼り付ける
その際に、 ※ここの部分を書き直してください※ を修正してください。
API KEYの修正と、もしIndex名を cloudflare-ai 以外にしてる場合はそちらも変更してください

import { Ai } from '@cloudflare/ai'
import { PineconeClient } from "@pinecone-database/pinecone";
import { Hono } from 'hono'
const app = new Hono()

export interface Env {
  AI: any;
  DATABASE_URL: string;
}

app.get('/', async (c :any) => {
  const ai = new Ai(c.env.AI);
  const { text } = c.req.query()
  if (!text) {
    return c.text("Missing text", 400);
  }
  const pinecone = new PineconeClient();
  await pinecone.init({
      environment: "gcp-starter",
      apiKey: 'XXXXXX' // ※ここの部分を書き直してください※
  });
  const index = pinecone.Index('cloudflare-ai'); // ※必要に応じてここの部分を書き直してください※

  const date = new Date() ;
  const dateString = (date.getTime() / 1000).toString();

  const embeddings = await ai.run('@cf/baai/bge-base-en-v1.5', { text: text })
  const vec = embeddings.data[0]
  const result = await index.upsert({
      upsertRequest: {
          vectors: [{
              id: dateString,
              values: vec,
          }]
      }
  })
  return c.text('OK');
})

app.onError((err :any, c :any) => {
  return c.text(err)
})

export default app

deployを行います

$ npx wrangler deploy

出来上がったURLに対して以下アクセスを行ってください

https://XxxxxX.YyyyyY.workers.dev?text=【任意の文字列】

値が入ればVectorDBにデータの挿入完了です。
RAGではこちらのベクトル値を検索することになります。

Cloudflare Workers AIを使う

UIをつけてみる

RAGの入口であるVectorDBを利用してみる

Discussion