TECH BLOG

✅

事前準備

Dify へのサインアップ
OpenAI APIまたはGemini APIのAPIキーの取得
- Gemini APIの場合
  1. ここにアクセスし、「APIキーを作成」を選択します。
  2. 「新しいプロジェクトでAPIキーを作成」を押します。
  3. APIキーをコピーします。
- Open AI APIの場合
  - サインアップした後、こちらからAPIキーを作成し、保存します。
APIキーのセットアップ

環境

Chrome
Dify v0.11.1（2024年11月14日時点）

概要

完成イメージ

📌

イメージ

左の「ローカルアップロード」から、名刺の画像をアップロードします。
「実行」を選択すると、右側に取得した情報が返ってきます。
入力形式は、「YYYY-MM-DD-HH:MM」です。

上記のアプリを構築するためにワークフローを作る説明をします。

💡

ワークフローとは

一つ一つの処理を小さなブロック（ノード）としてつなぎ合わせて、一連のプロレスを自動化する機能です。

今回作成するワークフローのDifyの画面です。

このワークフローは、以下のブロックで構成されます。

flowchart LR
	A[開始] --> B[LLM<br>gpt 4o-mini]
	B --> C[パラメータ抽出<br>gpt 4]
	C --> D[テンプレート]
	D --> E[終了]

開始：名刺の画像を受け取ります。
LLM：OCR機能を利用して画像内の文字情報をテキストに変換します。
パラメータ抽出：テキストを解析し、会社名、氏名、メールアドレス、親ドメインを抽出し、変数に格納します。
テンプレート：変数をもとに出力形式を整形します。
終了：結果を出力します。

作業手順

ここからは、ワークフロー構築の手順について説明します。

手順

ワークフローの新規作成
ワークフロー作成画面上での作業
ワークフローの動作確認

1. ワークフローの新規作成

最初の画面の「最初から作成」を選択します。
「ワークフロー」を選択し、「アプリのアイコンと名前」を入力してから「作成する」を選択します。

2. ワークフロー作成画面上での作業

「開始」ノードを選択します。

「入力フィールド」の「＋」ボタンを押します。

下記の表のように各項目を選択または入力した後、「保存」を選択します。

項目	値	備考
フィールドタイプ	単一ファイル	複数のファイルをアップロードすることもできます。
変数名	image	任意の値を入力します。
ラベル名	image	任意の値を入力します。
サポートされたファイルタイプ	画像	アップロードするファイルの種類を指定します。
アップロードされたファイルのタイプ	ローカルアップロード	画像をローカルからアップロードするか、画像のURLを入力するか、その両方を選べます。

「LLM」ノードを追加します。
「コンテキスト」に「開始」の「image」を選択します。
「SYSTEM」の「{x}」をクリックし、「コンテキスト」を選択します。

「モデル」を「gpt-4o-mini」に変更します。

「ビジョン」を有効にし、「{x}変数を設定」で「開始」の「image」を選択します。
「パラメータ抽出」ノードを追加します。

「入力変数」に「LLM」の「text」を選択します。

「パラメータを抽出」の「＋」ボタンを押します。

「名前」に「company」、「説明」に「会社名または所属」を入力し、「追加」を選択します。

同様に、「full_name（氏名）」「mail（メールアドレス）」「parent_domain（親ドメイン）」を追加します。下記の表を参考にしてください。

名前	タイプ	説明
full_name	String	氏名
mail	String	メールアドレス
parent_domain	String	親ドメイン

入力後は画像のようになっているか確認します。

「指示」に、以下のようなプロンプトを記述します。

会社名または所属、氏名（日本語であれば日本語）、メールアドレスを抽出してください。
また、メールアドレスから親ドメインを抽出してください。

「テンプレート」ノードを追加します。

「入力変数」の既存の値を削除します。
「＋」ボタンを押し、「{x}変数を設定」を押した後、「パラメータ抽出」の「company」を選択します。

同様に、「入力変数」に「パラメータ抽出」の「full_name」「mail」「parent_domain」を追加します。
追加後は以下の画像のようになっているか確認します。

「コード」の既存の値を削除し、「会社名：」と入力します。
その後、「/」を記述し、「パラメータ抽出」の「company」を選択します。

同様に、以下のようにプロンプトを入力します。

会社名：{{ company }}
氏名：{{ full_name }}
メールアドレス：{{ mail }}
ホームページ：{{ parent_domain }}

入力後は以下の画像のようになっているか確認します。
「終了」ノードを追加します。
「変数名」に「output」、「{x}変数を設定」に「テンプレート」の「output」を選択します。

以上でワークフローが完成しました。

3. ワークフローの動作確認

「公開する」を選択し、「アプリを実行」を選択します。

アプリを実行します。
無事に名刺から情報を取得することができました。

応用

今回は、データベースを使用せず、画像から読み取った情報を解析して表示するワークフローを作成しました。しかし、会社名などの情報は変数に格納されているため、この変数を活用してNotionのデータベースに保存することも可能です。

おわりに

今回の記事では、名刺の画像を読み取り、会社名や氏名などの情報を取得するワークフローを作成しました。今後もDifyを利用したアプリの作成手順を紹介していきます。ぜひ引き続きご覧下さい。

生成AI Dify