从Gradio App创建Discord Bot/Slack Bot/Website Widget（2）——从Gradio App创建Slack Bot

本章目录如下：

1. 《从Gradio App创建Discord Bot/Slack Bot/Website Widget（1）——从Gradio App创建Discord Bot》
2. 《从Gradio App创建Discord Bot/Slack Bot/Website Widget（2）——从Gradio App创建Slack Bot》
3. 《从Gradio App创建Discord Bot/Slack Bot/Website Widget（3）——从Gradio App创建Website Widget》

本篇摘要

本章从Gradio App分别创建Discord Bot/Slack Bot/Website Widget。

18. 从Gradio App创建Discord Bot/Slack Bot/Website Widget

为了拓展Gradio App的应用范围，本章讲解从Gradio App分别创建Discord Bot/Slack Bot/Website Widget。

18.2 从Gradio App创建Slack Bot

我们可以将Gradio应用部署为Slack机器人，让Slack工作区中的成员直接与之互动。Slack官网地址https://slack.com，Slack可以将人员、项目、应用和AI代理整合在一起，进行人员组织协作、项目管理、工具集成并可使用人工智能Slack AI及智能代理Agentforce提供服务。

18.2.1 运作原理及前置条件

本小节简述从Gradio App创建Slack Bot的运作原理和前置条件。

1. 运作原理

该Slack Bot会监听频道中提及它的消息，当收到消息时（可包含文本或文件），它会通过Gradio内置API将内容发送至已部署的Gradio应用，并将API返回的响应作为回复。得益于Gradio API的高度灵活性，您可以轻松创建支持文本、图片、音频、实时流、聊天记录等丰富功能的Slack机器人。

2. 前置条件

首先，安装最新版gradio和slack-bolt库：

pip install --upgrade gradio slack-bolt~=1.0

然后，确保已部署可运行的Gradio应用（可运行于本地或Hugging Face Spaces）。本示例将使用与第一节相同的Gradio Playground Bot：abidlabs/gradio-playground-bot，该应用接收图片/文本后能生成对应的Gradio应用代码，源码不再重复。现在，让我们开始构建吧！

18.2.2 创建Slack App

前置工作完成后，开始创建Slack应用，步骤如下：

1. 创建工作区workspace

访问api.slack.com/apps，创建账户或使用已有邮箱登录后，界面如下：

在创建App之前需先创建工作区，点击"create a workspace"，之后还需再点一遍确认。然后输入工作区名称gradio_union_slack（根据自己需要修改），设置自己的名称和照片，跳过邀请同事，填写当前团队工作（随意），最后点击使用免费版本完成创建。

2. 创建Slack App

访问api.slack.com/apps，选择“Create An App -> From Scratch”，为应用命名GradioPlaygroundBot，选择或新建要开发应用的目标工作区，比如之前创建的工作区gradio_union_slack，然后点击“Create App”，出现如下界面：

3. 授权并获取OAuth Tokens

点击左侧导航栏"OAuth & Permissions"，滚动至"Scopes"，在Bot Token Scopes点击“Add an OAuth Scope”并添加以下机器人令牌权限：

• app_mentions:read（读取提及消息）：查看会话中直接提及@GradioPlaygroundBot的消息（需应用已加入该会话）；
• chat:write（聊天消息写入）：以GradioPlaygroundBot身份发送消息；
• files:read（文件读取）：查看已添加GradioPlaygroundBot的频道和会话中的共享文件；
• files:write（文件写入）：以GradioPlaygroundBot身份上传、编辑和删除频道和会话中的文件。

添加完成到，滚动到同一页面顶部，点击“Install to gradio_union_slack”：

在下面可以看到添加的权限，可以看什么以及可以做什么：

点击"Allow"后跳转回"OAuth & Permissions"页面，并得到Bot User OAuth Token：xoxb-XXX，保存它到本地文件以便后续使用。

4. 生成socket-token

点击左侧菜单栏"Socket Mode"，点击切换键“Enable Socket Mode”开启该功能，如下图：

在弹出的对话框中，为Socket令牌命名（如gradio_socket_token），点击“Generate”并复制保存生成的令牌：xapp-XXX，稍后会用到。如下图：

5. 订阅app_mention事件

进入左侧导航栏的"Event Subscription"菜单，点击切换键toggle以启用事件"Enable Events"，然后在“Subscribe to bot events”点击“Add Bot User Event”，订阅app_mention机器人事件，最后别忘记点击右下角的“Save changes”。如下图：

Slack App创建及设置完成，下面开始编写Slack Bot代码！

18.2.3 编写Slack Bot代码

本小节编写Slack Bot基础及详细版代码，然后运行它，并对其代码进行详细解读。

1. 基础及详细代码

首先，编写一个基础版Slack机器人来验证基础功能。将以下Python代码保存为bot.py文件，并替换前文获取的两个令牌Bot OAuth Token和App Socket Token：

from slack_bolt import App
from slack_bolt.adapter.socket_mode import SocketModeHandlerSLACK_BOT_TOKEN = "xoxb-XXX"
SLACK_APP_TOKEN = "xapp-XXX"
app = App(token=SLACK_BOT_TOKEN)@app.event("app_mention")
def handle_app_mention_events(body, say):user_id = body["event"]["user"]say(f"Hi <@{user_id}>! You mentioned me and said: {body['event']['text']}")if __name__ == "__main__":handler = SocketModeHandler(app, SLACK_APP_TOKEN)handler.start()

若运行正常，输出如下：

⚡️ Bolt app is running!

现在可以添加Gradio专用代码了，我们将使用Gradio的Python客户端来调用前文提到的Gradio Playground Bot，以下是更新后的bot.py文件内容：

from gradio_client import Client, handle_file
from slack_bolt import App
from slack_bolt.adapter.socket_mode import SocketModeHandler
import os, re, httpxSLACK_BOT_TOKEN = "xoxb-XXX"
SLACK_APP_TOKEN = "xapp-XXX"
app = App(token=SLACK_BOT_TOKEN)
gradio_client = Client("abidlabs/gradio-playground-bot")def download_image(url, filename):headers = {"Authorization": f"Bearer {SLACK_BOT_TOKEN}"}response = httpx.get(url, headers=headers)image_path = f"./images/{filename}"os.makedirs("./images", exist_ok=True)with open(image_path, "wb") as f:f.write(response.content)return image_pathdef slackify_message(message):   # Replace markdown links with slack format and remove code language specifier after triple backtickspattern = r'\[(.*?)\]\((.*?)\)'cleaned = re.sub(pattern, r'<\2|\1>', message)cleaned = re.sub(r'```\w+\n', '```', cleaned)return cleaned.strip()@app.event("app_mention")
def handle_app_mention_events(body, say):# Extract the message content without the bot mentiontext = body["event"]["text"]bot_user_id = body["authorizations"][0]["user_id"]clean_message = text.replace(f"<@{bot_user_id}>", "").strip()# Handle images if presentfiles = []if "files" in body["event"]:for file in body["event"]["files"]:if file["filetype"] in ["png", "jpg", "jpeg", "gif", "webp"]:image_path = download_image(file["url_private_download"], file["name"])files.append(handle_file(image_path))break# Submit to Gradio and send responses back to Slackfor response in gradio_client.submit(message={"text": clean_message, "files": files},):cleaned_response = slackify_message(response[-1])say(cleaned_response)if __name__ == "__main__":handler = SocketModeHandler(app, SLACK_APP_TOKEN)handler.start()

2. 运行及代码解读

运行后输出如下：

Loaded as API: https://abidlabs-gradio-playground-bot.hf.space ✔
⚡️ Bolt app is running!

代码解读：

1. 首先，引入相关库和定义TOKEN，再通过SLACK_BOT_TOKEN定义SLACK应用app和Gradio客户端gradio_client；
2. 然后，定义图像下载函数download_image和将信息整理为Slack格式的函数slackify_message，其逻辑简单不再赘述；
3. 先看主程序中SocketModeHandler处理器，它使用SLACK_APP_TOKEN标识开启app的Soket模式，然后使用start启动；
4. 当app事件app_mention触发时，调用函数handle_app_mention_events。它首先清理信息，去掉提及机器人的标识符；然后判断是否有附件及其文件类型，当符合要求时下载文件；再者将信息和文件发给gradio_client获得回复response；最后将response整理成slack格式，通过say发送到显示界面。

通过代码解读可以看到，本例定义的app通过SLACK_BOT_TOKEN与Slack中创建的App关联，而SLACK_APP_TOKEN则定义了app的Socket模式及传输权限。首先通过命令python bot.py启动handler.start()，此时app会通过SLACK_BOT_TOKEN关联到GradioPlaygroundBot，并通过SLACK_APP_TOKEN与Channel建立Socket通道；然后，当在Slack的频道中提及GradioPlaygroundBot时，消息会经由Socket传递到bot.py中定义的app，然后由事件app_mention触发函数handle_app_mention_events进行处理；最后将回复response进行Slack格式化处理，通过函数say发送到channel另一端的Slack窗口进行显示。

18.2.4 将机器人添加到Slack工作区

在Slack工作区中，除了定义App，还需要创建用于消息传输的频道Channels。现在，在您想要使用机器人的Slack工作区中新建或进入现有频道channel，步骤如下：

1. 新建频道channel

选择工作区后，点击工作区侧边栏"Channels"下的标有Add channels的"+"按钮，如下图：

选择“Create a new channel”，新建channel时，只需输入名称并邀请成员即可创建。当然除了新建channel，也可以使用现有的channel，从截图可以看到之前已创建的channel。

2. 将机器人加入频道

最后邀请您的机器人加入频道，步骤如下：在新频道中输入/invite @您的机器人名称；或者直接@您的机器人名称，系统会提示"You mentioned
@GradioPlaygroundBot
, but they’re not in this channel."，是否将机器人加入channel，选择add them即可。添加后效果如下图：

18.2.5 操作机器人

现在我们已经拥有Slack版的Gradio Bot，如何使用及扩展它呢？

1. 使用Slack Bot

大功告成！现在您可以在机器人所在的任意频道中@提及它，选择性地附加图片，机器人就会用生成的Gradio应用代码进行回复！
现在，我们可以在Slack工作区的任意频道中**@提及**你的机器人，并选择性地附加图片，发送消息后，机器人就会用生成的Gradio应用代码进行回复。比如上传一张图片并配文：@GradioPlaygroundBot make this app：

由于没有设置ANTHROPIC_API_KEY（每天可能有一次免费调用），可以看到机器人只回复“Generating Gradio app based on the image…”。此时只需将Gradio Playground Bot的程序复制到自己的Hugging Face Spaces中并设置好ANTHROPIC_API_KEY，然后更改gradio_client的地址，Slack窗口收到的正常回复类似下图：

点击底部的超链接即可在Gradio playground中试运行生成的代码！

2. 功能及扩展

该机器人将实现以下功能：
✓ 监听被提及的消息
✓ 处理所有附加图片
✓ 将文本和图片发送至您的Gradio应用
✓ 将响应内容实时传回Slack频道

这只是一个基础示例——我们可以扩展它来处理更多文件类型、添加错误处理机制或集成不同的Gradio应用！如果我们基于Gradio应用开发了Discord机器人，可以在X（Twitter）上分享并 @Gradio官方账号：https://x.com/Gradio，官方将很乐意帮开发者推广应用！

参考文献

1. 🚀 Creating Discord Bots with Gradio 🚀
2. 🚀 Creating a Slack Bot from a Gradio App 🚀
3. 🚀 Creating a Website Chat Widget with Gradio 🚀