Upgrade to Pro — share decks privately, control downloads, hide ads and more …

対話型AIプロダクトの今と展望
 〜ChatBot・VoiceBotの開発技術を解説〜

CyberAgent
December 14, 2023
860

対話型AIプロダクトの今と展望
 〜ChatBot・VoiceBotの開発技術を解説〜

CyberAgent

December 14, 2023
Tweet

More Decks by CyberAgent

Transcript

  1. 青野健利
 github: @brn
 twitter: brn227
 
 - 開発責任者 at AI

    Shift
 - Contributor of V8(~ 2018)
 自己紹介
  2. デジタルマーケティング分野のサービス開発を行う事業部。 全体の7割以上が技術職で構成され、広告取引の世界で培ったAI技術の適応領域を拡大中。 約350名を超える、エンジニア・研究者・データサイエンティスト・デザイナーが所属 DX AI D2C マーケ ティング AI クリエイ

    ティブ 対話AI 新事業 小売 医療 行政 GovTech 開発組織 DataScienceCenter データサイエンティストの横断組織 事業へのデータサイエンスの応用・実装 AI Lab AI技術の研究開発を行う専門組織 国際学会への論文投稿など学術貢献も活発 AI Tech studio ビジネスサイドと連携したプロダクト開発 接客 イベント
  3. デジタルマーケティング全般に関わる、幅広いAI技術の研究開発を目的に設立。 ビジネス課題の解決と学術的貢献を目指す。 ・KDD 2022 機械学習における観測遅延問題の 改善方法を提案 ・CVPR2022 研究開発の基礎技術となる指標や 分析方法を提案(3本の主著論文採択) ・ICML2022

    高次元情報を用いた逐次的な 意思決定手法を提案 ・国際カンファレンス 「IEEE RO-MAN」基調講演 ・「ACM MMAsia 2022」にAI Lab の山口光太が登壇 ・「SNL2022」にAI Lab研究員の 大谷まゆが登壇 ・「日本経済学会春季大会」に AI Labの蟻生・森脇・加藤・竹浪が 登壇 ・言語処理学会第29回年次大会 (NLP2023)にて過去最多となる 13件の発表を実施 国際トップカンファレンス での採択&発表 登壇実績 2022年 論文採択数 約 50本
  4. システムの特徴
 • マイクロサービス
 ◦ シナリオ構築/会話管理/Bot...etc 
 ◦ 双方向のリアルタイム通信
 
 


    • マルチテナントアプリケーション
 ◦ MySQLのデータベース分離によるセキュ リティ対応
 ◦ Nginxによるサブドメインの割り当て 

  5. 既存のVoiceBot構築の難しさ
 DialogFlowではシナリオのフローを表示するUIが存在しない 
 ➔ 手作業でフローを書き起こし、DialogFlow管理画面から入力する 
 
 
 
 •

    リソースの多重管理(人為的ミス、工数増加)
 
 • バージョン管理が困難(シナリオを含めたアプリケーションのロールバック が難しい)
 
 • 自社独自のリソースとの連携が難しい(音声認識などのモデルがGoogle提 供のものに限られる)

  6. シナリオ構築UI + 対話エンジン: DialogEngine
 DialogFlowの完全置き換えを目指し、UIと対話エンジン部分を内製化を行った 
 
 スクラッチで実装
 
 •

    シナリオ構築部分
 RDBによるグラフ管理
 
 • Botのワークフローの履 歴管理
 
 • 外部連携機能
 SMS/Mail/SIP転送...etc
 
 

  7. アーキテクチャ: DialogEngine(Admin, Bot) 
 • シナリオ作成画面とAPIを新設
 ➔ React Flow +

    RDBで軽量なシナリオ描画、か つ強整合なグラフ構造を実現

  8. 
 1. 運用中VoiceBotのDialogEngineへ のシナリオ移行
 2. Chat/Voiceのシナリオ構築サービ スの共通化
 3. レガシーコードのリファクタリング
 


    今後の展望
 既存
 
 1. LLMを活用のための基盤開発
 2. 既存システムへのLLMを導入
 3. 新規サービスの実装
 
 新規

  9. 自己紹介
 
 栗崎一真
 2023.5 AI-SHIFT 中途入社
 2023.5 AI-SHIFT 中途入社
 X:

    @KK_sep_TT
 主な業務
 chat bot, voicebot, 新規プロダクトのフロントエンド開発

  10. toB SaaS に求められる要件
 あまり重要ではないこと 
 重要なこと
 • SEO
 • 初期ロードの速度


    • 動作が軽いこと
 • 操作がわかりやすいこと
 SSRを使用しないSPAで構築 

  11. ChatBot, VoiceBot 管理画面開発
 私たちの toB SaaS の特徴
 
 • 複雑な画面が多い


    • API 連携が多い
 • フロントにもロジックがある

  12. コンポーネント設計 ~ Atomic Design からの脱却
 Atomic Design の問題点
 
 •

    コンポーネントの配置に悩む (特に Molecules or Organisms) 
 • Atoms 以外で再利用性の高いコンポーネントは少ない 
 • 実際に使用される場所から遠くに置かれて、どこから使用されているか分かりづらい 

  13. コンポーネント設計 ~ 多段階バケツリレー
 バケツリレー自体は悪いことではない (依存関係が分かりやすくなる)  
 
 バケツリレー自体は悪いことではない (依存関係が分かりやすくなる)  


    
 – しかし複雑なUIではpropsを自身は使わないのに受け取るコンポーネントが現れることがある
 Bはpropsを自身で使用しないで子に流すだけ
 
 Bが親と子両方と密結合になってしまっている 
 

  14. コンポーネント設計 ~ コンポジションパターン
 Bが不要なpropsを受け取らなくなった
 Bの責務(レイアウト)が明確に
 Bがコンポーネントをpropsで受け取るように変更
 【React】Context を使う前に #2 コンポジション

    (ReactNode 型の Props) を使え https://qiita.com/honey32/items/4d04e454550fb1ed922c 
 propsのバケツリレー対策でGlobal Stateを使うその前に... https://speakerdeck.com/taro28/propsnohaketuriredui-ce-teglobal-statewoshi-usonoqian-ni 
 より詳しくは以下を参照

  15. コンポーネント設計 ~ 試行錯誤 
 コンポーネント設計で考えることは多い
 
 再レンダリング
 ディレクトリ構造
 ビューとロジックの分離 


    コンポーネント粒度
 コンポジション
 props設計
 ユースケースに合わせて最適なアーキテクチャを考えていく必要がある 
 state管理
 CSS

  16. 複雑なロジックの例
 • Firestore の データの詳細検索
 ◦ Firestoreの検索はそこまで強くないのでTSで絞り込む必要がある。 
 
 •

    グラフのnodeの変換ロジックをフロントが持つ 
 ◦ フロントで node を繋げたりするので、nodeの型変換のロジックが必要 
 純粋関数を結構書く

  17. ライブラリのちからを借りる ~ React Hook Form
 管理画面には複雑なFormが多くある 
 自前で実装するのは大変
 swap
 append


    remove
 React Hook Form の便利なAPI
 useFieldArray
 • append
 • remove
 • swap
 動的なフォームのサポート