dialogflow web v2

Web 版 Dialogflow v2

Dialogflow 提供強大的自然語言理解 (NLU) 引擎來處理和理解自然語言輸入，讓您可以在產品和服務之上建立對話式介面

這是 Dialogflow V2 的非官方 Web 集成

注意：2021年8月，我將Web應用程式升級到Vue 3，修復了安全漏洞並更新了依賴項。軟體是免費的，但我的時間不是免費的。考慮透過 PayPal 或商業協議支援我

特徵

• 漸進式 Web 應用程式（100/100 Lighthouse 分數）
• 輔助功能
• 廣泛的瀏覽器支援 (IE8+)、離線功能（歷史）和出色的 SEO
• 熟悉的 UI 和 UX，基於官方 Google Assistant 設計規範
• 深色模式和主題
• 與語音輸入和語音回饋進行免提交互（使用 SSML）
• 獨立於語言
• Docker 和 Kubernetes 支持
• Google 支援上的豐富元件、Webhook 和 Actions（演示）
• 用於嵌入網站的浮動小部件（存儲庫和演示）
• 基於 Vue 3 、Webpack、Babel 和 PostCSS
• 輕量級（壓縮後的版本約為 50KB）
• 免費且完整記錄
• 德國製造
• Dialogflow 和 MadeWithVueJS 推薦

由來自巴黎的音頻行銷工作室 Vokode 贊助，該工作室的業務包括：聲音設計、播客和語音應用程式

安裝

要求

• NodeJS
• npm 或紗線
• Google 帳戶和 Dialogflow V2 代理程式（如果您尋找 V1，請使用我的舊儲存庫）

後端

Dialogflow Gateway 支援此類第三方集成，以安全地存取 Dialogflow V2 API

• 文件
• 實施

Ushakov 的AD Dialogflow Gateway（託管）是開始使用 Dialogflow for Web v2 的最快方法

克隆儲存庫

您可以使用git或從GitHub下載

安裝依賴項

打開克隆的資料夾。然後，使用套件管理器安裝相依性

使用 npm

npm i

使用紗線

yarn

連線代理

開啟src/config/index.js並將endpoint變數變更為您的 Dialogflow Gateway URL

提示：Ushakov 託管的 Dialogflow Gateway 的 URL 始終是您的 google 雲端專案 id + .core.ushaflow.io 。如果您遇到任何問題，請確保您已將代理連接到網關，然後訪問控制台，按一下「管理」並複製網關 URL

例子

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

[ ... ]

徽標、代理名稱、描述和可用語言是從 Dialogflow 取得的。在 Dialogflow 中更改它們，它將同步到 UI。請注意，新增語言時，您可能還需要翻譯一些 UI（ src/translations中的translations.json ）

發展

打開克隆的資料夾。然後，使用您最喜歡的套件管理器執行serve命令

使用 npm

npm run serve

使用紗線

yarn serve

您的預設瀏覽器應該會開啟並重定向到localhost:8080 。如果連接埠 8080 已被使用，您可以提供port參數以在指定連接埠進行連接

使用 npm

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

npm run build

使用紗線

yarn build

更新

運行git pull origin master來整合更改

另外，保持 vue 包是最新的

 vue upgrade

常見問題解答

• Q：我沒有看到任何變化
• 答：確保您清理了快取並重建了應用程式。在 Safari 中，前往「開發」>「清空快取」。在 Chrome 中：“開發者工具”>“應用程式”>“清除儲存”>“清除網站資料”

查詢

聯絡開發者或提出問題