Bedrockで遊ぼう！短期間で色々開発してみた

by taiko19xx

Slide 1

Slide 1 text

JAWS-UG 秋田勉強会@2024/08/10 #jawsug #jawsugtohoku #jawsugakita 木村俊彦 @taiko19xx Bedrockで遊ぼう！短期間で色々開発してみた

Slide 2

Slide 2 text

● 木村俊彦 ○ X: @taiko19xx ● 仙台でゲームの会社に勤めてます ○ Kubernetes(EKS)とGitHub Actionsばっかり触っています ● 技術同人誌サークルの「杜の都の開発室」をやっています ● 最近のトピック ○ 遺伝子検査を受けてみました ○ 知り合いの作り方がよくわからない自己紹介

Slide 3

Slide 3 text

● ここ1ヵ月、Bedrockを使って色々作っていました ● その中で得られた知見や方針などを色々お話できればと思います ● 作ったものはこちら ○ https://github.com/taiko19xx/202408_bedrock_apps 概要

Slide 4

Slide 4 text

● 前日談 ● 基本構成と方針 ● 作ったものの紹介 ● 作ってみてわかったこと今日の内容

Slide 5

Slide 5 text

前日談

Slide 6

Slide 6 text

● 7/5にJAWS-UG 仙台で生成AIのハンズオンがあった ● 懇親会で秋田への参加を誘われる ● 話すネタどうしようか... ● そういえばハンズオンでBedrockの話があったな... 前日談

Slide 7

Slide 7 text

いい機会なのでいろいろ作ってみよう！

Slide 8

Slide 8 text

基本構成・方針

Slide 9

Slide 9 text

● Bedrock ● Lambda ○ Node.js 20 / arm64 ● CloudFront ○ HTML配信用 ● S3 ○ CloudFrontのバックエンド / 画像保存先 ● DynamoDB 基本構成

Slide 10

Slide 10 text

(8/1時点)

Slide 11

Slide 11 text

● Webアプリを構築 ○ HTMLはBedrockに生成してもらう ● API側はLambda ○ 関数URLを使用 ○ 関数は手書き ● BedrockはClaude 3 Haiku / 3.5 Sonnetを使用 ○ そのためオレゴンかバージニア北部基本方針

Slide 12

Slide 12 text

東京リージョンで使えるようになった！！

Slide 13

Slide 13 text

● Webアプリを構築 ○ HTMLはBedrockに生成してもらう ● API側はLambda ○ 関数URLを使用 ○ Lambdaは手書き ● BedrockはClaude 3 Haiku / 3.5 Sonnetを使用 ○ そのためオレゴンかバージニア北部 ● Bedrockも含め全て東京リージョン基本方針

Slide 14

Slide 14 text

作ってみたもの

Slide 15

Slide 15 text

チャットボットくん

Slide 16

Slide 16 text

● 会話するだけ ● 特に調整していないので素の状態 ● 履歴はブラウザに保存 ● とりあえずということで作ってみた ○ コンソール入らないで済むので便利チャットボットくん

Slide 17

Slide 17 text

マルチ翻訳くん

Slide 18

Slide 18 text

● 言語自動認識+複数言語への翻訳 ● やっていることはほぼAmazon Translator ● 20言語ぐらい対応 ○ 言語コードを送っているだけなのでどんどん増やせる ● こういうツールを使う場面があったのでそれの再現マルチ翻訳くん

Slide 19

Slide 19 text

文章校正くん

Slide 20

Slide 20 text

● 入力した文章を指定したスタイルに校正してくれる ○ フォーマルな文章をカジュアルに、その逆も ● 校正部分にハイライトし、理由も表示してくれる ● 前々から欲しいと思っていたので作成文章校正くん

Slide 21

Slide 21 text

画像タグ付けくん

Slide 22

Slide 22 text

● S3にアップロードした画像にタグ付けをする ○ アップロードはPresigned URL経由 ○ タグデータはDynamoDBに保存 ○ タグによる絞り込みも可能 ● これのみデータはAWS側に保存されているため共有画像タグ付けくん

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

作ってみてわかったこと

Slide 25

Slide 25 text

● API構築+HTML生成で2〜3時間あれば作れる ● HTMLだけでも、API側のモックとしての利用には最適 ● 簡単な内部向けツールであればサクッと作れそうスピード感は半端ない

Slide 26

Slide 26 text

● 書いてあることはやるが、書いてないことはやってくれない ● 「いい感じにして」「よしなに」は難しい ● プロジェクトのことを何も知らない人に指示するにはどうするのか、と考えるとよさそう ● データ構造は文字で書くよりそのまま書いて参照してもらったほうが早いプロンプトは仕様書

Slide 27

Slide 27 text

● 出力される結果を前もって予想しておく ○ APIの説明でresultというキーを使ってたらアプリ側の変数と重複してしまい、変な結果になった ● 自分が指示される側であればどうか、を考える ○ 仕様書と合わせて AIの気持ちになる

Slide 28

Slide 28 text

● 例えばコード生成を任せるのであれば、ライブラリや技術自体の知識はある程度必要 ○ そもそもの使い方を知らないと調整できない ○ 間違ってるので直してと言っても100%直る訳ではない ● 凝ったことをしたい場合は用語と使われ方・使い方の知識が必要 ○ データのブラウザへの保存やロード画面の表示など完全にお任せしない

Slide 29

Slide 29 text

● 作成したアプリを試しに社内で公開した ● 想定外な使われ方をし出して、費用が大変なことになった ● それはそれで色々勉強になった ● 最悪WAFでIPブロックいたずらに気を付ける

Slide 30

Slide 30 text

● トークン量に応じた課金のため、トークン量の確認は必須 ● 事前にトークン量の算出は難しい ○ Haikuは気にならないが、Sonnetだとちょっと気になるレベル ○ インプットとアウトプットで段違いなのも注意 ● メトリクスとしては見られるが、モデル毎になる ○ InputTokenCount / OutputTokenCount ● トークン量は呼び出し結果内に含まれる ○ 個別の計測もカスタムメトリクスで可能トークン量をよく見る

Slide 31

Slide 31 text

● 色々作ってみた結果とそこから得た知見の共有でした ● スッと作って動かせるのはやはり楽しい ● 時間も限られていましたが、色々作りたいものが作れて満足 ● アイディアは出そうと思えば無限に出てくる ● 生成AIを利用したアプリ作成の知見も得られたので良かったです ● 是非お盆の暇つぶしにいかがでしょうかまとめ

Slide 32

Slide 32 text

ありがとうございました