dialogflow web v2

Диалоговый процесс для Web v2

Dialogflow позволяет создавать диалоговые интерфейсы поверх ваших продуктов и услуг, предоставляя мощный механизм распознавания естественного языка (NLU) для обработки и понимания ввода на естественном языке.

Это неофициальная веб-интеграция для Dialogflow V2.

Примечание . В августе 2021 г. я обновил веб-приложение до Vue 3, исправил уязвимости безопасности и обновил зависимости. Программное обеспечение поставляется бесплатно, но у меня времени нет. Рассмотрите возможность поддержки меня через PayPal или посредством коммерческого соглашения.

Функции

• Прогрессивное веб-приложение (оценка Lighthouse 100/100)
• Специальные возможности
• Обширная поддержка браузера (IE8+), автономные возможности (история) и отличное SEO.
• Знакомый пользовательский интерфейс и UX, основанный на официальных спецификациях дизайна Google Assistant.
• Темный режим и темы
• Взаимодействие без помощи рук с голосовым вводом и речевой обратной связью (с SSML)
• Независимый от языка
• Поддержка Docker и Kubernetes.
• Поддержка Rich-компонентов, Webhook и Actions on Google (демо)
• Плавающий виджет для встраивания на сайты (репозиторий и демо)
• На основе Vue 3 , Webpack, Babel и PostCSS.
• Легкий вес (сборка занимает около 50 КБ в сжатом виде)
• Бесплатно и полностью документировано
• Сделано в Германии
• Рекомендовано Dialogflow и MadeWithVueJS.

спонсируется Vokode — студией аудиомаркетинга из Парижа, которая занимается звуковым дизайном, подкастами и голосовыми приложениями.

Установка

Требования

• NodeJS
• нпм или пряжа
• Учетная запись Google и агент Dialogflow V2 (если вы ищете V1, используйте мой старый репозиторий)

Бэкэнд

Dialogflow Gateway позволяет использовать подобные сторонние интеграции для безопасного доступа к API Dialogflow V2.

• Документация
• Реализации

AD Dialogflow Gateway от Ушакова (хостинг) — это самый быстрый способ начать работу с Dialogflow for Web v2.

Клонировать репозиторий

Вы можете использовать git или скачать с GitHub.

Установите зависимости

Откройте клонированную папку. Затем с помощью менеджера пакетов установите зависимости

Использование НПМ

npm i

Использование пряжи

yarn

Подключите агента

Откройте src/config/index.js и измените переменную endpoint на URL-адрес шлюза Dialogflow.

Подсказка: URL-адрес шлюза Dialogflow, размещенного Ушаковым, всегда является идентификатором вашего облачного проекта Google + .core.ushaflow.io . Если у вас возникли проблемы, убедитесь, что вы подключили своего агента к шлюзу, затем зайдите в консоль, нажмите «Управление» и скопируйте URL-адрес шлюза.

Пример

 export default {
    endpoint : 'https://dialogflow-web-v2.core.ushaflow.io'
    [ ... ]
}

[ ... ]

Логотип, имя агента, описание и доступные языки извлекаются из Dialogflow. Измените их в Dialogflow, и он синхронизируется с пользовательским интерфейсом. Обратите внимание: при добавлении новых языков вам, возможно, придется перевести часть пользовательского интерфейса ( translations.json в src/translations ).

Развивать

Откройте клонированную папку. Затем, используя ваш любимый менеджер пакетов, запустите команду serve .

Использование НПМ

npm run serve

Использование пряжи

yarn serve

Ваш браузер по умолчанию должен открыться и перенаправиться на localhost:8080 . Если порт 8080 уже используется, вы можете указать аргумент port для подключения к указанному порту.

Использование НПМ

npm run serve --port 9090

Использование пряжи

yarn serve --port 9090

ПОЖАЛУЙСТА, НЕ ИСПОЛЬЗУЙТЕ СЕРВЕР РАЗРАБОТКИ ДЛЯ ОБСЛУЖИВАНИЯ ВАШЕГО ПРИЛОЖЕНИЯ ПОСЕТИТЕЛЯМ. СЕРВЕР РАЗРАБОТКИ ПРЕДНАЗНАЧЕН ДЛЯ РАЗРАБОТКИ. ПОЖАЛУЙСТА, ЗАГРУЗИТЕ СТРОИТЕЛЬНЫЕ АРТЕФАКТЫ НА СТАТИЧЕСКИЙ ВЕБ-СЕРВЕР

Тема

Вы можете создать собственную тему для Dialogflow for Web v2 в соответствии со спецификацией:

Чтобы применить переменные, откройте src/style/theme.sass и измените их в селекторе :root

Вы также можете оптимизировать свою тему для клиентов с поддержкой темного режима в том же файле и селекторе в @media (prefers-color-scheme: dark)

Строить

Ваше приложение будет помещено в каталог dist .

Для его создания вы можете использовать npm или Yarn.

Использование НПМ

npm run build

Использование пряжи

yarn build

Обновлять

Запустите git pull origin master чтобы интегрировать изменения.

Кроме того, следите за актуальностью пакетов vue.

 vue upgrade

Часто задаваемые вопросы

• В: Я не вижу никаких изменений
• О: Убедитесь, что вы очистили кеш и пересобрали приложение . В Safari перейдите в «Разработка» > «Очистить кеши». В Chrome: «Инструменты разработчика» > «Приложение» > «Очистить хранилище» > «Очистить данные сайта».

Запросы

Свяжитесь с разработчиком или откройте проблему