# 与 Slack 对话的示例 Web 应用

应用的源代码可以在 [这里](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账户。

### 概述

我们的示例应用程序，“Talk to Slack”，托管在Heroku上，并整合了OpenAI的LLM和Rememberizer.ai，以增强您的Slack体验。该网络应用程序使用Flask构建，并提供了如OAuth2集成、访问Slack数据和直观用户界面等功能。

### 特性

* **基于Flask的架构**：由Flask处理后端操作，前端通信和API交互。
* **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。它包括设置、部署和应用代码概述的详细说明，以及最佳实践