AI による要約の吹き出しを作成および表示する

このチュートリアルでは、Web アプリケーション内でユーザーが選択した情報について AI による概要を表示する吹き出しを作成する方法について説明します。このチュートリアルで説明するアクションのシーケンスを以下で確認してください。

1. まず、Windy.com の Web サイトを表示します。
2. Windy のロゴが表示されたら、ユーザーへの指示を含む吹き出しを表示します。
3. Web サイトの検索バーが表示されたら、別の吹き出しを表示し、天気を確認したい場所を検索するように求めます。
4. 検索要求を実行した後に表示される、Web サイトから取得した天気の結果は、AI による概要を生成するためのコンテンツとして機能します。

   この概要では、散歩に最適な天気の日を提案します。

5. 吹き出しは 30 秒間表示されます。その後、吹き出しは閉じられ、すべてのトリガーが非アクティブ化されます。

前提条件

この例は、以下のアクティビティ パッケージとバージョンを使用して作成されています。

• UiPath.Callout.Activities 25.2.0
• UiPath.IntegrationService.Activities 25.2.1
• UiPath.System.Activities 25.2.1
• UiPath.UIAutomationActivities 25.2.1-preview

手順

1. Studio プロジェクトを開き、Main ワークフローに移動します。
   1. [アプリケーション/ブラウザーを使用] アクティビティを追加し、[ブラウザーの URL] フィールドに「https://www.windy.com/」と入力します。
   2. [ローカル トリガーを実行] アクティビティを追加します。

      これにより、すべてのトリガー ワークフローが有効化され、トリガー イベントが発生したときにそのワークフローを実行できます。

2. 最初の吹き出し用の uiform ファイルを作成します。この吹き出しにより、Windy のロゴが表示されると同時に、その後の手順に従うように求めるメッセージを表示します。
   1. Studio プロジェクトの [新規] ドロップダウン メニューから [フォーム] を選択して新しいフォームを作成します。

      ここでは、このフォーム ファイルを吹き出しとして使用します。

   2. 吹き出しに Basic callout という名前を付けます。
   3. [コンポーネント] パネルで [基本] セクションを展開し、3 個の [ラベル/ヘッダー] コンポーネントを吹き出しファイルにドラッグします。コンポーネントを以下のように編集します。
      1. 最初のコンポーネントの [コンテンツ] フィールドに、「Welcome to Windy.com!」というテキストを入力します。
      2. 2 番目のコンポーネントの [コンテンツ] フィールドに「Please follow the instruction on the screen to learn which day will be best for a nice walk.」というメッセージを入力します。
      3. 3 番目のコンポーネントでは、[フィールド キー] タブの [プロパティ名] を aiSummary に変更します。

         このコンポーネントの [コンテンツ] フィールドは空のままにしておきます。実行時に AI により生成された概要が動的に入力されるためです。

   4. 吹き出しファイルを保存します。
3. 「Show Basic Callout」という名前の新しいワークフローを作成し、[アプリケーション イベント トリガー] アクティビティを追加します。

   このワークフローは、Windy.com へのアクセスを歓迎する吹き出しと、AI による概要を表示する吹き出しを表示します。

   1. [画面上でターゲットを指定] を選択し、オートメーションで監視を開始する UI 要素を指定します。

      この例では、Windy のロゴを指定し、これを監視します。

   2. [イベントの種類] ドロップダウン リストから [出現] を選択します。
   3. [吹き出しを表示] アクティビティを追加します。
      このアクティビティにより、uiform ファイルを選択して特定の UI 要素に対して表示したり、Arguments ディクショナリを使用して uiform ファイルにデータを渡したりできます。
      1. [フォームを選択] ドロップダウン リストから、先ほど作成した吹き出しファイルを選択します。
         この例では、Basic callout を選択します。
      2. [UI 要素] フィールドに、[アプリケーション イベント トリガー] アクティビティに対して指定した UI 要素を入力します。これは、吹き出しをバインドする Windy のロゴです。
         そのターゲット要素にアクセスするために、TriggerEventArgs.TargetElement という式を使用します。TriggerEventArgs はここでは引数であり、ワークフローにトリガー アクティビティを追加すると自動的に生成されます。この場合、この引数は [アプリケーション イベント トリガー] アクティビティによって生成されます。
4. この吹き出し用の uiform ファイルを作成します。この吹き出しは、Web サイトの検索バーが表示されたときに表示され、目的の場所を検索するよう求めます。
   1. Studio プロジェクトの [新規] ドロップダウン メニューから [フォーム] を選択して新しいフォームを作成します。

      ここでは、このフォーム ファイルを吹き出しとして使用します。

   2. 吹き出しに Please search for your desired location という名前を付けます。
   3. [コンポーネント] パネルで [基本] セクションを展開し、[ラベル/ヘッダー] コンポーネントを吹き出しファイルにドラッグします。
   4. コンポーネントとファイルを保存します。
5. 「Please search for the desired location」という名前の新しいワークフローを作成し、[アプリケーション イベント トリガー] アクティビティを追加します。

   このワークフローは、天気情報を検索する場所を検索するよう求める吹き出しを表示します。

   1. [画面上でターゲットを指定] を選択し、オートメーションで監視を開始する UI 要素を指定します。

      この例では、監視する Windy の検索バーを指定します。

   2. [イベントの種類] ドロップダウン リストから [出現] を選択します。
   3. [待機] アクティビティを追加し、その [期間] を 3 秒に設定します。これにより、十分な余裕を持って最初に歓迎の吹き出しを読み、続いて検索バーの横に表示される吹き出しを確認できるようにします。
   4. [吹き出しを表示] アクティビティを追加します。
      このアクティビティにより、uiform ファイルを選択して特定の UI 要素に対して表示したり、Arguments ディクショナリを使用して uiform ファイルにデータを渡したりできます。
      1. [フォームを選択] ドロップダウン リストから、先ほど作成した吹き出しファイルを選択します。
         この例では、Basic callout を選択します。
      2. [UI 要素] フィールドに、[アプリケーション イベント トリガー] アクティビティに対して指定した UI 要素を入力します。これは、吹き出しをバインドする Windy のロゴです。
         そのターゲット要素にアクセスするために、TriggerEventArgs.TargetElement という式を使用します。TriggerEventArgs はここでは引数であり、ワークフローにトリガー アクティビティを追加すると自動的に生成されます。この場合、この引数は [アプリケーション イベント トリガー] アクティビティによって生成されます。
      3. Arguments ディクショナリを開き、生成されたキーの [値] フィールドに、表示するテキストを入力します。

         この例では、「Please search for your desired location and select it from the list」というテキストを表示します。

6. 「Fetch and deliver AI Weather Summary」という名前の新しいワークフローを作成します。

   このワークフローは、先ほど検索した場所の天気の結果に基づいて、屋外を散歩するのに最適な日についての AI による概要の生成を開始します。

   1. [アプリケーション イベント トリガー] アクティビティを追加します。
      1. [画面上でターゲットを指定] を選択し、オートメーションで監視を開始する UI 要素を指定します。

         この例では、監視する Windy の天気の検索結果を指定します。

      2. [イベントの種類] ドロップダウン リストから [出現] を選択します。
   2. 目的の場所を検索するよう求めた吹き出しを閉じるために、[フォームを閉じる] アクティビティを追加します。
   3. [フォームを選択] ドロップダウン リストから、[Please search for your desired location] の吹き出しを選択します。
   4. [フォームの値を設定] アクティビティを追加し、元の「Basic Callout」を、AI による概要を生成するプロセスに関する情報で更新します。
   5. [アプリケーション/ブラウザーを使用] アクティビティを追加して Windy のブラウザー ウィンドウにアタッチし、天気の情報を抽出します。[ブラウザーの URL] フィールドに「https://www.windy.com」と入力します。
   6. [実行] ブロックで、以下のアクションを実行します。
      1. [表データを抽出] アクティビティを追加します。
         1. [画面上でターゲットを指定] を選択し、天気の結果を選択します。
         2. [抽出先] フィールドの出力変数を作成します。
            この例では、extractedWeatherDetails という名前を付けます。
      2. [データ テーブルを出力] アクティビティを追加します。
         1. 先ほど作成した、天気データを保持する変数 (extractedWeatherDetails) を [データ テーブル] フィールドに入力します。
         2. [テキスト] フィールドの出力変数を作成します。この例では、weatherData という名前を付けます。
      3. 分析プロセスのステートに関する最新情報を表示するために、[フォームの値を設定] アクティビティを追加します。
         1. [フォームを選択] ドロップダウン リストから、Basic callout フォームを選択します。
         2. Arguments ディクショナリで、aiSummary 引数に「...analyzing weather data...」という値を入力します。
      4. AI による概要を生成するために、[コンテンツ生成] アクティビティを追加します。
         1. アクティビティの本体内で [新しいコネクションを追加] を選択して UiPath GenAI アクティビティへのコネクションを作成し、アクティビティを実行できるようにします。
         2. [モデル名] ドロップダウン リストから、目的の AI モデルを選択します。
         3. [プロンプト] フィールドに、[データ テーブルを出力] アクティビティの結果の変数を入力します。この例では、「weatherData」と入力します。
         4. [システム プロンプト] フィールドに、提供された天気データに基づいて概要を生成するために使用する、AI モデルへの指示を入力します。この例では、次のプロンプトを使用します。

            "You will be given a set of data in the following format: Day, hour, missingiconfortheweahter, temperature, rain, wind, wind gusts, last one can be ignored. Please let me know which day will have the best weather for a nice walk. In your output, please stick to the short recommendation and a reason, without any details of your specific analysis". ("「曜日、時、missingiconfortheweahter、温度、雨、風、突風」という形式で一連のデータが提供されます (最後の「突風」は無視しても構いません)。快適な散歩に最適な曜日を教えてください。出力には、推奨事項を手短にまとめ、理由を含めてください。具体的な分析の詳細は不要です。")

         5. [上位の生成テキスト] フィールドの出力変数を作成します。この例では、「topGeneratedText」という名前を付けます。
      5. AI により生成された概要を表示するために、[フォームの値を設定] アクティビティをもう 1 つ追加します。
         1. [フォームを選択] ドロップダウン リストから、Basic callout フォームを選択します。
         2. Arguments ディクショナリに、[コンテンツ生成] アクティビティの出力と吹き出しのステートに関する情報を含む式「"topGeneratedText + Environment.NewLine + "This callout will close in 30 seconds."」を入力します。
      6. [待機] アクティビティを追加し、値を 30 秒に設定します。
      7. [フォームを閉じる] アクティビティを追加し、[フォームを選択] ドロップダウン リストから [Basic callout] を選択します。
      8. すべてのトリガー ワークフローの実行を停止するために、[ローカル トリガーを停止] アクティビティを追加します。

         プロジェクトがトリガー ワークフローのみで構成されている場合、このアクティビティは特に重要です。このアクティビティを組み込まないと、トリガーは停止することなく継続的なループで永続的に実行されます。

結果

オートメーションによって Windy の Web サイトが開かれ、ロゴが表示されたら「Show basic callout」ワークフローがトリガーされます。検索バーが表示されたら、「Please search for your location」ワークフローの実行が開始され、天気情報を確認する場所を検索するよう求められます。天気の結果が表示されると、「Fetch and deliver AI Weather Summary」ワークフローの実行が開始されて天気の結果が取得され、プロンプトの一部として AI モデルに送信されます。これは後で同じフォームに再度表示されます。AI による概要が表示された後、30 秒後にフォームが閉じられます。この実行時のプロセスの説明を次のアニメーション画像に示します。

図 1. AI により生成された要約を表示する吹き出し

ワークフローの例

このチュートリアルの手順の実装方法を確認するには、サンプル プロジェクト Displaying AI-summary callout for Windy をダウンロードしてください。