【Dify】Lesson2-3：チャットフローアプリの基本｜文字抽出アプリを作ろう

今回はDifyの「チャットフローアプリ」を使って、画像をアップロードすると中の文字を抽出（OCR）して返してくれるアプリを作ります。

チャットフローは、ここまで体験してきたチャットボット、テキストジェネレーター、エージェントアプリとは少し作り方が異なります。

“部品をつないで会話の流れを作る” イメージで、会話の中に「処理の手順」や「条件分岐」を組み込んで、意図した流れで確実に動かせるのが強みです。

勉強猫

チャットボット、テキストジェネレーター、エージェントの３つは初心者向けの勉強用アプリと思っていいかな。

いよいよここからDifyの真骨頂に触れていくよ！

<<前のページ

Difyの記事一覧

次のページ>>

Difyでチャットフローアプリを開発しよう

ここからは、Difyの「チャットフローアプリ」がどんな場面で役立つのか、そして中身がどんな仕組みで動いているのかを押さえていきます。

仕組みを先に理解しておくと、このあと作る「画像から文字を抽出する（OCR）アプリ」も、迷子にならずに組み立てられるようになります。

チャットフローアプリとは｜できること・活用例

チャットフローアプリは、見た目はチャット形式ですが、裏側は「会話の流れに沿って処理を順番に進める」ように設計できるアプリタイプです。

チャットボットのように自然な会話を続けることもできますが、それ以上に強いのは「この入力が来たらこうする」「条件に合わないときは別の返答をする」といった、手順をコントロールできる点です。

たとえば、次のような “業務っぽい処理” と相性がいいです。

つまりチャットフローは、「会話」＋「処理手順」を組み合わせて、再現性の高いアプリを作りたいときに便利です。

副業でミニアプリを作る場合も、テンプレ化しやすいので扱いやすいジャンルです。

チャットフローの基本構造：ノードの流れと変数の考え方

チャットフローは、ざっくり言うと「ノード（部品）」を線でつないで、処理の流れを作っていく仕組みです。

各ノードには役割があり、入力を受け取る、AIに考えさせる、条件分岐する、結果をユーザーに返す…といった動きを担当します。

基本の流れは、次のイメージです。

このとき大事なのが、「フローの途中で扱う情報は変数として保持できる」点です。

たとえば「ユーザーが送った画像」「抽出されたテキスト」「エラー時のメッセージ」などを変数として持っておき、後続のノードで使い回せます。

これができると、処理の見通しが一気によくなります。

画像から文字を抽出するOCRアプリを作ろう

それではアプリ開発に入ります。

アプリの骨格部分を作ろう

アプリタイプはチャットフローを選択し、名前は「画像OCRアプリ」として「作成する」をクリックしてください。

すると画面に以下のように表示されます。

「ユーザー入力」「LLM」「回答」という３つの ノード がデフォルトで設定されています。

ノードは左から順番に実行されます。つまり現状のこのアプリは、

という順番で動きます。これに手を加えていきましょう。

今回はユーザー入力には手を加えませんので、LLMを選択して画面右上（「公開する」の隣）の「機能」をクリックし、以下のように作業してください。

続いてプロンプトを設定しましょう。

LLMを選択した状態で「SYSTEM」の部分に書き込んでください。

# 役割
あなたは画像から文字情報を抽出する専門家です。

# 命令
- 画像に含まれる文字情報を抽出してください。
- 抽出した文字を分かりやすく整形してください。
- ユーザーからの質問には回答しないでください。

その後、メモリはオフ、ビジョンはオンにしましょう。

「LLM」ノードの設定はこれで完了です。

続いて「回答」ノードですが、今回はこちらもデフォルトのままでOKです。

応答の部分に「LLM {x}text」という変数が入っていれば、LLMが生成したテキストがここで「回答」として表示されます。

それでは、アプリを公開して実行してみましょう。

なにか適当な画像（例えば↑↑の画像）などを読み込ませ、「実行」とだけ指示してください。

勉強猫

次に進む前に、ちょっと弄ってみよう！

Lesson1-3 で勉強した「オープナー」を入れてみたり、
回答ノードの「応答」欄にデフォルトの変数以外の文章を入れるとどうなるかな？

条件分岐｜IF/ELSEノードを設定しよう

このアプリを、画像をアップロードせずに実行するとどうなるでしょう？

答えは「LLMがその状況を考え、回答する」です。画像のアップロードを促すことが多いと思われますが、毎回一から考えて決めるため確実ではありません。

そこで、「IF/ELSE」ノードを使って画像が無かった場合の処理を決めてしまいましょう。

IF/ELSEはPythonなどのプログラミング言語でよく使われる条件分岐の手法で、「もし〇〇なら××しろ。もしそうでないなら△△しろ」といった命令に使われます。

↓↓のコードは「もしaの値が0なら『こんにちは』と表示しろ。違うなら『さようなら』と表示しろ」という意味のPythonコードです。

if a==0:
  print("こんにちは")
else:
  print("さようなら")

Difyではこれと同じことをコードを書かずに実行することができます。

LLMと回答を繋ぐ線にカーソルを合わせると「＋」マークが見えます。それをクリックし、「IF/ELSE」ノードを選択してください。

するとLLMノードの後ろにノードが追加されます。

続いてIF/ELSEノードの設定画面で以下の手順で設定してください。

1. 「条件を追加」をクリック
2. ユーザー入力の「{x}files」をクリック

• 変数filesは、最初の「ユーザー入力」ノードでアップロードされたファイルが格納されている

3. {x}filesの右側の「含む」を「空でない」に変更

• これで「もしアップロードされたファイルが空でないなら～」という条件が完成

IF/ELSEノードと回答ノードとの繋がりは切れますので、IFの横の「＋」マークをドラッグし、回答ノードに繋ぎましょう（もしアップロードされたファイルがあるなら、回答する）。

続いて、「ファイルがない」場合の処理を追加します。

IF/ELSEノードのELSEの右の「＋」マークをクリックし、「回答」ノードを追加してください。

最後に、「回答2」ノードの設定画面から「画像ファイルがみつかりません。」と入力すれば完成です。

実際にアプリを公開し、画像をアップロードせずに実行してみましょう。

まとめ

今回は、Difyのチャットフローアプリの基本として、画像を受け取って文字を抽出する（OCR）アプリを作成しました。

チャットフローは見た目こそチャット形式ですが、裏側は「入力 → 処理 → 出力」の流れをノードで組み立てられるのが強みです。

この構成が作れたなら、応用も簡単です。

今回は説明していない様々なノードを組み合わせることで、複雑なアプリも簡単に作れるようになります。

ぜひ、このまま学習を続けてください。

<<前のページ

Difyの記事一覧

次のページ>>