Generative AI Use Cases JP (GenU)を使って生成AIを体験してみよう(基礎編)

Generative AI Use Cases JP (GenU)を使って生成AIを体験してみよう(基礎編)

Clock Icon2025.03.17

はじめに

本エントリはクラスメソッドのコミュニティイベント内で開催した「Amazon Bedrock GenUハンズオン(東京開催) #1:GenU環境で生成AIを体験」のハンズオン手順となります。
イベントに参加していない方でも手軽に生成AIを体験できますので、ぜひお試しください。

構成

今回作成するリソースは以下の赤枠内の通りです。

Shapes

1.開発環境の準備

  1. 以下のリンクからSageMaker Studioのサンプルリポジトリを開きます。

FireShot Capture 054 - aws-samples_sagemaker-studio-code-editor-template_ CloudFormation tem_ - github.com

  1. README.md内のDeployment (1-click)から任意のリージョンを選択します。

FireShot Capture 055 - aws-samples_sagemaker-studio-code-editor-template_ CloudFormation tem_ - github.com

  1. スタックのクイック作成画面が表示されたら、パラメータを設定します。
    以下パラメータが設定可能ですが、今回はデフォルト値のまま次に進みます。
パラメータ 説明
AutoStopIdleTimeInMinutes コードエディタの自動停止までのアイドル時間(0の場合は無効)
EbsSizeInGb コードエディタのEBSボリュームサイズ
InstanceType コードエディタのインスタンスタイプ
UseDefaultVpc デフォルトVPCを使用する(true)か、新規作成する(false)か

FireShot Capture 056 - CloudFormation - us-east-1 - us-east-1.console.aws.amazon.com

  1. パラメータの設定が完了したらAWS CloudFormation によって IAM リソースがカスタム名で作成される場合があることを承認します。にチェックを入れ、スタックの作成を押下します。

FireShot Capture 057 - CloudFormation - us-east-1 - us-east-1.console.aws.amazon.com

  1. 5-10分ほど待機し、スタックのステータスがCREATE_COMPLETEになっていれば構築完了です。

FireShot Capture 058 - CloudFormation - スタック CodeEditorStack - us-east-1.console.aws.amazon.com

  1. 出力タブからSageMakerStudioUrlをコピーしておきます。
    後続のセクションで使用します。

FireShot Capture 059 - CloudFormation - スタック CodeEditorStack - us-east-1.console.aws.amazon.com

2.Bedrockモデルの有効化

  1. Amazon Bedrock > モデルアクセス に遷移し、モデルアクセスを変更を押下します。
    GenUの初期値として設定されている以下のモデルを選択し、次へに進みます。
項目
modelIds us.anthropic.claude-3-5-sonnet-20241022-v2:0
us.anthropic.claude-3-5-haiku-20241022-v1:0
us.amazon.nova-pro-v1:0
us.amazon.nova-lite-v1:0
us.amazon.nova-micro-v1:0
imageGenerationModelIds amazon.nova-canvas-v1:0

FireShot Capture 061 - Amazon Bedrock - us-east-1 - us-east-1.console.aws.amazon.com

  1. 選択したモデルが正しいことを確認し、送信を押下します。

FireShot Capture 062 - Amazon Bedrock - us-east-1 - us-east-1.console.aws.amazon.com

  1. アクセスのステータスがアクセスが付与されましたになっていれば作業完了です。

FireShot Capture 063 - Amazon Bedrock - us-east-1 - us-east-1.console.aws.amazon.com

3.Code Editorの起動

  1. 1.開発環境の準備のセクションでコピーしたSageMakerStudioUrlを開き、SageMaker Studioにアクセスします。
    表示されたポップアップはSkip Tour for nowを選択し閉じてください。

FireShot Capture 064 - Home - SageMaker Studio_ - studio-d-7bfcdotqf1br.studio.us-east-1.sagemaker.aws

  1. 左上のApplicationsからCode Editorを押下します。

FireShot Capture 065 - Home - SageMaker Studio_ - studio-d-7bfcdotqf1br.studio.us-east-1.sagemaker.aws

  1. Code Editor spaceのActionからOpenを押下します。

FireShot Capture 066 - Code Editor - SageMaker Studio_ - studio-d-7bfcdotqf1br.studio.us-east-1.sagemaker.aws

  1. エディタ画面が表示されていれば完了です。

FireShot Capture 067 - Welcome — SageMaker Code Editor_ - qwctopj4voqlv78.studio.us-east-1.sagemaker.aws

4.GenUのデプロイ

  1. 左上のハンバーガーメニューから Terminal > New Terminal の順で遷移し、ターミナルを起動します。

FireShot Capture 068 - Welcome — SageMaker Code Editor_ - qwctopj4voqlv78.studio.us-east-1.sagemaker.aws

FireShot Capture 083 - Welcome — SageMaker Code Editor_ - qwctopj4voqlv78.studio.us-east-1.sagemaker.aws

  1. ターミナル上で以下コマンドを実行し、GenUのリポジトリをクローンします。
git clone https://github.com/aws-samples/generative-ai-use-cases-jp
  1. 左上のハンバーガーメニューから File > Open Folder... の順で遷移し、GenUのフォルダ(/home/sagemaker-user/generative-ai-use-cases-jp/)を開きます。

FireShot Capture 070 - Welcome — SageMaker Code Editor_ - qwctopj4voqlv78.studio.us-east-1.sagemaker.aws

FireShot Capture 071 - Welcome — SageMaker Code Editor_ - qwctopj4voqlv78.studio.us-east-1.sagemaker.aws

  1. GenUのフォルダが開けたら再度ターミナルを立ち上げ、以下のコマンドでディレクトリを移動します。
cd /home/sagemaker-user/generative-ai-use-cases-jp
  1. パッケージをインストールします。
npm ci
  1. CDK を利用したことがない場合、初回のみ Bootstrap 作業が必要です。すでに Bootstrap された環境では以下のコマンドは不要です。
npx -w packages/cdk cdk bootstrap
  1. 続いて、以下のコマンドで AWS リソースをデプロイします。(デプロイが完了するまで20分程度かかる場合があります)
# 通常デプロイ
npm run cdk:deploy

# 高速デプロイ (作成されるリソースを事前確認せずに素早くデプロイ)
npm run cdk:deploy:quick
  1. デプロイ完了時にGenUのURLが表示されるので、ブラウザの別タブで開きます。

FireShot Capture 072 - generative-ai-use-cases-jp — SageMaker Code Editor_ - qwctopj4voqlv78.studio.us-east-1.sagemaker.aws

  1. ブラウザでGenUのWebサイトにアクセスできれば完了です。

FireShot Capture 073 - GenAI Use Cases - d1a9hoh2kodymh.cloudfront.net

5.GenUの動作確認

  1. ユーザー名とパスワードを設定し、アカウントを作成します。
    ユーザー名: メールアドレス
    パスワード: 大文字・数字・特殊文字を含む8文字以上の文字列

FireShot Capture 074 - GenAI Use Cases - d1a9hoh2kodymh.cloudfront.net

  1. 入力したメールアドレス宛に確認コードが届くので、コードを入力して確定を押下します。(メールが届かない場合は、迷惑メールアドレスの確認やコードの再送信をお試しください)

Capture-2025-01-29-145510

FireShot Capture 076 - GenAI Use Cases - d1a9hoh2kodymh.cloudfront.net

  1. コード認証後、GenUのホーム画面が表示されるので、チャットの試すを押下します。

FireShot Capture 077 - GenAI Use Cases - d1a9hoh2kodymh.cloudfront.net

  1. 任意の内容を入力し、送信ボタンを押下します。

FireShot Capture 078 - GenAI Use Cases - d1a9hoh2kodymh.cloudfront.net

  1. 無事回答が生成されたらOKです。

FireShot Capture 079 - GenAI Use Cases - d1a9hoh2kodymh.cloudfront.net

  1. モデル変更やその他ユースケースも利用可能なので、自由に試してみましょう。

FireShot Capture 080 - GenAI Use Cases - d1a9hoh2kodymh.cloudfront.net

6.後片付け

必要に応じてリソースの削除を行いましょう。

GenUの削除

  1. CodeEditorのターミナルで以下のコマンドを実行することでGenUのリソースを削除できます。
npm run cdk:destroy

SageMaker Studioの削除

  1. CloudFormationのスタックを削除することでリソースの削除ができます。

FireShot Capture 081 - CloudFormation - スタック CodeEditorStack - us-east-1.console.aws.amazon.com

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.