Gemini把截图转html,草图直接变游戏,这波操作太赞了!
myzbx 2025-05-15 19:59 18 浏览
Gemini 2.5 Pro模型更新,在Arena竞技场排名第一,是目前唯一得分冲到1400分以上的大模型:
他们宣称,此模型有了更好的编程表现:
对此我非常感兴趣,从5月6日发布到现在,每天都在测试。
今天这篇文章咱们就来做个测试总结,看看最新升级后的Gemini 2.5 Pro, 编程能力到底如何,我会给出尽可能多的实际案例,争取大家拿到这些案例后,直接将其应用到工作和学习中,从而提升效率。
1、前端截图直转代码
对于很多开发者,通常需要多次调试CSS样式代码 ,才能写出一个能看得过去的前端页面,有时候一次修改,一不小心,前端格式就会全乱掉,可以说是非常耽误时间,确实也很痛苦。
但现在随着大模型能力持续进化,现在再写前端页面时,只需要找一个差不多的已有前端页面,截个图,扔给大模型,就能直接拿到第一版html代码。
比如截图下面页面:
复制到界面中,然后这样发提示词:如何设计这样的一个界面,发我完整代码,这样图+文字一起发送后:
它会默认返回html格式的代码,点击箭头所示的下载按钮:
即可拿到下面html文件:
双击打开,生成的界面如下图所示:
除了个别小图标(如红线所示)没有完全一样外,样式和布局已经非常相似,简直就像克隆出来的。
整个过程,不到1分钟,生成的html代码一次运行通过。
之前我试过其他大模型,有时候能行,有时候布局全乱。所以为了做鲁棒性测试,重复实验了5次,生成的结果基本差不多。
好,咱们继续测试网页截图转代码能力。如下图所示,这是一个网页截图,展示了一个网格布局图,几何关系比上面案例要复杂:
同样我们截图它,然后复制到界面中,同样相似的提示词,这样图+文,多模态回复提问它:
这次思考时间就会长一些,大概26秒钟:
同样的方法,咱们点击下载按钮:
然后双击html文件,得到的布局图,如下所示:
这次没有达到和输入截图一样的布局,原图布局是2,3,2;它生成的布局变为3,3,1,但是每个块的样式却与原图相似。
几何关系理解,当前大模型普遍比较困难,主要因为在于与人类依靠直观的空间想象和物理经验解决几何问题不同,大模型更多依赖对已有数据的模式记忆,缺乏真正的空间感知和推理能力。人类可以通过动手画图、脑中旋转物体等方式建立清晰的空间关系,而大模型往往只能基于模糊的相关性判断,难以准确理解图形细节和复杂的空间变化。因此,在三维理解、投影变化和图形关系推理中,大模型的表现明显不足。实现AGI,道路依然曲折。
2、文字直转小红书卡片
很多时候PPT一堆文字拿着去展示,去汇报,低下的听众就提不起兴趣,觉得索然无味;做自媒体也是,比如去做小红书,我们得生成符合小红书风格的图文笔记。
问下Gemini2.5Pro,如下所示,这样发送提示词:
MCP智能体框架,现在常用的有哪些,发我html知识卡片,符合小红书风格的
大概30秒左右,它会输出完整的html代码文件,咱们一键下载,双击打开,效果如下:
这样一键输出小红书风格的知识卡片,大家可以再在基础上进行更加精细的定制,包括内容、口吻和风格等。对于想做自媒体的,可以多试试这个,比较实用。
3、静态图直接动起来
在纸上画一个草图,或者直接从网上截个图,然后复制到Gemini2.5Pro里,叫这个图动起来,然后输出html代码,双击一键运行。
整个过程,哪怕从没写过代码的朋友,也能玩下去,如果真正能做到这点,那就太酷了。
咱们测试下,如下是一个纸飞机的静态图:
咱们输入到模型里,并按照如下提示词,把截图和文字一起发给它:
如同上面一样会生成html文件,双击一键打开后,我录制一个GIF图,大家可以看看这个效果:
总体效果还可以,但是瑕疵还是出在几何关系学习上,比如飞机的展示角度和我输入的多少有些区别,同时轨迹线也没有完全学习好,没有依附在飞机尾部。
这是我从网上找的一个闪电静态图:
同样方法,图文多模态混合提问它,提示词如下:
根据截图,模拟这个打闪电的过程,完整代码文件发我
双击生成的html,为了让闪电看的更清楚,我截取上图局部区域,相当于是一个放大视图,并录制成如下GIF图:
整个打闪电的效果可以,准确的把周围场景、闪电效果模拟出来了。用于游戏开发、虚拟现实模拟应该够了。
4、草图直转游戏
下面是我在excalidraw工具里,绘制的一幅草图,模拟外星人大战,本人画画水平有限:
然后扔给Gemini2.5Pro,提示词如下:
叫它转为游戏代码,赛博朋克风格,html版本:
大概思考了27秒,开始回复,如下所示:
生成如上游戏效果,哇,不知道该说什么了。看看这些外星人形状都和草图有几分相似,代码逻辑更是一次运行通过。
只有不到1分钟的时间,草图直转赛博风格的游戏,并且运行也非常简单,只需要双击一个html文件即可。
看到这种生成效果,咱们更有必要了解下背后的基本原理。
大概来说,Gemini会会像一个经验丰富的程序员在接到需求后,先理解需求,然后根据类似项目的经验,设计架构,再具体编码实现,并融入特定的美术风格,大概步骤如下:
Gemini通过多模态能力,看明白了给它的草图,识别出了游戏布局,不同角色及形状,这步非常关键:
5、总结一下
Gemini2.5Pro最新升级后,在Arena榜单成为第一名,代码能力进一步迎来提升,本文设计了4类案例测评了其代码能力,具体来说,
1)前端截图直转代码:通过网页截图直接生成 HTML 页面,能够快速还原页面布局,大大提升了前端开发效率。
2)文字直转小红书风格卡片:基于文本内容直接生成符合小红书风格的图文卡片,为自媒体内容创作提供了极大便利。
3)静态图直接动起来:输入静态图片,通过提示词生成动态效果的 HTML 文件,展示了较强的动画生成能力,适合用作交互展示和简单的视觉效果开发。
4)草图直转游戏:将手绘草图直接转换为可运行的 HTML 游戏,并具备指定风格的美术效果,如赛博朋克风,降低了游戏开发门槛。
不过我们也需要看到,目前的大模型都不是完美的,咱们必须要了解一些大模型背后的基本运作原理,最起码要知道它能做什么,不能做什么,这点很重要。
客观的测评不应该一味说它有多好,而完全不考虑它的缺陷,咱们必须要辩证两面看问题,比如在复杂几何关系、空间布局精确还原等场景下,它依然存在理解偏差和推理不足的问题。
好了,今天关于Gemini2.5Pro的测评总结就到这里。
更多免费AI功能 云片AI:https://y-p.cc/?f=tt
本文完,记得随手点个赞、收藏和转发三连,大家感兴趣的可以关注下,后续我再研究点新东西分享给大家~
关注后私信发送:DeepSeek,即可领取完整版资料
相关推荐
- 使用 Siemens Teamcenter Digital Reality Viewer 打造逼真的数字孪生
-
现代产品通常由数百万个部件组成,需要复杂的设计和协作。工业世界在管理复杂性方面面临重大挑战,传统的可视化工具无法渲染这些大型的多CAD组件,从而无法充分利用数字孪生的优势。为了解决这些难题,西门子...
- 如何在JavaScript中实现数字输入框的范围限制?
-
在JavaScript语言中,实现数字输入框的范围限制可以通过多种方式实现,最常见的方式是利用JavaScript的事件监听机制,和通过JavaScript的条件判断语句来实现范围限制。以...
- 2.3.8.J速算24点终极挑战(速算24点题目及答案)
-
各位数学高手、脑力达人,今天给大家带来一道超烧脑的**24点挑战**!**数字:2、3、8、J(J=11规则很简单:**用加减乘除和括号,把四个数字组合成24!每个数字只能用一次!****看起...
- 分布式系统进阶二十一之短链接生成原理
-
前言短链接(ShortURL)是一种通过缩短网页链接长度来方便分享的技术。相比于传统的长链接,短链接更简洁明了,更易于在社交媒体等平台上分享和传播。在本文中,我们将会详细解释短链接的定义、作用及其构...
- 一、SpringBoo中Mybatis多数据源动态切换
-
我们以一个实例来详细说明一下如何在SpringBoot中动态切换MyBatis的数据源。一、需求1、用户可以界面新增数据源相关信息,提交后,保存到数据库2、保存后的数据源需要动态生效,并且可以由用户动...
- 「JS 逆向百例」层层嵌套!某加速商城 RSA 加密
-
声明本文章中所有内容仅供学习交流,敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!逆向目标目标:某加速商城登录接口主页:a...
- Spring Data Jpa 介绍和详细入门案例搭建
-
1.SpringDataJPA的概念在介绍SpringDataJPA的时候,我们首先认识下Hibernate。Hibernate是数据访问解决技术的绝对霸主,使用O/R映射(Object-Re...
- SpringBoot 开发 Web 系统,快速入门指南!
-
01、背景介绍在之前的文章中,我们简单的介绍了SpringBoot项目的创建过程,了解了SpringBoot开箱即用的特性,本篇文章接着上篇的内容继续介绍SpringBoot用于we...
- Nacos3.0重磅来袭!全面拥抱AI,单机及集群模式安装详细教程!
-
之前和大家分享过JDK17的多版本管理及详细安装过程,然后在项目升级完jdk17后又发现之前的注册和配置中心nacos又用不了,原因是之前的nacos1.3版本的,版本太老了,已经无法适配当前新的JD...
- golang语言的魅力精华之玩转通道channel 值得你反复阅读100遍
-
通道用例大全在阅读本文之前,请先阅读通道一文。那篇文章详细地解释了通道类型和通道值,以及各种通道操作的规则细节。一个Go新手程序员可能需要反复多次阅读那篇文章和当前这篇文章来精通Go通道编程。本文...
- 2小时快速搭建一个高可用的IM系统
-
“笔者2019年参加了一次Gopher大会,有幸听探探的架构师分享了他们2019年微服务化的过程。图片来自Pexels本文快速搭建的IM系统也是使用Go语言来快速实现的,这里先和...
- 分库分表以后,如何管理几万张分片表?
-
大家好,我是小富~ShardingSphere实现分库分表,如何管理分布在不同数据库实例中的成千上万张分片表?上边的问题是之前有个小伙伴看了我的分库分表的文章,私下咨询我的,看到他的提问我第一感觉就是...
- Spring Boot JDBC 与 JdbcTemplate 全面指南(万字保姆级教程)
-
一、SpringBootJDBC基础1.1JDBC简介与演进JDBC(JavaDatabaseConnectivity)是Java语言中用来规范客户端程序如何访问数据库的应用程序...
- Flink SQL 知其所以然(六)| 维表 join 的性能优化之路(上)
-
废话不多说,咱们先直接上本文的目录和结论,小伙伴可以先看结论快速了解博主期望本文能给小伙伴们带来什么帮助:背景及应用场景介绍:博主期望你能了解到,flinksql提供了轻松访问外部存储的loo...
- 大数据Hadoop之——Flink Table API 和 SQL(单机Kafka)
-
一、TableAPI和FlinkSQL是什么TableAPI和SQL集成在同一套API中。这套API的核心概念是Table,用作查询的输入和输出,这套API都是批处理和...
- 一周热门
- 最近发表
-
- 使用 Siemens Teamcenter Digital Reality Viewer 打造逼真的数字孪生
- 如何在JavaScript中实现数字输入框的范围限制?
- 2.3.8.J速算24点终极挑战(速算24点题目及答案)
- 分布式系统进阶二十一之短链接生成原理
- 一、SpringBoo中Mybatis多数据源动态切换
- 「JS 逆向百例」层层嵌套!某加速商城 RSA 加密
- Spring Data Jpa 介绍和详细入门案例搭建
- SpringBoot 开发 Web 系统,快速入门指南!
- Nacos3.0重磅来袭!全面拥抱AI,单机及集群模式安装详细教程!
- golang语言的魅力精华之玩转通道channel 值得你反复阅读100遍
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)