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

Серия статей

Статьи в серии

  1. Сканировать и собирать данные
  2. Построить модель LDA для документов на телугу
  3. Настройка LDA (Gensim) на AWS Lambda
  4. Собираем все вместе — создаем веб-сайт (текущая статья)

Цель

Цель этой статьи — объяснить некоторые детали, относящиеся к созданию простого веб-сайта, который применяет модель LDA к текстовому вводу, а затем возвращает темы, связанные с текстом.

Окончательный веб-сайт

https://nirupam-websites.s3.amazonaws.com/te_lda_home.html

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

Используемые компоненты

Моими главными критериями были минимальные затраты и нулевое обслуживание. Поэтому для своего развертывания я использовал следующие компоненты AWS:

  1. Lambda для размещения серверных служб
  2. Шлюз API для размещения API (который, в свою очередь, вызывает Lambda)
  3. S3 для размещения веб-страницы

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

  1. API Google Transliteration для изменения текста с английского на телугу
  2. D3 для отображения распределения тем
  3. JQuery (при необходимости)

Как…

Давайте погрузимся в более мелкие детали (только важные вещи)

АВС Лямбда

Подробности в этой статье. В нем обсуждаются детали, относящиеся к развертыванию LDA (или любых служб машинного обучения) поверх Lambda.

Шлюз API AWS

  1. Создайте REST-API. Выберите региональный тип окончания
  2. Создайте ресурс и назовите его test-lda или как вам больше нравится. Включить шлюз API CORS
  3. Создайте метод. Выберите «Любой» (если вы хотите открыть его только для POST/GET, вы можете указать конкретный вариант). Но здесь я выбрал Any
  4. Для ANY-Setup выберите следующее: убедитесь, что вы выбрали лямбда-функцию для типа интеграции, используйте лямбда-прокси-интеграцию, а затем выберите лямбда-регион и лямбда-функцию, развернутую в этом регионе, и используйте время по умолчанию. вне
  5. Нажмите ЛЮБОЙ, а затем нажмите Тест. Там вы можете указать строку запроса и проверить, получите ли вы желаемый ответ. Для получения более подробной информации вы можете проверить мой код ниже

S3 для размещения веб-страницы

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

  1. Убедитесь, что разрешения правильно предоставлены для корзины и отдельных файлов в корзине (предоставить всем доступ только для чтения)
  2. Убедитесь, что ссылки на сценарии (в html) не являются относительными и указывают абсолютный путь к вашим сценариям.
  3. Чтобы Google транслитерировал API для работы, добавьте следующую строку в конец текстового BLOB-объекта. Для получения более подробной информации о том, почему, вы можете обратиться к этому обсуждению: google-transliterate-not-served-over-https.
control.c.qc.t13n.c[3].c.d.keyup[0].ia.F.p = 'https://www.google.com';

Исходный скрипт, кажется, вызывает API через http://, и эта добавленная строка направляет его на https://

Другие детали

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

'statusCode': 200,
'headers': {
             "Access-Control-Allow-Origin" : "*", # Required for CORS support to work
             "Access-Control-Allow-Credentials" : True, # Required for cookies, authorization headers with HTTPS
             "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
             "access-control-allow-methods":"GET,PUT,POST,DELETE,OPTIONS"
           },

API транслитерации Google

Я использовал API транслитерации, предоставленный Google. Но этот скрипт отказывается работать в мобильном браузере Chrome. И скрипт тоже устарел (26 мая 2011). Я искал способы заставить его работать на мобильных устройствах, но не смог найти способ. Если вы найдете выход, пожалуйста, поделитесь им в комментариях ниже.

D3

И, наконец, для рендеринга графика я использовал D3. Для новичка D3 немного сложен. Но вы можете проверить мой код (te_graph.js), чтобы понять детали. В двух словах, это то, что мы делаем, чтобы отобразить график

  1. Установить размер холста
  2. Задайте ось Y и ее масштаб
  3. Отрисовка прямоугольника подходящего размера
  4. Используйте серию команд преобразования-перемещения, чтобы переместить прямоугольник в подходящее место на оси Y.

Другие

  1. Ajax для отображения тем
  2. Больше жонглирования Javascript

Код

Поделился здесь: