AIトークの設計(フロント概要)

注意点

今現在開発中のもののため、内容を変更する可能性があります。

使用技術

• 言語
  • JavaScript
• フレームワーク
  • React
  • React Bootstrap
• 利用外部サービス
  • AWS(S3,Amazon Polly)
  • Netlify
  • Nody API

サービスの流れ

画面設計

• PC画面(Reactのコンポーネントクラスが入っています)
  

• スマホ画面z
  

クラス図

初めてまともなクラス図を描いたので、矢印の使い方を間違っている可能性があります。
また、クラス解説の内容と矛盾してる可能性があります。

クラス解説

LiveTalkPage

• 概要

"/livetalk"に遷移するページそのものである。そのため、この中に様々なコンポーネントを集約させる。

myMessageForm

• 概要

ユーザーがAIに対して、メッセージを送るためのフォームである。
メッセージの送り方は、テキストボックスに入力するか、録画ボタンを押して、マイクを通して音声をテキストに変換する方法である

SpeechBubble

• 概要

AIが最後に喋った台詞を記載する

TalkingLog

• 概要

AIとユーザーの会話ログをスクロールバーの末尾に新しいものを表示

実際にログ1つ分の表示の仕方

表示

 <p>私：元気？</p>

表示するための配列の構造

配列の構造

 [{who: '私',speech:'元気？'},{Who: 'AI',speech:'元気？'}];

Live2DController

• 概要

Live2Dを操作するコントローラー。音声と再生させながら、口パクモーションを再生させる!
Live2Dの操作を参考にするもの：https://docs.live2d.com/cubism-sdk-tutorials/sample-build-web/?locale=ja