Проект Февраль - Персональный чат-бот

Проект Февраль - Персональный чат-бот

Обновление от 5 декабря 2019 г. После написания этой статьи мой персональный чат-бот был перемещен на https://shinyoon.me и перенесен на Google Cloud Platform.

Одна из моих целей в этом году — стать более продуктивным в Интернете. Под этим я подразумеваю, что нужно стать не столько потребителем, сколько производителем контента. У меня всегда было много мыслей о бесчисленных темах, крутящихся в моей голове, но у меня никогда не было привычки записывать свои мысли или публиковать их. Я действительно хочу изменить это. Но чтобы преуспеть в регулярном создании контента в Интернете, я понял, что мне нужно стать более ориентированным на результат, создавая что-то каждый месяц. Надеюсь сделать немного больше, чем это, если я доберусь до этого.

Итак, в начале 2018 года моим первым проектом было окончательно закончить и опубликовать версию моего личного сайта — личного чат-бота.

Основная идея и мотивация

Давно хотел обновить свой сайт. Мой предыдущий сайт был простым веб-сайтом на основе Jekyll, поэтому на этот раз я хотел создать что-то более интересное, чем обычный веб-сайт. Создание чего-то с нуля также было бы для меня хорошей возможностью быстро освоиться во всем, что происходит в мире JS, и это было бы намного веселее, чем просто взять откуда-то шаблон и настроить его.

Но что строить? Я мог бы добавить блог, но там уже был Medium. Может быть, страница резюме? LinkedIn уже обрабатывает все это. Портфолио проектов? Гитхаб. Чем больше я думал об этом, тем больше я понимал, что все, что традиционно существовало на личных сайтах, было заменено целыми платформами, которые делали это намного лучше. Так каким же должен быть персональный сайт в век социальных сетей?

Чем больше я думал об устаревании личного веб-сайта, тем больше смысла приобретала идея персонального чат-бота. Чат-боты были в моде последние пару лет, и я собирался написать один из них. Почему бы не написать то, что было бы похоже на цифровое представление меня самого? В конце концов, смысл посещения персонального сайта заключался в том, чтобы узнать больше о человеке. Разве не было бы здорово иметь возможность «поговорить» с этим человеком (по крайней мере, с цифровым представлением) вместо того, чтобы щелкать и прокручивать скучную веб-страницу? Мне также понравилась эта идея, потому что MVP для такого проекта может быть относительно простым, в то время как теоретически вы можете улучшать его почти бесконечно, улучшая языковую обработку и причудливые взаимодействия.

Дизайн пользовательского интерфейса

Чтобы начать работу над любым новым приложением, я обычно начинаю с того, что пытаюсь понять, как выглядит UI/UX. Я всегда боролся с этой частью, потому что это очень похоже на поиск чего-то темного для меня — я чувствую, что у меня не так много естественных инстинктов, когда дело доходит до таких вещей, как дизайн и цвет. Это то, что я пытаюсь улучшить, разрабатывая вещи с нуля все больше и больше.

Концептуально пользовательский интерфейс чат-бота был достаточно простым, но что подойдет для «личного» чат-бота? Для вдохновения я погуглил «дизайн чат-ботов» и получил множество скриншотов ботов Facebook Messenger. Должен ли это быть весь экран чата? Казалось, что это не работает для чего-то большего, чем экран телефона. Я хотел, чтобы макет пользовательского интерфейса работал не только для мобильных устройств, но и для полноэкранного просмотра в браузере. Макеты пользовательского интерфейса Messenger не очень хорошо работают для последнего.

Поскольку макеты Messenger не совсем то, что я искал, мне пришлось набрасывать свои собственные идеи. Я потратил некоторое время на Moqups, пробуя различные макеты, прежде чем остановиться на простом дизайне, в котором большинство элементов взаимодействия с пользователем, таких как текстовые поля и ссылки, сосредоточены на экране. Это позволило бы упростить адаптивные макеты, а также обеспечить согласованность между различными соотношениями сторон и размерами экрана.

Со шрифтами и цветовой схемой нужно будет разобраться позже. Но этого было достаточно, чтобы я перешел к самой интересной части: дизайну и реализации системы.

Системный дизайн

Функционально дизайн довольно прост: веб-сайт будет содержать ссылки на все вышеупомянутые социальные сети, которые я использовал, принимая пользовательский ввод для любых импровизированных вопросов, которые могут возникнуть у пользователя. Идея заключалась в том, что для типичных формальных запросов (резюме, портфолио и т. д.) пользователи могли просто проверить мои ссылки в социальных сетях, но для других более случайных вопросов они могли задать «мне» напрямую. Затем пользовательский ввод будет отправлен во внутренний API, который будет обрабатывать языковую обработку и отвечать чем-то, что, надеюсь, имеет смысл (и может быть даже умным).

Я знал, что появилось довольно много сервисов API, чтобы захватить растущий рынок чат-ботов. Эти API-интерфейсы часто были бесплатными и предоставляли пользователю простые в настройке модели NLP, которые обычно вели хотя бы базовый диалог. Немного покопавшись в различных предложениях, я в конце концов остановился на Dialog Flow. Он был бесплатным, документация была довольно хорошо написана, и у него была простая для понимания система для разработки моделей чат-ботов.

Поскольку вся серверная часть в основном будет представлять собой только этот API-интерфейс Chat Bot, мой веб-сайт может быть статическим веб-сайтом, бесплатно развернутым на GitHub Pages. Это означало, что я мог поддерживать этот веб-сайт в основном за счет стоимости только доменного имени (которое у меня уже было).

Теперь, когда я знал, что хочу построить. Последним шагом был выбор правильных инструментов и просто сборка.

Выполнение

Для фактической реализации я решил использовать React. Мне нравится использовать его вместе с библиотеками CSS-in-JS, такими как Aphrodite, для быстрого написания веб-приложений. А с Create-React-App действительно очень легко начать работу. Полный код здесь для просмотра, если кому интересно.

Фактическое качество ответов чат-бота более или менее зависит от того, как модели NLP настроены в Dialog Flow. Таким образом, улучшение языковой модели в основном будет осуществляться с помощью панели управления Dialog Flow. Многое из этого в основном дает примеры вопросов и соответствующих ответов. Чат-боты моделируются как Агенты, которые понимают Намерения и извлекают Сущности из разговора, чтобы воздействовать на них. Документация обширна, и у них есть довольно хорошие готовые агенты, которые помогают с основными вещами, такими как светская беседа. В настоящее время я настроил только базовую модель в рамках своего первоначального релиза, но со временем планирую улучшить ее.

Dialog Flow также предлагает способ «обучения» агентов на основе несовпадающих ответов. Это также довольно крутая функция, которую я еще не очень хорошо изучил, но она выглядит многообещающе.

Заключительной частью реализации является автоматизация публикации этого сайта на страницах GitHub. Приложения React, созданные с использованием CRA, обычно компилируются и сжимаются в статический веб-сайт, который выводится в каталог build командой yarn run build. Содержимое этого каталога build — это то, что мне нужно опубликовать на моей личной странице GitHub, которая поддерживается репозиторием shinmyung0.github.io. Фактический исходный код будет помещен в репозиторий mebot.

В идеале, всякий раз, когда я делаю коммит в ветке master репозитория mebot, он запускает задание для запуска команды yarn run build, а затем отправляет содержимое каталога build в репозиторий страниц. Самый простой способ настроить это — использовать TravisCI, который был бесплатным, простым и удобным в работе. Это был первый раз, когда я использовал его, и, учитывая, что в последнее время я действительно заинтересовался созданием автоматизированных систем на моей текущей работе, я был действительно впечатлен простотой и понятным интерфейсом разработчика, который предлагал этот продукт. Проверьте файл .travis.yml для конфигурации.

Вывод

В целом, это был забавный и освежающий опыт, чтобы наконец получить что-то в мире в качестве побочного проекта. Написать этот пост в блоге было сложнее, чем я думал, но он дал мне хорошую возможность пройтись по всему процессу и подумать о том, что я узнал. Сейчас мой чат-бот довольно… глупый, если не сказать больше, но я надеюсь улучшить его в будущем, чтобы когда-нибудь он стал более точным представлением своего создателя. Он запущен и работает на shinythings.ninja, так что загляните, если вам интересно!