# 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。它包括設置、部署和應用程式代碼概述的詳細說明，以及最佳


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rememberizer.ai/zh-hk/kai-fa-zhe-zi-yuan/integration-options/talk-to-slack-the-sample-web-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.