# 与 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。它包括设置、部署和应用代码概述的详细说明，以及最佳实践


---

# 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-cn/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.