#浏览器

4个月前
AI 生成代码,实时预览的几种方案👇 一、 html + srcdoc + iframe 1. AI 生成可以通过浏览器直接打开的 html 文件(单文件,html/css/js 写到一起) 2. 通过 iframe 的 srcdoc 传入 html 源码预览 3. 通过 importmap 指定依赖包的 CDN 资源。 这种方案实现起来简单,预览效率高。 二、react/vue + blob + iframe 1. AI 生成 react / vue 组件代码(单文件组件,无本地 import 依赖) 2. 通过 Babel.transform 转换 react 组件/通过 VueCompiler 编译 vue 组件 3. 使用转换/编译后的组件,构建一个 html 文件 4. 使用 blob 构建预览 url,传入 iframe.src 预览 const blob = new Blob([html], { type: 'text/html' }); iframe.src = URL.createObjectURL(blob); 这种方案稍微复杂一些,适合 react / vue 单文件组件预览。 3. webcontainer 1. AI 生成组件代码(可以返回多个组件文件,组件可以互相 import) 2. 构建一个最小可运行的 vite 项目骨架,把 vite 骨架包含的文件和 AI 生成的组件打包在一起,构建一个文件树 3. 启动 webcontainer 容器,挂载文件树 4. 通过 webcontainer 执行终端命令,安装项目依赖 5. 通过 webcontainer 启动预览服务,得到预览地址 6. 把预览地址传入 webcontainer 容器外的 iframe.src 实现项目预览 这种方案依赖 webcontainer,可以实现多组件预览,灵活性更高,但是涉及到文件挂载,命令行安装依赖等步骤,预览速度会慢一些。 ----- 总结 ----- 方案一适合用户不关心代码,只想快点看到效果的场景,比如用 Pagen 一句话生成 landing page,页面内容都在一个 html 文件里面。 方案二适合辅助前端写组件场景。比如用 CopyWeb 截图复刻设计,生成单个 react 组件,在线预览效果,导出到本地项目使用。 方案三适合一句话生成完整项目场景,比如用 bolt/v0 一句话生成 nextjs 项目骨架,可在线预览,可导出 zip 到本地修改。
5个月前
Operator 是由 OpenAI 开发的一款“AI 智能体”(AI Agent),它最大的特点在于可以像人一样使用浏览器,并能自动为你执行一些指定的网络操作。相比过去的 AI 只能回答问题或给出建议,Operator 可以进一步帮你“动手”去完成任务,比如浏览网页、点击按钮、填写表单等。 简单来说,就是你给它一个目标,它就能利用内置的浏览器自己去做事情,而不再仅仅是给你一段文字回答。 它能做什么? 填写网页表单 例如,你想在某个政府网站上提交一份申请表,但不想自己一栏栏去填写,或者表单太长需要重复输入很多信息;你只需告诉 Operator,它就能帮你填写相关内容并提交。 在线购物或订购服务 你想在超市 App 上购买日常用品,或在旅行网站上预订机票酒店、在美食平台点外卖,都可以让 Operator 代劳。它能自行浏览商品列表、添加购物车,然后在付款前再请你确认支付。 执行重复任务 如果你经常要上网做一些相似的流程,例如定期在某个网站上更新资料,或管理多个账号的信息,Operator 也可以帮你省下许多重复操作的时间。 工作原理 Operator 依托一个名为「计算机使用代理」(Computer-Using Agent, CUA)的新模型。简单来说,这个模型让 AI 能够“看到”网页界面(通过截图等方式)并“操作”网页(像使用鼠标和键盘一样点击、输入、滚动等)。 “看”:它会截取网页画面,然后从截图中提取文本和界面布局。 “点”:它像真人一样点击网页上的按钮和链接。 “输”:它可以往输入框里输入搜索词、收货地址、用户名等文本信息。 在执行任务过程中,如果遇到需要登录账户、输入支付信息或解决验证码这些环节,Operator 会请求你亲自接管控制,确保安全性和敏感信息不被泄露。 安全防护 - 需要输入敏感信息时,强制人工接管; - 在确认最终提交订单或发送邮件前,会征求用户确认; - 不允许执行过于敏感或风险极高的任务; - 可以随时删除浏览历史和对话记录,不被用于模型训练; - 对可疑的网站或恶意攻击会保持警惕,必要时会暂停操作。 虽然没有任何系统是万无一失的,但官方也在努力完善,计划通过研究预览阶段的用户反馈不断升级和改进安全策略。 不足之处 Operator 目前仍是一个早期的研究预览版,功能还不够完善: - 在非常复杂的网站上,AI 可能还会“晕头转向”或出错; - 在处理涉及多步骤、多条件的流程时,易出现失误; - 只在美国的 Pro 用户中小范围开放,普通用户可能需要再等等。 OpenAI 也表示,他们会持续改进 Operator 的稳定性与适配性,并逐步向更多用户和不同服务扩展。 API 开放 未来可能会将 Operator 所用的 CUA(计算机使用代理)模型开放给开发者,让他们打造自定义的自动化解决方案。 与 ChatGPT 的整合 后续或许会把 Operator 的功能深度融合到 ChatGPT 中,让用户在同一个界面里既能聊天也能让 AI 帮忙“动手”,真正实现一站式的智慧助理。 对绝大多数人而言,Operator 是一个新鲜而有趣的概念:不仅能回答问题,还能“亲自”帮你去完成网络上的各种操作。尽管它还在起步阶段,但它所代表的“让 AI 更实用、更贴心”的趋势引人瞩目。想象一下,当我们每天的大量琐事都能交给这样一个智能助手时,或许就能把更多时间和精力放在更重要、更有创造力的事情上。