WIDGET #2 · 新发布
免费 AI 模型对比 Widget
一行代码嵌入你的网站
3 个 AI 模型一行并排对比：价格、速度、擅长领域。适合技术博客、AI 工具站、产品对比页。零依赖、永久免费、无水印。
实时预览
30 秒嵌入指南
复制下面的代码，粘贴到你网站的任意位置（HTML 文章、Markdown 文档、Notion 嵌入、掘金文章都支持）：
<iframe
src="https://www.htmlcode.fun/s/ai-model-compare-widget"
width="100%"
height="420"
frameborder="0"
style="border-radius: 12px; max-width: 720px;"></iframe>
<iframe src="https://www.htmlcode.fun/s/ai-model-compare-widget" width="100%" height="420" frameborder="0" style="border-radius: 12px; max-width: 720px;"></iframe>
3 种使用场景
📝
技术博客 / 知乎文章
写 GPT-4 vs Claude vs DeepSeek 评测时，嵌入对比卡片让读者一眼看清差异
🛠️
AI 工具导航站
在工具详情页加一个对比卡片，访客决策更快，跳出率更低
💼
产品官网 / 落地页
展示你接入了哪些 AI 模型，让客户看到成本与场景的权衡
核心特性
🆓
永久免费
无水印、无广告、无需注册。商业网站也可使用。
⚡
30KB 零依赖
纯 HTML/CSS/JS，不引入 jQuery/Vue/React。加载 <200ms。
🌗
自动暗色模式
跟随用户系统主题（prefers-color-scheme），用户可手动切换并记忆偏好
📱
移动端适配
600px 以下自动切换为单列布局，移动端阅读体验优秀
🔄
数据自动更新
价格数据每月更新。无需手动维护代码。
🎨
API 可扩展
通过 iframe.contentWindow.updateModels([...]) 动态切换模型组
URL 参数
支持通过 URL 参数定制 Widget 行为：
https://www.htmlcode.fun/s/ai-model-compare-widget?theme=dark
https://www.htmlcode.fun/s/ai-model-compare-widget?theme=light
常见问题
Widget 是完全免费的吗？
是的，永久免费、无水印、无广告、无需注册。可以嵌入到任何网站，包括商业网站。
一行代码嵌入具体怎么写？
上面的代码块已经完整展示了，复制粘贴即可。iframe 会自适应父容器宽度。
可以自定义展示的模型吗？
目前展示 DeepSeek V3 / GPT-4o / Claude Sonnet 4（性价比/全能/推理强 三种代表）。如需自定义模型组，请使用 JS API：iframe.contentWindow.updateModels([{...}])。
支持暗色模式吗？
支持。Widget 自动跟随用户系统主题，用户也可点击右上角主题按钮手动切换，偏好会记忆在 localStorage。
数据更新频率？
价格数据每月更新一次，重大模型变化会即时更新。Widget 内显示"数据更新于"日期。
移动端能用吗？
支持。在 600px 以下会自动切换为单列布局，每个模型独立卡片显示。