先做个广告:如需代注册ChatGPT或充值 GPT4.0会员(plus),请添加站长微信:gptchongzhi
今天 OpenAI 终于发了新模型,大家都很兴奋。奥特曼说它推理很厉害,写代码很厉害,官方也演示了一段用 HTML 和 CSS 写 Transformer原理的视频。刚好我之前也搭建了一个 UI 生成的工具,于是连夜就让OpenAI 的新模型来挑战了一下现在的前端代码擂主:克劳德!用实战来看能不能挑战成功!(之前在我的工具环境中测试下来,Claude 遥遥领先,OpenAI 在前端代码能力上,跟 DeepSeek 不相上下)
推荐使用GPT中文版,国内可直接访问:https://ai.gpt86.top
参赛选手:
OpenAI - o1-mini,OpenAI - 01-preview,claude-3-5-sonnet-20240620
参赛规则:
统一走中转 API(公平公正) 相同的工程环境(React,给的相同的组件库) 每一局每位选手最多有 3 次机会,一次成功得分最高。 如果失败,则会把报错信息给到模型继续修改,相应分数也会有折扣
题目:Claude 和 OpenAI 各出了一套,最后各选一半
结论有点出人意料,先看效果~
第 1 局
题目:设计一个简洁的个人博客首页,包含博主简介、最新文章列表和一个简单的导航栏。
速度:in ➡️ out,Claude 平均在 20s 左右,preview 平均 1-2 分钟 效果:主观看,Claude 略胜一筹,至少对 React 库更熟悉,代码版本也了解的更多 美感:指定了 Shadcn 这个UI库,所以可能出来的风格都差不多,这里其实只放了部分的效果,还是Claude略胜一筹
Claude
o1-mini
o1-preview
耗时:76s
思考:59s
备注:为了大家更了解思考了啥,我贴一块思考内容,后面就不放了,有兴趣可以去飞书看
content: > 正在思考
填写指令我正在生成任务代码,确保组件适应预览区域尺寸1703px宽、1071px高。我正在使用TSX代码,保持代码简洁明了,满足 要求。
构建个人博客首页我正在生成一个简单的个人博客主页代码,包含博主介绍、最新文章列表和一个简单的导航栏。页面尺寸受限在1703px宽度和1071px高度内,不会超出或产生滚动条。
制定代码规范我正在确保所有JSX代码都使用例子中的组件,且是单个静态文件,所有数据直接内联,不接受外部数据。
创建主页我正在写一个简单的博客主页代码,确保页面尺寸适合,避免滚动条出现。
整理思路和资源我正在梳理博客首页的布局需求,包括导航栏、博客介绍和最新文章列表。现有的基础UI和布局组件可以有效地实现这些功能。
引入必要组件我正在集成react和一些UI组件,如navigation-menu和button,设置博客主页的标题和描述。这个过程涉及到快速集成和配置。
展示新功能浏览一些文章,覆盖主题包括JavaScript的ES2025特性、Tailwind CSS的样式设计和TypeScript的介绍,每篇文章都通过卡片形式呈现。
更新代码要求我看到需要将根 div 设置为特定的宽度和高度,以确保代码不会超出指定的尺寸。这样可以避免滚动条的出现。
设计博客主页使用React组件创建博客主页,包含导航菜单、头像、作者简介和最新文章的展示。
深入了解 JavaScript这是关于 JavaScript 2025 引入的新功能的文章探讨,深入探讨了这些新特性如何提升代码质量。了解这些新功能的关 键点和它们的实际应用。
理解代码结构我在读取完整代码后,发现 footer 是闭合且结束的,结构是完整的。
搭建博客页面我正在开发一个博客主页,包括导航菜单、简介、最新文章卡片等元素,使用React和Tailwind CSS。
探讨技术发展我正在细读关于拖拽更新和状态更新的文章,了解它们的工作原理和应用。这让我对现代前端技术有了更深的理解。
构建主页框架正在编写博客主页,包含导航栏、个人信息和文章列表。使用React组件构建,确保页面的直观和友好。
介绍新技术我正在探讨如何有效地使用Hooks,同时介绍JavaScript ES2025的新功能、Tailwind CSS的响应式设计和TypeScript的强类型优势。每个主题都伴有“阅读更多”按钮,供进一步了解。
第 2 局
题目:创建一个待办事项应用的界面,允许用户添加、删除和标记完成的任务。
Claude
o1-mini:
o1-preview:
耗时:85s
第 3 局
题目:设计一个天气应用的主页,显示当前天气、未来几天预报,并根据天气状况改变背景。
Claude:
o1-mini:
o1-preview:
耗时:25s
第 4 局
题目:实现一个在线食谱网站的搜索结果页面,包含筛选器和分页功能。
Claude
o1-mini
o1-preview:
耗时:38s 思考:15s
第 5 局
题目:创建一个电子商务网站的产品详情页,包含图片轮播、产品描述、用户评价和"加入购物车"功能。
Claude
o1-mini
o1-preview
耗时:121s 思考:63s
第 6 局
题目:设计一个音乐流媒体服务的播放界面,包含播放控制、歌词显示和播放列表管理。
Claude
o1-mini:
第 1 次:失败,Token 超了
模型返回内容:> 正在思考
思考 6 秒
第 2 次:失败,代码错误 第 3 次:成功
o1-preview
耗时:145 思考:41
第 7 局
题目:实现一个社交媒体平台的个人资料页面,支持自定义背景、头像上传和动态展示。
Claude
o1-mini
o1-preview
耗时:38 思考:14
第 8 局
题目:创建一个在线课程平台的学习界面,包含视频播放器、课程大纲、笔记功能和进度跟踪。
Claude
o1-mini
第 1 次:失败,原因:库引用出错 第 2 次
o1-preview
耗时:72s 思考:41s
第 9 局
题目:设计一个协作型项目管理工具的仪表板,包含任务看板、团队成员状态、项目进度图表和实时通知。
Claude
o1-mini:
第 1 次:失败,原因:库引用出错 第 2 次:成功
o1-preview
第 1 次:失败,没有思考,直出代码,报错了 第 2 次:成功,思考了
耗时:82s 思考:57
第 10 局
题目:实现一个复杂的数据可视化平台的主界面,支持多种图表类型、实时数据更新、自定义仪表板和数据钻取功能。
Claude
第 1 次:失败,token超了(4096)
o1-mini:
第 1 次:失败,原因:库引用出错
模型返回内容:> 正在思考
生成React JSX文件 我正在创建一个高保真度的React JSX文件,使用Tailwind CSS和指定的UI组件进行数据可视化。这将支持多个图表类型、实时数据更新和自定义仪表板功能。实时数据更新将通过占位符来模拟。整理界面布局 我正绘制布局,包含侧边栏、头部和主页内容区,用多个图表和控制组件模拟仪表板的外观。...
思考 几秒
第 2 次:失败,原因:Charts 库引用出错(用的 shadcn) 第 3 次:失败,原因:Charts 库引用出错(用的 shadcn)
o1-preview
第 1 次:失败,原因:库引用出错 第 2 次:失败,原因:看下面自查 第 3 次:成功,思考了64s
结论
前端这块,OpenAI思考完的效果都没有追上Claude
速度
Claude 平均耗时大约 20 秒 完成任务。 OpenAI 的 o1-mini 和 o1-preview 模型通常需要 1-2 分钟 来生成代码,速度明显慢于 Claude。
准确率(一次成功)
Claude: 9/10 场比赛一次成功,说明其在生成前端代码时表现更为稳定且高效。 OpenAI 的两个模型,尤其是 o1-preview,虽然不断尝试调整代码逻辑,但一次成功的次数明显少于 Claude。
代码熟练度与效果
Claude 对于 React 及其库的熟悉度更高,特别是在处理复杂组件和动态页面布局方面表现出色。OpenAI 的模型虽然可以通过思考和调整来生成代码,但其过程显得重复冗余,特别是在需要快速生成代码时显得效率低下。 在美感和功能性上,由于指定使用相同的 UI 库(Shadcn),生成的界面在风格上差别不大,但 Claude 依旧凭借对布局和响应式设计的更好把控,略胜一筹。
思考
最后在观察o1思考过程的时候发现,OpenAI o1 似乎只是把 Planning 揉进了接口调用里,说简单点,就是用户的query发出之后,用工程方式去不断自己调自己的模型(比如4o),然后不断纠正。AutoGPT即视感。我们回头看第一局设计博客页面的时候o1思考的具体内容(为了直观,我把title单独拎出来了),深红是匪夷所思的思考内容,粉色是重复累赘思考的内容,这样再来看是不是就很熟悉了?重复,累赘,多消耗点tokens。看是不是就很熟悉了?重复,累赘,多消耗点tokens。
本文链接:https://lechangxia.cc/gpt4/882.html
ChatGPT对金融行影响人工智能chatgpt4.0写作文入口chatgpt4.0怎么下载使用depay 充值gpt被拒绝chatgpt注册后哪个国家可以用chatgpt 安卓注册详细流程chatgpt 注册后永久使用吗gpt后期怎么去充值gpt升级付费区别gpt4付费使用