Zenn
CureApp テックブログPublicationへの投稿
🔥

Firebase Genkit入門

yukinagae
2024/07/23に公開
Firebase
TypeScript
OpenAI
生成 AI
Genkit
tech

Firebase Genkit は、開発者がAI搭載のアプリケーションを作成するのを支援するオープンソースフレームワークです。

このチュートリアルでは、Firebase Genkitの基本原理を探り、開発プロセスをどのように向上させるかを説明します。

備考: 以下英語記事の翻訳版なので、日本語として言い回し変なところあるかもですが、ご了承ください(´・ω・｀)汗

https://medium.com/@yukinagae/your-first-guide-to-getting-started-with-firebase-genkit-6948d88e8a92

急いでいる人のためのクイックスタート

詳細を読むことなくFirebase Genkitをすぐに始めたい方のために、 genkit-sample プロジェクトをご用意しました。

https://github.com/yukinagae/genkit-sample

このサンプルプロジェクトは、Firebase Genkitの動作を最も迅速に体験するための方法です。以下の手順に従って、すぐに使い始めましょう。

リポジトリのクローン：まず、 genkit-sample リポジトリをローカルマシンにクローンします。

$ git clone https://github.com/yukinagae/genkit-sample.git

依存関係のインストール：クローンしたディレクトリに移動し、必要な依存関係をインストールします。

$ cd genkit-sample
$ npm install

APIキーの設定：Firebase Genkitと連携するためには、OPENAI_API_KEY 環境変数を設定する必要があります。このキーにより、アプリケーションはOpenAIのサービスと通信できます。

$ export OPENAI_API_KEY=your_api_key

プロジェクトの起動：APIキーを設定したら、Genkitサーバーを起動します。

$ npm run genkit

このコマンドはプロジェクトを起動し、デフォルトのWebブラウザで http://localhost:4000 を開きます。
これで、Firebase Genkitを詳細を読み込むことなく体験できる簡単な方法が提供されました。

Firebase Genkitの探求を始めるための初心者ガイド

Firebase Genkitを初めて使う方のために、基本的な設定方法や機能を紹介します。

1. Genkitの設定

まず、Genkitの設定を行います。

import { configureGenkit } from "@genkit-ai/core";
import { gpt4o, openAI } from "genkitx-openai";

configureGenkit({
  // 提供されたAPIキーを使用してOpenAIプラグインを使用します。
  // 実行前にOPENAI_API_KEY環境変数が設定されていることを確認します。
  plugins: [openAI({ apiKey: process.env.OPENAI_API_KEY })],
  // コンソールにデバッグ出力をログ記録します。
  logLevel: "debug",
  // OpenTelemetryの計測とトレース収集を有効にします。
  enableTracingAndMetrics: true,
});

サンプルプロジェクトでは、OpenAIモデルを活用して動的にコンテンツを生成します。

注: 上記のコードスニペットでは OPENAI_API_KEY 環境変数が明示的に設定されていますが、OpenAIモデルは OPENAI_API_KEY 環境変数を暗黙的に認識するように設計されています。

// 暗黙的な使用
plugins: [openAI()],

// 明示的な使用
plugins: [openAI({ apiKey: process.env.OPENAI_API_KEY })],

2. 最初のFlowの作成

「Flow」とは、アプリが何かを行うためのステップのことです。ここでは、簡単なFlowを設定する方法を紹介します。

import { defineFlow } from "@genkit-ai/flow";
import { generate } from "@genkit-ai/ai";
import { gpt4o, openAI } from "genkitx-openai";

export const summarizeFlow = defineFlow(
  {
    name: "summarizeFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (content: string) => {
    const llmResponse = await generate({
      prompt: `Summarize the ${content} within 20 words.`,
      model: gpt4o, // 使用するモデルを指定
      tools: [],
      config: {
        temperature: 1, // 応答の創造性/変動性を設定
      },
    });

    return llmResponse.text();
  }
);

注: Firebase Genkit - Get started に従うと、コードの最後に startFlowsServer(); を呼び出す必要があるとされていますが、なぜかGenkitサーバーの起動はこの呼び出しがなくても正常に動作します。

3. Genkitサーバーの起動

最初のFlowが準備できたら、それを実際に動かしてみましょう。Genkitサーバーを起動するための手順を案内します。

Firebase Genkitを起動してそのグラフィカルユーザーインターフェースを探索するには、ターミナルで以下のコマンドを実行します。

$ genkit start -o
# または
$ npm run genkit

Genkit GUI - first screen

コマンドを実行した後、Webブラウザで http://localhost:4000 にアクセスして、Firebase GenkitのGUIを操作します。

注: Error: please pass in the API key or set the OPENAI_API_KEY environment variable というエラーメッセージが表示された場合、OPENAI_API_KEY が正しく設定されていないことを示しています。

4. Flowの実行

ガイドの左サイドバーでFlowセクションを見つけて、summarizeFlow Flowを選択します。

Genkit GUI - input flow

次のプロンプトをProvide input (JSON):に入力します。

"Haiku is a type of poetry unique to Japan that expresses natural aesthetics and human emotions in a limited number of characters. The poems typically comprise 17 on (phonetic units similar to syllables) in lines of five, seven and five (5-7-5) syllables. The basic rule is to include only one word to express the season, called a “kigo,” among the seventeen syllables. The kigo are categorized as spring, summer, fall, winter and new year words, and people usually reference a book called the Saijiki, which lists such kigo like a dictionary, when composing haiku."

（Matsuo Basho: The Unparalleled Haiku Poet から引用）

プロンプトを入力したら、Runボタンをクリックします。次のような出力が表示されます。

Haiku, a Japanese poetry form, expresses nature and emotions in 17 syllables (5-7-5) and includes a seasonal word (kigo).

Genkit GUI - flow result

おめでとうございます！セットアップが正しく構成され、正常に動作しています。

5. Flowにさらに機能を追加する

基本的なFlowに慣れてきたら、さらに機能を追加してみましょう。新しいステップや「ツール」を追加して、アプリをより興味深いものにすることができます。

次のステップでは、新しいツールwebLoaderを定義します。このツールは、Webコンテンツを取得する役割を果たします。これは、URLを入力として受け取り、ウェブページのテキストコンテンツを返すステートレスな関数です。

import * as z from "zod";

import { defineTool, generate } from "@genkit-ai/ai";

const webLoader = defineTool(
  {
    name: "webLoader",
    description: "Loads a webpage and returns the textual content.",
    inputSchema: z.object({ url: z.string() }),
    outputSchema: z.string(),
  },
  async ({ url }) => {
    // 提供されたURLからコンテンツを取得
    const res = await fetch(url);
    const html = await res.text();
    // HTMLコンテンツをCheerioにロードして解析
    const $ = cheerio.load(html);

    // 不要な要素を削除
    $("script, style, noscript").remove();

    // 'article'コンテンツを優先し、利用できない場合は'body'を使用
    return $("article").length ? $("article").text() : $("body").text();
  }
);

webLoaderツールを定義した後、既存のFlow summarizeFlowに組み込みます。このFlowは、URL入力に基づいてコンテンツを取得し要約するためにwebLoaderを利用します。

import { defineFlow } from "@genkit-ai/flow";
import { generate } from "@genkit-ai/ai";
import { gpt4o, openAI } from "genkitx-openai";

export const summarizeFlow = defineFlow(
  {
    name: "summarizeFlow",
    inputSchema: z.string(),
    outputSchema: z.string(),
  },
  async (url: string) => {
    const llmResponse = await generate({
      prompt: `First, fetch this link: "${url}". Then, summarize the content within 20 words.`,
      model: gpt4o, // 使用するモデルを指定
      tools: [webLoader], // 先に定義したwebLoaderツールを含む
      config: {
        temperature: 1, // 応答の創造性/変動性を設定
      },
    });

    return llmResponse.text();
  }
);

6. 強化されたFlowの実行

Flowに新機能を追加した後、その機能をテストすることが重要です。Genkitサーバーを再起動するか、すでに実行中の場合はブラウザをリフレッシュしてください。

リフレッシュ後、左サイドバーにwebLoaderツールが表示されるのがわかります。このツールをクリックすると、その入力ページに移動し、Genkit GUIの優れた機能の一つである各ツールの個別実行とテストが可能になります。

Genkit GUI - input flow with tools

無効なURLでテスト：

{
  "url": "https://not-found"
}

Genkit GUI - input tool

予想通り、エラーが発生します。

TRPCClientError: fetch failed
    at n.from (http://localhost:4000/main-ZS4I5FPL.js:17:525025)
    at http://localhost:4000/main-ZS4I5FPL.js:17:529028
    at u.invoke (http://localhost:4000/polyfills-QXL6O4PO.js:16:6385)
    at Object.onInvoke (http://localhost:4000/chunk-HQANKQXH.js:22:79656)
    at u.invoke (http://localhost:4000/polyfills-QXL6O4PO.js:16:6325)
    at Y.run (http://localhost:4000/polyfills-QXL6O4PO.js:16:1715)
    at http://localhost:4000/polyfills-QXL6O4PO.js:17:554
    at u.invokeTask (http://localhost:4000/polyfills-QXL6O4PO.js:16:7010)
    at Object.onInvokeTask (http://localhost:4000/chunk-HQANKQXH.js:22:79472)
    at u.invokeTask (http://localhost:4000/polyfills-QXL6O4PO.js:16:6931)

一方、有効なURLを使用した場合：

{
  "url": "https://en.wikipedia.org/wiki/Haiku"
}

この場合、ツールは正常にコンテンツを取得し、Webデータの取得と処理の機能を実証します。

"Jump to content\n\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\n\t\n\t\n\nMain menu\n\t\n\t\n\n\n\t\t\t\t\n\t\t\n\n\t\n\tMain menu\n\tmove to sidebar\n\thide\n\n\n\t\n\n\t\n\t\tNavigation\n\t\n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\tMain pageContentsCurrent eventsRandom articleAbout WikipediaContact usDonate\n\t\t\n\t\t\n\t\n\n\n\t\n\t\n\n\t\n\t\tContribute\n\t\n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\tHelpLearn to editCommunity portalRecent changesUpload

Flowの効果をさらに検証するため、summarizeFlowに直接URLを入力してみましょう。

"https://en.wikipedia.org/wiki/Haiku"

結果は簡潔で有益な要約であり、Flowの情報を凝縮する能力を示しています。

Haiku is a traditional Japanese poetic form consisting of three lines with a 5-7-5 syllable structure, often evoking nature.

Genkit GUI - result flow with tool

最後に、入力がどのように処理されたかの詳細を知るために、ヘッダーのInspectセクションをクリックします。トレースでは、Flowがコンテンツを取得するためにwebLoaderツールを使用していることが示され、Flowの実行ステップが表示されます。

Genkit GUI - inspect flow

基本的な使い方を理解したので、さらにFlowやツールを探索してみましょう。実践的な開始点として、 genkit-sample をチェックして、Firebase Genkitを学習目的で実行することをお勧めします。

https://github.com/yukinagae/genkit-sample

楽しんでください！

CureApp テックブログ
CureApp テックブログPublication

株式会社CureAppのテックブログです。 採用情報：cureapp.co.jp/recruit.html

Discussion