AWS Bedrockを利用した画面遷移図の自動生成検証

はじめに

テキストで与えた入力情報を元に、AWSの生成AIであるBedrockに画面遷移図を作成させる検証を行いました。尚、できるだけ自動化を行うために画像出力部分はマーメイド記法のテキストを元に画像化するmmdcコマンドを利用しています。

尚、全体の流れは

プロンプトを記載した入力ファイルの準備
入力ファイルを元にBedrockへ質問/回答取得
回答結果を元に画像を出力

となります。

環境情報

Amazon Linux 2
mmdc 10.6
Python 3.7.16
Claude-v2

入力情報の準備

テキストファイルにて以下のような文章を用意しました。図に使う文字を英語にしている理由は、mmdcコマンド（Marmaid CLI）がデフォルトだと日本語を文字化けさせるからです。

以下のようなフロー図をMermaid記法で図にしてください。図に使う文字は全て英語にしてください。
- LoginPageにはLoginボタンとChangePassボタンがあります
- LoginPageでLoginに成功するとTopPageに進みます
- LoginPageでLoginに失敗するとLoginPageに留まります
- LoginPageでChangePassボタンを押すとChangePassPageに進みます
- ChangePassにはChangePassボタンとBackボタンがあります
- ChangePassPageでChangePassに成功するとTopPageに進みます
- ChangePassPageでChangePassに失敗するとChangePassPageに留まります
- ChangePassPageでBackボタンを押すとLoginPageに戻ります

生成AIにコードを出力させる

入力ファイルのパスを引数としてBedrockに回答を出力させるスクリプトは以下。事前に指定するリージョンのBedrockの有効化は必要です。

import json
import boto3
import sys
args = sys.argv
bedrock_runtime = boto3.client("bedrock-runtime", region_name="us-east-1")

myfile = ""
file_path = args[1]
with open(file_path, 'r') as file:
    myfile = file.read()

prompt = 'Human:' + myfile + '\n' + 'Assistant:'

body = json.dumps(
 {
 "prompt": prompt,
 "temperature": 1.0,
 "max_tokens_to_sample": 20000,
 }
)
resp = bedrock_runtime.invoke_model(
 modelId="anthropic.claude-v2",
 body=body,
 contentType="application/json",
 accept="application/json",
)
answer = resp["body"].read().decode()
print(json.loads(answer)["completion"])

実行を行うと

$ /usr/bin/python3 ./callbedrock.py input.txt > output.txt

以下のようなテキストファイルが出力されました。

 ```mermaid
graph TD
    A[LoginPage] -->|Login Success| B[TopPage]
    A -->|Login Failed| A
    A -->|ChangePass| C[ChangePassPage]
    C -->|ChangePass Success| B
    C -->|ChangePass Failed| C
    C -->|Back| A
```
このようにフロー図を記述できます。LoginPage、TopPage、ChangePassPageといったページをボックスで囲み、矢印で遷移を表しました。Success、Failed、ChangePass、Backといった条件は矢印のラベルとして記述しました。図中の文字はすべて英語にしました。

```mermaidから```で囲まれている箇所を機械的に取り出し、.mmdファイルとして保存します。

画像を出力する

入力ファイルとしてmmdファイル、出力としてpngファイルを指定してmmdcコマンドを実行します。

$ mmdc -i input.mmd -o output.png

Marmaid記法のコードが正しい場合は画像が生成され

$ file output.png 
output.png: PNG image data, 498 x 256, 8-bit/color RGBA, non-interlaced

確認すると以下のような画像となっていました。

考察

今回指定した要件であれば問題のない出力結果となりました。また、チューニングポイントとしてはBedrockの「temperature（温度）」があります。
同値を低くするとより創造的になるため、例えば以下の値に変更した上で入力ファイルのプロンプトに「色を工夫して見やすくしてください」として再度実行をかけると

body = json.dumps(
 {
 "prompt": prompt,
 "temperature": 0.5,
 "max_tokens_to_sample": 20000,
 }
)

以下のような出力も見られました。

ただしその創造性の分だけmmdcコマンドでのエラーも発生しているため、いわゆる正確性と創造性のトレードオフの関係になっていることも確認ができました。

Error: Evaluation failed: Error: Parse error on line 12:

何度か出力させましたが、温度を0.5程度まで上げると半分の画像生成に失敗。温度を1.0まで上げるとほぼ失敗をしました。

終わりに

マーメイド記法で出力させたコードを元に画像化までをスクリプトとして実施しました。ご参考ください。

(O+P)ut

アウトプット

【生成AI/Marmaid記法】Bedrockを用いた画面遷移図の生成検証