株式会社サイバーエージェント新卒エンジニア研修最終成果発表資料

by Ren

Slide 1

Slide 1 text

最終成果発表 BeauBelle

Slide 2

Slide 2 text

2 1. サービス紹介 2. 使用技術 3. まとめ BeauBelle

Slide 3

Slide 3 text

3 サービス紹介 1 BeauBelle

Slide 4

Slide 4 text

「「「どんな人がタイプ？？」」」  優しい人...？？  〇〇みたいな人  （伝わってるかな...🤔）  笑顔が似合う...？？ 

Slide 5

Slide 5 text

あなたの、本当の理想ってどんな人...？

Slide 6

Slide 6 text

コンセプト Service concept 6

Slide 7

Slide 7 text

コンセプト Service concept 7

Slide 8

Slide 8 text

コンセプト Service concept 8

Slide 9

Slide 9 text

コンセプト Service concept 9

Slide 10

Slide 10 text

コンセプト Service concept 10

Slide 11

Slide 11 text

コンセプト Service concept 11

Slide 12

Slide 12 text

コンセプト Service concept 12

Slide 13

Slide 13 text

コンセプト Service concept 13

Slide 14

Slide 14 text

コンセプト Service concept 14 AIで生成した美女の画像をシェアする新たな SNS BeauBelle

Slide 15

Slide 15 text

実装機能 Implementation function 15 Point 1 AIで美女を生成→シェア Point 2 現れる美女を評価（いいね/スーパーライク）

Slide 16

Slide 16 text

実装機能 Implementation function 16 いいねスーパーライク自分のタイプ/理想が詰まった一覧

Slide 17

Slide 17 text

17 使用技術 / ツール工夫した点 2 BeauBelle

Slide 18

Slide 18 text

WEB フロント

Slide 19

Slide 19 text

使用技術 Frontend 19 ● 使用技術：Next.js 14 ● データ取得：SWR ● バリデーション：zod ● UI：shadcn　Storybook ● 認証： NextAuth

Slide 20

Slide 20 text

バックエンド

Slide 21

Slide 21 text

使用技術 /ツール Backend 21 ● 言語：Ruby on Rails ● DB：MySQL 8.0 ( Aurora ) ● 非同期処理：Active Job ● マイグレーション：Active Record ● AWS S3：EKS IRSA を利用した署名付きURL

Slide 22

Slide 22 text

Slide 23

Slide 23 text

違反画像の自動検知機能 Automatic detection of violating images 23 AI機能投稿画像に対して、掲載基準に満たない不適切な画像を自動検知し、違反画像の投稿を抑制掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...）画像を投稿

Slide 24

Slide 24 text

AIの活用 AI utilization function 24 掲載基準に満たない不適切な画像を　自動検知するシステム　🔍 投稿された画像に対して、ML側で投稿内容が規約違反かどうかを推定するリアルタイム推論を実装予定掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...）投稿 🎵 安心安全な投稿機能

Slide 25

Slide 25 text

AIの活用 AI utilization function 25 投稿 🎵 安心安全な投稿機能掲載基準に満たない不適切な画像を　自動検知するシステム　🔍 投稿された画像に対して、ML側で投稿内容が規約違反かどうかを推定するリアルタイム推論を実装予定掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...）

Slide 26

Slide 26 text

AIの活用 AI utilization function 26 掲載基準に満たない不適切な画像を　自動検知するシステム　🔍 投稿された画像に対して、ML側で投稿内容が規約違反かどうかを推定するリアルタイム推論を実装予定掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...）投稿 🎵 安心安全な投稿機能確認中

Slide 27

Slide 27 text

27 AIの活用 & 検知技術 AI utilization function & Detection technology 第1フィルター第2フィルター第3フィルター # コンセプト人か判定 # コンセプト女性か判定 # 倫理不適切判定違反をブロック

Slide 28

Slide 28 text

28 AIの活用 & 検知技術 AI utilization function & Detection technology 第1フィルター第2フィルター第3フィルター # コンセプト人か判定 # コンセプト女性か判定 # 倫理不適切判定違反をブロック

Slide 29

Slide 29 text

29 AIの活用 & 検知技術 AI utilization function & Detection technology 第1フィルター第2フィルター第3フィルター # コンセプト人か判定 # コンセプト女性か判定 # 倫理不適切判定違反をブロック

Slide 30

Slide 30 text

AIの活用 AI utilization function 30 掲載基準に満たない不適切な画像を　自動検知するシステム　🔍 投稿された画像に対して、ML側で投稿内容が規約違反かどうかを推定するリアルタイム推論を実装予定掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...）投稿 🎵 安心安全な投稿機能確認中不適切

Slide 31

Slide 31 text

画像データフロント MLサイド推論エンドポイントバックエンド Amazon S3 投稿画像格納 AWS Lambda Amazon SageMaker イベントトリガー Lambda 起動 Instances 推論管理 S3のオブジェクトのパス推論結果推論結果受け取り確認 Model v1 Instances 学習管理 Model v2 蓄積された通報画像データ Train 学習インスタンス推論学習 Amazon ECR Amazon ECR 31 AI機能 & ML運用 AI function & MLOps 全体フロー

Slide 32

Slide 32 text

32 AI機能 & ML運用 AI function & MLOps ④ 画像データフロント MLサイド推論エンドポイントバックエンド Amazon S3 ① 投稿画像格納 AWS Lambda Amazon SageMaker ③ イベントトリガー Lambda 起動 Instances 推論管理 ② S3のオブジェクトのパス ⑤ 推論結果 ⑥ 推論結果 ⑦ 受け取り確認 Model v1 Instances 学習管理 Model v2 蓄積された通報画像データ Train 学習インスタンス推論学習 Amazon ECR Amazon ECR 推論フロー

Slide 33

Slide 33 text

33 AI機能 & ML運用 AI function & MLOps 画像データフロント MLサイド推論エンドポイントバックエンド Amazon S3 投稿画像格納 Amazon SageMaker イベントトリガー Lambda 起動 Instances S3のオブジェクトのパス推論結果推論結果受け取り確認 Model v1 Instances ① 推論インスタンスの起動 Model v2 ② 蓄積された通報画像データ Train ③ 再学習推論学習 Amazon ECR Amazon ECR Model v2 AWS Lambda 推論管理 ④ モデルのアップロード再学習フロー

Slide 34

Slide 34 text

34 運用構成 3 BeauBelle

Slide 35

Slide 35 text

設計思想・技術選定 Concepts of design and Technology selection 35 DevOps ✅ サービス成長を視野に入れたエコシステム ✅ デプロイの属人化を防止したインフラ設計 Developer Safety ✅ GitHub を SSOT にコード一元性を確保 ✅ 最小権限の原則遵守と責務境界の明確化 Availability ✅ マルチ AZ 構成でトラフィック分散 ✅ リクエストパターンに応じたスケール戦略 Kubernetes をベースにエコシステムを構築

Slide 36

Slide 36 text

36 アーキテクチャ Architecture design ①② 可用性 ● 3 AZ で負荷分散 ● ASG と HPA による水平オートスケーリング ③ セキュリティ ● プライベートサブネットにノードプールを配置 ● ML Platform との繋ぎ込みに NAT Gateway を使用 ① ② ③ 36

Slide 37

Slide 37 text

運用基盤 BeauBelle Ops 37 👉 ML 基盤の統合 👉 GitOps の整備 👉 Telemetry の整備 Kubernetes エコシステムの成長 37

Slide 38

Slide 38 text

運用基盤 BeauBelle Ops 38 Kubernetes をベースとしたエコシステム 38 サービスの成長を視野に入れたインフラ設計継続的な開発∞運用を目指した DevOps の枠組みについて

Slide 39

Slide 39 text

開発の足を止めないための仕組み作り Establishing Systems to Maintain Continuous Development 迅速なデプロイの実現と属人化の防止 ● GitHub を使って "ボタン一つ" で "誰でも" デプロイ可能 ● サービス開発者は変更差分を即座に本番環境に反映可能リリースブランチを選択してこれをポチッとする定義したワークフローに基づいて CI を順次実行（全部緑色になっていればデプロイ完了） 39

Slide 40

Slide 40 text

開発の足を止めないための仕組み作り Establishing Systems to Maintain Continuous Development 40 40 WEB UI によるリソース可視化と管理 ● デプロイタスクは ArgoCD が管理することで GitOps 化 ● WEB ブラウザからリソースの状態確認やログ調査が可能 WEB からデプロイリソース（Pod）の操作（ログ調査等）が可能デプロイステータス

Slide 41

Slide 41 text

BeauBelle デプロイの裏側 Behind the scenes of BeauBelle operations 41 41 1. GitHub Workﬂows を実行 2. コンテナイメージのビルドとプッシュ 3. マニフェストのイメージタグを更新 4. ArgoCD が K8s マニフェストの変更差分を検知して kube API を実行

Slide 42

Slide 42 text

BeauBelle デプロイの裏側 Behind the scenes of BeauBelle operations 42 42 1. GitHub Workﬂows を実行 2. コンテナイメージのビルドとプッシュ 3. マニフェストのイメージタグを更新 4. ArgoCD が K8s マニフェストの変更差分を検知して kube API を実行

Slide 43

Slide 43 text

BeauBelle デプロイの裏側 Behind the scenes of BeauBelle operations 43 43 1. GitHub Workﬂows を実行 2. コンテナイメージのビルドとプッシュ 3. マニフェストのイメージタグを更新 4. ArgoCD が K8s マニフェストの変更差分を検知して kube API を実行

Slide 44

Slide 44 text

BeauBelle デプロイの裏側 Behind the scenes of BeauBelle operations 44 44 1. GitHub Workﬂows を実行 2. コンテナイメージのビルドとプッシュ 3. マニフェストのイメージタグを更新 4. ArgoCD が K8s マニフェストの変更差分を検知して kube API を実行

Slide 45

Slide 45 text

45 まとめ・振り返り 3 BeauBelle

Slide 46

Slide 46 text

チーム目標 Team vision and goal 46 46 “ シナジーを活かして一歩先へ ” 各領域の専門性を結びつけ機能要件を超越して技術の優位性を確立せよ！

Slide 47

Slide 47 text

47 47 振り返り Team vision and goal 各領域の専門性 / 技術の優位性 ● メンバー各々の得意領域・技術をプロダクトに全面的に活かす！ ● 選定・実装した技術は責任を持ち最後まで管理する！開発の振り返り・チーム全体の所感 ● プロダクトに組み込むだけでなくメンバーへの技術浸透まで実施 ● デプロイ完遂とともにバグの改善にはチーム全員がコミット

Slide 48

Slide 48 text

48 https://beaubelle.tech07.ca24.ca-developers.io BeauBelle 使ってみてね👋

Slide 49

Slide 49 text

インフラ側キャパシティ確保済み Itsudemo access shitene 49 49 Grafana によるモニタリング HPA によるマルチ AZ スケーリング

Slide 50

Slide 50 text

FIN.