7. 联网与多模态实战

来源：Kimi Code

我们的应用现在功能齐全，但用起来有个明显的麻烦：录一顿饭，得自己先查好热量再手工填进去。吃个苹果都要开搜索引擎，太反人性了。

这一章给 Kimi 接上两种"感官"：联网搜索（它能自己上网查资料）和多模态输入（你可以直接贴图片、贴视频给它看）。我们的应用会因此好用一大截。

7.1 联网搜索：给应用建一个食物热量库

Kimi Code 不是只能在本地打转——它能联网搜索关键词、抓取网页内容。这意味着"查热量"这种活儿可以直接外包给它：

联网查一下常见食物的热量数据，整理 20 种左右中国人日常吃的食物
（米饭、面条、鸡蛋、鸡胸肉、苹果、牛奶……），生成一个 foods.js 文件：
一个数组，每项包含名称、熟/生状态、可食部单位、来源链接、查询日期和每 100 克的热量 kcal_per_100g。
然后在饮食记录的表单里加一个"热量速查"下拉框：
选中食物后输入食用克重 grams（正数），以 kcal_per_100g * grams / 100 计算本条记录的总千卡；保存克重、单位和状态，不把每100克值直接当整餐总量。

发送后观察它的工作过程：它会先搜索，再抓取几个网页的内容，交叉比对后整理成数据文件，最后改表单。整个过程可能要一两分钟——比你自己开二十个网页标签查快多了。

但这里要建立一个重要心态：**联网查来的数据要抽查，不能照单全收。**抽查的方法很简单：挑两三种你熟悉的食物，自己搜一下看数量级对不对。给你两个常识锚点：米饭大约 116 千卡/100 克，鸡蛋大约 140 千卡/100 克（约合 70 千卡一个）。如果它整理的数据明显偏离，直接指出来：

请核对 foods.js 中米饭的熟/生状态、每100克单位及数据来源；不能用熟饭的数量级判断生米数据错误。

另外，食物热量本来就是近似值——同样是米饭，软硬不同热量就差不少——所以应用里显示成"约 116 千卡"比写一个假装精确的数字更诚实。顺手让它把这个"约"字加上。

完成后老规矩：跑测试页、手动录一餐试试速查下拉好不好用、提交。

7.2 前置：打通文件与浏览器的数据通道

先让 Kimi 为页面实现“导出 JSON／导入 JSON”：导出全部练习记录到 records-export.json；导入时验证 schemaVersion、日期、正数克重、非负有限热量及唯一 ID，预览新增记录并在用户确认后写 localStorage。不要覆盖其他记录，重复 ID 拒绝并提示。文件位于本机，默认不提交 Git。

把导出的文件复制到项目 private-data/ 并加入 .gitignore。CLI 只读写该目录里的 JSON，浏览器仍由用户导入；第 8 章定时周报只能读取最近一次手动导出的文件，报告需注明导出时间，不能声称已自动读取浏览器实时数据。

图片练习 粘贴图片：拍张照片就能记热量

Kimi Code 的输入框不只能打字，还能直接粘贴图片。操作很简单：

• macOS / Linux：复制图片后，在输入框里按 Ctrl-V；
• Windows：按 Alt-V。

粘贴后输入框里会出现一个占位符，你可以像编辑普通文字一样调整它的位置、在它前后继续打字；发送时占位符才会被替换成实际内容。

先排一个新手几乎必踩的坑：**在文件夹里"复制"一个图片文件，粘贴进去的往往只是文件路径，不是图片本身。**正确的做法是让剪贴板里装着图片数据：macOS 用"预览"打开图片后按 Cmd+C，Windows 用"照片"应用打开后点复制按钮，网页上的图片直接右键选"复制图片"，或者干脆截图（截图天然就是图片数据）。

实战一：拍照记热量。 用手机拍一张你的午餐，把照片传到电脑（微信文件传输助手、邮件、数据线都行），打开图片复制，粘贴到输入框，附上一句：

估算照片中各食物的份量与热量范围，列出不确定性，先生成待确认的 meal-import.json；不要声称已写入浏览器记录。

它会分析照片里有什么菜、按菜色和分量估算热量，然后生成待导入文件。你确认份量后，通过页面导入按钮写入记录，并刷新核对。如果估得明显离谱——比如把你的一大碗面看成了一小碟——直接纠正它："这份面其实有两人份，重新估。"当然得说句实话：AI 看照片估热量是"参考级"的，图个方便快捷可以，真拿它当医学级依据就不必了。

实战二：按截图改界面。 看到喜欢的网页设计，截个图贴给它：

参考这张截图的风格，把我们应用的首页改成卡片式布局，配色清淡一些

它会分析截图的布局、配色、间距，然后动手改造。改完在浏览器里看效果，不满意就继续用嘴调整，像指挥一位设计师：

卡片之间的间距再大一点，标题字号小一点，热量数字用更醒目的颜色

两个注意事项：

• **多模态能力依赖当前模型。**登录 Kimi Code 账号后默认开启；如果粘贴时提示"当前模型不支持图片输入"，用 /model 换成支持图片输入的模型即可。
• **媒体有总量限制。**一个会话里图片视频累计超过 20MB，最旧的会被自动省略（界面上会有警告）。聊了大量图片后它"看不清"早期的图，就是这个原因——所以重要的结论，及时让它落成代码或文字，别只留在图片里。

7.3 粘贴视频：让它"看"一段操作

图片之外，它还能看视频——这是 Kimi Code 很有特色的能力。粘贴方式和图片完全一样，只是要求当前模型支持视频输入。注意，部分模型不支持视频（比如 256K 上下文版本），粘贴失败时 /model 换个模型再试。

拿我们的应用做个实战：把你操作应用的过程录一段屏——macOS 按 Cmd+Shift+5 可以录屏，Windows 按 Win+Alt+R 用游戏栏录制，也可以直接用手机拍电脑屏幕。录一段"录入一顿晚餐并查看今日汇总"的完整操作，贴给它：

看看这段操作录像，从用户体验的角度找出三个可以改进的交互细节，列给我

它会看完视频给出一份改进清单——可能是"录完一餐没有任何成功提示""删除记录没有二次确认""表单提交后输入框没有清空"之类你自己早就麻木了的细节。挑你觉得最值得改的一两条，让它顺手改掉，跑测试、提交。

体会到这一章的意义了吗？过去你要把问题"翻译"成文字描述给它；现在，你眼睛看到的，它基本都能直接看。沟通的带宽完全不一样了。

本章小结

这一章给 Kimi 接上了"感官"：

• 联网搜索：它能自己查资料，我们用它建了食物热量库和"速查"下拉；记住联网数据要抽查，数据不对就指出具体条目让它修；
• 粘贴图片（macOS/Linux Ctrl-V，Windows Alt-V）：拍照估热量写入记录、按截图改界面；注意剪贴板里必须是图片数据而非文件路径；能力依赖模型，媒体累计上限 20MB；
• 粘贴视频：录屏让它分析操作、挑交互毛病，从"你描述给它听"升级为"它自己看"；部分模型不支持视频输入。

到这里，应用已经相当好用了，但还差最后一环：坚持。体重管理贵在持续记录，而下章要讲的自动化正好解决这个问题——让 Kimi 每天提醒你记录、每周帮你生成周报，顺便把目标模式和脚本化这两个进阶能力一起拿下。