peekobot 다운로드 - peekobot 소스 코드 다운로드

peekobot

AI 소스 코드

1.0.0

다운로드

피코봇

Peekobot은 100줄 미만 의 ES6 바닐라 JavaScript(및 일부 CSS)로 작성된 웹사이트를 위한 간단하고 선택 중심의 챗봇 프레임워크입니다.

/docs 폴더에서 볼 수 있는 예시 봇이 있습니다.

조작할 수 있는 CodePen도 있습니다.

특징

작고 단순하며 종속성 없음(이전 브라우저 호환성이 필요하지 않은 경우)
대화를 간단한 JavaScript 객체로 정의하세요
선택/버튼 기반 대화
URL 및 대화의 다른 부분에 연결하는 옵션

브라우저 호환성

저는 async/await 및 CSS 사용자 정의 속성을 사용하므로 대체로 Internet Explorer와 Opera Mini는 지원되지 않습니다.

Babel 또는 이와 유사한 것을 사용하여 IE11 호환성을 JavaScript에 적용할 수 있습니다.

원하는 경우 CSS 사용자 정의 속성을 수동으로 인라인할 수도 있습니다.

용법

Peekobot은 패키지나 라이브러리가 아닙니다. npm install 수 없습니다. 스타터 키트 또는 프레임워크로 생각하십시오. 아이디어는 당신이 그것의 사본을 가지고 그것을 가지고 당신 자신의 일을 한다는 것입니다.

당신이 그것을 사용한다면, 나에게 연락해서 당신이 만든 것을 보여주세요! 나는 다른 사람들이 그것으로 무엇을 하고 있는지 보고 싶습니다. 감사해요! ?

Peekobot을 사용하려면 다음을 수행해야 합니다.

HTML에 Peekobot 스크립트 및 스타일 추가
HTML에 Peekobot 마크업 추가
대화를 정의하세요

1. HTML에 Peekobot 스크립트와 스타일을 추가하세요.

peekobot.js 및 peekobot.css 파일을 프로젝트에 다운로드합니다.

GitHub에서 해당 파일에 대한 원시 코드를 가져오거나 프로젝트를 복제하여 이를 수행할 수 있습니다.

그런 다음 Peekobot 스크립트와 스타일을 HTML에 추가하세요.

이것들은 head 에 들어가야 합니다:

    <!-- Peekobot 사용자 정의 속성(CSS 변수) - 이것을 설정하세요! --><스타일>:루트 {
            --Peekobot-높이: 80vh;
            --peekobot-아바타: url();
        }</style><!-- Peekobot 스타일 --><link rel="stylesheet" href="peekobot.css">

여기에서 챗봇 창의 높이를 변경하고 챗봇이 채팅에 사용할 "아바타" URL을 정의할 수 있습니다. 이것은 작고 정사각형이어야 하며 원형 모양에 맞아야 합니다. 내 CSS는 24px 정사각형으로 표시되므로 48px x 48px 이미지가 적합합니다.

JavaScript를 로드하려면 HTML 하단에 다음 내용을 입력해야 합니다.

    <script src="conversation.js"></script><script src="peekobot.js"></script>

2. HTML 본문에 Peekobot 마크업 추가

챗봇을 표시할 HTML 본문에 Peekobot 마크업을 추가하세요.

    <div id="peekobot-container"><div id="peekobot-inner"><div id="peekobot"></div></div></div>

3. 대화를 정의하세요

대화 정의는 chat 이라는 JavaScript 변수에 배치되어야 합니다. 나는 이것을 conversation.js 파일에 정의합니다. 원한다면 인라인할 수 있습니다.

chat 변수는 객체여야 합니다. 채팅 개체에서:

첫 번째 속성 이름/키는 숫자 1이어야 합니다.
후속 속성 이름은 숫자 또는 문자열일 수 있습니다. 문자열을 사용하면 대화의 일부를 그룹화할 수 있습니다.
각 속성 값은 대화의 항목입니다.

대화 항목에는 다음이 있어야 합니다.

대화의 이 시점에서 챗봇이 말하는 text 속성
어느 하나:

next 속성은 채팅 개체의 숫자 키를 명시하여 다음 채팅 항목을 정의하고, 챗봇이 사용자의 입력 없이 여러 가지를 차례로 말해야 할 때 사용됩니다. 또는
사용자가 선택할 수 있는 선택 사항을 정의하는 options 속성입니다. 이는 옵션 개체의 배열입니다.

옵션 개체에는 다음이 있어야 합니다.

사용자 선택에 대한 레이블인 text 속성 및 둘 중 하나
채팅 개체의 속성 키를 지정하여 다음 채팅 항목을 정의하고 사용자가 이 옵션을 선택할 때 사용되는 next 속성 또는
사용자가 이동할 수 있는 링크를 정의하는 url 속성

간단한 채팅 개체 예시는 다음과 같습니다.

 const chat = {1: {text: '좋은 아침입니다',next: 'question1'},question1: {text: '아침 식사에 차나 커피를 드시겠어요?',options: [{text: '차', next: 'response1'},{text: 'Coffee',next: 'response2'}]},response1: {text: 'Splendid - 내가 그렇게 말하면 좋은 음료입니다 나 자신.'},response2: {text: '원하시는대로 하세요'}}