알파
1.0.0
Alpha는 봇, 아니 오히려 자신만의 웹 기반 챗봇을 만들기 위한 기반입니다. 우리는 챗봇이 매우 유용하고 재미있을 수 있다고 생각했기 때문에 이 프로젝트를 시작했습니다. 그러나 현재 상황에서는 대부분의 챗봇이 Facebook과 같은 기존 메시징 플랫폼으로 제한되어 있습니다. 이는 꽤 괜찮습니다. 그러나 봇이 다른 곳에서도 살기를 원한다면 어떻게 될까요? 웹 ?
자신만의 봇을 구축하고 자신만의 시각적 스타일과 규칙을 정의 할 수 있을 뿐만 아니라 사용자 정의 및 논리를 무제한으로 제어 할 수 있습니다. 다양한 솔루션이 이미 존재하지만 제한적이고 비용이 많이 들고 구현하기 어려울 수 있습니다.
이것이 바로 Alpha가 유용한 곳입니다. 이 라이브러리는 매우 간단한 방법으로 자신만의 봇을 구축할 수 있도록 설계되었습니다. 당신은 다음을 수행해야합니다 :
다운로드
나만의 Q&A 트리 삽입
나만의 색상과 이미지 삽입
Alpha는 전체 UI 렌더링과 애플리케이션 상태 처리를 담당합니다. 실제로 React(또는 해당 문제에 대한 Javascript)를 알 필요는 없습니다 . 그러나 React 및 Redux에 대한 방법을 알고 있다면 봇 앱의 렌더링을 추가로 사용자 정의하고 선택한 백엔드 또는 AI 엔진에 연결할 수도 있습니다.
설치
대화 사용자 정의
추천하기
UI 사용자 정의
React 앱 사용자 정의
이메일 보내기(미정)
백엔드에 연결(TBD)
AI 엔진에 연결(TBD)
Alpha는 Docker 에서 실행되도록 제작되었습니다. 그러나 시스템에 NodeJS 와 npm 또는 Yarn (선호!)이 있으면 로컬로 실행할 수 있습니다.
컴퓨터에 설치하고 실행하려면 터미널에서 다음 명령을 실행하세요. Docker가 설치되어 있어야 합니다(Docker 없이 지침은 아래 참조).
이 저장소를 복제하세요: git clone https://github.com/IcaliaLabs/alpha.git
디렉토리로 이동: cd alpha
종속성 설치: docker-compose run --rm alpha yarn install
그런 다음 서버를 들어 올릴 수 있습니다. docker-compose up alpha
그게 다야! 브라우저에서 localhost:3000 * 을 열면 브라우저에서 데모 봇이 실행되고 있는 것을 볼 수 있습니다.
개발 모드에서 실행할 때 몇 가지 중요한 사항은 다음과 같습니다.
봇 앱에는 핫 리로딩이 활성화되어 Webpack + React의 이점을 경험할 수 있습니다.
Redux DevTools는 기본적으로 활성화되어 있어 앱의 작업/상태 변경을 실시간으로 검사할 수 있습니다.
각 봇 메시지 사이의 시간은 0 으로 설정됩니다 . 이는 개발자가 대화 흐름을 계속해서 검토할 때 좌절감을 최소화하기 위한 것이지만 원하는 경우 app/containers/BotContainer/sagas.js 에서 이 동작을 변경할 수 있습니다.
Heroku: 그냥 git push heroku master 실행하세요. 이 봇은 Heroku를 지원합니다!
Docker를 사용한 로컬: 이미지를 컴파일하여 프로덕션에서 어떻게 작동하는지 확인할 수 있는 경우 빌드도 함께 배치합니다. 그냥 실행하세요:
docker-compose up release
이미지를 구축하고 프로덕션 서버를 들어 올립니다.
Docker 없이 설치하고 실행하려면 모든 종속성을 디렉터리에 직접 설치해야 합니다.
개발용:
이 저장소를 복제하세요: git clone https://github.com/IcaliaLabs/alpha.git
디렉토리로 이동: cd alpha
npm install 또는 yarn install 실행하여 종속성을 설치합니다.
npm start 실행하여 서버를 시작하세요.
브라우저에서 localhost:3000을 방문하세요.
생산용:
이 저장소는 Heroku가 준비되어 있습니다. git push heroku master 실행하세요.
어떤 이유로 package.json 의 스크립트를 변경하는 경우 프로덕션 서버에 배포하기 전에 다음 단계를 고려해야 합니다.
AWS의 경우 여기에 나열된 것과 동일한 단계를 따를 수 있습니다.
Azure/Softlayer/기타 서버의 경우 ./build 폴더를 생성하려면 서버에 SSH로 연결하고, 리포지토리를 가져오고, yarn 사용하여 종속성을 설치한 다음 npm run build 수행해야 합니다. 마지막으로 start:prod 사용하여 서버를 시작할 수 있습니다. 또는 start:production 실행하면 이러한 단계를 순서대로 함께 실행하고 테스트도 수행합니다.
Q&A 논리를 포함하여 봇이 말하는 내용 뒤에 있는 모든 논리는 app/BotMind/ 에 있는 BotMind 내부에 있습니다. 각 개별 봇이나 사용자 입력은 채팅 UI에서 렌더링되기 때문에 버블 이라고 부릅니다.
대화를 사용자 정의하려면 app/BotMind/_initialBubble.js 및 app/BotMind/BotMindFlows/index.js를 이해하고 편집하면 됩니다.
BotMind의 기본 파일은 BotMind.js 이지만 이 파일은 _initialBubble.js , _nextBubble.js 및 _recommendationBubbles.js 에 있는 함수의 수집기 및 내보내기 역할만 수행합니다. 이 세 파일은 차례로 app/BotMind/BotMindFlows/ 내부에 있는 Q&A 트리를 기반으로 논리를 수행합니다.
여기서 대화 트리에서 초기화될 때 또는 사용자가 대화를 다시 시작하도록 선택할 때 봇이 시작되는 지점을 설정할 수 있습니다.
이 파일에는 봇이나 사용자의 마지막 메시지를 기반으로 봇이 어떤 풍선이나 대화로 점프해야 하는지에 대한 논리가 포함되어 있습니다. 훨씬 더 세부적인 사용자 정의를 원하는 경우가 아니면 이 파일을 변경할 필요가 없습니다. 자신의 책임하에 진행하십시오.
이 파일은 대화 풍선에 shouldEstimateRecommendation: true 전달될 때 경로를 선택하는 논리를 수행합니다. 이 파일은 대화 중 가방 시스템 에 누적된 포인트를 기반으로 작동합니다. 훨씬 더 세부적인 사용자 정의를 원하는 경우가 아니면 이 파일을 변경할 필요가 없습니다. 자신의 책임하에 진행하십시오.
BotMindFlows는 app/BotMind/BotMindFlows/ 에 있습니다. 기본적으로 여기서는 index.js 파일만 찾을 수 있지만 대화 트리가 너무 커지기 시작하면 자신만의 파일을 만들고 index.js 사용하여 이와 같은 스프레드 연산자를 사용하여 결합할 수 있습니다.
import greetings from './conversation1';
import designSprint from './conversation2';
import designSprintQuestions from './conversation3';
const questions = {
...conversation1,
...conversation2,
...conversation3,
}
export default questions; BotMind는 어디로 가야 할지( _nextBubble.js 내부) 분석할 때마다 app/BotMind/BotMindFlows/index.js 내부에서 질문 해시를 찾을 것으로 예상합니다. 질문은... 짐작하셨겠지만, 개별 질문-답변 해시로 구성됩니다. 여기에서 대화의 논리와 흐름을 정할 수 있습니다. 예를 들어 데모에서는 다음을 찾을 수 있습니다.
const 질문 = {start:{botPrompt: "안녕하세요 인간님, 제 이름은 알파입니다. 저는 멋진 챗봇입니다.",답변: [{nextId: "myPurpose"}] },myPurpose:{botPrompt: "제 목적은 사용자를 안내하고 결정을 내리고 추천을 할 수 있는 간단한 챗봇이 되는 것입니다.",답변: [{nextId: "yourName"}]},yourName:{botPrompt: "그래서, 이름이 뭐예요?",input: textField(),answers: [ {answer: common_greetings,nextId: "greetings_notAName", }, {answer : common_greetings_negative,catchName: true,nextId: "asYouCanSee", },],},
...}기본 질문 내보내기;각 질문 해시 에는 고유한 ID가 있어야 합니다 . 봇의 대화 라이브러리가 커짐에 따라 A에서 문제가 될 수 있는 작업을 수행하는 ID를 기억하므로 조금 더 작성해야 하더라도 이러한 ID를 가능한 한 자명하게 만드는 것이 좋습니다. 모든 질문 해시가 차지합니다. 다음 옵션:
botPrompt ([String] 필수): 봇의 메시지
답변([Array] 필수): 사용자의 답변에 따라 봇이 가질 수 있는 다양한 응답입니다. 배열은 해시로 구성되며 각각은 가능한 대화 흐름 결과를 나타냅니다. [ 답변 ] 내부의 해시는 다음 옵션을 사용합니다:
nextId ([String] 필수) : 이 답변이 충족될 경우 봇이 탐색할 대화 ID를 결정합니다. 봇의 마지막 메시지에서 또는 권장 사항을 추정하기 위해 이동하기 전에( 아래 참조 ) null 전달해야 합니다.
Answer ([String | RegEx]) : 이 해시를 트리거할 사용자 답변입니다. selectField 또는 tagsField 사용하여 사용자에 대한 답변을 미리 정의하는 경우 문자열을 사용해도 괜찮습니다. 그렇지 않으면 RegEx를 사용할 수 있습니다(예제 참조).
sumToBags ([Array]) : 여기서는 고급 흐름 제어를 수행하거나 봇의 목적인 경우 권장 사항을 생성하기 위해 BagsSystem 에 포인트를 추가하기 시작할 수 있습니다. sumToBags는 일반적으로 다음과 같습니다: sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]
catchName ([Boolean]) : 사용자 메시지의 사용자 이름을 앱 상태에 저장하도록 React에 신호를 보냅니다.
catchCompanyName ([Boolean]) : 위와 동일하지만 회사 이름에 대한 것입니다.
catchMail ([Boolean]) : 위와 동일하지만 이메일 주소에 대한 것입니다.
catchPhone ([Boolean]) : 위와 동일하지만 전화번호에 대한 것입니다.
shouldEstimateRecommendation ([Boolean]) : BotMind 에 신호를 보내 일반 흐름을 중단하고 Recommendation Bag을 분석하여 대화를 진행합니다(예제 참조).
FinishConversation ([Boolean]) : 다음 대화에서 대화를 끝내도록 봇에게 신호를 보냅니다. 이 경우 사용자 입력이 비활성화되고 사용자가 "다시 시작"을 선택할 때까지 봇은 "오프라인 상태"가 됩니다.
참고 – 이 대화 부분에 대한 botPrompt가 결과를 예상하지 않는 경우 다음과 같이 nextId 전달할 수 있습니다.
answers: [
{
nextId: "hello"
}
] input ([Object]) : 이 botPrompt 중에 사용자가 사용할 수 있는 입력 유형(텍스트 필드, 태그, 선택, 비활성화 등)을 결정합니다. 기본적으로 입력은 비활성화된 텍스트 필드입니다. index.js 파일 시작 부분에 포함된 StateFormatter 도우미를 사용하는 것이 좋습니다.
type ([String]) : 봇이 전송하는 메시지의 종류("text", "media", "link" 또는 "transformedText").
varName ([String]) : 입력 유형으로 "transformedText"를 선택하는 경우 botPrompt 에 @varName 쓸 수 있으며, 이는 이 옵션을 참조합니다. 봇이 메시지를 렌더링할 때 React 상태 ( 아래 참조 )에 저장된 변수를 찾고 해당 변수의 값에 대해 @varName 바꿉니다.
위에서 언급했듯이 React 상태에 일부 값을 저장하고 나중에 이 값을 기반으로 반응/흐름/권장 사항을 계산하도록 선택할 수 있습니다. 우리는 이것을 가방 시스템이라고 부릅니다.
가방 시스템의 개념은 대화가 진행됨에 따라 " 포인트 "로 채울 수 있는 일부 " 가방 "을 미리 정의하는 것입니다. 마지막으로 질문-답변 해시 중 하나에서 shouldEstimateRecommendation: true 호출하기로 결정하면 _recommendationBubbles.js가 호출되어 각 가방이 누적한 포인트 수에 따라 다음에 무엇을 표시할지 결정합니다.
첫 번째 단계는 /app/BotMind/recommendationBags.js 에서 사용할 가방을 정의하는 것입니다. 이러한 가방을 정의하지 않으면 봇은 작동하지만 addToBags 또는 shouldEstimateRecommendation 호출할 때 무엇을 해야 할지 알 수 없습니다. 가방은 이렇게 생겼습니다.
const recommendationBags = [
{
name: "redWine",
defaultValue: 0,
goToBubbleId: "redWine_start",
},
{
name: "whiteWine",
defaultValue: 0,
goToBubbleId: "whiteWine_start",
},
{
name: "roseWine",
defaultValue: 0,
goToBubbleId: "roseWine_start",
},
]
export default recommendationBags; 나중에 질문-답변 흐름에서 addToBags 사용하여 언제 추가할지 정의할 수 있습니다. 예를 들면 다음과 같습니다.
question1:{
botPrompt: "Which of these are you having?",
input: selectField(["Red Meat", "Sea Food", "Chicken", "Pasta"]),
answers: [
...
{
answer: "Red Meat",
nextId: "question2",
sumToBags:[{name: "redWine", points: 4}, {name: "roseWine", points: 1}]
},
...
]
} 준비가 되면 다음과 같이 shouldEstimateRecommendation 호출하세요.
question2:{
botPrompt: "What will you serve for dessert?",
input: selectField(["Chocolate", ...]),
answers: [
...
{
answer: "Chocolate",
shouldEstimateRecommendation: true,
nextId: null,
sumToBags:[{name: "redWine", points: 3}, {name: "whiteWine", points: 1}, {name: "roseWine", points: 2}]
},
...
]
}, 이 예에서는 _recommendationBubbles.js 가 호출되므로 다음 봇 버블은 아마도 redWine_start 에 있는 버블이 될 것입니다.
우리는 시간을 절약하기 위해 UI를 미리 정의할 수 있는 자유를 얻었습니다.
대부분의 Bot 스타일은 단일 파일인 /app/customization/styleVariables.js 에 의해 제어됩니다. 여기에서는 UI의 배경뿐만 아니라 모든 요소에 사용되는 거의 모든 색상을 변경할 수 있습니다.
UI를 추가로 변경하려면 스타일시트 파일을 직접 살펴보면 됩니다. /app/global-styles.js 에 전역 파일이 있으며 일부 구성 요소 또는 컨테이너에는 특정 모듈 구성 요소에 대한 해당 폴더에 자체 styledComponents.js 파일이 있습니다. 이 파일은 React/ES6용 매우 멋진 라이브러리인 Styled-Components를 사용합니다(공식적으로 모범 사례 지원으로 간주됨). 이러한 파일은 Javascript의 태그가 지정된 템플릿 리터럴을 사용하여 JS 변수를 CSS로 보간하지만 놀라지 마십시오 . 이는 일반 CSS/SCSS와 거의 동일하게 처리될 수 있습니다.
참고 - 우리의 의도는 /app/components/UserInput/styledComponents.js 에 있는 것과 같은 100% 독립적이고 모듈식 스타일의 구성 요소로 점진적으로 마이그레이션하고 /app/global-styles.js 에 있는 거의 모든 코드를 제거하는 것입니다.
구성요소의 CSS를 조작하는 것만으로는 사용자 정의 희망 사항이 충족되지 않는 경우 다른 모든 것을 원하는 대로 사용자 정의할 수 있지만 이 시점 이후에는 앱의 React(+Redux) 측면을 처리해야 합니다( 아래 참조 ).
Alpha의 전체 React 측면은 이 멋진 저장소를 기반으로 리팩터링되었습니다. React에 대해 가장 잘 확립된 모범 사례를 활용합니다. 즉, 다음을 사용합니다.
리덕스
불변JS
재선택
Redux-사가
스타일 구성 요소
Alpha의 React 측면을 조작하고 싶다면 먼저 이 문서 를 살펴보는 것이 좋습니다.
우리는 귀하가 대화 내용 등을 요약하여 봇 소유자 및 최종 사용자에게 자동화된 이메일을 보내고 싶어할 것이라고 확신하며, 가장 유연하고 백엔드에 구애받지 않는 솔루션을 제공하기 위한 방법을 연구하고 있습니다. 사실상 "플러그 앤 플레이"만 허용됩니다.
현재 가장 좋은 방법은 이것을 Node나 Express(또는 Rails 5.1.x) 서버에 연결하고 자체 메일러 솔루션을 활용하는 것입니다. Rails 기반 구현에 사용하는 /app/BotMind/BotMailer.js 파일을 살펴볼 수 있지만 현재는 /app/containers/BotContainer/sagas.js 사용하므로 자신만의 이야기를 작성해야 합니다.
이 봇은 React + Webpack에만 기반을 두고 있습니다. 즉, Webpack과 함께 작동하는 한 모든 프레임워크, 백엔드 등에 연결할 수 있어야 합니다.
현재 Bot은 모든 API와 원활하게 연결할 수 있지만 원하는 동작을 얻으려면 액션 생성자와 사가를 직접 작성해야 합니다.
다양한 구현에 맞게 이 봇을 조정하는 과정에서 여기에 문서를 추가할 것입니다.
위와 마찬가지로 우리는 상호 작용을 향상시키기 위해 이 봇이 Api.ai 및 IBM의 Watson과 같은 다른 인공 지능 엔진에 연결할 수 있도록 허용할 계획입니다. 이것은 우리가 해야 할 가장 중요한 일 중 하나입니다.
