通义千问的代码模式 & kimi-preview 插件

大纲

分享一下对于通义千问代码模式的体验

推荐一下我的 Chrome 插件 - kimi-preview，让 kimi 也有代码模式。

如果你想在手机上有一个小应用收藏夹请看到最后

什么是通义的代码模式

通义千问代码模式是阿里通义实验室推出的一个新功能，可以在聊天窗口选择「代码模式」开启功能，能够通过简单的指令生成包括小游戏、数据图表、网站和小工具应用。

关于它的能力，官方提供了应用市场，可以看到通过通义千问的代码模式制作的一些小应用。【可以想象未来用户可以生成小应用 -> 提交审核 -> 审核通过之后就会出现在应用市场】

通义的代码模式体验

我体验了代码能力

从实现的角度看：

纯html + css + javascript的使用iframe的srcdoc属性在浏览器中预览。

对于React代码生成了一个预览地址进行“在线编译”预览。

用户动线：

新建对话，开启代码模式

输入需要生成应用的指令

比如让它生成一个好看的计算器

默认会自动打开代码分屏模式，在不加其他提示的情况下是 React 代码实现的，但是样式展示有点丑，并不好看，inspect查看是css样式是独立文件，没有加载进去，应该是处理上有一点小 Bug。

代码分屏模式的交互：

可以切换代码视图和预览视图

支持对生成的代码进行编辑

可以继续输入指令进行代码的微调（换用 style 内联的方式之后好一点了）

我还尝试只使用 html + css 来实现一个计算器，这个是可以直接运行的。

三方依赖引入测试

我想测试一下是否支持三方依赖，这样对于生成应用的可玩性会更高

React 代码中是不支持三方依赖的，但是发现了一个彩蛋，就是支持在报错的时候进行 AI 自动修复。

html 也是不支持加载三方依赖的，但其实是能够预览的

我尝试将生成的代码放入 jsbin.com 中，是可以预览的。我估计是担心第三方 CDN 投毒，所以通义没有支持。但是其实完全可以使用阿里云自己的 CDN。

kimi-preview 介绍

不止通义千问，v0、Claude 3.5 Sonnet、ChatGPT都就有这种前端代码生成的能力。

但是国内直接可用的其实很少，当时一直使用 kimi，就想着怎么在 kimi 上去做一个简单的代码预览功能。

我选择的是预览 html 的方式，相对比较简单，而且很多情况下我将 kimi 当成搜索工具，希望可以在搜索之后让 kimi 给我整理成图表预览或者生成卡片。

这里就分享一下我简单做的插件，做的比较粗糙（原本就自己用的），大家要是喜欢，后续可做一些打磨，感兴趣的可以点击查看原文安装使用一下，欢迎私信反馈建议。

kimi-preview 主要是为了预览 kimi 生成的 html、svg 片段。

kim-preview 使用

下载安装

点开链接，直接安装到 Chrome 就行。

使用

当识别到对话中的代码块是 html 或者 svg 的时候会提供一个「预览按钮」，点击「预览按钮」之后会打开一个抽屉查看 html 或者 svg 的效果

如果没有出现「预览按钮」，那么就是我插件的 Bug，可以点击右上角的「触发预览」，或者刷新页面试试。

有趣的使用方式

使用 echarts 画图

先使用 kimi 的联网搜索能力查阅资料

然后再让 kimi 使用 echarts 生成图表

生成卡片

可以选择一些自己想分享的语句让 kimi 生成分享卡片。

使用 Data URL 轻松实现网页小应用

我们要实现一个网页小工具，并能够在以后使用和分享这个工具要解决两个问题：

写网页小工具的代码

一个服务来托管网页并生成对网页的访问链接

前者可以用大模型解决，所以，关键是后者，如果我们可以将网页发布到服务器，那就可以实现代码的预览和在线访问。但是对于一个普通用户可能没有能力去折腾一个服务器，还要搞发布 html 代码什么的。

所以，我想的一个是使用 Data URL配合浏览器收藏夹。

Data URL 是前缀为data:协议的 URL，允许在 URL 中直接嵌入数据，与常见的 URL（如）不同，Data URL 不指向外部资源，而是直接包含数据内容。这种方式可以用于在网页或应用程序中内联小型的文件或数据片段，而无需从外部服务器加载。这种协议常用于网页、演示文档或者应用中嵌入小片段的 Markdown 文本而无需访问外部文件。

详细的可以看我这个文章的介绍：

浏览器收藏夹可以收藏网页链接，并且支持云端同步，经过测试也是能够收藏Data URL 的，所以 1 和 2 的问题都得到了解决。

实际操作起来也很方便：

首先让大模型帮我生成一个 html 代码转 Data URL 的小工具

然后让它自己把自己转成 Data URL，就想这样data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG...

收藏这个 Data URL 链接到浏览器收藏夹

如果你注册了浏览器账号，就可以在运动同步收藏夹，这样就可以在任何设备打开浏览器访问这个 Data URL ，这样你的小应用就有了一个浏览器 Based 的在线服务了。

好处是：多端同步，随时访问；坏处是：分享给其他人使用的时候代码很长。

另外你还可以在手机上使用：

让大模型生成代码，然后复制

从手机浏览器打开刚才创建的 DataURL 生成器

转换刚才复制的代码

复制生成的 Data URL 链接

在浏览器新窗口打开

总结

大模型正在加速编程平民化，加入光荣的进化吧！！！后面有机会分享一下在线编译 React 应用的模式。