- 삼성 닷컴을 사용해 냉장고를 검색할 경우 같은 이름이지만 다른 가격의 제품들이 너무 많았습니다.
- 또한 가격이 다른 제품은 제품 명은 같지만 스펙 정보가 살짝 다른 이유였고 고객들이 이 제품들을 모두 비교하기에는 불편함이 있었습니다.
- 또한 제품에 대한 정보를 얻기 위해서는 각각의 제품 상세정보 페이지에 접근해야만 해당 제품에 대한 스펙을 알아낼수 있다는 점도 불편했습니다.
- RAG 아키텍처를 적용한 삼성 닷컴 챗봇 ChatDA 개발
- 고객에게 자연스러운 대화를 통해 원하는 정보를 제공하는 챗봇을 개발했습니다. 고객은 이를 통해서 기존 챗봇에서는 얻지 못했던 냉장고 제품에 대한 정보를 대화를 통해 얻을 수 있으며, 또한 제품 비교가 훨씬 간편해집니다.
- 또한 삼성닷컴을 활용하며 궁금한 점이 있다면 호출어 인식 기능(Hi ChatDA)을 통해 ChatDA를 호출할수 있으며 음성 인식 기능으로 대화가 가능합니다.
| 서다찬 (팀장) | 이승준 | 이승민 | 박이언 | 나해란 | 이진성 |
|---|---|---|---|---|---|
 백엔드 |
 백엔드 |
 백엔드 |
 백엔드 |
 프론트엔드 |
 프론트엔드 |
- Front : React, TypeScript,
- Back-end : FastAPI, Uvicorn, Mysql
- 버전관리 : Gitlab
- 협업 툴 : Notion, Jira
- 배포 : Jenkins, Docker
- 모니터링 : Elastic Search, Logstash, Beats, Kibana
- 패키지 다운로드
$ pip install -r requirements.txt
- 실행
$ uvicorn chatdaAPI.main.app:app --host 0.0.0.0 --reload
- 패키지 다운로드
$ npm i
- 빌드
$ npm run dev
| prefix | 설명 |
|---|---|
| feat | 새로운 기능 추가 |
| fix | 버그 수정 |
| docs | 문서 수정 |
| style | 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 |
| refactor | 코드 리펙토링 |
| test | 테스트 코드, 리펙토링 테스트 코드 추가 |
| chore | 빌드 업무 수정, 패키지 매니저 수정 |
| etc | 기타 업무 |
https://documenter.getpostman.com/view/32331322/2sA35K21LW
- FastAPI에서 채팅 내역을 주고 받으면 SSE(Server Sent Event)를 활용해 한글자씩 출력이 되도록 기능을 구현했습니다.
- 하지만 로컬 환경에서 해당 이벤트를 주고 받을 때는 문제가 없었지만 클라우드 환경에서 서비스가 배포 될 경우 전체 데이터가 한번에 버퍼링 되어 받아지는 문제가 있었습니다.
- 이러한 문제의 원인은 Event Stream을 활용하며 만약 Event를 보내는 간격이 너무 짧을 경우 AWS와 같은 클라우드에서 버퍼링을 통해 전체 데이터를 한번에 보내는 것이였습니다.
- 이러한 문제를 해결하기 위해서 각각의 event 뒤에 sleep(0.02)로 약간의 딜레이를 추가시킴으로써 문제를 해결시켰습니다.
- 각각의 채팅 내역은 웹에서 SessionStorage에 저장이 되고 React에서는 state로 관리하며 이전 내역을 저장했습니다.
- 하지만 채팅 내역을 입력 받으면서 Event Stream을 통해 한글자씩 입력을 받게 되는데 대화 내역에 글자가 하나만 추가되는 문제가 발생했습니다.
const fetchMessage = async (message: string, tts = false) => {
setMessages((prev) => [
...prev,
{ content: message, isUser: true },
{ isUser: false, isLoading: true },
]);
- 해당 문제는 useState를 활용하면서 데이터를 저장하는 형식의 문제였습니다.
const [messages, setMessages] = useState([])
- 위와 같은 형식으로 메세지 내용을 저장했지만 json과 같은 형식의 데이터를 배열로 저장하기 위해서는 아래와 같은 형식으로 초기화가 필요했습니다.
const [messages, setMessages] = useState([{}])
- 파이썬 코드에서는 snake_case를 사용하지만 웹에서 사용되는 컨벤션을 따르기 위해서는 camelCase로 변환하는 과정이 필요했습니다.
- 이를 위해서 Pydantic에서 BaseModel을 사용할때 별도의 CamelModel이라는 클래스를 선언하고 해당 클래스가 BaseModel을 상속받은 뒤 config에서 외부로 노출되는 데이터에 대해서는 snake_case를 camelCase로 변환하도록 구현했습니다.
class CamelModel(BaseModel):
model_config = ConfigDict(
alias_generator=to_camel,
populate_by_name=True,
protected_namespaces=(),
from_attributes=True,
)