娘の部活のユニフォームのタグに書いてました。

はじめに

前回の記事では、Firecrawlを使用したプログラミングをPythonで実装し、Webブラウザのコンテンツをテキストファイルに出力する方法を試してみました。

今回の記事では、Difyのワークフローを活用し、プログラミングをせずに結果を表示させる方法に挑戦します。これまでの投稿では、ローカルLLMであるOllamaをDifyに接続してチャットを試したことがありますが、ワークフローの作成は今回が初めてです。どれほど簡単に実現できるのかを検証してみます。

Difyの導入方法について

今回は、ローカルPC上で構築するDifyを利用します。
導入手順については、以下の記事で詳しく説明していますので、ぜひご覧ください。

もしご不明点がありましたら、お気軽にお問い合わせください。

Firecrawlの導入方法について

今回は、Firecrawlを使用してWebサイトのスクレイピングを行います。
APIキーの取得方法など、導入に必要な手順は以下の記事に詳しく記載していますので、ご確認ください。

不明点がございましたら、どうぞお気軽にお問い合わせください。

ワークフローを作ってみる

今回は、Difyを使ったワークフロー作成に挑戦します。
2種類のワークフローを作成し、それぞれを比較してみる予定です。

1つ目は「ナレッジを登録する方法」、2つ目は「直接Firecrawlを使ってスクレイピングする方法」です。
この記事では、まず「ナレッジを登録する方法」について、手順を追って詳しく解説します。

1.LLMの接続

はじめに、DifyにLLMを接続する必要があります。
今回は、OpenAIをLLMとして利用します。
設定手順については、以前ご紹介した以下の記事の「APIキーの設定」を参考にしてください。

2.ナレッジ作成

次に、Firecrawlを使用した「ナレッジ」を準備します。ここでいう「ナレッジ」とは、文章やコンテンツを一定のサイズで細かく分割（チャンク化）し、それをデータベースに保存したものを指します。個人的には、RAG（Retrieval-Augmented Generation）に近い仕組みではないかと考えています。処理の際には、この「ナレッジ」から必要な情報を取得してLLMに渡し、最終的に結果を出力します。

今回は、私のホームページサイト（https://www.npwitys.com）をスクレイピングしてナレッジを作成してみます。

Difyを起動してログイン後、画面上部の「ナレッジ」ボタンをクリックすると、以下のような画面が表示されます。画面左側にある「ナレッジを作成」をクリックして進めます。

すると、次のような画面が表示されるため、「ウェブサイトから同期」をクリックします。

「プロバイダーを選択する」が「Firecrawl」になっていることを確認してください。
次に、URLを入力するテキストボックスに、スクレイピング対象のURLを入力します。

画面下部にはいくつかのオプションがあります。それぞれの意味は以下の通りです。

・制約：読み込むページ数を指定します。
・最大深度：どの階層までスクレイピングするかを指定します。
・パスを除外するおよびパスのみを含める：正規表現を使用して指定します。

すべての入力が完了したら、「実行」をクリックして処理を開始します。

処理には少し時間がかかる場合もあるのですが、画面上部の「ナレッジ」をクリックすると、作成された「ナレッジ」が一覧表示されます。
タイルにカーソルを合わせると右下に「...」ボタンが表示されるので、それをクリックし、「設定」を選択することで「ナレッジ」の名前を変更できます。

さらに、タイルをクリックすると、以下のようなページの一覧が表示されます。
各ページのURLが確認できることがわかります。

一番上のURLをクリックすると、さらに文章がチャンク化されていることが確認できます。
このようにして「ナレッジ」が生成されていることがわかりました。実際に確認することで、「ナレッジ」の内容をより深く理解することができました。

これで「ナレッジ」は完成です。

3.ワークフロー作成

次はワークフローを作成します。

a)「ブロック」の追加
b)「開始ブロック」の設定
c)「知識取得ブロック」の設定
d)「LLMブロック」の設定
e)「終了ブロック」の設定

a)「ブロック」の追加

Difyの上部にある「スタジオ」をクリックしてください。
すると、左側に「最初から作成」というオプションが表示されるので、それをクリックします。

下図のようなダイアログが表示されるので、「ワークフロー」をクリックします。
次に、「アプリのアイコンと名前」の部分にワークフローの名前を入力し、最後に「作成する」ボタンをクリックしてワークフローを作成します。

以下が初期状態のワークフローです。

この「ワークフロー」に「ブロック」を追加し、それらを紐づけていく作業を行います。
最初に戸惑ったのは、画面中央の検索リストが非表示になった後に「ブロック」を追加したい場合、どのように操作すればよいかがわからなかった点です。「ブロック追加」のボタンが見当たらなかったためです。
しかし、キャンバス上で右クリックすると、以下のダイアログが表示されます。このダイアログから「ブロック」を追加することができます。

b) 「開始ブロック」の設定

今回は「ブロック」として、「LLM」「知識取得」「終了」の3つを追加します。既に「開始ブロック」は用意されているため、合計4つの「ブロック」になります。

下図はすべてのブロックを追加した状態です。とりあえず、すべてのブロックを繋げてみました。

まず、「開始ブロック」を選択すると、右側に詳細内容が表示されます。

次に、「知識取得」ブロックでは、クエリをインプットとして使用します。そのため、最初に「開始ブロック」でクエリを入力させる設定を行います。
「入力フィールド」の「+」ボタンをクリックすると、以下のダイアログが表示されます。
「短文」を選択し、「変数名」「ラベル名」「最大長」を入力してから、「保存」をクリックします。
これで、ワークフロー開始時に短文の入力が求められるようになります。

c) 「知識取得ブロック」の設定

次に、「知識取得ブロック」を設定します。ここでは、先ほど作成したFirecrawlの「ナレッジ」を接続します。
「クエリ変数」には、前の「開始ブロック」で設定した「query」を指定します。

右側の「ナレッジ」のさらに右にある「+」ボタンをクリックします。
すると、「参照する知識を選択」というダイアログが表示されるので、先ほど「ナレッジ」で作成したもの（ここでは「日本をITでよくする」）を選択し、「追加」ボタンをクリックします。

「知識取得ブロック」の出力はresultに設定されています。右側の「出力変数」の「∨」ボタンをクリックすると、出力変数の詳細情報が確認できます。

d) 「LLMブロック」の設定

次に「LLMブロック」の設定をします。
まずは、右上の「モデル」を設定します。

いくつか選択肢がありますが、最も安価なgpt-4o-miniを選ぶことにします。

次に「コンテキスト」を設定します。
コンテキストは、LLMに渡したい文章やコンテンツです。今回は、「知識取得ブロック」のアウトプット（result）をコンテキストとして使用します。ただし、コンテキストの設定は必須ではなく、変数を直接「メッセージ」（SYSTEMやUSER）に埋め込むこともできます。

次に「メッセージ」を入力します。
SYSTEMメッセージとして「あなたはとても優秀なゴーストライターです。」を設定し、USERメッセージには「次のコンテキストを基に、このホームページの概要を３つの箇条書きで回答してください。」を入力しました。
USERメッセージの最後に「コンテキスト」を登録しています。USERの右側にある「[x]」ボタンをクリックし、「コンテキスト」を選択することで登録できます。

以下は、「[x]」ボタンをクリックした際の状態です。リストに「コンテキスト」が追加されているのが確認できます。

e) 「終了ブロック」の設定

最後に、「終了ブロック」を設定します。
下図のように、「出力変数」の「+」ボタンをクリックするとテキストボックスが表示されるので、変数名と変数設定を行います。今回は、「変数名｝をanswerと設定し、「変数設定」には「LLMブロック」のtextを指定します。このtextは、LLMの回答結果を表します。

これで、「ブロック」の設定は一通り完了しました。

処理実行

それでは、処理を実行してみましょう。
右上の「▷実行」ボタンをクリックします。すると、下図のように入力を求められますので、「クエリー入力」に条件を入力します。今回は、"includePaths": ["/blog/*", "/products/*"] として、ブログや製品ページに関する情報を対象とします。設定が完了したら、「実行を開始」ボタンをクリックします。

処理が進行している様子を動画で紹介します。
「終了ブロック」に到達すると、右側の「結果」に文章が表示され、3つの箇条書きが整然と出力されていることが確認できます。

これが結果です。ん？なんかありきたりな情報ですな...
このDifyはとても優秀で、各「ブロック」の入力と出力が見れるのと、途中の「ブロック」(例えば「LLMブロック」や「知識取得ブロック」）だけで単体テストもできます。

結果を確認したところ、少し一般的な情報が出力されていることに気づきました。
Difyはとても優秀で、各「ブロック」の入力と出力が確認できるため、途中の「ブロック」(例えば「LLMブロック」や「知識取得ブロック」)の単体テストも簡単に行えます。
右側の「トレース」タブをクリックし、「LLM」を開いてみましょう。
「LLMブロック」の入力がURL*になっていることがわかります。これでは、LLMがありきたりな回答しかできないのは仕方ありません。

では、その手前の「LLMブロック」の出力を確認してみると、しっかりと出力されています。
どうやら、Difyの仕様上、情報がうまく渡せない可能性があるようです。

解決策を探るため、追加の「ブロック」を使って調べてみました。
「テンプレートブロック」がうまくいきそうだと思い、「知識取得ブロック」と「LLMブロック」の間に配置しました。

「テンプレートブロック」の入力を「知識取得」のアウトプットに設定し、
次に「LLMブロック」のインプットを「テンプレートブロック」のoutputに指定します。

再度処理を実行してみると、ホームページの内容に基づいた回答が得られました。
「LLMブロック」の「入力」も適切に渡されていることが確認できます。

今度は、ホームページの内容に即した回答がされています。「LLMブロック」の「入力」もちゃんと引き渡されているようです。

このように、デバッグを繰り返しながら「ワークフロー」を調整することで、効果的に結果を得ることができました。

おわりに

今回は、「ナレッジを登録する方法」について、Difyの操作方法を紹介しました。
「直接Firecrawlでスクレイピングする方法」については、次回の記事で説明し、両者の違いを比較してみたいと思います。

最後までご覧いただき、ありがとうございました。