Привет, Программируемый Чат! Чат с переводом в реальном времени с использованием ASP.NET, Microsoft Translator и Programmable Chat

Говорите по-испански? А по-французски? 中文？Или, может быть, на языке ситов? Независимо от того, на каком языке вы говорите — будь то английский, французский, мандаринский или язык ситов — невозможность общения из-за языкового барьера доставляет неудобства. Хотя у нас пока нет протокольных дроидов, способных мгновенно переводить 6 миллионов языков (да и 6 миллионов языков не существует), технологии перевода, особенно текстового, продвинулись далеко вперёд. Как разработчик, я теперь имею доступ к множеству точных, бесплатных или недорогих API для перевода, которые легко интегрировать в приложения.

А не было бы здорово, если бы ваше любимое чат-приложение могло облегчить общение с людьми, не владеющими вашим языком, автоматически переводя ваши сообщения на их язык? Или ещё лучше: что, если бы вы могли создать такое чат-приложение самостоятельно?

В этой статье я покажу, как это сделать. Начнём с быстрого старта Programmable Chat от IP Messaging, а затем модифицируем приложение, чтобы использовать возможности вебхуков Programmable Chat и API Microsoft Translator для автоматического перевода сообщений на другой язык.

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

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

Если у вас ещё нет аккаунта, начните с регистрации бесплатного аккаунта на twilio.com. Бесплатная пробная версия подойдёт для приложения, которое мы собираемся создать.

Затем перейдите на Azure Marketplace от Microsoft, создайте новый аккаунт и подпишитесь на Translation API. Не забудьте зарегистрировать новое приложение в Marketplace, чтобы получить идентификатор клиента (client id) и секретный ключ (client secret).

Почему именно Microsoft Translator API среди множества доступных API для перевода? Он поддерживает перевод более чем на 50 языков и предоставляет бесплатный перевод до 2 миллионов символов в месяц, что делает его отличным вариантом для нашего проекта.

Теперь, когда у нас есть доступ к Twilio и Microsoft Translation API, загрузим исходный код стартового приложения Programmable Chat и запустим его. Стартовое приложение доступно на нескольких языках и фреймворках. Поскольку я разработчик .NET, я начну с ASP.NET MVC, но вы можете выбрать язык, с которым вам удобнее, и следовать инструкциям.

Запустите стартовое приложение, следуя инструкциям в README. После запуска у вас должно быть рабочее чат-приложение.

Последний шаг настройки — убедиться, что наше новое стартовое приложение доступно по публичному URL. Вы можете развернуть сайт на хостинге, например, Azure Website, или использовать инструмент вроде ngrok, чтобы открыть локальный веб-сервер через публичный URL. Разработчики рассказывают о 6 самых крутых причинах использовать ngrok, и вы не поверите, что случится дальше!

Отлично! Теперь давайте разберёмся, как модифицировать это базовое приложение, чтобы оно переводило наши сообщения.

Прежде чем приступать к изменению кода стартового приложения, давайте посмотрим, что происходит, когда клиент Programmable Chat отправляет сообщение в канал, и как на высоком уровне мы можем использовать Status Callback URL для реализации перевода в нашем приложении.

Обычно, когда сообщение отправляется клиентом в канал, Twilio ретранслирует это сообщение всем остальным клиентам, подключённым к каналу:

Если для службы сообщений настроен вебхук URL, Twilio будет обращаться к этому URL при каждом возникновении события. В нашем случае мы настроим вебхук OnMessageAdded, который сообщает Twilio обращаться к URL при получении нового сообщения, но до того, как оно будет ретранслировано клиентам канала.

Запрос вебхука полезен на нескольких уровнях. Он позволяет серверному приложению узнать как входящее сообщение, так и отправителя. Он также позволяет приложению указать Twilio, следует ли ретранслировать новое сообщение или нет.

В анимации выше сайт example.com возвращает Twilio HTTP 200 OK, сообщая, что нужно продолжить обработку сообщения в обычном режиме. Возврат кода состояния HTTP 403 Forbidden указывает Twilio не ретранслировать исходное сообщение.

Для нашего приложения мы будем использовать вебхук OnMessageSend вместе с Twilio REST API. Когда клиент отправляет новое сообщение, мы будем использовать запрос вебхука для получения сообщения и отправки его в Microsoft Translation API для перевода. Получив переведённый текст и зная, кто отправил исходное сообщение и в какой канал оно было отправлено, мы используем REST API для создания нового сообщения. Это сообщение будет содержать переведённый текст, и мы опубликуем его в канале от имени пользователя, отправившего исходное сообщение. Наконец, чтобы Twilio не публиковал и оригинальное, и переведённое сообщение, мы вернём HTTP 403 из нашего приложения.

Теперь, когда мы понимаем, как использовать вебхуки и Twilio REST API, давайте приступим к созданию.

Сначала нам нужно создать конечную точку, на которую мы укажем Status Callback URL службы сообщений. В классе HomeController создайте новый метод действия MessageAdded, который принимает три параметра: To, From и Body, и выводит значение параметра Body в отладочную консоль:

Обратите внимание, что мы сделали метод действия асинхронным, пометив его ключевым словом async и возвращая Task. Это важно позже, чтобы мы могли сделать асинхронный HTTP-запрос к Microsoft Translator API.

Создав новую конечную точку, нам нужно настроить вебхук OnMessageSend с публичным URL нашей новой конечной точки.

Вы можете настроить вебхук двумя способами: обновить службу сообщений с помощью REST API или использовать консоль разработчика:

После настройки службы с вебхуком попробуйте приложение. Отправьте несколько сообщений и проверьте отладочную консоль. Вы должны увидеть входящие сообщения, что указывает на то, что Twilio действительно делает HTTP-запрос к вашему серверу.

Сейчас наш метод действия возвращает Twilio HTTP 200 OK. Из-за этого Twilio продолжит обработку сообщения, ретранслируя его всем клиентам канала.

Попробуйте изменить метод действия так, чтобы он возвращал HTTP 403 Forbidden, и снова запустите приложение:

На этот раз, хотя вы отправляете сообщения в Twilio, из-за изменения кода состояния, возвращаемого из URL вебхука, сообщения не будут доставлены клиентам канала.

Отлично! Теперь, когда наше приложение настроено на получение сообщений на сервере, мы можем перейти к переводу.

Перевод текста с помощью Microsoft Translation API довольно прост. Вы делаете простой GET-запрос к его конечной точке Translate, передавая текст, который нужно перевести, язык этого текста и язык, на который нужно перевести.

Для аутентификации в API необходимо сгенерировать токен доступа и предоставить его в заголовке Authorization вашего GET-запроса. Поскольку токены доступа имеют ограниченное время действия, нам нужно настроить автоматическое обновление токенов через регулярные интервалы.

К счастью, Microsoft предоставляет пример кода для этого, который я немного модифицировал, чтобы его было проще использовать в нашем приложении ASP.NET MVC. Этот код инкапсулирован в классах AdmAuthentication и AdmAccessToken, которые не только создают токен доступа, но и запускают внутренний таймер для его автоматического обновления.

Детали внутренней работы классов AdmAuthentication и AdmAccessToken не так важны для приложения, которое мы создаём в этой статье, но поскольку нам нужно использовать их в нашем приложении, мы должны добавить исходные файлы этих классов в проект. Вы можете взять исходные файлы моей модифицированной версии классов из репозитория GitHub:

Чтобы использовать AdmAccessToken, возможно, вам также потребуется добавить ссылку на сборку System.Runtime.Serialization.

Добавив классы генерации токена доступа в наш проект, теперь нужно получить экземпляр класса AdmAuthentication. В классе HomeController получите экземпляр AdmAuthentication в конструкторе, передав идентификатор клиента и секрет Translator:

Убедитесь, что вы добавили ключи TranslatorClientId и TranslatorClientSecret в файл web.config и установили их значения в соответствии с вашими учётными данными Microsoft Translator API.

Теперь, когда мы можем аутентифицироваться в Translator API, мы готовы добавить перевод в наше чат-приложение. Вернёмся к классу HomeController и создадим новый асинхронный метод Translate, который возвращает строку и принимает три строковых параметра:

— текст, который нужно перевести;

— язык, с которого переводить;

— язык, на который переводить.

Затем получите токен доступа из экземпляра AdmAuthentication:

Сгенерировав токен, мы можем сделать HTTP GET-запрос к конечной точке Translate и вернуть полученный переведённый текст из метода.

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

Запустите приложение ещё раз. Отправьте сообщение на английском в канал и проверьте отладочную консоль. Вы должны увидеть как оригинальное сообщение, так и переведённое, но, поскольку мы возвращаем 403 из конечной точки, ничего не отображается в канале.

Чтобы отправить вновь переведённый текст в канал, нам нужно создать новое сообщение с помощью REST API. Начните с установки пакета Twilio.IpMessaging из NuGet. Этот пакет включает класс IpMessagingClient, который предоставляет идиоматический способ использования Twilio Programmable Chat REST API на C#.

Создайте экземпляр класса IpMessagingClient, предоставив ваш API Key и Secret, а затем вызовите метод CreateMessage. Мы передадим неизменённые параметры From и To методу, чтобы это сообщение попало в тот же канал и от имени исходного отправителя.

Хорошо, запустите приложение ещё раз, и на этот раз, когда вы отправите сообщение, вы должны увидеть испанский текст в канале.

Ура!

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

Хотя мы ещё не достигли уровня C-3PO, сочетание таких сервисов, как Microsoft Translation API и Twilio Programmable Chat, упрощает интеграцию перевода в ваши собственные приложения. Это здорово, потому что если вы когда-нибудь окажетесь в чате с Джаббой Хаттом, вам наверняка захочется знать, что он говорит.

Эта статья была посвящена основам настройки интеграции перевода через URL вебхука, но интеграция с API перевода — это лишь один из способов использования этой полезной функции. Другие способы использования обратного вызова могут включать:

— Фильтры нецензурных слов;

— Ведение журнала бесед для соответствия нормативным требованиям;

— Интерпретация команд для внедрения контента в канал.

Кроме того, новые сообщения — не единственные доступные вебхуки. Существует множество событий, о которых Twilio может сообщить через вебхуки. Какие интересные способы использования этих событий вы можете придумать? Мне было бы интересно узнать об этом. Оставьте комментарий ниже или напишите мне в твиттере.