自从干了AI后，我加的AI群不下100个。
有AI产品群、超创群、媒体群、客户群以及沃垠AI自己的20多个群，每天根本看不过来。
所以我就一直有一个想法，看能不能让AI帮我批量总结群聊内容，而且还得是带音频的那种。虽然现在已经有很多机器人可以总结群聊天甚至直接出图，但其实他们一直都有风险，微信想封，分分钟的事情。
直到最近，我找到了一个思路。过程可能会稍微复杂了点，但我保证，你半小时就能轻松复现。
先来看一下最终的成品，我录了个视频。
流程与工具
关于整个项目的开发流程，我让豆包画了张图。
流程图 by 豆包&Photoshop
简单说就是：
-
数据：先从wechat提取原始数据。
-
总结数据：让大模型对原始数据进行总结。
-
前端：通过Trae写前端网页，对模型总结的数据在前端进行展示。
-
工具支持：调用MCP工具生成音频，并嵌入到前端网页中。
-
部署上线：调用火山引擎MCP，将前端网页部署上线，发布到公网。
用到的工具有：
-
MemoTrace：负责将微信数据转换为Excel、pdf、word等格式。
-
Trae：借助豆包1.6模型，完成全套代码编写。
-
火山引擎MCP服务：提供了2款MCP，MiniMax生成音频，veFaaS负责将前端网页部署上线。
-
豆包1.6：提供所有文本总结和编程（代码生成、补全和bug修复）支持。
介绍完了流程和工具，下面我们进入实战环节。
步骤拆解
1）提取微信数据
我们知道，微信把存在本地的聊天记录做了加密处理，我们想看这些数据，得先“解密”。
Memo Trace/chatlog这类软件，可以将聊天记录转成各种办公格式，比如doc、csv、html、txt、markdown、pdf（收费）、xlsx（收费）。
Github地址：
https://github.com/LC044/WeChatMsg
需要注意，Memo Trace只支持3.9.12版的微信（也可以用chatlog，在github里可以搜到）。我的微信电脑版更新到了4.0，所以无法提取最新的数据。今天这篇文章，我们展示的是今年3月份沃垠AI➀群的聊天数据。
2）对数据进行总结
拿到了原始数据后，我们先人工做一轮数据筛选，只保留了聊天内容（StrContent）、聊天时间（StrTime）和用户（NickName）这几项。
但这些数据是零散的、无逻辑的，我们可以让大模型先做一轮信息整理。至于整理方式，根据个人需求来，可以是按时间整理，也可以是按用户名整理，或者按事件整理。
可以直接发给你常用的AI，也可以直接在Trae里整理。我是在Trae里调用豆包最新的1.6模型来整理的。
Prompt是：
#沃垠AI➀群.csv 这是一份群聊天记录，帮我按时间线对每天的讨论内容进行总结，并保存为txt。
注：输入#引用File文件夹，可引用这张表格。
然后，Trae就把聊天记录按时间线整理出来了。
3）写前端网页
有了这份“聊天记录总结txt”，接下来就可以写网页了。
我们借用下@向阳乔木 的网页生成提示词。
#角色
你是一名专业的网页设计师和前端开发专家，对现代 Web 设计趋势和最佳实践有深入理解，尤其擅长创造具有极高审美价值的用户界面。你的设计作品不仅功能完备，而且在视觉上令人惊叹，能够给用户带来强烈的"Aha-moment"体验。
#任务
请根据最后提供的内容，设计一个“美观、现代、易读”的"中文"可视化网页。请充分发挥你的专业判断，选择最能体现内容精髓的设计风格、配色方案、排版和布局。
#设计目标：
1.视觉吸引力：创造一个在视觉上令人印象深刻的网页，能够立即吸引用户的注意力，并激发他们的阅读兴趣。
2.可读性：确保内容清晰易读，无论在桌面端还是移动端，都能提供舒适的阅读体验。
3.信息传达：以一种既美观又高效的方式呈现信息，突出关键内容，引导用户理解核心思想。
4.情感共鸣：通过设计激发与内容主题相关的情感（例如，对于励志内容，激发积极向上的情绪；对于严肃内容，营造庄重、专业的氛围）。
#设计指导（请灵活运用，而非严格遵循）：
1.整体风格：可以考虑杂志风格、出版物风格，或者其他你认为合适的现代 Web 设计风格。目标是创造一个既有信息量，又有视觉吸引力的页面，就像一本精心设计的数字杂志或一篇深度报道。
2.Hero 模块（可选，但强烈建议）： 如果你认为合适，可以设计一个引人注目的 Hero 模块。它可以包含大标题、副标题、一段引人入胜的引言，以及一张高质量的背景图片或插图。*
3.排版：
精心选择字体组合（衬线和无衬线），以提升中文阅读体验。
利用不同的字号、字重、颜色和样式，创建清晰的视觉层次结构。
可以考虑使用一些精致的排版细节（如首字下沉、悬挂标点）来提升整体质感。
Font-Awesome中有很多图标，选合适的点缀增加趣味性。
4.配色方案：
选择一套既和谐又具有视觉冲击力的配色方案。
考虑使用高对比度的颜色组合来突出重要元素。
可以探索渐变、阴影等效果来增加视觉深度。
5.布局：
使用基于网格的布局系统来组织页面元素。
充分利用负空间（留白），创造视觉平衡和呼吸感。
可以考虑使用卡片、分割线、图标等视觉元素来分隔和组织内容。
6.调性：整体风格精致, 营造一种高级感。
7.数据可视化：
设计一个或多个数据可视化元素，展示Naval思想的关键概念和它们之间的关系。
可以考虑使用思想导图、概念关系图、时间线或主题聚类展示等方式。
确保可视化设计既美观又有洞察性，帮助用户更直观地理解Naval思想体系的整体框架。
使用Mermaid.js来实现交互式图表，允许用户探索不同概念之间的关联。
#技术规范：
1.使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript。
Font Awesome: [https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css](https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css)
Tailwind CSS: [https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css](https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css)
非中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)
`font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;`
Mermaid: [https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js](https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js)
实现完整的深色/浅色模式切换功能，默认跟随系统设置，并允许用户手动切换。
代码结构清晰、语义化，包含适当的注释。
实现完整的响应式，必须在所有设备上（手机、平板、桌面）完美展示。
#额外加分项：
1.微交互：添加微妙而有意义的微交互效果来提升用户体验（例如，按钮悬停效果、卡片悬停效果、页面滚动效果）。
2.补充信息：可以主动搜索并补充其他重要信息或模块（例如，关键概念的解释、相关人物的介绍等），以增强用户对内容的理解。
3.延伸阅读：分析文件后，提供一份"进一步阅读"的简短清单，推荐 5 本最佳相关书籍或论文，并提供简要说明或链接。
#输出要求：
提供一个完整、可运行的单一 HTML 文件，其中包含所有必要的 CSS 和 JavaScript。
确保代码符合 W3C 标准，没有错误或警告。
请你像一个真正的设计师一样思考，充分发挥你的专业技能和创造力，打造一个令人惊艳的网页！
待处理内容：{{content}}把“聊天记录总结txt”放在prompt的最后，发给Trae。
如果对网页有想修改的地方，可以直接通过对话给Trae提要求。比如，我们想增加用户排名的情况。
网页如果调试好了，先放一边。接下来，我们通过MCP给它加点东西。
4）通过MCP生成音频
让MCP服务工作前，我们需要先配置好MCP。严格来说，这一步要放在最开始的时候，包括Trae工作时的智能体，都要在最开始的时候配置好（参考我之前写的这篇文章）。
今天，我们要用到2个MCP：一个是MiniMax MCP，可以生成音频、视频和图片等；一个是FaaS MCP，负责将整个前端项目部署上线，发布到公网。
先说第一个，MiniMax MCP。
我们可以前往火山引擎的MCP Servers，查看各款MCP的使用说明书。
火山引擎MCP Servers
https://www.volcengine.com/mcp-marketplace
通过火山MCP Servers我们得知，MiniMax MCP要填的是这段json代码。
{
"mcpServers": {
"MiniMax": {
"command": "uvx",
"args": [
"minimax-mcp"
],
"env": {
"MINIMAX_API_KEY": "填写你的API密钥",
"MINIMAX_MCP_BASE_PATH": "本地输出目录路径，如/User/xxx/Desktop",
"MINIMAX_API_HOST": "填写API Host, https://api.minimax.chat 或 https://api.minimaxi.chat",
"MINIMAX_API_RESOURCE_MODE": "可选配置，资源生成后的提供方式, 可选项为 [url|local], 默认为 url"
}
}
}
}
API key从MiniMax开放平台获取，在第一次创建密钥时会看到key，复制上就可以了。
国内版：https://api.minimax.chat
国际版：https://api.minimaxi.chat
注意，国内版和国外版要互相匹配上。
“本地输出目录路径”看你要把MiniMax生成的音频放在哪里，可以是桌面，也可以是项目文件夹。比如Windows桌面，一般是“C:\Users\Administrator\Desktop”，Mac/Linux则是“/User/xxx/Desktop”。
API Host看你选择的是国际版还是国内版，跟key是对应的，你选的哪个就填哪个。
MODE可以选择url或local，url就是MiniMax生成的音频以链接形式返回，local就是直接存在本地。通常，我们选择local。
记得要提前装好uvx环境，不然MiniMax MCP无法启动。你可以在终端输入命令：which uvx，查看uvx环境是否正常。
如果没有配置好，Trae就会一直报错。别问我是怎么知道的，今天我在这里硬生生耗了2个小时
。
配置好后，就可以直接使用MiniMax MCP了。
我的prompt是：
精要总结#聊天记录总结.txt，使用MiniMax MCP的text_to_audio生成一个mp3文件，然后将mp3文件嵌入到刚刚生成的网页中（顶部位置）。
5）将网页部署上线
严格意义来说，前面生成的这一系列东西，都是属于前端的东西。
前端的东西，可以在本地玩一玩、耍一耍，但是不能用。要想真正用起来，必须得搭后端的东西，比如数据库、服务器，以及运维、管理系统……这一套东西，缺一不可。
少一点，AI生成的东西就都只是玩具，而不是应用。
不过，火山引擎的MCP Servers有一个veFaaS MCP，这是一个神器，可以将我们设计的前端网页快速部署到火山服务器上，让所有人都可以公开访问你的页面。
不需要购买域名，也不需要租用服务区，直接通过MCP服务就可以部署。
我的prompt是：
用veFaaS MCP把网页#chat_summary_visualization.html （包括音频）部署到faas，给我返回一个可以公网访问的网址。
当然，如果你觉得这种方法麻烦，还有一种更简单的——直接把前端网页发给一个托管网站就行。
比如这个网址（需要魔法）：https://www.yourware.so
比如我们这个开发项目，它包含了网页、音频和txt文档（数据库）。你不能只传网页给它，需要把整个文件夹都上传。
选择Upload模式，点击“select Folder”，把整个文件夹发给它。
然后，你开发的网站就能用了，所有人都可以公开访问和查看。
这是我这个case的网址（需要魔法）：
https://www.youware.com/project/ds2jqnw3m8
这是首屏，支持搜索、栏目切换和背景色切换。
要闻区，支持日期查看和话题查看。
还给话题图谱，配了一张思维导图。
数据分析，统计了活跃用户、话题数和话题类型分布。
最后，给出了拓展阅读。
写在最后
最近，火山引擎FORCE原动力大会上，他们提出了一个新的概念：AI云原生Agent开发范式。
这话怎么理解呢？过去，我们要做一个项目开发，前端、后端和运维都要拉通，这才是一个应用。如果只有前端，那只能是玩具。
比如，我随手开发的这个前端网页“查Ta全家”，它没有数据，就只能是玩一玩，逗你笑一笑。
如果想让这个网页成为真正的应用，我得去接工商查询的API，得做数据库，要买域名，还要弄服务器。这些后端和运维的东西，我要去很多地方搞（而且我自己肯定也是搞不出来的），大模型并不能帮到我。
而火山引擎提出的“AI云原生Agent开发范式”，全部都在一个AI开发平台里搞定。
比如IDE（应用开发环境），火山引擎把Trae与火山方舟进行了打通；而底模，有豆包模型1.6，在推理、数学、代码和百科知识均有显著提升；对于开发者难写的需求prompt，他们弄了一个“PromptPilot”，可以帮你智能优化需求。
如果你需要各种工具支持，火山引擎MCP市场提供了大量即插即用的工具，比如位置服务、数据查询、搜索、数据库、内容生成等。至于开发后的云服务，火山方舟通过MCP拉起了云产品链，搞定从开发到部署的最后一公里。
全栈式、AI云原生、Agent式开发，这就是火山引擎正在做的东西。
希望今天这篇文章，能够对你做应用开发有一定的帮助和启发。借助新的范式，我们一起开发出更好的产品。
譬如我们的“查Ta全家”，能够早日上线
~
（文：沃垠AI）