# Talk-to-Slack 範例網頁應用程式

應用程式的源代碼可以在 [這裡](https://github.com/skydeckai/rememberizer) 找到。

在本節中，我們將提供逐步指導和完整的源代碼，以便您可以快速創建自己的應用程式。

我們在 OpenAI 上創建了一個 Talk-to-Slack GPT。Talk-to-Slack 網頁應用程式非常相似。

<div align="left"><figure><img src="https://rememberizer-docs-assets.s3.amazonaws.com/talk-to-slack_web_app.png" alt="由 Rememberizer 在 Heroku 上提供的 Talk to Slack.com 網頁應用程式"><figcaption><p>由 Rememberizer 在 Heroku 上提供的 Talk-to-Slack.com 網頁應用程式</p></figcaption></figure></div>

<div align="left"><figure><img src="https://rememberizer-docs-assets.s3.amazonaws.com/talk-to-slack_web_app.png" alt="由 Rememberizer 在 OpenAI 上提供的 Talk to Slack GPT"><figcaption><p>由 Rememberizer 在 OpenAI 上提供的 Talk to Slack GPT</p></figcaption></figure></div>

***

### 簡介

在這份指南中，我們提供了逐步的指導和完整的源碼，以幫助你創建你自己的應用程式，類似於我們與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

{% hint style="info" %}
請注意，讓一個 LLM 將整個應用程式重寫成另一種語言（在我們的案例中是 Golang）並不是很困難。因此，請記住您並不僅限於使用 Python。
{% endhint %}

#### 環境設定

設定這些環境變數：

* `APP_SECRET_KEY`：Flask 的獨特秘密金鑰。
* `REMEMBERIZER_CLIENT_ID`：您的 Rememberizer 應用的客戶端 ID。
* `REMEMBERIZER_CLIENT_SECRET`：您的 Rememberizer 應用的客戶端秘密。
* `OPENAI_API_KEY`：您的 OpenAI API 金鑰。

#### 運行應用程式

1. **啟動 Flask 應用程式**：在終端機中運行 `flask run`，並在 `http://localhost:5000` 訪問應用程式。
2. **將回調 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 部署**

1. **創建 Heroku 帳戶**：安裝 Heroku CLI。
2. **準備您的應用程序**：確保存在 `Procfile`、`runtime.txt` 和 `requirements.txt`。
3. **部署**：使用 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。它包括設置、部署和應用程式代碼概述的詳細說明，以及最佳