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

Transcript

1. 最終成果発表 BeauBelle
2. 2 1. サービス紹介 2. 使用技術 3. まとめ BeauBelle
3. 3 サービス紹介 1 BeauBelle
4. 「「「どんな人がタイプ？？」」」
 優しい人...？？
 〇〇みたいな人
 （伝わってるかな...🤔）
 笑顔が似合う...？？

5. あなたの、本当の理想ってどんな人...？
6. コンセプト Service concept 6
7. コンセプト Service concept 7
8. コンセプト Service concept 8
9. コンセプト Service concept 9
10. コンセプト Service concept 10
11. コンセプト Service concept 11
12. コンセプト Service concept 12
13. コンセプト Service concept 13
14. コンセプト Service concept 14 AIで生成 した 美女 の画像を シェアする新たな SNS BeauBelle
15. 実装機能 Implementation function 15 Point 1 AIで美女を生成→シェア Point 2 現れる美女を評価 （いいね/スーパーライク）
16. 実装機能 Implementation function 16 いいね スーパーライク 自分のタイプ/理想が 詰まった一覧
17. 17 使用技術 / ツール 工夫した点 2 BeauBelle
18. WEB フロント
19. 使用技術 Frontend 19 • 使用技術：Next.js 14 • データ取得：SWR • バリデーション：zod • UI：shadcn　Storybook • 認証： NextAuth
20. バックエンド
21. 使用技術 /ツール Backend 21 • 言語：Ruby on Rails • DB：MySQL 8.0 ( Aurora ) • 非同期処理：Active Job • マイグレーション：Active Record • AWS S3：EKS IRSA を利用した署名付きURL
22. ML
23. 違反画像の自動検知機能 Automatic detection of violating images 23 AI機能 投稿画像に対して、 掲載基準に満たない不適切な画像を自動 検知し、違反画像の投稿を抑制 掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...） 画像を投稿
24. AIの活用 AI utilization function 24 掲載基準に満たない不適切な画像を　 自動検知するシステム　🔍 投稿された画像に対して、ML側で投稿内容が 規約違反かどうかを推定するリアルタイム推 論を実装予定 掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...） 投稿 🎵 安心安全な投稿機能
25. AIの活用 AI utilization function 25 投稿 🎵 安心安全な投稿機能 掲載基準に満たない不適切な画像を　 自動検知するシステム　🔍 投稿された画像に対して、ML側で投稿内容が 規約違反かどうかを推定するリアルタイム推 論を実装予定 掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...）
26. AIの活用 AI utilization function 26 掲載基準に満たない不適切な画像を　 自動検知するシステム　🔍 投稿された画像に対して、ML側で投稿内容が 規約違反かどうかを推定するリアルタイム推 論を実装予定 掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...） 投稿 🎵 安心安全な投稿機能 確認中
27. 27 AIの活用 & 検知技術 AI utilization function & Detection technology 第1フィルター 第2フィルター 第3フィルター # コンセプト 人か判定 # コンセプト 女性か判定 # 倫理 不適切判定 違反をブロック
28. 28 AIの活用 & 検知技術 AI utilization function & Detection technology 第1フィルター 第2フィルター 第3フィルター # コンセプト 人か判定 # コンセプト 女性か判定 # 倫理 不適切判定 違反をブロック
29. 29 AIの活用 & 検知技術 AI utilization function & Detection technology 第1フィルター 第2フィルター 第3フィルター # コンセプト 人か判定 # コンセプト 女性か判定 # 倫理 不適切判定 違反をブロック
30. AIの活用 AI utilization function 30 掲載基準に満たない不適切な画像を　 自動検知するシステム　🔍 投稿された画像に対して、ML側で投稿内容が 規約違反かどうかを推定するリアルタイム推 論を実装予定 掲載基準とは　✅ - コンセプト面（人の画像かどうか） - 倫理面（エロ / グロ / etc...） 投稿 🎵 安心安全な投稿機能 確認中 不適切
31. 画像データ フロント 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 全体フロー
32. 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 推論フロー
33. 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 推論管理 ④ モデルのアップロード 再学習フロー
34. 34 運用構成 3 BeauBelle
35. 設計思想・技術選定 Concepts of design and Technology selection 35 DevOps ✅ サービス成長を視野に入れた エコシステム ✅ デプロイの 属人化を防止 したインフラ設計 Developer Safety ✅ GitHub を SSOT に コード一元性 を確保 ✅ 最小権限の原則遵守 と 責務境界の明確化 Availability ✅ マルチ AZ 構成で トラフィック分散 ✅ リクエストパターンに応じた スケール戦略 Kubernetes をベースに エコシステムを構築
36. 36 アーキテクチャ Architecture design ①② 可用性 • 3 AZ で負荷分散 • ASG と HPA による 水平オートスケーリング ③ セキュリティ • プライベートサブネットに ノードプールを配置 • ML Platform との繋ぎ込みに NAT Gateway を使用 ① ② ③ 36
37. 運用基盤 BeauBelle Ops 37 👉 ML 基盤の統合 👉 GitOps の整備 👉 Telemetry の整備 Kubernetes エコシステムの成長 37
38. 運用基盤 BeauBelle Ops 38 Kubernetes を ベースとした エコシステム 38 サービスの成長を 視野に入れた インフラ設計 継続的な 開発∞運用 を目指した DevOps の枠組みについて
39. 開発の足を止めないための仕組み作り Establishing Systems to Maintain Continuous Development 迅速なデプロイの実現 と 属人化の防止 • GitHub を使って "ボタン一つ" で "誰でも" デプロイ可能 • サービス開発者は変更差分を即座に本番環境に反映可能 リリースブランチを選択して これを ポチッ とする 定義したワークフローに基づいて CI を順次実行 （全部緑色になっていればデプロイ完了） 39
40. 開発の足を止めないための仕組み作り Establishing Systems to Maintain Continuous Development 40 40 WEB UI によるリソース可視化と管理 • デプロイタスクは ArgoCD が管理することで GitOps 化 • WEB ブラウザから リソースの状態確認やログ調査が可能 WEB からデプロイリソース（Pod）の 操作（ログ調査等）が可能 デプロイステータス
41. BeauBelle デプロイの裏側 Behind the scenes of BeauBelle operations 41 41 1. GitHub Workflows を実行 2. コンテナイメージのビルドとプッシュ 3. マニフェストのイメージタグ を更新 4. ArgoCD が K8s マニフェストの 変更差分を検知して kube API を実行
42. BeauBelle デプロイの裏側 Behind the scenes of BeauBelle operations 42 42 1. GitHub Workflows を実行 2. コンテナイメージのビルドとプッシュ 3. マニフェストのイメージタグ を更新 4. ArgoCD が K8s マニフェストの 変更差分を検知して kube API を実行
43. BeauBelle デプロイの裏側 Behind the scenes of BeauBelle operations 43 43 1. GitHub Workflows を実行 2. コンテナイメージのビルドとプッシュ 3. マニフェストのイメージタグ を更新 4. ArgoCD が K8s マニフェストの 変更差分を検知して kube API を実行
44. BeauBelle デプロイの裏側 Behind the scenes of BeauBelle operations 44 44 1. GitHub Workflows を実行 2. コンテナイメージのビルドとプッシュ 3. マニフェストのイメージタグ を更新 4. ArgoCD が K8s マニフェストの 変更差分を検知して kube API を実行
45. 45 まとめ・振り返り 3 BeauBelle
46. チーム目標 Team vision and goal 46 46 “ シナジーを活かして一歩先へ ” 各領域の専門性 を結びつけ 機能要件を超越して 技術の優位性 を確立せよ！
47. 47 47 振り返り Team vision and goal 各領域の専門性 / 技術の優位性 • メンバー各々の得意領域・技術をプロダクトに全面的に活かす！ • 選定・実装した技術は責任を持ち最後まで管理する！ 開発の振り返り・チーム全体の所感 • プロダクトに組み込むだけでなくメンバーへの技術浸透まで実施 • デプロイ完遂とともにバグの改善にはチーム全員がコミット
48. 48 https://beaubelle.tech07.ca24.ca-developers.io BeauBelle 使ってみてね👋
49. インフラ側キャパシティ確保済み Itsudemo access shitene 49 49 Grafana によるモニタリング HPA によるマルチ AZ スケーリング
50. FIN.