GenUのユースケースビルダーを有効化して動かしてみた

# [GenU](https://github.com/aws-samples/generative-ai-use-cases-jp) とは
> GenU は、生成 AI を安全に業務活用するための、ビジネスユースケース集を備えたアプリケーション実装です。

AWS により GitHub 上で公開されている。生成 AI アプリケーションを簡単に AWS 環境にデプロイして試すことができる。

GenU を初めて知る方は、以下の記事で雰囲気を掴んでもらえるだろう。

https://qiita.com/wasashi/items/76642d6a864ee7dafd29

# [ユースケースビルダー](https://github.com/aws-samples/generative-ai-use-cases-jp#%E3%83%A6%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC)とは
> ユースケースビルダーは、プロンプトテンプレートを自然言語で記述することで独自のユースケースを作成できる機能です。プロンプトテンプレートだけで独自のユースケース画面が自動生成されるため、コード変更・カスタマイズ作業が一切不要です。作成したユースケースは、個人利用だけではなく、アプリケーションにログインできる全ユーザーに共有することもできます。

v2.0.0 で追加された機能のようだ。

どのように使うものか気になったため試してみたい。

## 有効化
[こちらの説明](https://github.com/aws-samples/generative-ai-use-cases-jp/blob/main/docs/DEPLOY_OPTION.md#%E3%83%A6%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96)通り、packages/cdk/cdk.json を編集し、`useCaseBuilderEnabled` を `true` にする。
```json
{
  "context": {
    "useCaseBuilderEnabled": true
  }
}
```
そしてデプロイ。
```bash
npm run cdk:deploy
```

::: note warn
GenU を初めてデプロイするという方は、[こちらの手順](https://github.com/aws-samples/generative-ai-use-cases-jp#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4)も確認して欲しい。
:::

# 触ってみる
デプロイ完了後、画面左上に「ビルダーモード」というトグルが表示された。

![スクリーンショット 2024-11-27 193156.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/16cee979-cf6f-3ae4-275c-a72bc47ded66.png)

早速ONにしてみると、サンプル集が表示された。

![スクリーンショット 2024-11-27 193221.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/cfd7b983-5803-cb95-3787-080fa2664cfc.png)

左サイドバーのメインメニューは２つ
- サンプル集
- マイユースケース

マイユースケースを開く。この時点では、まだマイユースケースはない。

![スクリーンショット 2024-11-27 195011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/1fdc737f-a2b9-5a5e-2174-83e2e2b5bb08.png)
## ユースケース新規作成画面
「新規作成」ボタンをクリックすると、「ユースケース新規作成画面」が表示された。
「アプリの定義」と「プレビュー」という２つのパネルがある。

![スクリーンショット 2024-11-27 195139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/4d4e7132-4d25-3b8a-3a1d-75aab8316050.png)

> プロントテンプレートの書き方については、「ヘルプ」か「サンプル集」をご覧ください。

とある。「ヘルプ」をクリックすると、画面右にヘルプが表示された。

![スクリーンショット 2024-11-27 195623.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/bd47d686-b331-ba06-4915-66bd0ca915b6.png)

ヘルプの内容はこうだ。

> **プロンプトテンプレートについて**
> 
> 
> ユースケースごとに、プロンプトテンプレートを定義することができます。ユースケースを実行すると、ここで定義したプロンプトテンプレートをもとに、生成 AI が推論を行います。
> 
> **可変項目の設定**
> 
> プロンプトテンプレートの中には、可変項目を設定することができます。この可変項目を設定すると、自動的に画面上に入力欄が配置されます。ユースケースを実行すると、プロンプトテンプレート内の可変項目が対応する画面の入力値で置換されます。
> 
> **可変項目の設定方法**
> 
> プロンプトテンプレート内に、{{ text: 見出し }}の形式で入力してください。「見出し」は画面上に表示される入力項目のラベルとなります。
> 

この画面でプロンプトテンプレートを定義できるようだ。
テンプレート内では「可変項目」を設定できるらしい。

試しにプロンプトテンプレートに 「{{ text: 見出し }}」を入力してみるが...何も起こらない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/2f218f97-b457-f53b-0e3c-06853c268cd7.png)

どうやら余計なスペースを取り除く必要がありそうだ。
「{{text:見出し}}」にしてみる（実際は、最初の空白のみ削除すればよさそうだ）。

すると、プレビューにテキストボックスが表示された！

![スクリーンショット 2024-11-27 205223.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/bb885e7a-3402-5389-681c-2d00f5d2fa7d.png)

## サンプル集 > 文章の書き換え
今回は簡単に動きを見てみたいので、サンプル集から「文章の書き換え」を開く。

![スクリーンショット 2024-11-27 220833.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/49a08857-2e47-0fd3-4b51-0f9d23fd164e.png)

プロンプトテンプレートにはサンプルの指示が入力されている。
可変項目は「書き換えの指示」と「書き換え対象のテキスト」の２つが入力されており、プレビューには対応する２つのテキストボックスがある。

入力例も設定できるようだ。プレビューには、タイトルに対応するボタン（詳細な説明）が表示されている。

![スクリーンショット 2024-11-27 220917.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/3e546e2e-8689-396b-74b6-4d7b0bc4ffde.png)

「詳細な説明」ボタンで「入力例」をテキストボックスに入力し（①）、「実行」してみた（②）。
指示通り、入力対象のテキストに詳細な説明を追加してくれたようだ。

![スクリーンショット 2024-11-27 221426.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/fb1518b8-aeb9-6444-80b6-fcb1453ff202.png)

最後に、画面下の「作成」ボタンをクリックすると、「文章の書き換え」ユースケースが作成された。
左サイドバーの利用履歴に追加されている。

![スクリーンショット 2024-11-27 221631.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/01091506-6126-a577-54b0-f19b577f880b.png)

「マイユースケース」にも追加されているようだ。

![スクリーンショット 2024-11-27 221934.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/7f479a58-72a6-49ba-7aa1-2bf8c4d90699.png)

## マイユースケース画面での操作

星アイコンをクリックすると、お気に入りに追加できる。

![スクリーンショット 2024-11-27 222244.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/4397b8dc-6562-d421-1c27-a491b6f3cc13.png)

鉛筆アイコンをクリックすると「ユースケース編集」画面が開く。

![スクリーンショット 2024-11-27 222128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/98952162-0b85-c1a3-a947-3c15bdace5d0.png)

「非公開」ボタンをクリックすると、「共有」ダイアログが表示された。
> **このユースケースは共有されていないため、あなたしか利用できません。**

![スクリーンショット 2024-11-27 222605.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/416a0cfb-98b3-4478-cdc9-4cf857f34c3b.png)


トグルをONにすると、文言は以下のように変化した。

> **このユースケースは、このアプリケーションにログインできる全ユーザーが利用できます。**

![スクリーンショット 2024-11-27 222955.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/6555fdcb-8867-6cf1-e321-1a0a99bfe92c.png)

![スクリーンショット 2024-11-27 223028.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/6991a0ec-224a-4044-08b3-57feda378bb2.png)

デフォルトでは、マイユースケースは非公開だが、「共有中」にして公開し、URLから簡単にアクセスしてもらえるということらしい。

ゴミ箱アイコンをクリックすると、ユースケースの削除ダイアログが表示された。
共有中の場合、警告してくれるようだ。

![スクリーンショット 2024-11-27 223358.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/8a37f24e-800f-2cb4-fade-7f56b2e92c09.png)

削除したが、ビルダーモードOFF側の「会話履歴」には残っているようだ。

![スクリーンショット 2024-11-27 224835.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3816889/412d7f25-d0a3-fbfc-275e-6057f1f95203.png)

# 感想

プロンプトテンプレートとテキストボックスで独自のユースケースを作成し、他のユーザーに共有できる機能だった。プロンプト作成は結構大変なので、共有できる機能は良さそうだ。


今後、テキストボックスだけでなくファイルアップロードなどもカスタムできるようになるのだろうか。



今回は設定を変更してユースケースビルダーを有効化する必要があったが、今後のアップデートでデフォルトで有効になりそうだ。

サンプル集の中から興味のあるものなど、今から触っておくと良いだろう。