本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh)

本文作者: 苏洋

创建时间: 2024年01月10日
统计字数: 5242字
阅读时间: 11分钟阅读
本文链接: https://soulteary.com/2024/01/10/bilibili-browser-ai-assistant-bilibili-subtitle.html

-----


# 哔哩哔哩浏览器 AI 助手：bilibili subtitle

分享一个好用不火的浏览器插件，能够让我们在浏览 B 站视频的时候体验更棒。

## 写在前面

B 站视频时间越来越长的今天，在打开视频的时候，如果能够**清晰直观的看到视频字幕**，当我们点击带有时间轴的字幕就能够**一键跳转**到自己想看的视频“空降坐标”，在观看视频的时候就能够**跳过无聊**的部分。

并且，如果我们能够在打开视频的时候，**就能够知道**这个视频的主旨到底是什么、视频大概可以形成几个分段，每个分段都讲什么，以及这个视频的主要观点是什么，是不是就可以和我们看书一样，**有目的的去看，得到更好的吸收效果**了呢？

上面这些不符合 B 站运营 KPI 的功能，显然不是 B 站官方会推出的产品，好在开源项目 [IndieKKY/bilibili-subtitle](https://github.com/IndieKKY/bilibili-subtitle) 替我们做了偷懒的工作，上面的功能它都有。

**不过想要使用它，需要有 OpenAI API 接口，这就是为什么工具很好用，但是用户不多的根本原因。**

还记得昨天文章《[Amazing OpenAI API：把非 OpenAI 模型都按 OpenAI API 调用](https://soulteary.com/2024/01/09/amazing-openai-api-call-all-non-openai-models-according-to-the-openai-api.html)》提到的另外一个开源小工具 `AOA` 嘛，如果你把这两个小工具连接在一起，这个使用阻碍就消失了。

相比较 OpenAI API，Azure OpenAI API 的获取难度低很多，而且我们还可以用之前霸榜多时的国产模型 [Yi-34B-Chat API](https://github.com/01-ai/Yi) （需要进入社区填表申请）来提供相同的体验，如果你有 Google Developer 账号，用 Gemini Pro 来做 “backend” 也是一件靠谱的事情。

**毕竟后者们目前都是免费的，但是就这个场景来说，性能完全不打折扣，偶尔还会超出预期。**

下面聊聊怎么玩起来。

## 准备工作

准备工作一共分为两步：准备 “API”、安装插件。

## 准备 “OpenAI API”

如果你已经有 OpenAI API，那么你可以跳过这步，包括各种 OpenAI API 的套壳搬运服务。

如果你没有上述来源的 OpenAI API，但是公司或个人有 Azure OpenAI API 的资源，或者你在 Yi 模型社区申请到了 API 接口，在 Google Developer 生成了 Gemini Pro API 的话，可以参考《[Amazing OpenAI API：把非 OpenAI 模型都按 OpenAI API 调用](https://soulteary.com/2024/01/09/amazing-openai-api-call-all-non-openai-models-according-to-the-openai-api.html)》文章中的方法，分分钟你就能获得一个能够当 “OpenAI API” 调用的 API 啦。

本文中，我们以中文能力非常不错的 Yi-34B-Chat API 为例子：

```yaml
version: "3"

services:
  amazing-openai-api:
    image: soulteary/amazing-openai-api:v0.6.1
    restart: always
    ports:
      - 8080:8080
    environment:
      # 设置工作模型为 YI
      - AOA_TYPE=yi
      # 设置 YI API 服务器地址
      - YI_ENDPOINT=<修改为你申请或搭建的服务地址>
      # 设置 YI API Key
      - YI_API_KEY=<修改为你的API KEY>
      # 模型名称映射，比如将请求中的 GPT 3.5 Turbo，GPT-4 都映射为 yi-34b-chat
      - YI_MODEL_ALIAS=gpt-3.5-turbo:yi-34b-chat,gpt-4:yi-34b-chat
    logging:
      options:
        max-size: 1m
```

在申请 API 之后，我们将上面的内容进行合适的调整，然后将保存为 `docker-compose.yml`，然后可以在笔记本或者服务器，甚至 NAS 里用 `docker compose up -d` 将工具以容器的方式跑起来。

如果你是本地运行，那么我们的 “OpenAI API” 地址就是 `http://localhost:8080/`，如果你是在服务器或者 NAS 运行，那么替换为设备的 IP 地址即可，类似：`http://192.168.1.123:8080/`。

如果你的 `8080` 端口不方便使用，修改上面配置中的 `8080:8080` 为 `9090:8080` ，实际的端口地址就变成 `9090` 了，是不是十分简单。

### 安装浏览器插件

插件目前支持三种浏览器：Chrome（[Chrome 应用商店](https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp)）、IE Edge（[浏览器加载项](https://microsoftedge.microsoft.com/addons/detail/lignnlhlpiefmcjkdkmfjdckhlaiajan)）、Firefox（[ADD-ONS 扩展](https://addons.mozilla.org/zh-CN/firefox/addon/bilibili-subtitle/)），使用你常用的浏览器，打开各自的商店网页地址，点击一键安装即可。

安装完毕，B 站视频页面的右侧，原版弹幕列表上便多出了一个“字幕模块”。

![B 站增强版字幕](https://attachment.soulteary.com/2024/01/10/extra-subtitle.jpg)

当我们点击“点击生成”按钮时，插件会跳转到配置页面。

![配置 “OpenAI API”](https://attachment.soulteary.com/2024/01/10/config-subtitle.jpg)

我们将上文中我们折腾好的兼容的 OpenAI API 填进来，然后点击保存按钮。接着，在刚刚的界面再次点击“点击生成”，等待 AI 帮助我们先把视频看一遍。

![等待生成完毕](https://attachment.soulteary.com/2024/01/10/api-generate.jpg)

我一般会同时点击“总结”、“概览”、“要点”三个 Tab 的“点击生成”，这样可以更快的看到三个不同维度的摘要总结。

插件会将视频按照一定字数进行分段（可以设置），所以我们可以使用 AI 针对每一段进行详细的内容分析。

## 使用效果

点击“生成”后，稍等片刻，我们将看到类似下面的结果：

![一键对视频进行分章节](https://attachment.soulteary.com/2024/01/10/overview.jpg)

在“概览”页面，我们不光是能够点击下面带有时间轴的字幕，跳转到具体的视频时刻，还能够从上面 AI 自动拆分的内容分段开始看，**跳过不感兴趣的环节**。

![一键对视频进行摘要](https://attachment.soulteary.com/2024/01/10/video-summary.jpg)

在“总结”页面，我们能够一目了然的了解视频的前几分钟到底讲了什么。**视频内容有没有用，一目了然。**

![一键提取视频主要观点](https://attachment.soulteary.com/2024/01/10/points.jpg)

在“要点”页面，我们能够一键提取分段内的主要观点。**带着作者要传达给我们的内容，再次看视频，理解或许会有不同。**

当然，如果你更喜欢看文章，也可以将“列表视图”切换为“文章视图”：

![文章视图](https://attachment.soulteary.com/2024/01/10/post-view.jpg)

有的时候，视频里的信息量还是蛮多的，我们想根据记忆去检索一些内容，那么可以在字幕搜索栏，输入我们想搜索的内容：

![搜索字幕](https://attachment.soulteary.com/2024/01/10/search.jpg)

当然，如果你对于软件默认的设置不是很满意，可以点击字幕列表后非常隐蔽的“设置按钮”，再次打开设置页面，进行更符合你的设置调整。

![更新插件设置](https://attachment.soulteary.com/2024/01/10/settings.jpg)

## 技术细节

这个插件能够工作的核心，是有三段很不错的 Prompt （提示词）。我们深入 Prompt，来看看为什么插件能够通过 AI 模型做到上面的 B 站没有做到的产品功能。

首先是将视频分章节，生成带有时间轴的要点：

```python
You are a helpful assistant that summarize key points of video subtitle.
Summarize 3 to 8 brief key points in language '中文简体'.
Answer in markdown json format.
The emoji should be related to the key point and 1 char length.

example output format:

`json
[
  {
    "time": "03:00",
    "emoji": "👍",
    "key": "key point 1"
  },
  {
    "time": "10:05",
    "emoji": "😊",
    "key": "key point 2"
  }
]
`

The video's title: '''【毕导】从博士到教授到院士，中国科研的打怪升级之路'''.
The video's subtitles:

'''
00:00 小时候我的理想是当科学家
00:02 长大后爸妈希望我做个大学老师
00:04 后来我才知道这俩其实是一件事儿
00:06 就是走上科研道路
00:08 你以为搞科研的人是这样帅
00:11 学识渊博
00:12 温文尔雅
00:13 没有复杂的人际社交
00:14 没有灵魂催眠的卵
00:16 一壶茶
00:17 一边文献看一天
00:18 开局就是老板一帮学生给你打工
00:21 饿了吃便宜的食堂
00:22 闷了出国参加学术会议
00:24 每年还有寒暑假
...【其他时间轴内容】
'''
```

接着，是对视频进行摘要总结。

```yaml
You are a helpful assistant that summarize video subtitle.
Summarize in language '中文简体'.
Answer in markdown json format.

example output format:

`json
{
  "summary": "brief summary"
}
`

The video's title: '''【毕导】从博士到教授到院士，中国科研的打怪升级之路'''.
The video's subtitles:

'
小时候我的理想是当科学家,长大后爸妈希望我做个大学老师,后来我才知道这俩其实是一件事儿,就是走上科研道路,你以为搞科研的人是这样帅,...【时间分片内的所有内容】
'
```

以及，输出视频的主要观点：

```python
You are a helpful assistant that summarize key points of video subtitle.
Summarize brief key points in language '中文简体'.
Answer in markdown json format.

example output format:

`json
[
  "key point 1",
  "key point 2"
]
`

The video's title: '''【毕导】从博士到教授到院士，中国科研的打怪升级之路'''.
The video's subtitles:

'
小时候我的理想是当科学家,长大后爸妈希望我做个大学老师,后来我才知道这俩其实是一件事儿,就是走上科研道路,你以为搞科研的人是这样帅...
'
```

能够看出，作者使用了模型使用的几个小技巧：

1. 尽量使用英文进行交互，清楚描述自己的需求。
2. 在使用模型的时候，给模型先设定一个身份角色，擅长什么。
3. 给出必要的格式参考示例。
4. 最后给出要处理的数据。

## 其他

说起来，B 站也并非毫无动作，比较早的时候就推出了 “AI 视频总结”，但是相比较用户视角的开源软件，总感觉还是太“克制”了。

![Bilibili AI 视频总结](https://attachment.soulteary.com/2024/01/10/bilibili-ai.jpg)

## 最后

好啦，这篇文章就先写到这里，我们下篇文章见。

--EOF