챗봇 프로젝트 개발 일지

BABY CAT·2022년 10월 15일

GwangJu AI Academy

목록 보기

5/6

<내가 맡은 부분이 챗봇이라 그냥 챗봇 프로젝트라고 함>

10/14 두번째 프로젝트 start!

프로젝트의 방향성이 대충 정해졌다.
10가지 중 고른 건데, web서비스를 기본으로 라이프, 사무직 등의 키워드를 가지고 기획서를 작성해야 한다.
아이디어 헤커톤이라고 한다. 아이디어 헤커톤을 통해 기업이 팀을 선택하는 방식이다.
이 방식을 *3번해서 기업의 선택을 받고 최종적으론 팀이 기업을 선택하는 방식이다.
10개 중 하나씩(총30개 중 3개) 골라서 기확안을 3번 작성해야 한다.

키워드를 보고 내가 생각한 것은 이렇다.

1. 첫 기획 : 랭킹 가계부

• 기존 가계부에 랭킹시스템과 개인미니홈피(프로필+sns)가 결합된 컨셉

• 랭킹과 집계 데이터 종류 (개인프로필에서 공개/비공개 설정 가능)

랭킹에 따른 티어 시스템

시즌랭킹 (전 월 기준)
통산랭킹 (누적데이터)
평균랭킹 (평균)

돈을 가장 적게 쓰는 사람
돈을 가장 적은 비율로 쓰는 사람
돈을 가장 많이 쓰는 사람
돈을 가장 높은 비율로 쓰는 사람
돈을 가장 적게 버는 사람
돈을 가장 많이 버는 사람
통장 개수,직업많은사람,미니홈피팔로우 등

• 시각화

랭킹 등 수 표시
랭킹 변화를 그래프로 시각화
수입 변화를 그래프로 시각화
지출 변화를 시각화
지출 항목을 워드클라우드로 시각화

• 개인홈:팔로우, 좋아요, 쪽지, 댓글 기능

• 제테크 등의 정보 추천

• 유저의 텍스트를 받아서 최저가 상품을 찾아주는 검색 시스템

• 전체게시판/익명게시판/공개채팅/익명채팅등 유저간커뮤니티 시스템

• 챗봇 ai 자동응답고객센터

• 앱 연동 : 미니홈피 확인 등 일부 기능 지원

• 예측 시스템: 지출,수입 등의 데이터로 미래 데이터를 예측해서 그래프를 이어서 그려주는 기능

• 비즈니스 모델

관련 광고 배너 (돈, 제테크, 투자, 물건)
제휴 (최저가 이벤트 상품 공동구매, 특판)
미니홈피 꾸미기 아이템
유료 이모티콘

• 발전가능성

중고거래시스템
자체쇼핑몰

10/15

토요일 아침, 뒤척거리다 그냥 생각이 났다.
서비스명은 아무거나.

2. 두번째 기획 : 아무거나

• 먹을메뉴자동선정시스템 및 메신저가 결합된 형태

1. 회원가입 시 음식 기호에 대한 정보를 매우 세밀하게 입력 받는다

2. 유저는 같이 음식을 먹을 사람을 한 그룹으로 초대한다 (여러그룹생성가능)

3. 그룹원들의 음식 정보(우선순위, 기피음식순위, 알러지, 오늘먹고싶은메뉴, 오늘먹기싫은메뉴)
를 토대로 평균 만족도가 가장 높을 메뉴를 ai가 선정한다.
(옵션:오늘먹고싶은, 오늘먹기싫은 메뉴를 비공개로 각자 선택 후 ai를 돌릴 수 있다)

4. 크롤링을 통해 해당 메뉴의 근처 음식점을 같이 띄운다.

5. 그룹원들은 추천 메뉴가 괜찮은지 채팅으로 의견을 나눈다.
(옵션:아무거나/를 설정하면 닉네임 옆에 표시, 추천메뉴에 무조건 동의한다는 의사표현 가능)

6. 투표 시스템으로 각자 추천 메뉴의 만족도를 투표 받는다.
(그룹장이 설정한 투표시스템 옵션에 의해 일정 점수 이상일 때 / 미만일 때 결과를 출력)

7. 실제로 무엇을 먹었는지, 그리고 그 메뉴에 대한 만족도를 입력 받는다.

8. 그룹원들의 개인 선호도를 종합하여 예측한 값, 투표결과, 먹은 후 만족도를
바탕으로 그 그룹의 음식 선호도 가중치 데이터로 생성, 누적하여 그룹 내 예측의 정확도를
높인다.

9. 정리된 누적 데이터를 유저도 볼 수 있게 한다

• 웹) 전체 유저 간 커뮤니티 기능 (게시판, 채팅)

• 워드클라우드 :개인의 음식선호도를 워드클라우드로 시각화,
그룹별 음식 선호도를 워드클라우드로 시각화

• 앱연동

• 챗봇:자동응답고객센터

• 수익 모델

광고 배너
유료 이모티콘, 채팅방 스킨 등
타 메신저 수익모델 벤치마킹

10/18

랭킹 가계부는 기업이 요구하는 기획과 동떨어진 느낌이고 아무거나도 너무 단순하다. 우리가 처음으로 선택한 기업의 기획은 라이프 컨시어지, 일정, 알람, 정보 제공 등의 종합 컨텐츠 서비스다. 회원가입과 디비 관리 등의 시스템까지 상세히 적혀있다. 사실상 그냥 이걸 만들어 보라는 말인데.. 그럼 기획안은 왜 작성하라는 걸까? 자기들이 기획안 내놓고는? 아무튼 유사 서비스인 앱 비서 앱을 보다가 생각난 기획안.

3. 세번째 기획 : AI여자친구 비서

기업에서 요구하는 시스템에 AI여자친구라는 재미있는 컨셉만 덫붙였다. 이런 걸 요구하는 것 같다.

연애시뮬레이션과 앱 비서를 합친 컨셉

기능 (비서앱 벤치마킹)
일정(달력)
알림(일정알림), ai알림
알람
메모(간단,단기적메모),녹음메모
해야할일(장기적메모)
네비(위치찍어서메모)
챗봇 / : 내 비서(ai여친/남친)과 챗봇 대화( +ai보이스)

차별점
ai(여친남친)으로 시각화 및 알림문구를 다양화하여
친근함편안함재미

2d3d캐릭터/인물사진 등 비서 캐릭터 설정가능

비서 목소리 설정 가능
비서 성격(알림문구,voice형태)설정가능
ai비서가 애인..대화 가능 심리치료앱

4. Netlify Deploy tutorial

10월 25일

위 기획들은 사실상 필요 없는 것이었다.. 기획은 기업이 내놓은 것이고 우리는 거기서 그냥 선택하는 것. 우리는 30개의 기획중 기획안을 내는 3가지 기획 중 라이프컨시어지에 올인하기로 했다. 라이프컨시어지는 그냥 비서앱에 사용자의 행동 패턴을 ai학습을 통해 알림 서비스 등을 하는 서비스다.

아직 3개 중 뭘 할 수 있을지 정해지지 않았지만 일단 난 무료서버를 오픈했다. 처음엔 그냥 내 이력서 올릴려고 검색하다가 생객을 해보니 개발자면 자기 홈피 하나는 있어야 되는 것 같고 선생님 홈페이지 보면 여러가지 기능들을 구현한 일종의 포트폴리오라 나도 그런 개인홈피를 만들고 거기 한 카테고리에 이력서를 넣으면 된다고 생각했다.

그렇게 html을 netlify에 올리는데 성공했는데 리액트를 배우는 중이라 리액트도 올려보았다. 그런데 리액트는 제대로 동작을 안했다. 검색을 엄청 하다가 선생님께 물어보니 빌드는 리액트 파일들을 하나로 합쳐주는 것이고 그거 하나를 배포하는 거라며 유튜브 보고 공부하라고 하셨다. build가 뭔지 몰라서 검색 하고도 제대로 이해 못했는데 덕분에 그 날 새벽 두시까지 검색하면서 일단 리액트를 돌리는데 성공하고 다음날 또 검색해서 디버깅에 성공!

그런 후 그냥 리액트 기본 html로 두기 그러니까 대충 홈페이지를 만들었다.
이렇게 리액트 로고를 그대로 냅두고 글자만 바꾸고 메뉴판을 상단에 배치했다. door는 지금 보이는 대문, service는 라이프컨시어지 서비스를 모두 담을 공간, proposal에는 기획안을 올리고, presentation은 최종 발표할 것을 올리고 introduction은 팀원 소개 페이지다. 즉 이 프로젝트의 모든 것이 이 사이트 하나에 담기게 되는 것이다.

여기까지 오기 까지 힘들었다..
수많은 에러를 겪으면서 탄생한 나의 리액트 무료서버 배포 튜토리얼

1. 깃허브 리파짓 크리에이트
	퍼블릭으로 설정, 리드미파일 생성 꼭 체크

2. 로컬 터미널
	ㄱ. cd로 리파짓 파일 받을 폴더로 이동 (따로 폴더 생성은 안함, 연동하면 자동으로 폴더 생성)
	ㄴ. git init
	ㄷ. git clone `깃허브 리파짓에서 code 누르고 바로 링크 복사하고 여기 붙이기`
		리파짓 이름으로 폴더가 생성되고 리파짓에 있는 리드미 파일도 로컬로 끌어옴 

3. vs code 로 리파짓폴더 열고 터미널 > 새터미널

4. 로컬리파짓에서 react 설치 및 build 설치
	ㄱ. npx create-react-app `소문자로만새폴더이름` 
		//`새폴더이름` 으로 폴더 생성
	ㄴ. 새로 생성된 폴더 경로에서 통합터미널 열기 >  npm install react-router-dom     
 		//라우터 인스톨 
	ㄹ. npm run-script build (빌드 폴더 생성 확인)

5. 프로젝트폴더 설정
	ㄱ. 프로젝트폴더 > 깃이그노어 파일에 /build 를 삭제
	ㄴ. 퍼블릭폴더에 _redirects 파일생성 후 내용은    /* /index.html 200   그대로 복붙 
		//이유: 네틀리파이는 라우트처리법을 모르기 때문에 라우트 전환 시 404 에러남
		        라우트전환시 무조건 퍼블릭 안 인덱스html을 참조하도록 설정해서 해결
		
6. vs code 에서 깃허브로 푸시 (깃허브 사이트에서 데이터 업로드 및 삭제x, 충돌 가능성 큼)
   # 깃허브 푸시하는 메뉴에 파일이 1000개면 vs code를 껐다 킴
	ㄱ. 푸시메뉴에서 맨 위 + 버튼으로 커밋할 파일 올리기
	ㄷ. 인풋란에 커밋 메시지 입력하고 커밋 누르기
	ㄹ. 변경내용동기화로 푸시하기

7. 무료서버 netlify 가입 > 네틀리파이에 깃허브 리파짓 연동
	ㄱ. add new site
	ㄴ. import an existing project
	ㄷ. github
	ㄹ. 깃허브 프로젝트 리파짓 선택
	ㅁ. 디렉토리 설정
		A. base directory : 프로젝트외곽폴더이름
		B. build command : npm run build
		C. publish directory : 프로젝트외곽폴더이름 / build  
		D. deploy site

8. 도메인 네임 커스터마이징
		A. 도메인세팅스 > 옵션스 > 에디트 사이트 네임 > 세이브

9. 필수 네틀리파이 환경변수 설정 (네틀리파이 설정 > 빌드 엔 디플로이 > 컨트롤f env 검색 > Environment > edit variables 에서) 
	ㄱ. key값은 CI 밸류값은 false 로 save
		//이유: 프로세스env=true 에러 때문에 강제로 false 값으로 설정해서 디버깅

<빌드가 정상 작동 하는지 로컬에서 확인하는 방법>
10.  스택틱서버에서 빌드가 돌아가는지 확인
	ㄱ. 리액트폴더에서  npm run build      로 빌드 다시 생성
	ㄴ. npm install -g serve             스택틱서버인스톨
      ㄷ. serve -s build                  스택틱서버 오픈해서 돌아가는지 확인
      ㄹ. 잘 돌아가면 vs code 에서 깃허브로 푸시해서 네틀리파이 확인

<콜라보>
11. 깃허브 프로젝트 리파짓에서 팀원과 콜라보 하기
	깃허브 프로젝트 리파짓 > 설정 > 콜라보 
		ㄱ. add로 팀원 추가하기(초대)
		ㄴ. 팀원이 초대 수락
	 	ㄷ. 리파짓에서 pin 으로 내 깃허브 메인페이지 상단에 등록
		ㄹ. 터미널 > 프로젝트 폴더 > git pull 로 깃허브 데이터 끌어오기 > vs code로 데이터 수정 > vs code 활용 푸시
			# 깃허브 사이트에서 데이터 업로드, 수정, 삭제x, 충돌 가능성 큼

##연동된 깃허브 리파짓에 푸시가 오면 자동으로 netlify 에서 npm run build 로 웹서버를 업데이트함

정확히 어디서 에러가 나는지 모르기 때문에 안해도 될 것 같은 잡다한 것도 있다. 하지만 이 튜토리얼을 따르면 반드시 성공한다.

5. 협업

조장님은 한술 더 떠서 회원가입, 로그인, 일정페이지 등을 구현했다. 그것을 내것과 합치려는 작업을 하려는데 path랑 모듈 등이 달라서 어려움이 있었다. 하교 후 집에와서 내가 만든 것과 조장님 것을 이렇게 완벽하게 합치는데 성공.

아직 깃허브 콜라보에 익숙하지 않아서 일단 서로 파일을 주고 받으며 원시적인 방법으로 협업을 하는 중.

프로젝트 주제가 정해지지도 않았는데 우리는 이렇게 이미 프로젝트를 진행 중이다. 이런 열정을 보여줘서 기업에게 선택 받으려는 생각.
선택을 못 받아도 저기서 그냥 글씨 조금만 바꾸면 재사용이 가능하다ㅇㅅㅇ

6. AWS RDS DATABASE tutorial

10월 25일

무료서버에 웹페이지는 올렸지만 디비는 연결이 안되서 문제였는데 의외로 마음 먹고 하니 금방 연결했다. 조장님의 코드에 의해 api가 aws db의 정보를 로컬 서버에 끌어오긴 하는데 어째서인지 netlify 서버에서는 그걸 가져가지 못한다.

netlify에 이은 aws db연결 튜토리얼

1. aws 가입
2. 콘솔로 로그인
3. 검색창에 rds 검색
4. 데이터베이스 생성
5. 생성옵션
	ㄱ. 표준생성
	ㄴ. 엔진옵션: MySQL [아래서 버전 mysql5.7.39 설정]
	ㄷ. 템플릿 : 프리티어
	ㄹ. 마스터사용자이름 : id (임의, 마지막에 heidSQL로 로그인할 때 쓸 새 아이디와 비번)
	ㅁ. 마스터암호 : pw (임의)
	ㅂ. 퍼블릭액세스 : 예
	ㅅ. 데이터베이스생성
6. anywhere설정
	ㄱ. RDS > 데이터베이스 메뉴 > 오른쪽에 생성된 데이베이스 클릭
	ㄴ. 오른쪽에 보안 vpc보안 그룹 default 클릭
	ㄷ. 오른쪽 아래 인바운드규칙편집 클릭
	ㄹ. 삭제를 클릭하여 하나 있는 걸 제거
	ㅁ. 규칙생성 > 유형:MYSQL/Aurora > 소스정보 AnywhereIPv4  0.0.0.0/0  > 규칙 저장
7. utf8 파라미터 설정
	ㄱ. RDS > 파라미터그룹 메뉴 > 파라미터 그룹 생성 > 뒤로가서 생성한 파라미터 그룹 클릭
	ㄴ. 파라미터 편집
	ㄷ. char 검색 후 utf-8로 바꿀 수 있는 것 모두 바꾸기
	ㄹ. collation 검색 후 utf-8로 바꿀 수 있는 것 모두 바꾸기
	ㅁ. 변경사항저장
	ㅂ. RDS > 데이터베이스 메뉴 > 오른쪽에 데이베이스 클릭 > 오른쪽 위 수정 클릭
	ㅅ. 아래  추가구성:데이터베이스옵션:DB파라미터그룹: 에서 방금 생성한 파라미터로 설정
	ㅇ. 백업보존기간 : 1일 
	    로그내보내기 로그 체크
	ㅈ. 아래 계속 > 즉시적용 > db인스턴스수정
8. heidSQL 실행
9. heidSQL 호스트명
	ㄱ. RDS > 데이터베이스 메뉴 > 엔드포인트 값
	ex) 호스트명: database-2.c7ewv2et9juo.us-east-1.rds.amazonaws.com
10. heidSQL 사용자 : admin 
    heidSQL   암호 : eclipse2
11. 열기, 크리에이트 데이터베이스로 데이터베이스 생성



================================================================================

*서버랑 연결 : config.json 파일에 [호스트, 유저, 데이터베이스]

{
  "host":"database-2.c7gpv2et9juo.us-east-1.rds.amazonaws.com",
  "user":"id",
  "password":"pw",
  "port":3306,
  "database":"database"
}

*테이블이름을 대문자로 해야함

router.js

router.get('/lifeConcierge/api', (req,res)=>{
  conn.query('select * from CUSTOMER;', (err,rows)=>{
    if(!err) {
      res.send(rows);
    }else{
      console.log(rows)
      console.log(err);
    }

10월26일

netlify 서버에서 db를 끌어오지 못하는 것에 대해 문득 생각이 났다.

*lifeConcierge/api 에서 절대경로로 변경 (netlify에서 api가 끌어온 주소 경로 잡는 부분)

api가 끌어온 정보를 netlify에서 못 끌어가서 상대경로를
절대경로로 바꾸니 그 경로가 어짜피 로컬서버라 내 컴퓨터에서만 db가 잡혔다
클라우드서버필요

const tableRow = ['아이디','비밀번호','이름','성별','생년월일','직업','집주소','회사주소','질병','삭제'];
export default () => {
  const [userInfo, setUserInfo] = useState([]);
  const [toggleDelete, setToggleDelete] = useState(false);
  const callApi = async ()=>{
    const response = await fetch('http://127.0.0.1:5000/lifeConcierge/api');
    const body = await response.json();
    return body;
  }

7. AWS EC2

10월29일

바로 위에서 말한 것처럼 클라우드 서버가 필요했다.
aws ec2를 활용해 서버를 올리기까지 많은 글을 참고했다.

https://kingofbackend.tistory.com/127#:~:text=AWS%20EC2%20%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0&text=AWS%20EC2%EC%97%90%20%EC%A0%91%EC%86%8D%ED%95%98%EA%B3%A0,%EA%B7%B8%EB%A3%B9%20%ED%8E%B8%EC%A7%91%EC%9D%84%20%ED%81%B4%EB%A6%AD%ED%95%B4%EC%A4%8D%EB%8B%88%EB%8B%A4

https://ju-hyeon.tistory.com/15

https://ju-hyeon.tistory.com/16?category=962904

https://coding-factory.tistory.com/502

https://stackoverflow.com/questions/16376035/fatal-could-not-create-work-tree-dir-kivy

https://choseongho93.tistory.com/294

https://islet4you.tistory.com/entry/Ubuntu-pm2-%EC%9D%B8%EC%8A%A4%ED%86%A8-%ED%95%98%EA%B8%B0

우분투라는 걸 활용해서 aws ec2 가상컴퓨터에 접속하고 깃클론을 통해 파일을 받고 서버를 실행 시켰다.

그 결과 서버가 잘 동작하는 것을 볼 수 있었다.
aws rds db와 연동되어 json파일도 잘 끌어왔다.
물론 여기까지 오기까지 많은 어려움이 있었지만 다 생략.

마지막으로 netlify만 확인하면 끝.
로컬서버로 켰을 때 netlify에서 잘 끌어가는 것을 확인했기 때문에 당연히 정상 작동할 것이라고 예상했지만 이상하게도 netlify에서는 json데이터를 끌어가지 못하고 있었다???
로컬에서 클라이언트버전을 돌려도 데이터를 잘 끌어온다. 아무 이상이 없어 보이는데...

8. netlify_mixed content

mixed content 라는 에러인데
netlify는 무조건 https로만 데이터를 끌어올 수 있는데 aws ec2 서버는 http로 보내기 때문에 못 끌어오는 것이었다.

검색을 해보면 이 해결책을 많이 제시한다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

위 코드를 리액트폴더 index.html 의 헤드에 삽입할 경우 http를 강제로 https로 바꿔주는데 문제는 애초에 aws ec2서버에서 http만 가능하고 https로는 전송이 불가능하기 때문에 이 경우에는 해결이 되지 않는 것이었다.

그럼 결국 aws ec2 에서 https로 보내게 만들어야 한다는 말이다.
그런데 이게 쉽지 않아보여서 문제다.

https://jojoldu.tistory.com/434

netlify에 올린 도메인을 인증을 받아야 하는데 어째서인지 인증을 안해준다.

9. aws amplify hosting

10월31일

네틀리파이랑 거의 똑같은 것이 아마존에도 있었다. 이걸 해봤는데

정말 똑같았다. https만 취급해서 db 못 끌어오는 것도 똑같았다.

10. aws 요금폭탄

aws rds를 25일에 연결 했으니까 6일만에

17000원이 나왔다. 디비를 거의 쓴 것도 없는데 뭐지? ec2 서버를 연결해서 그런지? 아무튼 일단 중지.

11. AI 비서 이미지 시안

나의 시안

(팀원)디자인 담당의 시안

12. AI 비서 '그리니'(Greeni) 스토리

나의 AI비서 캐릭터 스토리 구상이다
난 이게 일정앱에 캐릭터와 챗봇이 있는 걸 설명하는 아주 중요한 작업이라고 생각.
(멘토님이 누가 구상했냐며 재밌다고 즐거워하심)
14. 챗봇readme 챕터를 보면 왜 챗봇이 있는지 기능적으도 설명
캐릭터 이름은 팀원의 요청으로 초록이에서 Greeni로 바뀜
그린이를 이어서 발음하여 그리니다.
(난 초록이가 마음에 드는데)

그리니 story : 그리니는 유성과 함께 지구에 떨어진 외계생명체로 범종설에 기반을 두고 있다.

(범종설: 유성에 의한 외계미생물의 행성 간 이동으로 인해 전 우주적스케일로 진화가 일어난다는 진화설 https://www.youtube.com/watch?v=9NXHzQyfx8k )

그리니 특징:

ㄱ. 인간에게 기생하는 기생생명체

숙주인 인간을 돕는 것이 그리니에게 득이라 인간의 비서를 자처한다

ㄴ. 전자기파를 조절하는 능력

그리니가 스마트폰을 조작하여 알림을 보낼 수 있고 인간과 채팅을 할 수 있는 이유

그리니 시스템 구성

ㄱ. 알림

ex) 알림시스템에서 배달의민족 알림을 하는 타이밍이라고 하면

챗봇도 채팅을 한다 > 배달시킬래? 맛집 추천 해줄까?

유저가 둘 중 어느 것을 선택해도 기존 알림시스템에서 구현된 것을 가져다 쓰기만

    하는 형태

ㄴ. 대화

 유저가 먼저 말을 걸 경우 대화형 챗봇 모델이 활용된다

ㄷ. 게임

 유저가 게임이름을 말하면 게임을 시작한다

ex) 끝말잇기, 숫자야구

13. 챗봇화면구상

figma사이트로 디자인

14. 챗봇readme

기획발표도 있고
팀원들이 이해할 수 있게
챗봇에 대한 설명

챗봇 모델 : 트랜스포머모델(프리트레인드모델로드)
데이터 : 웰니스 대화 스크립트 데이터셋
정신건강 상담 주제의 359개 대화의도에 대한 5232개의 사용자발화 및
1023개의 챗볼 발화

챗봇 : 향상된알림창, 심리상담, 게임

향상된알림창: 선택지 줄 수 있음, 이미지 띄울 수 있음
ex) 타임라인알림: 맛집사이트링크 아니면 배민푸쉬알림
챗봇 : 맛집추천해줄까 배달시켜먹을래?

챗봇에 대부분의 기능 연동 가능성

아이언맨의 자비스(음성인식) > 그리니(챗봇)

뉴스추천
직업 > 정보추천
시간 알림

15. 웹앱플로우

figma사이트로 디자인

16. 시스템플로우

figma에서 디자인

17. react simple chatbot 공부

11월 9일 개발일지

react simple chatbot 활용

채팅방 타이틀 그리니로 변경

ai 아바타 사진 디폴트에서 그리니로 변경

알아야 하는 것

일단 게임하는 방법
알림갈 때 챗봇 그대로 쏘는 법
-값 받고 링크 쏘기
푸쉬 알림 쏘기
크롤링 쏘기
시간?
대화형챗봇 적용하기

리액 심플챗봇 홈페이지 ( example 완료 )
examples > previousValue
유저가 방금 전 한 말을 변수로 끌어 올 수 있다

examples > 옵션 a or b 고르기

examples > validator
유저에게 옳은 인풋을 받기위해 옳은 인풋이 아니면 경고문을 준다

examples > custom component
인풋/아웃풋으로 컴포터넌트(html,버튼 등)을 넣을 수 있다

(examples > wiki db피디아 검색 시)
import { Component } from 'react';
import PropTypes from 'prop-types';
import { Loading } from 'react-simple-chatbot';

(examples > simple form )
데이터/명단 등록하기

(examples > end callback)
얼럿창 띄우기

챗봇코드
<ChatBot headerTitle="그리니" 채팅방 타이틀 지정

아바타바꾸기
import greenihead from '../img/greenihead.png'
const botAvatar = greenihead
<ChatBot
headerTitle="그리니" //채팅창 타이틀
className='chatbot' //클래스네임(CSS를위한)
steps={steps} //인풋아웃풋대본
botAvatar={botAvatar}
/>;

챗봇엔피엠

npm install react-simple-chatbot --save

npm install styled-components

steps > trigger 옵션
ex) trigger: '2' 라면 해당 유저가 채팅을 친 후 id: '2' 로 넘어감

18. react simple chatbot fuction활용

11월 10일 개발일지

유저의 인풋을 받아서 문자 2를 더하는 펑션에 넣어서 출력이 가능 즉 대화형모델에 유저의 말을 인풋으로 넣고 아웃풋을 챗봇의 말로 출력하면 되는데

대화형모델파일은 .py에 프리트레인드모델이 선언되어 있다

child-process모듈을 사용해서 js에서 python파일에 인풋을 넣고 아웃풋을 끌어오는 방법을 참고하여 각종 방법을 사용
전부 에러

상대가 tg라고 말하면 봇은 tg에 2를 붙여서 말하는 모습
fuction 활용법 알아내기 힘들었다 참고 사이트가 너무 적다

19. streamlit chatbot

11월 11일 개발일지

react simple chatbot 은 레퍼런스사이트가 너무 적어서 일단 포기
streamlit chatbot을 찾았다 (리액트심플챗봇과 스트림릿챗봇의 파이썬 코드를 연동하려다 실패한 것)

챕터에서 child-process로 끌어오는 파일은
유튭(+깃허브)에서 얻은 streamlit 챗봇 코드이다
streamlit는 로컬서버로 채팅방을 그냥 열어주는 건데
필요 없는 거 지우고 인풋넣으면 아웃풋 뽑게만 변형했다

이 부분에서는 스샷을 보면 리액트심플챗봇은 없다 리액트심플챗봇 사용법이 익숙하지 않아서 일단 html로 간단한 태그만 사용함

리액트와 노드를 연동한 후 리액트 > 노드로 인풋을 보내고 노드에서 child_process를 리콰이어해서 에러가 나지 않았고

res.send로 아웃풋을 가져오려고 했지만

이상하게도 에러가 나지 않는데

outp.stdout.on("data", (result) => { 로 넘어가지 않아서 아웃풋 자체를 뽑을 수 없다

talkmodel.py를 보면 트랜스포머모델과 사이킷런을 임포트하는 코드에 빨간줄이 보인다

pip install하면 Requirement already satisfied

파이썬 오리지널 파일을 보면 임포트 부분에 빨간줄이 많은데 에러가 안난다

20. chatbot 일단 완성

11월 13일 개발일지

일단 리액트를 빼고 노드로만 구현

html에서 받은 인풋을 라우터로 받고 res.send로 채팅방을 그냥 만들어서

주고 받을 수 있게 했다

21. chatbot css추가

11월 14일 개발일지

13일 데이터에서 인터넷에서
채팅방 css를 복붙 후 약간 손을 봐서
채팅방 스타일만 변경
훨씬 깔끔해진 모습
여전히 리액트랑 여전히 못함
검색해보면 확실히 차일드프로세스모듈자체가 리액트랑 연동이 안된다는 말이 많음
리액트를 안쓰면 인풋아웃풋을 한번씩 주고 받을 수 있다
챗봇 별도의 서버로 빼야할 것으로 보임 (+링크로 연결만)

노드js 라우터 > ejs에서 채팅방만들기
ejs에서 if문으로 인풋이 안들어오면 어서오세요라고 인사하고 인풋이 들어오면 인풋과 아웃풋을 보여준다 스샷처럼

채팅로그 기록 못하고 방금 전 나눈, 나와 그리니의 말 하나씩만 표시

대화모델 아웃풋 뽑아오는 시간 7초. 프리트레인드모델을 로컬로 다운을 받고 연결을 해봤으나 속도가 같음. 그럼 df['embedding'] = df['embedding'].apply(json.loads) 여기서 시간이 많이 걸리는 것으로 볼 수 있음.

챗봇구성폴더path: C:\Workspace\reactChatbot\nodetm

22. aws ec2 챗봇서버올리기

11월 15일 개발일지

챗봇서버만 aws ec2 서버에 올리는 중

(챗봇서버를 단독으로 두고 아웃풋을 json으로 res.json으로 올리고 그걸 본 앱에서 끌어갈 예정)

라우터랑 html 두개만 만들어서 올리기

aws 는 ec2랑 rds를 프로젝트 시작 전에 미리 한번해봐서 세팅이 되있어서 금방할 수 있었다

차일드프로세스 또 오류뜸

https://velog.io/@98soonrok/spawn-python-ENOENT 여기참고함

여기보면 서버는 python3라 python을 python3로 수정했다고 하는데

우분투에 python —version 치니까 안뜸

우분투에 python3 —version 치니까 버전뜸

코드에서 python을 python3로 변경하고 깃풀 다시 실행

차일드프로세스 오류는 안뜨는데 무한으로 연산만 하고 있음

아마도 모델이 안깔려서그런듯

pip install sentence-transformers

하니까 pip 없다고 까는 명령어를 알려줌 그래서 pip를 깔고 pip로 모델도 깔고 실행

그대로다 (오래돌다가그냥멈춤) > pip install scikit-learn 깔기 > 실행 > 그대로

30초정도돌다가그냥멈춤

에러코드안뜸 > console.error('에러남') 을 추가 > 안 찍힘

res.json 에서 res.send로 바꿔봄 > 그대로(1분넘게돌아가는중)

res.를 제거하고 콘솔로그만 찍어보기 > 그대로 (파이썬파일로들어가서계속돌다가그냥멈추는듯)

outp.stdout 밖에 res.send('음!!') 을 찍어봄 > 오래돌다가 음!! 찍힐 줄 알았는데 > 그냥 바로 음!!을 센드한다 > 그럼 파이썬파일로 들어가서 그냥 바로 나오거나 못들어가는 것 같다 (위에서는 res.end()도 없어서 오래 기다리는 듯)

ec2에 python3대신 python을 깔아봐야겠다

-아니 일단 파이썬파일단독으로 실행해서 돌아가나 확인 > pandas가 노 모듈 네임드라고 뜸

pip install pandas 로 설치 > 후 실행 > 센텐스트랜스포머 가 노 모듈 네임드 .. 설치를 다시해보자

아까 설치 중 (설치를 엄청 오래한다) 반 전체가 다른거 다운받느라 느려져서 창 멈췄었는데 설치가 안된건가 여기 네트웍이랑은 상관이 없을텐데? 암튼 이것만 임포트되면 돌아갈 것 같다

설치하다가 또 멈춤

https://comeng.tistory.com/entry/Transformers-sentencepiece-설치-에러 여길참고

3개를설치하라고함 설치안됨

pip install transformers

pip install sentencepiece

해보기 둘다 설치 success > 토크모델실행 > 그대로 센텐스트랜스포머스 노 모듈

aws우분투연결창말고 우분투창으로 pip install sentence-transformers 해보기

aws우분투연결창에 pip install sentence-transformers 해놓은게 아직 안 끝난 것 같다 엄청 느림 > 우분투창 캔슬

torch깔다가 멈추는 걸 생각했을 때 torch를 따로 깔아보자

pip install torch 느린데그냥냅두자 (pip3 install torchvision)

또 멈춤

torch —version 하니까 토치낫파운드 트라이 sudo apt install

-일단 pip install torchvision 설치 중 > torchvision설치인데 torch깔고 있다고 나온다

아 토치비전다깔고자동으로토치도까는것

pip installl torch가 용량이 890MB라 용량이 커서 깔다가 자꾸 멈추는 것 같음

pip list 치니까 transformers 는 있다

pip list에 없는것=[pytorch, torch, torchvision, sentence-transformers]

pip install -U sentence-transformers 빨리깔리다가 막힘

https://pypi.org/project/sentence-transformers/ 에서 깃허브에서 깃클론 > 우분투에서 그파일로인스톨 > 똑같이 깔다가 막힘

암튼 torch 인스톨에서 끊기는 게 문제

23. aws ec2 디버깅

이유를 알겠다

드디어 에러코드가 뜸
ERROR : could not install package due to an EnvironmentError:
[Errno 28] No space left on device

검색하면 ec2 용량부족이라고 함

df -h
로 용량확인 하면 94% use로 나옴

rm -r 폴더이름
으로
챗봇폴더를 제외하고 다 지워도 93%임
93%에서 다시 설치 > 실패

인스턴스를 다시 만들어야겠다

24. aws ec2 인스턴스 다시 만들기

11월 16일 개발일지

인스턴스 다시 만들면서 보니까 용량을 프리티어는 30GB까지 설정하는 것이 있었다 기존 인스턴스는 기본값인 8GB짜리
총 30이라 기존 인스턴스를 안지웠으니 22GB까지는 할 수 있는데
나중을 생각해서 15GB로 설정했다
연결 하고 df -h로 확인하니 기본용량 때문에 13GB사용 가능
이제 필요한 것만 깔면서 연결하기

다시 깔면서 버벅인 것과 저장할 것

키페어: cbRouter.ppk > 푸티젠 > LOAD > DSA > Save private > yes
private key:        cbRouter.ppk 이름으로 그대로 저장 

cbRouter 호스트네임 
	ubuntu@3.35.9.231          포트:22 / ssh

cbRouter 인스턴스주소
http://ec2-3-35-9-231.ap-northeast-2.compute.amazonaws.com:포트번호/
http://3.35.9.231:포트번호/
  
보안그룹(기존생성): launch-wizard-2
  유형(모든TCP) 소스(Anywhere-IPv4 0.0.0.0/0

새 인스턴스를 우분투랑 연결 성공
이제 디버깅하면서 필요한 것만 깔기

일단 git clone 은 바로 작동함
node, npm 없음 (node를 설치하면 npm도 같이 설치)

node, npm 설치법 (https://velog.io/@ywoosang/Node.js-%EC%84%A4%EC%B9%98 참고)
ㄱ. curl 설치 : sudo apt install curl (이미설치되있다고함)
ㄴ. PPA설치 : curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh (깔림)
ㄷ. sudo 권한으로 PPA를 추가하고 업데이트한다
sudo bash nodesource_setup.sh (깔림)
sudo apt-get install nodejs (깔림)

결과

ubuntu@ip-172-31-37-214:~$ node -v
v14.21.1
ubuntu@ip-172-31-37-214:~$ npm -v
6.14.17

node, npm 잘 깔렸다.

pm2 없다
sudo npm install pm2 -g

역시 잘 깔림
[PM2] PM2 Successfully daemonized
5.2.2
spawn("python", ['talkmodel.py', userInput] 에서 python을 python3로 변경
(인스턴스에는 python3가 깔려있다)

-이제 talkmodel.py에 import하는 거 깔아야 함

pip 없다고 함
sudo apt install python3-pip 로 깔라고 친절하게 우분투가 알려줌, pip 깔림
pandas 설치
pip install pandas (성공)
pip install sklearn (성공)
SentenceTransformer 모델설치
pip install -U sentence-transformers (e-t랑 e_t랑 둘다 가능)
(하면서 torch 설치 자동 pip list 에 sentence-transformers 랑 torch 필요)
890메가 중 887깔고 멈춤 전보다 많이 깔리고 멈춤 (여유용량은 11기가)
멈추면 다시 돌리고 돌리고 하니까 소수점 계속 올라감 조금씩 더 깔림
멈추고 얼마 후 Killed 뜸
인스턴스 재시작하니까 여유용량이 다시 많아짐 다시 설치하려니까 줄어듬
설치멈추고 다시 설치하면 또 여유용량 자꾸 줄어듬
즉 용량문제가 아니다
불완전설치라 용량이 자꾸 늘어나고 결국 용량 에러코드가 나오는 것
(인스턴스 재부팅을 하니까 불완전설치파일이 자동삭제되어 용량이 늘어나는 것을
확인)

killed키워드를 검색하니 거의 램 부족 문제라고 한다

-캐시삭제
free -m (캐시확인)
sudo echo 2 > sudo /proc/sys/vm/drop_caches (캐시삭제)
free -m (캐시확인)
캐시는 원래 적었다 문제 없음

-스왑 파티션 파일 (하드디스크를 파티션 > 램용량으로 사용하는 형태)
https://psychoria.tistory.com/717 여길 참고
후 pip install -U sentence-transformers 드디어 깔림
후 그래도 안됨

25. streamlit deploy, css

11월17일 개발일지

ec2 일단 포기

스트림릿 배포, css
streamlit으로 css 바꾸는 법 공부하다 보니까 배포도 된다는 걸 알았다
css 좀 바꾸고 깃허브랑 연동 배포 연결하는 중 디버그한 것 ㄱ. pip freeze > requirements.txt
로 해당 txt파일을 생성(배포에 필요한 모듈을 정의하는 txt 스트림릿폴더에필수) ㄴ. 파이썬설치경로알아내기
https://allhpy35.tistory.com/23
ㄷ. pip업그레이드 (그대로 터미널에 입력)
C:/Users/hope6\/anaconda3/python -m pip install --upgrade pip
스트림릿 css주는 방법

  with open('style.css') as f:
    st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
파이썬 파일에 이 코드를 넣고 style.css파일을 만들어서 그냥 css파일이랑 똑같이 적음된다.

디플로이주소
https://hope69034-chatbotgreeni-psychotherapy-toa0l9.streamlit.app/

로컬폴더
workspace/chatbotGreeni

26. mobiscroll calender

11월 18일 개발일지

https://mobiscroll.com/
https://docs.mobiscroll.com/5-20-0/react/eventcalendar#opt-colors
이제 리액트이벤트캘린더를 공부해야한다.

install page
https://download.mobiscroll.com/trial

챗봇은 멘토님이 접으라고 하신다....

27. mui

11월 21일 개발일지

mobiscroll 캘린더로
month캘린더, week캘린더, agenda를 구성(home page, calender page)
라우터를 잡아주고 css를 다듬었다.
라이브러리로 만들어지는 것에 css걸어주는 거라 임포트도 해줘야하고 간단한 작업이 아니었다.

여기에 팀장님이 만들어놓은 백엔드와 회원가입, 로그인 페이지, 이벤트등록버튼 등의 파일을 하나로 연결했다.

그리고! 멘토께서 접으라고 하신 챗봇 기능 살며시 추가했다.

유저의 성향정보를 챗봇과 대화방식으로 받는 챗봇이다. 물론 검색으로 복붙한 것. 그 후 유저정보를 라우터로 보내고 라우터에서 db를 update하는 코드는 스스로.. 비교적 쉽게.. 구현.

앱 키자마자 설문조사로 유저 정보 받을려고 하면
앱 바로 끄고 싶어진다.
이 챗봇 기능은 자기가 입력하고 싶을 때 내정보 페이지에서 눌러서 변경하는 기능.

아쉬워서 잠깐 검색하고 (일단) 접으려다 좋은게 있어서 픽.

mui로 구현한 것에 css가 잘 안들어간다
검색하니까 따로 임포트해서 로컬css파일이 적용되도록 해줘야 하는 것이 있었다.!!

28. aws rds db

11월22일 개발일지
학교에서 지원 받은 db가 연결이 안된다.
heidisql로는 접속이 잘된다
디버깅 하려다 보니 cmd로 접속하래서
했다
근데 이상한 점은 로그인할 때 접속 포트는 7인데
cmd로 지원받은디비의 mysql들어가서
포트 보는 걸 치면 6이라고 뜬다 ㅇㅅㅇ
선생님한테 물으니 같은 거 아니냐고 하시는데
그게 제 말...
빨리 디비연결하고 싶은데...
할 거 많은데 일단 이건 보류

29. aws ec2, child-process, 크롬 크롤링

11월23일 개발일지

팀원이 하는 크롤링에 어려움이 있다고 한다
챗봇공부하면서 child-process로 엄청
삽질을 했는데 이것도 그래도 그냥 삽질은 아니었다

팀원의 파이썬 코드를 받아서
노드서버와 child-process로 연동 후 깃허브로 보내고
ec2 서버에서 깃클론하고 서버를 올리는 것에 성공했다
크롬깔고 크롤링하는 코드라 엄청 깔 것이 많았다

ec2라우터로 인풋만 쏘면 그 라우터에서 res.json()
으로 출력하거나 sql문으로 db가 연결되어 있다면
db수정도 가능하다

솔직히 크롬크롤링을 ec2에서 하려니까
깔아야 하는 게 엄청 많더라
어제 집에 노트북 안가져가서 집컴으로
그냥 ec2에 미리 필요한 모듈 다 깔아두려고 3시간동안 인스톨
하고 디버깅했다
오늘 학교와서 깃클론하고 올리는데
사실상 어제 새벽까지 인스톨한 거 다 다시 깔았다..
합하면 6시간은 써서 연결함

이 라우터에 인풋을 쏘면
child process모듈을 이용해서 노드 에서 파이썬파일에
그 인풋을 쏴주고 파이썬 파일에서는 그 인풋을 가지고
크롬크롤링 후 출발지에서 도착지까지 걸리는 시간을
아웃풋으로해서 라우터로 넘겨준다
그럼 라우터에서는 그걸 response.json으로 그대로
렌더링하는 코드임
원래는 그냥 db로 update문 날리면되는데 db연동이안되있으니

이렇게 폼태그로 그냥 ec2로 보내면 제이슨으로
28분 거리라고 알려줌

=======하면서 만든 튜토리얼

http://15.164.164.14:3001/
http://ec2-15-164-164-14.ap-northeast-2.compute.amazonaws.com:3001/

-우분투설치
1. sudo apt-get install python-pip (pip설치)
2. sudo pip install selenium (셀레설치)
셀레니움설치확인 $ python

			>>> import selenium
			위 결과가 이상 없이 수행 된다면 selenium이 정상 설치 된 겁니다.

크롬설치
wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get install google-chrome-stable
크롬드라이버설치
google-chrome --version (버전확인)
(위 버전에 맞는 드라이버를 설치)
wget -N http://chromedriver.storage.googleapis.com/90.0.4430.24/chromedriver_linux64.zip -P ~/Downloads
(chrome 브라우저가 77 버전이시라면 wget 명령에서 76.0.3809.68대신에 77.0.3865.10를 입력해주시고 75버전이시라면 75.0.3770.140를 입력해주세요.)
unzip ~/Downloads/chromedriver_linux64.zip
가상 브라우저 pyvirtualdisplay를 설치
sudo pip install xlrd
sudo apt-get install xvfb
sudo pip install pyvirtualdisplay
설치확인
$ python

from selenium import webdriver
from pyvirtualdisplay import Display
display = Display(visible=0, size=(1024, 768))
display.start()
path = '/home/ubuntu/lifeConciergeService2/ec2/map/chromedriver'
browser = webdriver.Chrome(path)
webdriver.Chrome("/path/to/chromedriver")
위 명령을 수행했을 때 오류가 발생하지 않는다면 설치 성공입니다!

====

google-chrome --version (크롬버전확인)

==========

30. netlify deploy

11월24일 개발일지
25일 내일 멘토링 시간이다
멘토님이 어느정도 끝내놓으라는 압박이 있었다
팀원들 전체파일을 합치고 netlify에 배포하고
챗봇 대본 작성을 마무리하고
웹페이지 css에 엄청 바빴다
난 프론트엔드,백엔드,데브옵스를 동시에 하는
풀스택 개발자ㅇㅅㅇ

31. css, netlify

11월 25일 개발일지
내일 26일에는 학교에서 자격증 시험을 보는 날이고
오늘은 멘토링 하는 날이다

아무튼 팀원들 파일을 합치면서
디버깅 지옥에 빠져있고
build와 deploy를 시작하다 보니
이상하게 npm start에서는 멀쩡한 것이
deploy나 serve-s build에서는 css가 부분적으로
빠지는 현상이 있었다.

내가 생각한 원인은 2가지
ㄱ. 노드모듈스폴더에 있는 css가 빌드로
안들어갈 것이다 : 난 생각하지 못한 건데
노드모듈스에 잇는 css파일을 찾아서 거기서
팀원이 css를 주고 잇었다

가설 검증을 위해 그 css파일을 노드모듈 폴더에서
꺼내고 app.js로 임포트해줬다
그러니까 일부 css가 들어가는 것을 확인 했다
내 생각이 맞았음ㅇㅅㅇ

ㄴ. netlify에서는 쩌~ 위에서 경험한 것처럼
http에서는 정보를 못 끌어온다 그런데
므이라이브러리 때문인지 serve -s build를
하면 http
http
http
이런게 막 뜬다 여기서 실시간으로 정보를
끌어오는지
그러니까 netlify에서 이걸 못 끌어가서 css가
빠지는 것일까? 모르겠다.
만약 그렇다면 css든 뭐든 많이 빠질 것 같은데
정말 일부 css만 빠지는 것을 보면 다른 문제일
가능성을 배제할 수 없다.

암튼
데브옵스쪽 미리 공부해 놓으니 자꾸 유용하게 씀

32. 멘토링, 챗봇

아직 11월25일이다
멘토링 하는 날
멘토님이 압박한 것이 있어서 더딘 프론트엔드를
내가 그냥 전체적으로 회원가입창의 테마와 맞게
연두계열로 어제 다 바꿔버렸다

멘토님께서 챗봇으로 유저의 정보를 받는 것을
긍정적으로 보셨고
여러가지 조언을 해주셨다
1. 챗봇아바타를 랜덤으로 바꿔주기
2. 챗봇발화에 일부러 딜레이 줘서 느리게하기 ㅋ
둘다 ai처럼 보이게 하기 위함이다
현재 챗봇은 정해진 대본으로 유저 정보를 버튼식으로
받는다

33. 마이크로소프트 ai 900 자격증 시험

11월26일
자격증 시험 보는 날이다
25일멘토링 끝나고 학교가 끝나는
6시까지는 자격증 공부를 했다 두시간 정도.
하교 후 집가서 운동하고 저녁부터 카페인 먹고
그냥 밤샘 작업했다
내가 한건 자격증 공부가 아니다 ㅋㅋ
(솔직히 예상문제 보면 그냥 합격 할 것 같았음)
챗봇 하나만 팟다.
챗봇css는 거의 90%이상 완성을 해서 엄청 깔끔해졌다
플로팅 기능과
내가 원하는대로 구현하진 못했지만
랜덤아바타와 딜레이 기능도 추가했다
여기에 추가로
챗봇의 발화 앞뒤에 랜덤 문장을 삽입하여
정해진 대본을 읽는 챗봇이지만
마치 대화형 챗봇인 것처럼...
말하는 코드를 추가했다
그냥 배열에 문장을 넣고
math.random으로 랜덤문장을
챗봇 대본의 앞뒤에 넣어주는 것 뿐이다 ㅋ
장난 같아서 멘토님한테 조언도 구했다
멘토님의 조언에 따라
그냥 말투만 정중하게 바꿔도 한결 보기 좋고
느낌이 있다!
(대화형 챗봇인 척 하는 대본형 챗봇이다)

아무튼 밤샘하니까 챗봇이 엄청 깔끔해졌다

그 후 유저 정보를 받을 때 기타 버튼을 새로 파서
기타의 경유 유저가 직접 입력 받게 하려고 했다
그런데 이게 생각보다 엄청 노가다다...
코드를 100줄 정도 추가 했는데
하다 보니까 거의 다 되었다고 생각될 때 쯤
에러가 발생
이게 이런식으로 하면 라이브러리 시스템
상 질문마다 대본 알고리즘을 따로파야 해서
코드가 지금보다 엄청 더 길어져야 하는
문제가 발생...한다는 것
을 알게된 것이다.....
일단 기타를 안 받아도 깔끔하니까
우선순위상 ... 기타 버튼 추가는 뒤로 미룬다

이게 밤샘 작업의 결과
ㄱ. 챗봇 진입 시 랜덤인삿말을 하나 뽑는다
ㄴ. 유저정보를 묻는 문장 앞뒤로 랜덤문장(빈문자열,문장)을
넣어서 베리에이션을 줘서
같은 말만 하는 대본형 챗봇을 대화형챗봇처럼 보이게 사기를 쳤다
ㄷ. css는 디자이너가 기획한 것의 90프로 이상을 완성해서
깔끔해졌다
ㄹ. 랜덤아바타는 첫 진입할 때랑 새로고침할 때만 가능..
원래 내 생각은 챗봇이 말 할 때마다 계속 바뀌는 건데
그게 커스텀펑션으로 자꾸 아바타 바꿔줘도
라이브러리 메커니즘상 원래 안되는 건지 안바뀐다
ㅁ. 딜레이추가
원래 내 생각은 챗봇의 첫 발화 때5초의 딜레이를 준 후
챗봇이 로딩되엇다고 말하고 딜레이를 0으로 줄이는 것이엇으나
ㄹ과 같은 이유로 중간에 딜레이변수를 바꾸는 것은 불가능
한 것으로 보인다

34. 지금은 45시간 째 안/못 자는 중

11월 27일 개발일지
지금은 27일 새벽3시다
25일 금요일에 잠 안자고 밤샘 작업 후
토욜에서 일요일로 넘어가는 새벽인데 아직도 안자고 있다 ㅇㅅㅇ
현재 약 45시간 동안 깨어있다
챗봇 대충 마무리햇다
요즘 시간이 너무 없다
데이터합치고 디버깅 하는 것도 시간 너무 많이 걸림
팀원들이 자기가 바꾼 것도 잘 모르니까 내가 디버깅하고
css빠진 거 다시 채워넣는다...
내 개발할 시간도 없는데..

아 26일 자격증 시험 결과를 안적었네
1000점 만점에 700점 이상이면 합격인 시험인데
760점으로 턱걸이로 합격!! 했다
14분만에 풀고 나왔는데 사실
예상문제와는 다르게 의외로 어려웠지만
900점은 맞을 줄 알았는데 760점이라 약간 당황했음

그동안 프로젝트 급해서 못한 일이 많아서 아직
못잠.....
일욜안에 잘 수 있나 모르겠음

자동차에서 소리나는데.. 조퇴하고
카센터 가야하는데 자꾸 미룸
소리 자꾸 커짐 가끔씩 부부젤라 소리남
다음주엔 아니 이번주엔 꼭 가야함

멘토님께서 openai로 대화형챗봇도 해보라고 하심 이건 또 언제하나 싶음

아 그리고 나 사관학교 모범학생 후보라고 함

35. 성향 정보 받는 챗봇 마무리

11월27일 개발일지

ㄱ. message:
randomS() + randomTransport() + randomT(),
챗봇이 말할 때 앞뒤로 2가지 랜덤이 아니라
3가지 전부 랜덤을 사용하여 베리에이션을 더 줌

ㄴ. 직업이랑 취미를 받을 땐 유저인풋으로 타이핑으로 받고
나머지는 버튼으로 받음

ㄷ. 말투를 정중하게 바꿈

유저성향받기챗봇 마무리

기능정리
1.플로팅
2.봇 아바타랜덤(새로고침)
3.항상 같은 의미의 물음패턴이지만
3가지랜덤조합을 사용한 문장으로 베리에이션을 줌
4. 첫문장은 인삿말 중 하나를 랜덤출력
5. 봇의 발화에 2초의 딜레이
6. 입력 후 수정할 땐 필드하나만 뽑아서 수정 가능
7. 입력 완료 후 타입서밋 버튼으로
form태그 > axios 로 입력받은 정보를 라우터로 쏨
라우터에서는 컨.쿼리로 디비를 업뎃하고 레스.리다이렉트로
웹의 메인페이지로 보내줌

36. 챗봇에서 유저 정보 받고 DB로 UPDATE

학교에서 받은 클라우드DB연결이 안되서
그냥 로컬디비로 보내서 업뎃이 잘 되는 걸 확인했다

챗봇컴포넌트 기능에서 
     axios
      .post("http://127.0.0.1:5000/chatbotUpdate", data)
      .then((res) => {
        console.log("라우터다녀옴");
        console.log("res: " + res);
      })
      .catch((res) => {
        console.log("error");
      });
  그냥 쌩폼태그랑 타입서밋 버튼을 만들어서 버튼을 누르면
  요기 엑시오스 url넣은 라우터로 data에 데이터를 오브젝트로
  담아서 보낸다
  그럼 라우터에서는 data == req.body
  니까 req.body.transport 로 뽑아내서 
  sql문으로 db로 보내면 끝
  
  router.post("/chatbotUpdate", (req, res) => {
    console.log("chatbotUpdate 라우터 진입");
    console.log("transport: " + req.body.transport);
    console.log("job: " + req.body.job);
    console.log("hobby: " + req.body.hobby);
    console.log("music: " + req.body.music);
    console.log("food: " + req.body.food);
    console.log("drink: " + req.body.drink);
    let transport = req.body.transport;
    let job = req.body.job;
    let hobby = req.body.hobby;
    let music = req.body.music;
    let food = req.body.food;
    let drink = req.body.drink;
    let sql = `UPDATE userinfo
    SET transpo=?, 
    job=?,
    hobby=?,
    music=?,
    food=?,
    drink=?
    WHERE pk="1";`;
    conn.query(sql, [transport, job, hobby, music, food, drink], (err, rows) => {
      console.log("컨쿼리진입");
      res.redirect("http://127.0.0.1:3000/");
    });
});

  라우터에서는 sql문으로 db를 업데이트하고 res.redirect 로
  웹의 메인페이지로 이동시킨다

미완성:
sql문where에서 현재 로그인한 회원을 셀렉하는 코드가 필요함. 기상시간출근시간점심시간퇴근시간을 챗봇으로 안받음.
클라우드db연결 안됨.

37. react simple chatbot 으로 시간 정보 받기

11월28일 개발일지

wake 기상시간
startwork 출근시간
lunch 점심시간
endwork 퇴근시간

4개의 시간을 받는 코드 작성

챗봇이 숫자 4개를 입력하라고 말하고
유저의 인풋을 이프문으로 test함
시간을 나타내는 숫자가 아니면 ex) 예시를 보여줌
시간을 나타내는 숫자가 맞으면 다음스텝을 리턴함


{
  id: "1",
  message: "기상시간을 숫자 4개로 적어주세요. 0000 ~ 2459",
  trigger: "wake",
},
{
  id: "wake",
  user: true,
  trigger: "2",
  validator: (value) => {
    if (/^([0-1]?[0-9]|2[0-4])([0-5][0-9])(:[0-5][0-9])?$/.test(value)) {
      return true;
    } else {
      return "ex) 오후1시30분 > 1340";
    }
  },
},

이렇게 라우터에 전부 찍힘

38. open ai

11월28일 개발일지

https://www.youtube.com/watch?v=rdWavi2M2HE&list=LL&index=2
참고해서 open ai로 대화챗봇 만들기

html예제라
리액트로 옮길려면

버튼태그에 온클릭={펑션}
후 태그말고 다른 걸 메인펑션쪽에 넣고
그걸 버튼태그 펑션으로 감싸면 일단 동작은 함

그 후 api키 받아야 함

https://keep-steady.tistory.com/m/51
여기 참고

결과
html에서는 작동확인
react로 옮긴 코드로 실행하고 채팅인풋 넣으면
이상한 증상 발생
1.입력순서-1 만큼 출력함
예를들면 첫번째입력은 -1하면 0이니까 챗방에 출력x
5번째 입력은 -1하면 4니까 챗방에 인풋 출력을 4번함
(아웃풋도 4번)
2. f12로 보면
Refused to set unsafe header "User-Agent"
오류 발생함

react simple chatbot 으로 연결해도 비슷함

39. open ai + react simple chatbot

11월 29일 개발일지

유튭에서 얻은 html코드를 .js(리액트)버전, 노드(라우터)버전, react simple chatbot 버전, 다 만들어 봄

정상 작동하는 건 html코드랑 js버전

리액트심플챗봇이랑 연동하려고 엄청 애를 썼으나
이 라이브러리의 이상한 메커니즘탓에 해결이 안됨

일단 채팅 중간에 message에서 커스텀펑션을 써서 변수를 바꿔도
그걸로 업데이트를 절대 안하고

또 모델에 인풋 넣고 아웃풋을 then 안에서 리턴해야 하는데
리턴을 하면 프라미스로 리턴을 해서 메세지화 할 수 없음

검색을 해보면 덴 리턴 으로 프라미스로 리턴 후 또 덴을 걸어서 리턴을 하면 되던데 여기선 안됨

프라미스코드를 다른 파일에 두고 import로 불러와서
쓰는 것도 있어서 해봤는데 역시 안됨

그런데 생각을 해보면
이후 알림기능 구현까지 생각하면
그냥 js파일 코드로 쓴느 것도 괜찮을 듯

아무튼 디버그만 시도하다 하루를 날림

40. open ai api + papago api

11월30일 개발일지

리액트심플챗봇과 연동을 포기하고
js파일을 쓰려는데
원본 영상에도 나오는 것처럼
이놈은 한글을 엄청 못 알아먹기
때문에

유저가 인풋으로 한글 > 파파고로 그 한글을 영어로 번역 > 모델로 전송 > 모델이 영어로 응답 > 파파고가 영어를 한글로 번역 > 유저한테 한글로 전송

이 과정을 거치는 것이 원본 영상

그래서 이걸 하려다 하루를 또 날림....
분명히 파파고 api id랑 secret 제대로 발급 받았는데
파파고부터 인증에러 뜨고 라우터에서 openai api로 접속
하려니까 그것도 에러
인풋이랑 상관 없는 값만 내놓는다.

41. open ai + 웰니스 데이터 학습

12월 1일 개발일지

결과적으로 번역시스템에 실패해서
내가 생각한 결론은 그냥 한글을 학습 시키는 것..
정말 간단한 일인데 괜히 이틀을 날렸음

스트림릿 챗봇 만들 때 사용했던 웰니스 데이터셋을
활용하기로 함

(스트림릿 등 챗봇 가지고 성과 없이 디버그만.. 한 것 생각하면
시간만 날린 것 같았지만 이렇게 재활용 하는 게 많음
맵api도 차일드프로세스로 구현하고)

일단 웰니스 심리 상담 데이터셋에서 인풋아웃풋을 그냥 복사 붙여넣기로
코랩에 넣어서 변수로 선언.

?와 . 기준으로 한문장씩 스플릿.

남편, 결혼, 신랑, 성령이 들어간 문장을 제거. (뜬금 없이 남편 소리를 너무 자주함)

스플릿에서 생긴 빈문자열을 제거.

전처리 후 남은 문장 총 2700개

for문으로 문장 50개씩 뽑아서 자동으로 2700문장 전부 학습시키기
(집 인터넷으로 해서 그런가? 그냥 50개를 돌리면 잘 돌아가는데 포문 돌리면 자꾸 에러남)

할 수 없이 슬라이스로 문장 50개씩 수동으로 코드 복붙하면서 2700까지 54번(*50) 복붙과 숫자 수정.

2700문장 학습완료

test

유저 : 오늘 뭐했어?

ai : 오늘은 집에서 책을 읽고 영화를 보며 쉬는 하루였습니다.

유저 : 부럽다. 난 공부하느라 힘들었어.

ai : 나도 느끼고 있어. 그러나 그것은 더 나은 미래를 위해 우리가 해야 할 일이기 때문에 공부하는 것이 맞아. 나는 당신을 응원할게. 함께 힘내자!

유저 : 고마워. 힘들어도 개발 공부 재밌어.

ai : 별로 안 힘들어요. 재미있기만 하면 되니까요! 감사합니다.

참고 글 : https://keep-steady.tistory.com/m/51

챗봇 개발 상황:
유저정보받기챗봇(완료), 대화봇(css만 하면 완료), 알림봇(예정)

42. 대화형챗봇 css

12월 1일 개발일지

참고글: https://velog.io/@carrykim/%EC%82%AC%EC%9D%B4%EB%93%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-react-flutter-%EC%B1%84%ED%8C%85-%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0-2

부트스트랩이라는 걸 처음 활용해 본다.
기존 대화봇은 css가 전혀 없는데 이걸 처음부터 구현하기는 힘들다
그래서 채팅창을 구현하는 글을 보고 거기에 코드를 끼우면 되는
건데...

글쓴이가 중간에 같은 글을 복붙해서
파일 하나가 누락된 부분 때문에...
직접 유즈스테이트랑 핸들체인지 핸들서밋으로 연결하느라 힘들었다
게다가 인풋 적고 버튼 누르면 인풋값이 안사라져서
그것도 손수 해결.

43. In-context Learning

12월 3일 개발일지

인컨텍스트러닝 즉 문맥학습이다.

이 챗봇이 어떻게 이런 심리상담을 할 수 있었을까?

과정

일단 보이는 것처럼 유저정보를 받는 챗봇과 90%이상 유사하게
채팅창 css를 만들었다.
인컨텍스트러닝
심리상담 데이터를 퓨샷으로 해서 유저의 인풋과 모델의 아웃풋을
퓨샷에 누적시켜서 인풋에 넣는 방식이다. 유저가 한문장을 입력을
해도 실제로 들어가는 인풋은 유저가 전에 한 말과 모델의 전 아웃풋 그리고 내가 정한 디폴트값(퓨샷)이 함께 들어가는 것이다.
그래서 문맥학습인 것!

퓨샷 구조

 "The following is a conversation with Greenee. 
  Greenee has a lot of sympathy and very comforting. \n\n
  
 Human : 갈수록 지쳐요… \n
 Greenee : 그 마음 이해해요. 마음처럼 되지 않을 때가 있죠. \n
 Human : 어떻게 뭔 치료가 없을까 해서 그거 알아보다가 왔어요. \n
 Greenee : 완치할 수 있을 거예요. 힘들겠지만 버텨보자구요. \n...생략"

위처럼 첫 줄 task description에는 심리상담사에 걸맞는 설명이 들어간다.
아 여기서 왜 심리상담 데이터를 쓰냐면 ai비서가 현실 비서와는
다른 장점 덕분에 챗봇으로 유저의 정신건강도 챙길 수 있다는 그런 심리상담 + 일정관리 ai비서 컨셉이기 때문이다.
(일정앱에 왜 대화봇이 필요한지에 대해 설득력이 필요했다.)

결과는 첫 스샷에 보이는 것처럼
그래요? 그렇군요 너무 자주 말하는 것만 빼면 굉장히 상담을 잘한다
(그래요?랑 그렇군요를 금지어로 추가해서 해결함)

gbt3의 경우 그냥 한글로 물으면 이상하게 대답하는 경우가 많다
그래서 처음 참고한 영상대로 파파고 번역기와 연동하려고 했는데
실패했음.. 그런데 생각해보니 그냥 한글을 학습시키면 되는
간단한 문제 같았다. 기본 퓨샷으로 심리상담 질문과응답 10세트를 넣은 결과 저렇게 한국어를 잘한다.
(위 대화 스샷에서 인풋값으로는 심리상담데이터에서 퓨샷으로 안쓴 인풋을 넣음)

44. 대화봇 기능

12월 4일 개발일지

대화봇도 새로고침을 하면 랜덤아바타를 적용
왼쪽 대화봇도 X 뒤로가기 버튼 구현

비슷한 이미지 찾기 힘들어서 유저정보받는 챗봇에서 f12하고 셀렉한 다음
태그코드를 카피엘리먼트 해서 붙임
추가로
```
fill: #fff; 흰색
border-bottom: 2px solid #2ecc71; 초록색
```

45. 메모장 만들기

12월6일 개발일지

메모장 만들려고 검색 엄청 하다가 드디어 찾았다.
리액트 본 앱으로 파일 몇개만 넣고 입맛대로 css한 상황.
이게 정말 신기한 것이 DB도 안쓰고 어떻게 데이터를
저장하는지 모르겠다.

코드에서 add메모 함수에서 보면 딕셔너리로
데이터를 변수에 저장하고
그게 흘러 흘러 localstorage.로 가는데
마우스를 올려보면 var localstorage : Storage
이렇게 이미 변수 선언이 되어있다!? 코드에서는
어디에도 변수 선언이 안되어있는데?
: Storage로 초록색인 걸 보면 내장함수?
localstorage를 검색해보니까 세션처럼 브라우저의
저장기능인데 세션처럼 리셋은 안되는 것이다!!
사실상 그냥 로컬DB나 마찬가지

메모장 엄청 깔고 디버깅하다 지우고 몇번이나 했는데
보람이 있다.

셋아이템:로컬스토리지에 키벨류저장
겟아이템:로컬스토리지서 값 불러오기

로컬스토리지는 스트링으로 불러온다
  > 제이슨으로 감싸서 보내면 원하는 형태로 저장 가능
로컬스토리지.셋아이템('키',밸류) 
로컬스토리지.겟아이템('키',스트링밸류)

46. 대화봇 기능 추가

12월7일 개발일지

https://github.com/songys/Chatbot_data (데이터 수집)

봇 기능을 총4가지로 늘렸다.
유저정보받는봇, 대화봇(일상대화데이터파인튜닝예정), 상담봇(심리상담데이터퓨샷10세트), 큐엔에이봇

3가지 모드에 따라
퓨샷이랑 파라미터가 다르게 들어간다.

47. 대화봇 파인튜닝

12월 8일 개발일지

과정

gitbash에서

pip install --upgrade openai
export OPENAI_API_KEY=에이피아이키 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
openai tools fine_tunes.prepare_data -f <LOCAL_FILE> (전처리 프롬프트랑컴플 필드제목달아야함)
openai api fine_tunes.create -t ChatbotData2_prepared.jsonl -m davinci(베이스모델) (트레인)
{ (중간에트레인끊기면) openai api fine_tunes.follow -i <YOUR_FINE_TUNE_JOB_ID> }
결과

모델네임
Uploaded model: davinci:ft-personal-2022-12-07-08-51-09
파일아이디
Uploaded result file: file-5NmEv24tlus4AfQZuVGxG1Wd
파인튠잡아이디
Created fine-tune: ft-pjclGTS89HJv0wmQJWRuxonH

트레인결과보기
openai api fine_tunes.results -i ft-pjclGTS89HJv0wmQJWRuxonH

48. 퓨샷에 성향정보

12월 9일 개발일지

퓨샷에 db성향정보 불러와서 넣기(o)
이러고 챗봇한테 내 취미는? 하면
디비에 입력된 취미를 말한다
당신의 취미는 x입니다이렇게
여기서 당신은 뭐냐면
입력줄 때 앞에 당신: 이걸 붙여서 머릿말로
달고 들어가기 때문에 당신이라고 말하는 거 ㅇㅇ
원래는 human: 이였는데 이것 때문에 당신으로
바꿈

모드변경시'이름'출력(o)

잡다한 기능이 늘어가면서
코드가 길어진다..
내 코드 내가봐도
힘들다

이걸 한 후 채팅방에 들어가자마자
이름 출력하는 것도 하려다가
코드 꼬여서 망할 뻔~
axios가 늦게 실행되는 것 때문에 실패
이제 공부할 시간도 없다 개발은 여기서 마무리

49. 챗봇 피피티 작성

12월 10일 개발일지

멘토님한테 칭찬도 듣고 피피티 전체적으로
정말 좋은 조언을 들었다.

50. 결과

51. 포트폴리오

용으로 웹에 정리
https://sh-project2nd.netlify.app/

BABY CAT

BABY

이전 포스트

알고리즘 경진대회

다음 포스트