альфа
1.0.0
Alpha — это бот или, скорее, база для создания собственного веб- чат-бота . Мы начали этот проект, потому что считаем, что чат-боты могут быть очень полезными и весьма интересными, однако в настоящее время большинство чат-ботов ограничены существующими платформами обмена сообщениями, такими как Facebook, и это вполне нормально, но что, если вы хотите, чтобы ваш бот жил где-то в другом месте? сеть ?
Вы можете создать своего собственного бота и определить свои собственные визуальные стили и правила , а также иметь неограниченный контроль над настройкой и логикой . Различные решения уже существуют, но они могут быть ограниченными, дорогостоящими и трудными для реализации.
Здесь на помощь приходит Альфа. Эта библиотека предназначена для того, чтобы вы могли очень просто создать собственного бота. Вам просто нужно:
Скачать
Вставьте собственное дерево вопросов и ответов
Вставьте свои собственные цвета и изображения
Alpha берет на себя всю работу по рендерингу пользовательского интерфейса и обработке состояния приложения . Вам действительно не нужно знать React (или Javascript, если уж на то пошло). Однако, если вы разбираетесь в React и Redux, вы можете дополнительно настроить рендеринг бот-приложения и даже подключить его к любому серверному движку или механизму искусственного интеллекта по вашему выбору.
Установка
Настройка диалога
Рекомендации
Настройка пользовательского интерфейса
Настройка приложения React
Отправка электронных писем (подлежит уточнению)
Подключение к любому серверу (TBD)
Подключение к механизмам искусственного интеллекта (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 включены по умолчанию, поэтому вы можете проверять действия/изменения состояния приложения в режиме реального времени.
Время между каждым сообщением бота установлено на 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/других вам придется подключиться к серверу по SSH, извлечь репозиторий, установить зависимости с помощью yarn , а затем npm run build , чтобы создать папку ./build . Наконец, вы можете запустить сервер, используя start:prod . В качестве альтернативы просто запустите start:production , и он последовательно выполнит эти шаги, а также тесты.
Вся логика того, что говорит бот, включая логику вопросов и ответов, находится внутри BotMind , который находится в app/BotMind/ . Мы называем каждого отдельного бота или вводимые пользователем данные пузырьками, потому что они отображаются как таковые в пользовательском интерфейсе чата.
Чтобы настроить диалог, вам просто нужно понять и отредактировать app/BotMind/_initialBubble.js и app/BotMind/BotMindFlows/index.js .
Основным файлом BotMind является BotMind.js , но этот файл действует только как сборщик и экспортер функций, находящихся в _initialBubble.js , _nextBubble.js и _recommendationBubbles.js . Эти три файла, в свою очередь, реализуют свою логику на основе деревьев вопросов и ответов, которые находятся внутри app/BotMind/BotMindFlows/ .
Здесь вы можете указать, в какой точке дерева разговора ваш бот запускается при инициализации или когда пользователь выбирает перезапуск разговора.
Этот файл содержит логику того, к какому пузырю или диалогу должен перейти бот на основе последнего сообщения от бота или от пользователя. На самом деле вам не нужно изменять этот файл, если только вы не хотите углубиться в более тонкую настройку. Действуйте на свой страх и риск.
Этот файл выполняет логику выбора пути, когда в диалоговом окне передается shouldEstimateRecommendation: true . Этот файл действует на основе очков, накопленных системой Bags во время разговора. На самом деле вам не нужно изменять этот файл, если только вы не хотите углубиться в более тонкую настройку. Действуйте на свой страх и риск.
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 questions = {start:{botPrompt: "Привет, человек, меня зовут Альфа, я потрясающий чат-бот", ответы: [{nextId: "myPurpose"}] },myPurpose:{botPrompt: "Моя цель — быть простым чат-ботом, который направляет пользователей и способен принимать решения и давать рекомендации", отвечает: [{nextId: "yourName"}]},yourName:{botPrompt: "Итак, как вас зовут?",input: textField(),ответы: [ {ответ: common_greetings,nextId: "greetings_notAName", }, {ответ : common_greetings_negative,catchName: true,nextId: "asYouCanSee", },],},
...}экспортировать вопросы по умолчанию;Каждый хеш вопроса должен иметь свой уникальный идентификатор . Мы рекомендуем вам сделать эти идентификаторы как можно более понятными , даже если для этого придется написать немного больше, потому что по мере роста библиотеки разговоров вашего бота запоминание того, какой идентификатор делает, может стать проблемой в A. Каждый хэш вопроса занимает много времени. следующие варианты:
botPrompt (требуется [String]): сообщение от бота.
ответы (требуется [массив]): различные ответы, которые бот может дать в зависимости от того, что отвечает пользователь. Массив состоит из хэшей, каждый из которых представляет возможный результат потока разговора. Хэши внутри [ ответы ] принимают следующие параметры:
nextId (требуется [String]) : определяет, к какому идентификатору диалога бот перейдет, если этот ответ будет выполнен. В последнем сообщении от вашего бота или перед тем, как перейти к оценке рекомендации ( см. ниже ) , вам следует передать null .
ответ ([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]) : То же, что и выше, но для телефонных номеров.
mustEstimateRecommendation ([Boolean]) : сигнализирует BotMind о необходимости прервать обычный поток и проанализировать пакеты рекомендаций , чтобы продвинуть разговор вперед (см. примеры).
FinishConversation ([Boolean]) : сигнализирует боту о завершении разговора в следующем диалоге. Когда это произойдет, пользовательский ввод будет отключен, и бот «перейдет в автономный режим», пока пользователь не выберет «Перезапустить».
ПРИМЕЧАНИЕ. Если ваш botPrompt для этой части диалога не ожидает разветвления, вы можете просто передать nextId следующим образом:
answers: [
{
nextId: "hello"
}
] input ([Object]) : определяет, какой тип ввода доступен пользователю во время этого запроса бота (текстовое поле, теги, выбор, отключение и т. д.). По умолчанию для ввода отключены текстовые поля. Мы рекомендуем вам использовать помощники StateFormatter , включенные в начало файла index.js .
type ([String]) : какое сообщение передает бот («текст», «медиа», «ссылка» или «transformedText»).
varName ([String]) : если вы выберете «transformedText» в качестве типа ввода, вы можете написать @varName в botPrompt , который будет ссылаться на эту опцию. Когда бот отображает сообщение, он будет искать переменную, хранящуюся в состоянии 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 .
Мы взяли на себя смелость заранее определить пользовательский интерфейс, чтобы сэкономить вам время.
Подавляющее большинство стилей бота управляются одним файлом /app/customization/styleVariables.js . Здесь вы можете изменить практически все цвета, используемые для всех элементов, а также фон пользовательского интерфейса.
Если вы хотите внести дальнейшие изменения в пользовательский интерфейс, вы можете копаться прямо в файлах таблиц стилей . Существует глобальный файл /app/global-styles.js , а некоторые компоненты или контейнеры имеют собственные файлы styledComponents.js в соответствующих папках для конкретных модульных компонентов. В этих файлах используется Styled-Components , замечательная библиотека для React/ES6 (которая официально считается вспомогательным средством передового опыта). Эти файлы используют тегированные литералы шаблонов Javascript для интерполяции переменных JS с CSS, но не волнуйтесь , их можно рассматривать почти как обычный CSS/SCSS.
ПРИМЕЧАНИЕ. Наше намерение состоит в том, чтобы постепенно перейти на 100% независимые компоненты с модульным стилем, такие как те, которые находятся в /app/components/UserInput/styledComponents.js и избавиться практически от всего кода в /app/global-styles.js
Если ваши пожелания по настройке не удовлетворены простыми манипуляциями с CSS компонентов, вы можете настроить практически все остальное по своему желанию, но после этого вам придется иметь дело со стороной приложения React (+Redux) ( см. ниже ).
Вся React-часть Alpha была переработана на основе этого замечательного репозитория. Использование наиболее устоявшихся передовых практик для React, а именно использование:
Редукс
ИммутаблеJS
Повторно выбрать
Redux-Сага
Стилизованные компоненты
Если вы хотите повозиться со стороной React Alpha, то вам лучше сначала взглянуть на эту документацию .
Мы уверены, что вы захотите отправлять автоматические электронные письма владельцу бота и конечным пользователям с отчетом об их разговоре или тому подобном, и мы работаем над тем, чтобы предложить наиболее гибкое и независимое от серверной части решение, которое Я позволю практически просто «Plug & Play».
Сейчас лучше всего подключить это к какому-нибудь серверу Node или Express (или Rails 5.1.x) и использовать их собственные почтовые решения. Вы можете взглянуть на файл /app/BotMind/BotMailer.js , который мы используем для нашей реализации на основе Rails, но на данный момент мы удалили всю логику отправки электронной почты из /app/containers/BotContainer/sagas.js , так что вам придется писать свои собственные саги.
Этот бот основан только на React + Webpack, а это означает, что вы сможете подключить его к любому фреймворку, серверной части и т. д., если он работает с Webpack.
На данный момент бот может легко подключаться к любому API, но вам придется записать собственных создателей действий и саги, чтобы получить желаемое поведение.
Мы будем добавлять сюда документацию по мере адаптации этого бота для различных реализаций.
Как и выше, мы намерены разрешить этому боту подключаться к другим системам искусственного интеллекта, таким как Api.ai и IBM Watson, чтобы улучшить взаимодействие. Это одно из наших главных дел.
