주의점

지금 현재 개발 중인 것이므로 내용을 변경할 수 있습니다.

사용 기술

언어

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의 조작을 참고로 하는 것: htps : // / cs.ぃゔぇ2d. 이 m / 곰팡이 smsdk - tho ls / mp ぇ- 뵙드 ld - u b /?ぉかぇ = 그럼