Talk-to-Slack 範例網頁應用程式
創建一個簡單的網頁應用程式,通過對 Rememberizer 的查詢將 LLM 與用戶知識集成是非常容易的。
Last updated
創建一個簡單的網頁應用程式,通過對 Rememberizer 的查詢將 LLM 與用戶知識集成是非常容易的。
Last updated
應用程式的源代碼可以在 這裡 找到。
在本節中,我們將提供逐步指導和完整的源代碼,以便您可以快速創建自己的應用程式。
我們在 OpenAI 上創建了一個 Talk-to-Slack GPT。Talk-to-Slack 網頁應用程式非常相似。
在這份指南中,我們提供了逐步的指導和完整的源碼,以幫助你創建你自己的應用程式,類似於我們與Rememberizer.ai的Talk-to-Slack GPT整合。與Slack整合不同的是,一個網路應用程式提供更多功能和控制,例如網路抓取、本地數據庫訪問、圖形與動畫,以及收集付款。此外,它可以被任何人使用,而不需要一個高級genAI帳戶。
我們的示例應用程式,與 Slack 對話,託管在 Heroku 上,並整合 OpenAI 的 LLM 與 Rememberizer.ai,以增強您的 Slack 體驗。該網路應用程式使用 Flask 建構並提供如 OAuth2 整合,Slack 數據訪問,和直觀的使用者介面等功能。
基於 Flask 的架構:後端操作、前端通訊以及API交互均由 Flask 負責處理。
OAuth2 整合:使用 Rememberizer 的 OAuth2 流程,以實現安全的授權和資料存取。
Slack 數據存取:使用 Rememberizer 的API 安全地取得已連接的 Slack 用戶資料。
OpenAI LLM 整合:使用 OpenAI 的 LLM 服務來處理查詢,以便得出有見地的回答。
直觀的用戶界面:提供現代 UI 設計以便輕鬆導航和交互。
最佳實踐:遵從安全與用戶體驗標準,以實現無縫整合。
Python
Flask
請注意,讓一個 LLM 將整個應用程式重寫成另一種語言(在我們的案例中是 Golang)並不是很困難。因此,請記住您並不僅限於使用 Python。
設定這些環境變數:
APP_SECRET_KEY
:Flask 的獨特秘密金鑰。
REMEMBERIZER_CLIENT_ID
:您的 Rememberizer 應用的客戶端 ID。
REMEMBERIZER_CLIENT_SECRET
:您的 Rememberizer 應用的客戶端秘密。
OPENAI_API_KEY
:您的 OpenAI API 金鑰。
啟動 Flask 應用程式:在終端機中運行 flask run
,並在 http://localhost:5000
訪問應用程式。
將回調 URL 複製到您的 Rememberizer 應用程式配置中:https://<YOURHOST>/auth/rememberizer/callback
例如:http://localhost:5000/auth/rememberizer/callback
。
建議部署到像 Heroku、Google Cloud Platform (GCP)、Amazon Web Services (AWS) 或 Microsoft Azure 等平台。
Heroku 部署
創建 Heroku 帳戶:安裝 Heroku CLI。
準備您的應用程序:確保存在 Procfile
、runtime.txt
和 requirements.txt
。
部署:使用 Heroku CLI 或 GitHub 集成進行部署。
詳細步驟
將 Heroku 連接到 GitHub:啟用來自 GitHub 存儲庫的自動部署,以便無縫更新。
手動部署:可選擇使用手動部署以獲得更多控制。
其他設置
安裝 Heroku CLI:brew tap heroku/brew && brew install heroku
(macOS)。
添加 SSL 證書:使用自簽名證書進行初始 HTTPS 設置。
在 Heroku 上配置環境變量:使用 heroku config:set KEY=value
設置必要的鍵。
其他雲平台
GCP:設置 GCP 帳戶,使用 app.yaml
準備您的應用,並使用 gcloud app deploy
進行部署。
AWS:在設置 AWS 帳戶和 AWS CLI 後,使用 Elastic Beanstalk 進行部署。
Azure:在創建 Azure 帳戶並安裝 Azure CLI 後,通過 Azure App Service 進行部署。
在部署之前,請驗證您的 requirements.txt
,調整生產環境的配置,並更新 OAuth 重定向 URI。
@app.route('/') (索引路由):
當訪問根 URL (/) 時,此路由渲染 index.html 模板。它作為您應用程式的首頁。
@app.route('/auth/rememberizer') (Rememberizer 認證路由):
此路由啟動與 Rememberizer.ai 的 OAuth2 認證過程。它生成一個隨機的狀態值,將其存儲在會話中,構建包含必要參數(客戶端 ID、重定向 URI、範圍和狀態)的授權 URL,並將用戶重定向到 Rememberizer.ai 的授權頁面。
@app.route('/auth/rememberizer/callback') (Rememberizer 回調路由):
此路由處理來自 Rememberizer.ai 的回調,當用戶授權您的應用程式後。它從查詢參數中提取授權碼,使用 Rememberizer.ai 的令牌端點將其交換為訪問令牌,並將訪問令牌存儲在會話中。然後,它將用戶重定向到 /dashboard 路由。
@app.route('/dashboard') (儀表板路由):
此路由向用戶顯示儀表板頁面。它檢查用戶的會話中是否有訪問令牌;如果沒有,則將他們重定向到認證路由。如果用戶已通過認證,它會向 Rememberizer.ai 的帳戶端點發送請求以檢索帳戶信息,並使用這些信息渲染 dashboard.html 模板。
@app.route('/slack-info') (Slack 整合信息路由):
此路由顯示有關用戶與 Rememberizer.ai 的 Slack 整合的信息。它檢查訪問令牌並向 Rememberizer.ai 的整合端點發送請求以獲取整合數據。然後,它使用這些數據渲染 slack_info.html 模板。
@app.route('/ask', methods=['POST']) (提問路由):
此路由處理用戶提交的問題。它檢查訪問令牌,從表單數據中檢索用戶的問題,並向 Rememberizer.ai 的文檔搜索端點發送請求以查找相關信息。然後,它使用 OpenAI 的 GPT-4 模型根據問題和搜索結果生成答案。答案在 answer.html 模板中渲染。
圖標設計:運用詳細的摺紙藝術風格設計,反映AI和通信整合的特點。我們的圖標是在Midjourney和Image2Icon中創建的。
SSL配置:使用OpenSSL生成自簽名證書以進行安全通信。
我們鼓勵您探索和創新自己的 AI 整合網頁應用程式,旨在提升您平台內的生產力和協作。
這份修訂的文件提供了開發人員創建自己的 AI 整合網頁應用程式的全面指南,類似於 Talk-to-Slack。它包括設置、部署和應用程式代碼概述的詳細說明,以及最佳