LoginSignup
12
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

生成AIに関する記事を書こう！
Qiita Engineer Festa20242024年7月17日まで開催中！
@hidechainUiPath

【UiPath】Apps&コネクションで生成AIモバイルアプリを作成する

Last updated at Posted at 2024-07-10

はじめに

  • 本記事ではUiPath Appsの新機能であるコネクション連携を使って生成AIアプリを作成してみたいと思います。出来上がりは ↓ このような感じです。
    35.jpg

  • 質問文を入力してボタンをクリックすると生成AIサービスからの回答が表示されるというシンプルなものですが、UiPath Appsを利用することによってローコードかつ自前でサーバーを用意せずにWebアプリの開発および運用が可能 です。

UiPath Appsとは？

  • UiPath Apps は、ユーザーエクスペリエンスに優れたエンタープライズレベルのカスタム アプリケーションを構築・共有できる、ローコードアプリケーション開発プラットフォームで UiPath Automation Cloudの一部として利用することができます。AppsではUI要素のコンポーネントを配置し、ボタンクリックなどをトリガーとして自動化プロセス実行することもできます。
  • まだプレビュー段階ですが アプリのコネクション によってAppsからIntegration Serviceを呼び出すことができるようになりました。Integration Service はいわゆるiPaaS (Integration Platform as a Service) で様々なWebサービスと容易に連携できます。UiPath GenAIアクティビティ などを利用すれば生成AIサービスを呼び出すこともできます。コネクション連携ではAppsからIntegration Service経由でWebサービスをコールするため、実行環境としてのUiPath Robotは不要になります。

UiPath GenAI アクティビティを利用するにはAIユニットが必要となります。プレビュー段階では無料でご利用いただけていましたが、2024年7月に一般提供(GA)されてからはアクティビティ実行ごとにAIユニットが消費されます。

  • Appsでこのように開発されたWebアプリはRobotが不要なためモバイル端末でも実行することができます。今回はモバイル対応の生成AIアプリをAppsで作成してみたいと思います。

Appsによる生成アプリ作成手順

Integration Serviceのコネクタを作成する

  • Automation Cloud に管理者アカウントにてサインインし、Integration Serviceメニューをクリックします。
    03.png

  • UiPath GenAIアクティビティ のコネクタを作成します。OpenAIなどその他の生成AIサービスとのコネクタを作成する手順については こちらの記事 をご参照ください。
    10a.png

Appsでアプリを作成する

  • 次にAppsでアプリを作成します。Automation Cloud にてAppsメニューをクリックします。
    01a.png

  • [新しいアプリを作成] をクリックし、アプリケーション名として ChatApps と入力し [作成] をクリックします。
    02a.png

  • テンプレートは 空のページ をダブルクリックして選択します。
    03a.png

UIの作成

  • 生成AIアプリのシンプルなUIを作成します。[コントロールを追加] をクリックし、入力 > テキストボックス をドラッグ&ドロップしてMainPageに追加します。
    04a.png

    • このテキストボックスはユーザーが質問を入力するために使用します。モバイル用にUI領域を節約するために 全般 > ラベルの既定値 "Label" を削除します。続いて スタイル > サイズ > 幅をひとまず 370px に設定します。モバイル端末に合わせて調整する方法については後ほど説明します。
      05a.png

  • [コントロールを追加] をクリックし、入力 > ボタン をドラッグ&ドロップしてMainPageに追加します。テキストを "Query" に変更します。ユーザーがクリックした時に質問内容を生成AIに問い合わせするように後ほどイベントルールを実装します。
    06a.png

  • 再び [コントロールを追加] をクリックし、入力 > カスタムHTML をドラッグ&ドロップしてMainPageに追加します。カスタムHTMLは生成AIサービスからの応答を表示します。スタイル > サイズ > 幅を 370 px に指定します。
    07a.png

  • アプリのコネクションを追加します。[コントロールを追加] をクリックし、コネクション を選択します。
    08a.png

    • コネクションを追加して UiPath GenAI Activities を選択し、フォルダー配下に作成されたコネクタを選択します。[追加] をクリックします。
      09a.png

  • 生成AIサービスからの応答を格納する変数を作成します。左メニューの アプリの変数 > (+) をクリックし、変数名 query_response、型 Text を選択して [作成] をクリックします。
    18a.png

イベントルールの作成

ボタンクリック時にコネクションを利用して生成AIサービスに問い合わせするようにイベントルールを実装します。

  • ボタン > イベント > [ルールを作成] をクリックします。
    11a.png

  • 新しいルールとして UiPath GenAI Activities > Content Generation を選択します。
    12a.png

  • Content Generation (コンテンツ生成) のパラメーターは下記のように設定します。

    • Model name: "gpt-4o-2024-05-13"
    • Stream: false
    • Prompt: MainPage.Text.Value (※ コントロール名を変更している場合は Text 部分を置き換えます)
    • その他のパラメーターは アクティビティガイド をご参照ください。
      13b.png

  • Content Generation アクティビティ実行の状態が分かるようにスピナーを追加します。
    14a.png

    • 開始時 > スピナーを表示/非表示 をクリックし、スピナーの表示設定を true (既定値) にします。
    • 完了時 > スピナーを表示/非表示 をクリックし、スピナーの表示設定を false に変更します。
      15a.png

  • アクティビティ実行の戻り値を受け取るため、完了時のルールを (+) をクリックして追加し、 値を設定 を選択します。
    19a.png

    • 設定する項目: アプリの変数として query_response をセットします。
    • 値: 式として Newtonsoft.Json.Linq.JToken.Parse(MainPage.Button.ContentGeneration.Response.RawResponse)("text").ToString をセットします。
      • Webガイド に記載の通り、生の戻り値は <PageName>.<ControlName>.<RuleName>.Response.RawResponse で受け取ります。それをJSONオブジェクトとしてパースし、応答部分のみを取り出しています。
        22a.png

カスタムHTMLコントロールの設定

カスタムHTMLの外観を設定し、生成AIサービスからの応答を表示するようコードを記述します。

  • カスタムHTML > 全般 > コードエディターを開く をクリックします。
    23a.png

  • コードエディターにてそれぞれ次のように設定して [保存] をクリックします。

    HTML
    <div id="textContainer">
</div>
    CSS
    @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP");

div {
  background-color: #ffffff;
  font-family: 'Noto Sans JP';
  font-size: 13px;
  color: #333333;  
  display: grid;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
  background-color: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 2px 4px;
  color: #333333;
}
    JAVASCRIPT
    async function init() {
  const text_container = document.getElementById('textContainer');

  App.onVariableChange("query_response", value => {
    console.log("Response: ", value);
    text_container.innerHTML = value;
  })
}
init();

    35.png

実行確認とデバック・微調整

  • これで基本部分は実装できましたので動作確認してみましょう。[プレビュー] をクリックすると別タブにてアプリが起動します。
    36.png
    • コネクションを更新 が表示される場合には、コネクタを選択して [実行] をクリックします。
      25a.png
  • UIが表示されましたらテキストボックスに質問文 (例: UiPath Automation Cloudについて教えて) を入力して [Query] ボタンをクリックします。30秒ほどで応答が表示されます。
    26a.png
  • 現段階では見栄えはあまり良くありませんので後ほど調整します。

デバッグとモバイル対応

  • もし応答が正常に表示されない場合にはF12を押下して開発者ツールを起動し、Console タブを開きます。

    • Selected context only をオンにします。
    • 上部のドロップダウンを top → html-control-base.html に変更します。JavaScript コード console.log(変数) によってセットされた変数の値をコンソール出力してデバッグに役立てることができます。
      27a.png

  • モバイル端末でのUI微調整も開発者ツールで行うことができます。Elements タブ左のモバイルアイコンをクリックし、画面左上部で端末の種類を選択します。見栄えが良くなるようにテキストコントロールやカスタムHTMLのサイズやマージン(余白)を調整します。
    28a.png

    • モバイル対応のデザインに関する詳細は こちらのガイド もご参照ください。

Markdown→HTML変換

  • 現段階ではカスタムHTMLにて生成AIサービスの応答をそのまま表示していますが、改行などがされておらず可読性があまり良くありません。応答は主にMarkdown形式であるため、既存コードに少し手を加えてHTMLに変換し見栄えを改善してみましょう。

  • Markdown→HTML変換のJavaScriptライブラリはいくつかありますが、今回は Showdown を使用したいと思います。

    • カスタムHTMLのコードエディターを開き、外部リソースをクリックし、JavaScriptのソースとして https://unpkg.com/showdown/dist/showdown.min.js を指定し [保存] をクリックします。
      37.png

  • コードエディターを再度開き、JavaScriptを次のように変更して [保存] をクリックします。

    JAVASCRIPT
    async function init() {
  const text_container = document.getElementById('textContainer');
  const converter = new showdown.Converter();

  App.onVariableChange("query_response", value => {
    let answer_html = converter.makeHtml(value);
    console.log("HTML: ", answer_html);
    text_container.innerHTML = answer_html;
  })
}
init();

    38.png

  • 再度プレビュー実行すると、応答がHTML変換され読みやすくなっていることを確認します。
    29a.png

アプリのデプロイ

  • アプリをデプロイするには [パブリッシュ] をクリックします。
    30a.png

  • 必要に応じて説明を入力して [パブリッシュ] をクリックします。次の手順にて [今すぐデプロイ] をクリックします。
    31.png

  • アプリはOrchestratorフォルダーごとにデプロイします。利用ユーザーが割り当てられているフォルダーを選択し、 オートメーション > アプリ > [アプリをデプロイ] をクリックします。
    32a.png

    • アプリとして ChatApps を選択し [デプロイ] をクリックします。
      33a.png
    • デプロイされたアプリの縦三点 > URLをコピー をクリックし、このURLをモバイル端末に共有します。
      34a.png

  • モバイル端末でURLを開きます。まずAutomation Cloudへの認証が求められますので権限のないユーザーはアクセスできません。Automation Cloudへのサインイン後、質問文を入力してQueryボタンをクリックし、応答が表示されることを確認します。
    35.jpg

おわりに

本記事ではUiPath Appsのコネクション連携機能を使用してモバイル端末に対応した生成AIアプリを作成してみました。今回紹介したコネクション・アクティビティ以外にも様々なサービスとの連携が利用可能ですし、UIデザインもカスタマイズできます。Appsユーザーガイド を参照して皆さんのニーズに合わせたアプリ開発をお試しいただければと思います！

12
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?