Содержание


Создание анализатора на базе IBM Watson с помощью React

Использование библиотеки React и компонентов Material-UI для создания в IBM Bluemix приложения для исследования служб Watson

Comments

Без сомнения, вы уже много лет слышите о системе искусственного интеллекта IBM Watson. Сегодня благодаря Bluemix™ каждый – включая JavaScript-хакеров-полуночников – может за считанные минуты добавить возможности Watson к своим собственным приложениям и сделать их доступными во всем мире.

В этом руководстве мы создадим в Bluemix приложение для изучения трех основных служб Watson:

  • Language Identification: определяет язык текста, вводимого пользователем;
  • Question and Answer: анализирует вопрос и выбирает отрывок из корпуса— совокупности собранных данных. Возвращаемая информация включает в себя степень уверенности от 0 до 1 для каждого ответа;
  • Machine Translation: динамически переводит введенный текст на выбранные поддерживаемые языки.

Для создания пользовательского интерфейса приложения мы будем использовать JavaScript-библиотеку с открытым исходным кодом React. Те, кто знаком с React, знают, что это отличный инструмент для построения высокопроизводительных веб-интерфейсов пользователя. (Остальные могут получить полное представление о React, прочитав мою статью в developerWorks React: создание простых в обслуживании, быстродействующих компонентов пользовательского интерфейса.)

В приложении Watson Explorer применяется Material-UI: библиотека компонентов React с открытым исходным кодом, реализующая подмножество material design, которое можно интегрировать в свои приложения. Material design обеспечивает удобную обратную связь в стиле сенсорного интерфейса и воспроизводит нюансы, характерные для бумаги и чернил:

Watson Explorer UI
Watson Explorer UI

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

React помогает сохранить код Watson Explorer структурированным, четким и простым для понимания.

Что вам потребуется

Запустить приложениеПолучить код

Шаг 1. Изучение пользовательского интерфейса приложения

Нажмите кнопку Запустить приложение, чтобы познакомиться со службами Watson:

  1. Нажмите круглую оранжевую кнопку в правом нижнем углу экрана-заставки, чтобы запустить приложение и перейти к службе определения языка.
  2. Введите примерно 10 слов на каком-нибудь языке и нажмите круглую кнопку, чтобы убедиться, как быстро Watson определяет язык.
  3. Нажмите кнопку с пиктограммой из трех полосок в левом верхнем углу, чтобы вызвать выдвигающееся меню; выберите службу перевода.
  4. Введите одно-два предложения. Выберите исходный и целевой языки и нажмите круглую кнопку. Watson переводит введенный текст.
  5. Выберите из меню службу Q and A (Вопросы и ответы). Выберите Travel или Health care (Туризм и здравоохранение), введите соответствующий вопрос и нажмите круглую кнопку. Watson извлечет из документа, максимально подходящего к вашему вопросу, текст, который по крайней мере частично отвечает на ваш вопрос. Если вы не получаете ответа, попробуйте понизить порог с помощью ползунка.

Шаг 2. Клонирование и изучение кода проекта

Прокрутите экран вверх и нажмите кнопку Получить код. На странице обзора проекта singli | Create an IBM Watson explorer with React на DevOps Services щелкните на значке загрузки, сохраните ZIP-файл в локальной файловой системе и распакуйте его. (Также можно скопировать URL-адрес Git в буфер обмена и клонировать Git-репозиторий проекта на свой ПК с помощью команды git clone giturl.)

  • В каталоге clientsrc содержится исходный код React со стороны браузера, используемый приложением.
  • Каталог bluemixdeploy содержит прокси-сервер и оптимизированный код клиента в формате, готовом для развертывания в Bluemix.

Код компонента React со стороны браузера делает запросы к прокси-серверу на стороне сервера. Затем прокси-сервер формирует запросы к Watson и добавляет к ним свои реквизиты доступа. Запрос направляется для обработки в службу Watson. Когда Watson возвращает результаты, прокси-сервер упаковывает ответ и возвращает его в код на стороне браузера:

Код на стороне браузера размещает запросы к Watson через прокси-сервер
Код на стороне браузера размещает запросы к Watson через прокси-сервер

Этот подход позволяет не усложнять код запросов на стороне браузера — это всего лишь HTML-форма POST, — а также защищает реквизиты доступа Watson на стороне сервера.

Вот ключевые файлы для начала исследования:

  • clientsrc/src/www/index.html: отправная точка для кода на стороне браузера.
  • clientsrc/src/app/app.js: отправная точка для кода JavaScript, загружаемого файлом index.html.

Другие ключевые каталоги и файлы с исходным кодом:

  • clientsrc/src/app/app-routes.jsx: спецификация маршрутизатора React, указывающая иерархию взаимосвязанных представлений;
  • clientsrc/src/app/components/main.jsx: самый высокий уровень представления приложения, содержащий внешний кадр;
  • clientsrc/src/app/less/custom-overrides.less: переопределение стилей по умолчанию в Material-UI и специальные CSS-стили, используемые приложением;
  • clientsrc/src/app/components/views: каталог, содержащий все функциональные представления приложения;
  • clientsrc/src/app/components/stores: каталог, содержащий все хранилища Flux приложения. В структуре Flux представления подписываются на уведомления об изменении данных в хранилищах. Здесь хранилища – это оболочки, окружающие заменяемые вызовы Ajax к службам Watson.

Шаг 3. Развертывание своего собственного приложения Watson Explorer в Bluemix

Чтобы успешно развернуть собственную версию приложения в Bluemix, достаточно содержимого каталога bluemixdeploy.

  1. Войдите в Bluemix.
  2. На панели управления создайте приложение, выберите шаблон WEB и начните с SDK FOR Node.js. (В последующих пунктах вы перепишите существующий проект).
  3. В ответ на запрос дайте приложению уникальное имя (без пробелов и специальных символов).
  4. С помощью кнопки Add a service привяжите к своему приложению экземпляр службы Language Identification. Назовите службу watlidserv.
  5. Добавьте и привяжите к своему приложению экземпляр службы Machine Translation. Назовите службу wattransserv
  6. Добавьте и привяжите к своему приложению экземпляр службы Question and Answer. Присвойте ему имя watqaserv.
  7. В локальной файловой системе перейдите в каталог приложения bluemixdeploy.
  8. Отредактируйте файл manifest.xml и измените значение name на уникальное имя своего приложения.
  9. Из каталога bluemixdeploy выполните команду cf push, чтобы развернуть свою собственную версию Watson Explorer, которая затем станет доступна по адресу http://имя вашего приложения.mybluemix.net/.

Далее вы увидите, как можно изменять и адаптировать приложение путем установки среды быстрой разработки с использованием сборки Material-UI и цепочки синхронизированных инструментов live-update.

Шаг 4. Настройка среды быстрой разработки и сборки Material-UI

С помощью цепочки инструментов разработки и сборки Material-UI (со встроенным модулем BrowserSync) можно вносить изменения в код, одновременно просматривая приложение в одном или нескольких браузерах (например, в Firefox, мобильном Safari и Chrome) с моментальным отображением изменений:

  1. Загрузите ZIP-файл выпуска v0.7.0 из GitHub-репозитория Material-UI. Для приложения Watson Explorer требуется версия v0.7.0.
  2. Скопируйте весь каталог clientsrc на тот же уровень, что и корневой уровень извлеченного кода, где находятся документы и каталоги с примерами.
  3. Выполните команду npm install из корневого уровня кода Material-UI.
  4. Перейдите в каталог clientsrc и выполните команду npm install.
  5. Из каталога clientsrc выполните команду gulp, чтобы запустить экземпляр браузера с работающим приложением.
  6. Если хотите, запустите дополнительные браузеры, указав в них URL-адрес приложения (с консоли или из запущенного экземпляра браузера). При внесении изменений будут синхронизироваться все экземпляры браузеров.
  7. Измените любой исходный файл и проследите за быстрой сборкой и обновлением окон браузеров.
  8. По окончании редактирования кода и проверки прервите сеанс gulp. Создайте развертываемые артефакты с помощью команды gulp build.
  9. В каталоге clientsrc/build находятся развертываемые артефакты кода React. Скопируйте clientsrc/build для повторного развертывания в каталог bluemixdeploy/public (вместо существующих файлов).

Шаг 5. Расширение приложения для исследования других служб Watson (не обязательно)

В настоящее время это аналитическое приложение поддерживает только три из 12 доступных служб Watson. В качестве упражнения полезно добавить поддержку одной или нескольких дополнительных служб. Это также поможет вам оценить, как React делает сложные пользовательские интерфейсы понятными и простыми в обслуживании — потому что добавить новые пользовательские интерфейсы для служб в нашем приложении очень легко.

  1. Если вы не настроили среду разработки Material-UI на шаге 4, сделайте это сейчас.
  2. Войдите в Bluemix, добавьте новый экземпляр службы Watson, привяжите службу к своему приложению и дайте ей имя. Отредактируйте файл manifest.yml своего проекта, включив в него это имя.
  3. Прочтите документацию API службы Watson, чтобы понять, как использовать новую службу и как вызывать ее API. Измените bluemixdeploy/app.js, добавив поддержку прокси-сервера новой службы; в качестве образца используйте существующий код прокси-сервера.
  4. Добавьте код JSX, чтобы представление React поддерживало ввод данных для вашей службы, поместив его в каталог clientsrc/src/app/components/views. Используйте этот код для других представлений – уже в качестве образца.
  5. Определите в файле clientsrc/src/app/less/custom-overrides.less новые CSS-стили, которые могут вам потребоваться.
  6. Добавьте JSX-код, чтобы представление React отображало результаты, возвращаемые службой Watson, и поместите этот код в каталог clientsrc/src/app/components/view. За справками обращайтесь к другим представлениям результатов в этом каталоге. То, что вы добавили, на самом деле представляет собой контроллерное представление React, которое будет передавать действие в (фиктивное) хранилище Flux.
  7. В каталоге clientsrc/src/app/components/store добавьте хранилище для поддержки своей службы. В файл clientsrc/src/app/components/store/callwatson.js необходимо добавить метод вызова прокси-сервера для вашей службы. Для справок используйте код других хранилищ.
  8. Добавьте в файл bluemixdeploy/app.js (прокси-сервер) новый обработчик маршрута для преобразования входящих запросов POST от клиента в вызовы службы Watson и преобразования ответов Watson для клиента.
  9. В файле clientsrc/src/app/app-routes.jsx измените маршруты приложения (react-router), добавив новое представление.

В процессе разработки как прокси-сервер, так и React можно запускать на своем локальном ПК — см. файл README.TXT.

Заключение

React помогает сохранить код Watson Explorer структурированным, четким и простым для понимания. Следование практическим рекомендациям по программированию React упрощает управление кодом и помогает новым членам группы (или читателям настоящего краткого руководства) быстро войти в курс проектов по разработке веб-приложений. Библиотеки высококачественных компонентов React, такие как Material-UI, помогают быстро создавать высококлассные веб-приложения. Можно начать с небольшого приложения, воспользовавшись возможностями по повышению производительности труда, которые дает объединяющий синтаксис React JSX, а затем постепенно переходить к более сложным (или коллективным) проектам.


Ресурсы для скачивания


Похожие темы


Комментарии

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Когнитивное программированиеs, Web-архитектура, Облачные вычисления
ArticleID=1014994
ArticleTitle=Создание анализатора на базе IBM Watson с помощью React
publish-date=09152015