科学网—如何用WorkBuddy把手头资料做成交互式智能问答网页？
精选
已有 509 次阅读
2026-8-29 16:25
| 系统分类: 科普集锦
需求 上周， 我在广州一所高校图书馆的 AI 工作坊上 ，带着几十位学员做了一件事：把手头的资料（例如一张数据表或者若干规章制度文件）变成一个网站。这个网站不光展示数据，还能回答问题。你问它什么，它就根据真实数据现场算给你听。
做这事儿的前一天，有位图书馆的学员在学习给 AI 搭配知识库时，把本馆的读者使用指南传进了 WorkBuddy（腾讯做的 AI 办公工作台）的资料库，然后直接对着它提问。
他的问题是借书超期了怎么办，AI 答得清清楚楚，还在两种标准方案之外额外推荐了一种更优解：如果不急着借书，就等到最近的豁免日再还，省事。
他还尝试提问身处校外的用户怎么检索论文，AI 把 VPN 访问路径和多个校区的联系方式列了出来。
甚至他模拟用户问「馆里很热怎么投诉」，AI 先关心你热不热、建议降温和小风扇，再告诉你找谁、有哪些不同场所可选。学员自己总结说，这些答案可能比日常工作人员去组织语言还要更好。
效果确实好。可问题在于，读者要实际用上这套问答，得先连上你的知识库，还得会用相同的 AI 工具。对大多数读者来说，使用成本太高了。
于是我们想到，可以把它做成网站，让读者只要知道链接，就能访问。刚好前一天，我们才试过让 WorkBuddy 根据资料快速生成网站。
那能不能把这两件事合到一起？做一个网站，既可视化展示数据，又能让人针对网页实际加载的同一组数据直接问问题？
当然能。
这篇文章，咱们就讲讲具体怎么做。
生成 先说第一步：让 WorkBuddy 生成整个网站。
在我的资料库里生成一个示例 html 和关联的 csv 数据文件，销售记录，有图有表。要求是我修改 csv 数据，html 图表对应变化
于是 WorkBuddy 帮我虚拟了一份销售记录。
下面是它生成出来的网页。
你看，图文并茂。有各种预置统计图表，便于用户查看。
然后，一句话，就能让 WorkBuddy 将这个网页发布出去。
但是我们需要更进一步，用户可以针对数据提出问题获取答案。
能否做成交互式？用户可以在界面上文本输入问题，然后网站根据实际数据情况来回答？
WorkBuddy 照做了，于是你能看见它给出多个预置问题，点击即可获得答案。
它紧接着又补了一句：
比如问「线上渠道表现如何」，答得不错。 可这些是预先写死的。 我稍微改一下，把问题变细一点，加上一个「七月上旬」的时间范围，它就完全不认了。
至于解决方案，刚刚 WorkBuddy 已经说了。
所以第二步才是关键：让这个网站接入大模型，根据网页实际加载的数据回答问题。答案还得经过测试，复杂计算不能只靠模型心算。
问答 加上真正的 AI 问答，方法其实并不复杂。
我就说了一句：
我需要 AI 自由问答
于是 WorkBuddy 就开始忙活。经过几分钟，它说已经基本搞定了。
要让网页调用大模型回答问题，你得先有一把钥匙。
只要不是在你自己电脑上本地部署的 AI，调用它就得有这把钥匙。道理不复杂：就以工作坊为例，每个人都在使用 WorkBuddy。每人的 WorkBuddy 账户里都有自己对应的积分，你在那儿用，消耗的是你自己的积分。其他 AI 服务也一样，调用要花钱，服务商总得知道这笔账该记在谁头上。
所以你需要一个鉴定身份的东西，证明「这个人是我」。这就是 API key。
API key 这个英文名有点陌生，其实就是一串用来确认调用者身份的字符。申请下来，好好存着，调用的时候出示一下。
下面就是我的 DeepSeek API 后台，里面有我自己的几个 API key。当然，都已经打码。
拿到 key 之前，那个「交互式看板」其实还是个半成品。
接入 DeepSeek 之后呢？
同样的「线上渠道表现」问题，有了 DeepSeek API key，提问追加「七月上旬」，它当场根据当前样例数据给出了七月上旬线上渠道销售的情况。
而且你注意，连下方的统计图，都跟着你问题里的时间范围来变化。
也就是说，现在你部署的这样一个网站，一方面利用你这边关联的数据，另一方面有了 AI 的问答功能，所有访问它的人都可以对着你的真实数据提问。
安全 但这把钥匙一旦处理不当，麻烦就来了。
安全这件事要分三道防线讲。
第一层：API key 绝对不能明文暴露。 你现在要把 AI 部署到一个网站上。如果你直接把 API key 写到网页代码里，那就意味着你离「破产」已经不远了。key 就这么写在里面，别人拿到就能随便用，且应用范围绝不止是在你这个网站上问答。这些活动，花的是你的钱。
这还不是唯一的暴露面。在跟 AI 对话的过程中，如果你把 key 明文贴进对话框，它就进入了服务商的数据流转里。虽然大厂不大可能拿你的 key 去做什么，但多一处流转，就多一分向第三方泄露的可能，后果就不好说了。
第一道防线管保存：把 API key 存到本机的凭据文件里。以后跟 AI 对话时，只告诉它文件位置，不把 key 原文贴进对话框。这招有个前提：得是能读你电脑文件的本地 AI 助手；纯网页端工具只知道文件名，拿不到里面的 key。
第二道防线管部署：直接对 AI 说一句话，「请用中转函数方式接入 DeepSeek API」。
先说清楚，「中转函数」不是腾讯云的正式产品名，而是一句 AI 能听懂的口令。它背后具体落到的是腾讯云的云函数、函数 URL，还是别的什么产品，你都不用操心。
你只需要知道它干了什么。说了这句话，AI 就会帮你在云端搭一个中间层：网页收到问题，先交给这个中间层；中间层拿着存在服务器环境变量里的 key，去问大模型；拿到答案，再送回网页。一来一回，key 不会出现在网页代码里，普通访问的人拿不到；能登进你云函数后台的人才看得到，所以后台账号自己也得看好。
不过实话实说，配置这个中转函数，最为费时。当天的工作坊，有的学员用了 1 个小时，才终于配置好。
课上出了件哭笑不得的事。
有一组学员说做完了，还测试过了，能用。
我当时就纳闷：这个流程需要配中转函数的，他们怎么这么快搞定了？
后来一问才知道，WorkBuddy 问他们要 API key，他们就直接把 key 明文贴了过去。AI 拿到 key，当然就直接能用了。
能用吗？当然能用。真要是完全不考虑安全，把 key 直接写进代码里，分分钟就能搞定。可它能用，恰恰是因为把安全那一步整个跳过去了。
当然，同样是完成这个配置，我们有更方便的途径。这个咱们下一节细说。
第三道防线，管的是谁能用、能用多少。中转函数只解决了「key 不暴露」，没解决「谁都能白用你的额度」。
课堂上部署的时候，AI 报出来要执行两项操作：第一，把 key 放进服务器端环境变量，避免写入前端和代码仓库；第二，免鉴权。我当时确认了，它就给我部署完了。但「免鉴权」意味着什么？任何人拿到你这个网页的网址，都可以用你的 API 来回答问题。你的 key 确实没暴露，可你的额度是敞开的。
所以如果你要做正式的对公服务，免鉴权是绝对不行的，必须加上访问控制或者设额度上限。
部署 中转函数的配置需要到腾讯云上去操作。WorkBuddy 给了一份操作步骤手册，还有一段写好的脚本，让你去腾讯云的网站上一步步做。
但我懒。这种事让我自己一步步去点，我是真懒得干。
所以那天早上我在备课的时候，干了这样一件事：我打开了能替我操作电脑的 AI 助手 Codex，把 WorkBuddy 给我的操作手册和脚本原封不动地拽出来，跟 Codex 说：来吧，替我把这干了。
然后它就开始一步步替我干。 Codex 可以控制我的 Chrome ，所以它自己打开腾讯云的页面，自己点。到了登录环节，需要微信扫码。这它干不了，所以我去扫了个码，扫完告诉它「已登录」。接下来它在里面把该配的都配好：因为我事先告诉过它我用的是 DeepSeek，也告诉了它 API key 在我电脑上存的位置。它把 key 放进服务器端环境变量，选了免鉴权，部署完成，给了我一个网址，还自己做了测试，测试通过。然后我把这个网址贴回 WorkBuddy（这一步本来应该手工干的），它就把我要的东西整个部署上线了。
全程真正人工介入的地方只有一个：微信扫码登录。其余全是 Codex 控着 Chrome 完成的。
应变 当时 Codex 操控 Chrome 浏览器处理这些问题的时候，我没有录像。后来我让 Codex 自己重新做了一遍，并且自己在中间截取关键页面，然后形成了下面你看到的这个动图。
这种全自动的感觉怎么样？
这里有两个细节让我印象很深。
第一个：Codex 在操作的时候，它每做一步都会看屏幕上的结果，自己把缩略图放在一边，观察变化再调整。就像武林高手过招，眼睛看不见就只能闻声辨位，要吃亏；看得见对方的动作，反应就快得多。Codex 每一步都能看到结果，所以能随时应对。
第二个更精彩：Codex 在页面上看到了一条横幅公告：腾讯云传统 API 网关已经在 2025 年 6 月 30 日停服下线，控制台和接口一起关掉。实际上这个产品 2024 年 7 月就停止售卖了。也就是说，WorkBuddy 给我的那份教程，是基于旧版 API 网关写的，已经过时了。
Codex 自己发现了这件事，换用了新的流程。我把它整理出来的新教程做成了一份飞书云文档，发给全班当参考。
这就是为什么能替你干枯燥活的 AI 那么重要：配置步骤本身不难，但容易出错，预设值可能不对，教程可能过期，超时参数可能太小。你自己来做，每个环节都要小心翼翼；交给一个能看到屏幕、能实时调整的 AI，效率完全不一样。
成本 很多人第一反应是： 调 AI 接口，烧钱吧 ？
我课上专门打开了 DeepSeek 的用量页面给大家看。那当天早晨我做测试开始，到上午课结束，全班几十人一起在那个网站上提问，一共花了我多少钱呢？
两毛二。
到了下午课上复盘的时候，有位学员当场报出了自己练习账户的消耗：只有 2 分钱。
截至 2026 年 8 月 29 日，课上用的模型是 deepseek-v4-flash。它的输出价格分空闲和高峰两档：每百万 token 分别是 4.5 元和 9 元。课堂演示的调用量不大，所以 10 元余额可以用上一段时间；正式服务仍要按实际访问量设置预算和限额。
DeepSeek 采用先充值、后扣费的方式，余额不足时 API 会返回 402 错误。若你使用其他大模型 API，后台出现「额度授信」之类的选项，没想清楚前尽量别开，免得预存余额用完后继续产生费用。
对公使用还有一个现实便利：DeepSeek 支持申请电子发票；企业完成实名认证后可以对公汇款，个人可以用支付宝或微信充值。
踩坑 除了生成环节那几个，学员们在部署和使用的时候还踩了几个坑，值得你提前知道。
第一个坑，前面已经见过：AI 给的教程可能是旧的。发现页面或产品名对不上时，先查当前官方文档，再决定是继续原方案还是换流程。
第二个坑比较隐蔽：部署后如果发现 AI 回答不完整，经常说到一半就断了，去检查一下腾讯云 SCF 云函数的默认访问超时设置：默认是 3 秒，你可以把它改成更长时间。
第三个坑最有意思，也是我觉得最值得分享的定位思路。有学员发现，网站在回答日期相关的问题时，答案总是差那么一点。仔细对比之后发现，不是完全答错了，而是所有日期统一偏了一天。
把日期错一天，答案就全对上了。每一个，都是差同样的一天。
这种整整齐齐的偏差，是一个很有用的排查信号。先检查原始时间戳、业务时区、日期解析和传给模型的上下文；这些环节都正常，再判断是不是模型推理出了错。
规律不能直接证明问题一定出在程序里，但能帮你决定先查哪里。
还有一点值得心里有数：这个网站目前只接了对话接口，没给模型配计算器之类的工具，别指望它做复杂的数学运算。这样一个便宜的 Flash 级别调用，不是全能的。
边界 注意， 未经授权的数据、涉及个人隐私的数据，别往公网上放。
课上我们用的是销售样例数据，没有敏感信息。学员尝试的图书馆用户手册，也是公开信息。但如果你拿的是真实的馆藏读者记录、学生成绩、人事台账这类东西，放到公网上的网站里让人随便问，那可就不合适了。
课上的演示站只用了公开样例数据，课后也会关闭。真正的业务数据如果要长期上线，必须先确认授权范围、完成脱敏，并把不同身份能看见什么写清楚。
小结 回过头来看，这次我们先让 WorkBuddy 根据资料生成网页，再把网页实际加载的数据交给大模型，接着用服务器端中转保护 API key，并补上访问控制和真实问题测试。AI 能替你做掉不少编码和配置工作，但正式上线前的数据权限、答案校验和费用上限，仍得由人来确认。
这趟实践下来，我最深的一点体会是：
搭建智能应用的真正门槛，已经从「会不会写代码」，转向了「懂不懂安全防线、能否分清程序 Bug 与模型幻觉，以及是否守得住数据边界」。
只要把 API key 的安全护好、访问额度控制住、敏感数据把牢，你手头那些原本沉睡的文档与数据，就能以极低的成本，变成真正为读者和用户解决实际问题的交互工具。
你手头是否也有类似的规章手册或业务数据，想尝试做成交互式的智能问答网页？在调用 API 或部署过程中遇到过什么问题？欢迎把你的想法和体验写在留言区，咱们一起交流讨论。
如果你觉得本文有用，请 点击文章底部的「推荐到博客首页」按钮 。
如果本文可能对你的朋友有帮助，请 转发 给他们。
欢迎 关注 我的专栏 ，以便及时收到后续的更新内容。
延伸阅读 • Windsurf Cascade 如何为你 AI 赋能，解决真实需求？
• AI 应用蓬勃爆发，你的「护城河」足够宽吗？
• 从枯燥理论到生动实践：AI 智能代理如何用交互式教程讲解复杂概念
• 新学期，给你自己配一个好用的 AI 助手吧。会思考，能联网，还有知识库那种
• Claude Skills 入门：一篇文章搞懂 AI 怎么从「嘴替」升级成「打工人」
转载本文请联系原作者获取授权，同时请注明本文来自王树义科学网博客。 链接地址： https://blog.sciencenet.cn/blog-377709-1550083.html
上一篇： AI 工具突然都要钱了，怎么选、怎么用才不花冤枉钱？ 欢迎参加科学网十佳博文评选活动！ 主办单位： 
支持单位： 