# 【アプリ例】ドキュメントをアップロード→アップロードしたドキュメントに対して任意のプロンプトを実行する

このガイドでは「ドキュメントをアップロード」→「アップロードしたドキュメントに対して任意のプロンプトを実行」と繋がるアプリの作成方法を解説します。

この形式のアプリは、ユーザーがその場でアップロードしたドキュメントに対して任意のアクション(要約や加工など)を実行させたい場合など、多くのお客様が利用しています。ガイドを参考に自社に合わせた形でアレンジしてみてください。

## 全体図 <a href="#overall" id="overall"></a>

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FZixtfH18jRvnsC5fHZXM%2Fimage.png?alt=media&#x26;token=32e2c56a-5bbb-45f9-9391-89f358b10b84" alt=""><figcaption></figcaption></figure>

大まかな流れとしては下記になります。

**・ユーザーが任意のドキュメントをアップロード→アップロードしたドキュメントに対して実行したい指示を入力→結果を確認→TOPに戻る(別のドキュメントをアップロード) or 会話を終了する**

## フローの構築 <a href="#flow" id="flow"></a>

### ドキュメントをアップロードする <a href="#upload-document" id="upload-document"></a>

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FrNOGvJsJp3VSv1q5yOTx%2Fimage.png?alt=media&#x26;token=54993ce5-233a-4555-b808-d20c8509d58e" alt=""><figcaption></figcaption></figure>

ドキュメントをアップロードさせる場合、「LLMインプットノード」を使用します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FSBkKAYuM0lswOtHpDuWC%2Fimage.png?alt=media&#x26;token=ee489c17-6bb8-4590-ab62-3b7af7bd0c96" alt=""><figcaption></figcaption></figure>

LLMインプットノード内を下記の手順に沿って設定します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FsreroX8SGb5vblOpGrDg%2Fimage.png?alt=media&#x26;token=24f97d76-3b59-4ec5-a432-65f7d142db2a" alt="" width="409"><figcaption></figcaption></figure>

1. **選択タブ：**&#x30E6;ーザーにドキュメントをアップロードしてもらう場合アップロードタブを選択してください。
2. **メッセージ欄：**&#x30E6;ーザーに表示するメッセージを入力してください。
3. **応答内容を以下の変数に保存する：**&#x30A2;ップロードしたドキュメントを一時的に保管するための変数を設定します。\ <mark style="color:red;">※ここで設定できる変数は「ドキュメント変数」タイプ変数のみになります。</mark>\ <mark style="color:red;">※例では「＠DOC」の変数を利用していますが、新たに作成した任意の変数を指定しても問題ありません。任意の変数を使用する場合、変数の種類は「会話変数」「ドキュメント」を設定してください。</mark>

### 有効なインプットがない場合のエラーメッセージを表示する <a href="#error-message1" id="error-message1"></a>

LLMインプットノードでは「ドキュメントのアップロードエラー」が発生する場合があります。その場合、「有効なインプットがない場合」の分岐に進むので、その場合にエラーメッセージを表示するノードを作成します。

エンドユーザーにエラーメッセージを表示する場合「会話質問応答ノード」を使用します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FyYdj746nNy1yfADEyLvS%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-10-10%2014.21.25.png?alt=media&#x26;token=c57e4212-77ca-43a0-940a-2cf521b1eb82" alt=""><figcaption></figcaption></figure>

ユーザーに表示するメッセージを設定してください。\
この例では「有効なインプットがありません。TOPに戻ります。」と設定しています。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FvXeTqffbUqoSXdmL7Zau%2Fimage.png?alt=media&#x26;token=eaae7690-f63a-4638-b73e-985fff94b638" alt="" width="410"><figcaption></figcaption></figure>

### ドキュメントに対して実行させたいタスクの入力 <a href="#document-task" id="document-task"></a>

アップロードしたドキュメントに対して実行させたいタスクを入力をさせる場合、「会話質問応答ノード」を使用します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2F7LmkyDJ3bXLjk98AWTD7%2Fimage.png?alt=media&#x26;token=1e414293-c8c8-4585-a469-fcc6156bf06d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FLrKuxMM5zjWYOsHnfpLI%2Fimage.png?alt=media&#x26;token=59e60fb7-e686-43c3-a395-e384e8b10c53" alt=""><figcaption></figcaption></figure>

会話質問応答ノード内を下記の手順に沿って設定します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FIiOJGcUNdlcapKSEgcBD%2Fimage.png?alt=media&#x26;token=0b34b4b4-85d6-418e-a565-4c7a53068628" alt="" width="402"><figcaption></figcaption></figure>

1. **メッセージ欄：**&#x30E6;ーザーに表示するメッセージを入力してください。
2. **応答追加：**&#x30E6;ーザーに実行させたいタスクを入力する枠を作成する場合、チェックを入れてください。
3. **応答を入力してください。：**「応答追加」にチェックを入れると応答の種類を選択できます。\
   　　　　　　　　　　　テキスト入力枠を作成する場合「テキスト」を選択してください。
4. **応答内容を以下の変数に保存する：**&#x30E6;ーザーが入力した「タスク」を一時的に保管するための変数を設定します。\ <mark style="color:red;">※例では「＠QUERY」の変数を利用していますが、新たに作成した任意の変数を指定しても問題ありません。任意の変数を使用する場合、変数の種類は「会話変数」「文字列」を設定してください。</mark>

ここまでの手順で3つのノードが作成できますので、下記の手順でノードを繋いでください。

1. 「START」からドキュメントのアップロードをするためのLLMインプットノードへ矢印を繋ぐ(オレンジ色の矢印)
2. 「有効なインプットがある場合」の分岐から実行したいタスクを入力させる「質問応答ノード」に矢印を繋ぐ(赤色の矢印)
3. 「有効なインプットがない場合」の分岐から有効なインプットがないとのエラーメッセージを表示する「会話応答ノード」に矢印を繋ぐ(緑色の矢印)

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FoF04inDUN8vHrtrYcjoF%2Fimage.png?alt=media&#x26;token=ea5b1699-d548-4747-9626-3b7a0970ba87" alt=""><figcaption></figcaption></figure>

### ドキュメントに対して実行させたいタスクの実行 <a href="#run-llm" id="run-llm"></a>

アップロードしたドキュメントに対してタスクを実行する場合、「LLMノード」を使用します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FHRz8quKeIfwQ6N3lNHAT%2Fimage.png?alt=media&#x26;token=c6ba9ba9-a540-4edc-ab22-0e2ab8039d54" alt=""><figcaption></figcaption></figure>

まずはプロンプトを設定していきます。

LLMノード内にあるプロンプトの右横にある下記マークをクリックしてプロジェクト設定＞プロンプト管理画面に移動します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2F8SgXvSGmxOBxkhzLnSpF%2Fimage.png?alt=media&#x26;token=c884dc52-5687-4bc5-b92c-2c1cdda4418c" alt=""><figcaption></figcaption></figure>

クリックした四角いマークでブラウザの別タブが開きますので、プロジェクト設定＞プロンプト管理メニュー内のシングルプロンプトタブ＞「プロンプトを追加」ボタンから新規でプロンプトを作成していきます。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FnNQHWY0UVTpqvE6Qr0AE%2Fimage.png?alt=media&#x26;token=8749e728-0a98-4ea8-93cf-5de6eec87143" alt=""><figcaption></figcaption></figure>

プロンプト内は以下のように設定してください。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2Fa9kMiFGqInbz2ZQNocOw%2Fimage.png?alt=media&#x26;token=36ac41fb-bd7c-45f7-8686-d08f5d0c2e53" alt=""><figcaption></figcaption></figure>

* **プロンプト名：**&#x30A2;ップロードしたドキュメントに対して任意のプロンプトを実行する
* **説明：**&#x30A2;ップロードしたドキュメントに対して任意のプロンプトを実行する
* **プロンプト内容(システム)**<mark style="color:red;">※コピーして貼り付けてください※</mark>**：**\
  以下の"ドキュメント情報"に対して"指示"を実行してください。
* **プロンプト内容(ユーザー)**<mark style="color:red;">※コピーして貼り付けてください※</mark>**：**\
  \#指示
  \
  {指示}

  \#ドキュメント情報
  \
  {ドキュメント情報}
* **動的インプット：**

  * **項目：**&#x6307;示　入力値：＠QUERY

  <figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FWe8lZlqrku8yYtIbp1VS%2Fimage.png?alt=media&#x26;token=e5d3f0a4-8b85-4e82-8ee0-0654040cee78" alt="" width="549"><figcaption></figcaption></figure>

  * **項目：**&#x30C9;キュメント情報　入力値：@DOC

  <figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FNCJ8wW4QS0uguIY4JkkS%2Fimage.png?alt=media&#x26;token=20fcefe4-80ad-4a89-a87a-92042af980d5" alt="" width="552"><figcaption></figcaption></figure>

{% hint style="success" %}
動的インプットはプロンプトを実行する際にフロー上でユーザーに入力やアップロードさせた情報などをプロンプトに含める時に利用します。\
動的インプットを追加する時はドキュメント情報やユーザー入力の情報を保存している変数を指定してください。\
動的インプットを追加するとプロンプト入力枠の左下にチップ形式で表示されますので、チップをクリックしてプロンプト内に挿入してください。プロンプト内に挿入された動的インプットは青色で表示されます。

※動的インプットの登録については下記の動画もご参考ください。\
<https://docs.allganize.ai/alli-llm-app-market_video/video-contents/conversation-1-1>

今回のプロンプトでは「プロンプト内容(ユーザー)」に”指示”と”ドキュメント情報”を含めています。
{% endhint %}

動的インプットの追加が完了したら、プロンプトユーザーの{指示}・{ドキュメント情報}が青く活性化していることを確認し「適用」ボタンをクリックしてください。

**～　ブラウザのアプリ編集画面タブに戻ってください　～**

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2F1r51wKIvMQLBdGANtZnq%2Fimage.png?alt=media&#x26;token=371d90c3-b3a2-461f-ae95-50304fcfe052" alt=""><figcaption></figcaption></figure>

アプリ編集画面タブに戻ったら、追加したプロンプトを表示させるためにF5キーをクリックまたはブラウザリロードボタンをクリックして画面を更新し、LLMノードを下記の通り設定します。

<div align="left"><figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2Fnk5UggidKJOhrXSLRHIx%2Fimage.png?alt=media&#x26;token=28022dd8-25a0-4fe5-8311-ca70d7e57cee" alt=""><figcaption></figcaption></figure> <figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FqlQioPzCM1GpugM7dgr7%2Fimage.png?alt=media&#x26;token=ca9500b1-97d6-45ee-bc8e-57e255db5e75" alt=""><figcaption></figcaption></figure></div>

1. **実行するタイプを選択してください。：**&#x30B7;ングルプロンプトを選択してください。
2. **ベースモデル：プロンプトを実行するためのモデルを選択してください。**
3. **プロンプト：**&#x30A2;ップロードしたドキュメントに対して任意のプロンプトを実行する
4. **長いインプットの処理方法を選択：**&#x30A4;ンプットを切り分けずに処理(トークン制限に達するまで)
5. **生成された結果でメンバーに回答：**&#x30C1;ェックを入れる

設定が完了したら「更新」ボタンをクリックします。

ここまで作成が完了したら下記の手順でノードを繋いでください。

1. 「質問応答ノード」からドキュメントに対して任意のプロンプトを実行するためのLLMノードへ矢印を繋ぐ(赤色の矢印)

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FC1R2gvDlCCAqRFMPG1Zl%2Fimage.png?alt=media&#x26;token=12081097-7bf3-43f7-82f5-287c105a3e71" alt=""><figcaption></figcaption></figure>

### TOPのカテゴリー選択に戻る or 会話を終了するボタンを作成する <a href="#button-option-branches" id="button-option-branches"></a>

回答が得られた場合、TOPのカテゴリー選択に戻る or 会話を終了するボタンを作成します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FSNzsxPhkijM7KZlGxRlj%2Fimage.png?alt=media&#x26;token=f5416bfe-f69f-483b-ac04-7942ae064dfd" alt=""><figcaption></figcaption></figure>

ボタンを作成する場合、「会話・質問応答ノード」を使用します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2F1UbGz5MUd59hOfC3sAI9%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-10-10%2014.21.25.png?alt=media&#x26;token=6dff1b58-3f3c-4f15-a942-2fe0eae4b4ce" alt=""><figcaption></figcaption></figure>

会話・質問応答ノード内を下記の手順に沿って設定します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FKIEa2qtTM2kJXTWym23I%2Fimage.png?alt=media&#x26;token=f724545b-af59-4d86-bdc6-9f96f078e33f" alt=""><figcaption></figcaption></figure>

1. **メッセージ欄：**&#x30E6;ーザーに表示するメッセージを入力してください
2. **応答追加：**&#x30E6;ーザーに選択させるボタンなどを作成する場合、チェックを入れてください。
3. **応答を入力してください。：**「応答追加」にチェックを入れると応答の種類を選択できます。\
   　　　　　　　　　　　ボタンを作成する場合「ボタン」を選択してください。
4. **オプションを追加：**&#x30E6;ーザーにボタンを表示する際のボタン名を設定できます。

オプションを追加ボタンを押すとオプションタイプを選択する画面が表示されますので「一般」をクリックしてください。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FGJL1IZn0xSqBCmM42UbH%2Fimage.png?alt=media&#x26;token=0057046b-f86f-4dba-a671-56f0623d2956" alt="" width="563"><figcaption></figcaption></figure>

クリック後、ボタン名を設定できる画面に遷移しますので、回答オプションにボタン名を入力し、適用ボタンを押してください。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FTz6LkemnDqENvZ0Gdrw6%2Fimage.png?alt=media&#x26;token=f12ea640-122f-4c50-afa4-321d4a47f575" alt="" width="548"><figcaption></figcaption></figure>

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FytJU5OFgpoDTqTrq6MlT%2Fimage.png?alt=media&#x26;token=804ceaac-bb78-4dd1-908e-896398234e73" alt=""><figcaption></figcaption></figure>

今回のフローでは「TOPに戻る」「会話を終了する」の2つのボタンを用意しますので４.を繰り返して「会話を終了する」ボタンも作成してください。

ここまで作成が完了したら下記の手順でノードを繋いでください。

1. LLM実行ノードの「成功しました」の分岐から「TOPのカテゴリー選択に戻る or 会話を終了するボタン」のある質問応答ノードへ矢印を繋ぐ
2. 質問応答ノードの「TOPに戻る」のボタンから最初の「LLMインプットノード」に矢印を繋ぐ(青色の矢印)

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FKDpjgRojfpx1AUhI06SE%2Fimage.png?alt=media&#x26;token=647b915f-5a3d-43df-a1a7-a9b106f169ba" alt=""><figcaption></figcaption></figure>

### プロンプト実行中にエラーが発生した場合のエラーメッセージを表示する <a href="#error-message2" id="error-message2"></a>

LLM実行ノードでは「実行エラー」が発生する場合があります。その場合、「プロンプト実行中にエラーが発生した場合」の分岐に進むので、その場合にエラーメッセージを表示するノードを作成します。

エンドユーザーにエラーメッセージを表示する場合「会話質問応答ノード」を使用します。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FyYdj746nNy1yfADEyLvS%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-10-10%2014.21.25.png?alt=media&#x26;token=c57e4212-77ca-43a0-940a-2cf521b1eb82" alt=""><figcaption></figcaption></figure>

ユーザーに表示するメッセージを設定してください。\
この例では「エラーが発生しました。もう一度最初からやり直してください。」と設定しています。

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2FRPsc1Seo97Omd8ImMW1s%2Fimage.png?alt=media&#x26;token=6cf45c6d-c7c0-4312-a82c-1b7db02bec6c" alt=""><figcaption></figcaption></figure>

ここまで作成が完了したら下記の手順でノードを繋いでください。

1. LLM実行ノードの「プロンプト実行中にエラーが発生した場合」の分岐からエラーメッセージの会話応答ノードへ矢印を繋ぐ(緑色の矢印)
2. エラーメッセージを表示する「会話応答ノード」からTOPのドキュメントをアップロードをする「LLMインプットノード」へ矢印を繋ぐ(赤色の矢印)

<figure><img src="https://3244404108-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR2CRA2CisD1pVQUgqd1g%2Fuploads%2F2R702alWZY3Nw5YcUEWg%2Fimage.png?alt=media&#x26;token=c2fd2127-4694-4725-ac0f-d7b13d125d11" alt=""><figcaption></figcaption></figure>

以上でアプリは完成です。