AWS Amplify Gen2 + Bedrock AgentCore を使ったフルサーバーレスの差分検出Webアプリです。
| 機能 | 説明 | バックエンド |
|---|---|---|
| 画像比較 | 2枚の画像をピクセルレベルで比較し、差分画像・メトリクスを表示後、AgentCore SSEでAI分析 | Docker Lambda（ピクセル比較）→ AgentCore（AI分析） |
| チェックシート比較 | チェックシート画像をOCRで読み取り、マスターデータとの差分を検出 | AgentCore (Claude Haiku 4.5 SSE) |
- AWSアカウント（Bedrockのモデルアクセスが有効であること）
- Node.js 22+
- Git
AWS Console → Bedrock → Model access で以下のモデルを有効化してください：
jp.anthropic.claude-haiku-4-5-20251001-v1:0（AgentCore AI分析 & OCR）
リージョンは ap-northeast-1（日本クロスリージョン推論）で有効化が必要です。
- このリポジトリを自分のGitHubアカウントにフォーク/プッシュ
- AWS Amplify Console を開く
- 「新しいアプリ」→「リポジトリを接続」でリポジトリを選択
- ビルド設定はデフォルトのまま「保存してデプロイ」
これだけでフロントエンド・Lambda・AgentCoreランタイムが全て自動デプロイされます。
デプロイ完了後、Amplifyが発行するURLにアクセスし、Cognitoでユーザー登録・ログインすれば使えます。
# 依存関係のインストール
npm install
# バックエンドの一時デプロイ（個人用の占有AWS環境）
npx ampx sandbox
# 別ターミナルでフロントエンド開発サーバーを起動
npm run devnpx ampx sandbox は初回に5〜10分程度かかります（Dockerイメージのビルド含む）。
完了すると amplify_outputs.json が自動生成され、フロントエンドがバックエンドに接続できるようになります。
- 「比較元」「比較先」にそれぞれ画像をアップロード（PNG, JPEG, BMP対応）
- 「比較を実行」ボタンをクリック
- 結果が2段階で表示される：
- ステージ1（Lambda）: 差分メトリクス（ノルム値、差分ピクセル数、差分割合）と差分画像
- ステージ2（AgentCore SSE）: 差分がある場合、比較先画像1枚とメトリクスをAIがリアルタイム分析
- auでんきのチェックシート画像をアップロード
- 「チェックシートを解析する」ボタンをクリック
- AIがSSEストリーミングでリアルタイムに応答：
- 画像からチェックリストデータをOCR抽出
- マスターデータとフィールド単位で比較
- 差分サマリー（一致/変更/追加/削除）と詳細を表示
npm run dev # Viteフロントエンド開発サーバー（http://localhost:5173）
npm run dev:agent # AgentCoreエージェントのローカル実行（ウォッチモード）
npm run build # TypeScriptチェック + Viteプロダクションビルド
npx ampx sandbox # 個人用バックエンドの一時デプロイ├── src/ # フロントエンド（React + Vite + Tailwind）
│ ├── App.tsx # メインページ（タブ切替UI）
│ ├── main.tsx # エントリポイント（Amplify初期化 + Cognito認証）
│ ├── components/ui/ # shadcn/ui コンポーネント
│ └── components/ai-elements/ # 差分表示コンポーネント
├── amplify/
│ ├── backend.ts # Amplifyバックエンド定義
│ ├── auth/resource.ts # Cognito認証設定
│ ├── agent/ # AgentCoreランタイム（OCR比較 & 画像AI分析）
│ │ ├── app.ts # エージェント本体（30MB bodyLimit設定）
│ │ ├── diff-compare.ts # 差分比較ツール
│ │ ├── checklist-schema.ts # Zodスキーマ
│ │ ├── mock-checklist.ts # マスターデータ
│ │ ├── resource.ts # CDKリソース定義
│ │ └── Dockerfile # コンテナイメージ
│ └── image-compare-lambda/ # 画像比較Lambda（ピクセル比較のみ）
│ ├── handler.ts # Lambdaハンドラー
│ ├── image-compare.ts # sharp + pixelmatch比較ロジック
│ ├── resource.ts # CDKリソース定義（Lambda + API Gateway）
│ └── Dockerfile # ARM64 Lambdaイメージ
├── amplify_outputs.stub.json # ローカル開発用スタブ
└── CLAUDE.md # Claude Code用プロジェクト説明
ブラウザ (React)
├─ [画像比較]
│ ├─ ステージ1: API Gateway (JWT) ──→ Docker Lambda (sharp/pixelmatch)
│ │ → ピクセル比較メトリクス + 差分画像
│ └─ ステージ2: AgentCore Runtime (Cognito) ──→ コンテナ (Claude SSE)
│ → 比較先画像1枚+メトリクスでAI分析
└─ [OCR比較] ──→ AgentCore Runtime (Cognito) ──→ コンテナ (Claude SSE)
└─ diffCompareTool
- 認証: Cognito User Pool（メールアドレス登録）
- 画像比較: 2段階パイプライン — Lambda（sharp/pixelmatchでピクセル比較）→ AgentCore SSE（Claude Haiku 4.5で比較先画像+メトリクスからAI分析）
- OCR比較: AgentCoreランタイム（ToolLoopAgent）でSSEストリーミング、Claude Haiku 4.5のビジョン機能でOCR
- ボディサイズ: AgentCoreへは比較先画像1枚のみ送信（424エラー回避）。フロントエンドで送信前に1200px幅・JPEG 80%にリサイズ
main ブランチにpushすると本番環境に自動デプロイされます。
新しいブランチ（例: dev）をAmplifyに登録すれば、検証環境を簡単に追加できます。