スマホで撮った写真内の文章に関してChatGPTに質問できる便利アプリを1時間で作ったので、作り方を公開します【UiPath Apps x DataService実践】

こんにちは、夏休みの宿題は最終日に片付ける派の @manabutech です。
夏休みの宿題はやらないくせに、ゴールデンウィーク期間中もChatGPTやらAutoGPTやら色々と自由研究していました。

スマホで撮影した写真内の文章に関してChatGPTに質問できるWebアプリを作りましたので、作り方含めて公開したいと思います。

## デモ
実際に作ったものはこちらです。
スマホで撮影した画像からAI-OCRでテキスト抽出してChatGPTに質問できるアプリなんですが、UiPathのローコード開発ツールとRPAを使うことで1時間程度で作ることができます。

<iframe width="1280" height="720" src="https://www.youtube.com/embed/xyiF6NhYyqI" title="Apps ChatGPT" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<br><br>
こちらの製品はHAAN社の既存製品にUiPathのロゴを付けたものですが、正しく読み取っていますね。
質問の仕方によって回答が変わってくるとは思いますが、あらためてOpenAIのGPTはすごいですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/d0e73bda-62ef-a0e0-6a7e-b4f5c0403614.png)


## 構成

使用するUiPath製品を超超超ざっくりと解説します。
これらは個人利用無償で使えるUiPath Community版に全て入っていますので、個人利用であれば無料で使用可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/7176d0d8-5fe0-edde-d26f-5ce6e22c1075.png)


### UiPath Studio

自動化処理を簡単に作成できるツールです。

### UiPath Orchestrator

UiPath Studioで作成した自動化処理を格納して管理するツールです。
スケジュール実行や特定のトリガーでロボットを動かすこともできます。

### UiPath Robot

自動化処理を実行するためのツールです。

### UiPath Apps

ドラッグアンドドロップで簡単にWebアプリを作ることができるローコード開発ツールです。
ボタンクリックなどのタイミングで、UiPath Studioで作成した自動化処理をOrchestrator経由でRobotに実行してもらうことができます。

### UiPath DataService

ノーコードで使えるデータモデリングツールです。
UiPath StudioやUiPath Appsで使用するデータを保存しておくことができます。

## UiPathを使用するメリット

プログラミング経験がある人はプログラムを組んでいけばよいのですが、世の中そんなハイスペックな人だけでは無いです。そんな時はRPAでサクッと作っちゃいましょう。UiPathならローコード開発ツールもあるのでUIも含めて作ることができます。

UiPathを使用するメリットは大きく分けて4つあります。

- メリット1. 簡単に作れる
- メリット2. 他の人も使用することができる
- メリット3. 情報漏洩の心配が無い
- メリット4. 保存したデータを解析できる

### メリット1. かんたんに作れる

一番のメリットは簡単に作れることです。
AI-OCRを使用して画像から文章を読み込む処理も入れていますが、これを実現するためには本来ならプログラミング経験と開発時間が必要です。しかし、UiPathであれば部品をドラッグ＆ドロップでレゴブロックのように簡単に作ることができます。

簡単に作れるということは保守もしやすいということにもつながります。会社でも作った人しかメンテナンスできないExcelマクロやPythonプログラムなどが無いですか？
誰でも理解できるということは非常に重要です。カワイイは正義！ですが、カンタンは正義でもあります！

### メリット2. 他の人も使用することができる

UiPath AppsはWebアプリを作ることができます。ブラウザがあれば動きます。
スマートフォンでも動作させることができます。使用する上で何かツールをインストールすることも無いので、他の人に共有することができます。

### メリット3. 情報漏洩の心配が無い

UiPathのGPTに質問するAskGPTという部品はUiPathがAzure上に構築した環境を利用しています。このため、OpenAIに質問内容が送信され、再学習に利用される心配はありません。

### メリット4. 保存したデータを解析できる

会社としてChatGPTを使う場合は、共通のAPIを会社で管理する方法が一般的になるのではないかと思います。
その場合に誰がどのくらい使っているか把握したいと考えるはずです。今回のようにDataServiceを使用することで解析に役立てることができます。


## 作り方

ここからは実際に開発したい人向けに作り方を公開します。
UiPath Appsは、Automation Cloudの中の1つの機能です。RPAを作れる人、使える人は既にAppsを使える権利があるわけです。
これを使わない手はありません。
UiPath Appsの作り方を解説している記事はあまりありませんので、参考になると思います。

環境構築はこちらの記事を参考にして下さい。

https://qiita.com/MUCHIUCHI_OJISAN/items/c37f16eaeb08dfbc7a7d

今回は環境構築後の基本機能を作るところを解説していきます。
- STEP1. Appsで画面を作ろう
- STEP2. DataServiceでデータを保存
- STEP3. RPAの処理を作る
- STEP4. AppsとRPAを繋げよう

こちらの動画に作成方法をまとめています。（クリックすると再生されます）
この記事では分かりにくい箇所を解説しています。簡単とは言いましたが、ステップ4はそこそこ難しくなっております。。。

::: note warn
InternalLabs.OpenAI.ActivitiesはInternalLabs.GPT.Activitiesという名称になりました。動画内ではInternalLabs.OpenAI.Activitiesとなっていますのでご注意ください。
:::

<iframe width="1280" height="720" src="https://www.youtube.com/embed/pulBSSLlpgY" title="UiPath Apps x OpenAI GPT連携" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>



ソースコードはGithubで公開しています

https://github.com/manabutech-kyushu/uipath_apps_gpt_single


### STEP1. Appsで画面を作ろう

Appsはコントロールとページを組み合わせてアプリのUIを作っていきます。
今回作成するアプリのSingle Pageでは、次のように複数のコントロールで構成されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/867dc896-9ed7-12e6-ac08-3a2ab77900f5.png)

### STEP2. DataServiceでデータを保存するエンティティを作成

DataServiceでよく使われる用語をまとめました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/6932c779-3754-e3f5-dc7e-33e7ec3f565b.png)

次の画面はAppsGPTというエンティティを作成したものです。
このように新しいフィールドを作成していく必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/8d17a5d6-42d5-ba2a-9e2a-6a15415ab354.png)

### STEP3. RPAの処理を作る

処理が少しでも簡単になるようにリストは使用しません。
質問数をAppsからDataService経由で渡してもらい質問数で条件分岐する作りにしています。

#### ロボットとAppsでデータを共有する方法

データを共有する方法は大きく分けて2つあります。

①引数を使用してデータを渡す方法
ロボットを、実行する時にデータを渡してあげることができます。その時にデータを入れる箱が引数と考えてください。また、実行が終わった際にロボット側がデータを置いておくこともできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/e72b1c69-683c-38f8-bebd-7993f201b8ca.png)

②DataServiceを使用してデータを渡す方法
こちらはDataServiceにあらかじめ保存されているデータを使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/c5fa695e-7872-ff59-e1e6-e1b9e83e4ebf.png)

引数の方が簡単に作れますが、今回のようにドキュメントビューアでファイルを表示させたい場合などはDataServiceでしか作れません。今回RPAでAI-OCRで画像から文字情報を抽出していますが、DataServiceを使わない場合は、画像ファイルを格納するための共有サーバーなどを用意する必要がありますので、処理が複雑になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/25766f35-ac46-3253-dad5-663e0c838468.png)

#### 便利なドキュメントをデジタル化アクティビティ
ドキュメントをデジタル化アクティビティはドキュメントに文字情報が入っている場合は文字情報を取得し、文字情報が入っていない場合はAI-OCRを使用して文字情報を画像から抽出する便利な部品です。
例えば、PDFには紙をスキャンしたような文字情報の入っていないPDFはAI-OCRが使われますが、WordファイルをPDF化して文字情報が入っているものはAI-OCRは使わずに格納されている文字情報を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/a3295cad-583e-7cfc-583e-257ed5f72dc0.png)

AI-OCR日本語版のアクティビティを使用していますが、こちらを使用するためにはDocument Understandingライセンスが必要となります。Document Understandingが無い場合にも使えるAI-OCRがありますので、そちらを指定することも可能です。

#### AskGPTアクティビティ

AskGPTアクティビティは[UiPathマーケットプレース](https://marketplace.uipath.com/listings/internallabsopenaiactivities)で公開されているInternalLabs.OpenAI.Activitiesパッケージをインストールすると使えるようになります。
UiPathにはファイルからテキストを読み取る色々な方法が用意されているので、簡単にテキスト情報を取得できます。
取得したテキストと質問をAskGPTに設定するとChatGPTが回答を返してくれます。
![Snapshot_113.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/5f302c7e-7283-e2a2-9f91-549692515abf.png)

::: note info
UiPath AskGPTアクティビティはAzure上に構築されたOpenAIリソースを利用しています。
OpenAIに情報が送信されないため、自動化で使用したテキスト情報が再学習に使用されるリスクはありません。
:::

::: note warn
InternalLabs.GPT.Activitiesは公式にサポートされているものではありませんのでご注意ください。現在、デモやPoCなどに無料で利用することができます。将来的にUiPath公式のアクティビティに統合される予定です。
:::

### STEP4. AppsとRPAを繋げよう

Appsではボタンクリックやページ読み込みなど、特定のイベントで処理を追加することができます。
例えばボタンクリック時には、レコード更新とプロセス開始が行われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/04cf4b42-e326-c1cf-a7a6-e9bb363124ca.png)

#### ドキュメントビューアに表示させる方法

ドキュメントビューアにPDFファイルなどを表示させる場合は、少し注意が必要です。
ファイルピッカーにはファイル名しか情報が無くファイル自体は保存されていないため直接指定することはできません。
DataServiceのエンティティも特定のレコードのフィールド情報を指定できないため、直接指定することができないのです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/c2e1d00e-7dfb-65c2-107a-aebbc0b17914.png)

うーん、じゃあどうすればいいのか？ここであきらめるか。
あきらめたらそこで試合終了ですよ。安西先生の声が聞こえたような気がしました。
そう、面倒ですが3つの手順を踏む必要があります。
（なんかここら辺、製品としてもうちょっと簡単になるべきだと思われる。。。）

まずファイルピッカーからファイル追加時にエンティティに対してレコードを新規に作成してファイル名とファイル情報を格納します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/8c85b98a-bc17-f102-f48d-cd29da25ad9b.png)

データコンテキストにエンティティのレコードが特定できる条件を設定します。
データコンテキストはエンティティのレコードを格納するための箱のイメージです。
例えば、エンティティのGroupIdカラムがGroupId変数と一致するレコードのように条件を指定します。
この条件により、複数のレコードから構成されるエンティティから1つのレコードを取得することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/5a6a5ee9-6d03-2cac-fd17-0c6fbbe4180f.png)

お待たせしました、お待たせしすぎたかもしれません。
これでドキュメントビューアのデータソースにデータコンテキストを指定すると、無事に文書が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/32609c45-43d8-b82a-3aa0-12fe7a1fa81d.png)

ちなみにファイルピッカーのファイル名とエンティティのファイル名を一致させることもできるのですが、同名のファイル名が存在することを考慮して、ファイルピッカーにファイル追加時にGroupIdというランダムな値をIDとして設定してデータコンテキストでGroupIdと一致する条件でレコードを取得しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/99c159c7-4dcc-77ff-2b10-8530206028d2.png)

#### ロボットからデータをもらう時の注意点

今回ロボットからAppsにデータを渡す際には、引数ではなくてDataServiceを使用しています。
これはGPTへの質問数を可変にできるというメリットもありますが、やはりアプリ側にデータを蓄積できるためです。
例えば、過去に質問した内容を取得したい場合はGPTに再度質問を投げなくてもアプリ側だけで高速に処理できます。
DataServiceを使用する際の注意点としては、データコンテキストの更新タイミングがあります。
データコンテキストはエンティティの更新をAppsから明示的に行わないと更新されません。よって、エンティティをプロセスを呼び出した後に更新しています。


## さいごに

UiPath Appsを使うことで1時間程度でAI-OCR処理も含めたアプリを作ることができました。
UiPath Appsで簡単にスマホからも使えるアプリが作れるのは、なかなかアツいですよね。
しかし、別のPCにあるロボットに処理をお願いするために応答が帰ってくるまでは時間がかかってしまいます。
よって、実運用では複数のファイルに同じ質問を行い、後で結果を通知するような構成にした方が望ましいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2577004/650f0581-40f5-176d-ebd3-9157de91ac07.png)

今話題のAutoGPTにUiPath AppsでUIを作ってやり、再帰的なGPTへの質問が完了して通知が飛ぶような仕組みにすれば面白いのではないでしょうか？
もしこちらの記事が好評であれば、AutoGPTについても記事にしていきたいと思います。

励みになりますので、内容が面白かった人はいいね・フォローお願いします！