识图生成代码:通义千问vsGPt4o,有点小崩

今日对比一下通义千问和GPt4o,在通过识别图片然后去生成前端代码
在当今ai的时代,通过ai去生成页面的代码可以很大的提高我们的开发效率

下面是我们要求的生成的图片截图,这是掘金的榜单

Snipaste_2024-06-29_10-52-39.png

效果对比

首先我们使用通义千问,让他去帮我们生成一下页面代码

image.png

通义千问出来的代码结果为

image.png

可以看到这个效果还是有点差强人意的

接下来用同样的问题去问GPT4o,看看他的效果如何

image.png

GPT4o的代码运行结果为

image.png

效果对比小结

可以看到,通义千问生成的代码效果上可以说差距是巨大的,基本上就是无法使用的级别

GPT4o在效果上可以说基本完成了80%以上,在小图标识别上,以及颜色的识别差一点

代码对比

  • 首先在语义化标签上,通义千问并没有准确的使用

  • 通义千问代码

<div class="article-list"><div class="article-item" data-rank="1">后端同事下班早,前端排序我...</div><div class="article-item" data-rank="2">差生文具多系列之 最好看...</div><div class="article-item" data-rank="3">一种适合H5屏幕适配方案</div><div class="article-item" data-rank="4">软考架构师上岸,我用了这些...</div><div class="article-item" data-rank="5">前端 Vue3 数据可视化图表技...</div><a href="#">查看更多&gt;</a></div>

代码使用了 <div> 标签来构建整个文章列表

每个文章项目也是通过 <div> 标签,并使用 data-rank 属性来表示排名

最后通过 <a> 标签提供查看更多的链接

  • GPT4o代码
<section class="article-list"><header class="article-list__header"><h1 class="article-list__title">文章榜</h1><button class="article-list__refresh-button">换一换</button></header><ol class="article-list__items"><li class="article-list__item article-list__item--top"><span class="article-list__item-number">1</span><span class="article-list__item-title">后端同事下班早,前端排序我来搞定!</span></li><li class="article-list__item"><span class="article-list__item-number">2</span><span class="article-list__item-title">「差生文具多系列之」最好看的办公用品推荐</span></li><li class="article-list__item"><span class="article-list__item-number">3</span><span class="article-list__item-title">一种适合H5屏幕适配方案</span></li><li class="article-list__item"><span class="article-list__item-number">4</span><span class="article-list__item-title">软考架构师上岸,我用了这些资料</span></li><li class="article-list__item"><span class="article-list__item-number">5</span><span class="article-list__item-title">前端 Vue3 数据可视化图表技术</span></li></ol><footer class="article-list__footer"><a class="article-list__more-link" href="#">查看更多</a></footer></section>

相比之下,GPT4o生成的代码,语义化就做得比较好

使用 <section> 标签来构建文章列表

<header> 包含标题和刷新按钮,<ol> 有序列表来排列文章项目

每个项目用 <li> 标签,并使用类名进行样式控制,最后通过 <footer> 包含查看更多的链接

代码对比小结

整体对图片的分析能力可以说还是有比较大的差距

在代码的生成能力上,通义千问也同样有很大的进步空间

GPT4o复杂页面的生成能力测试

接下来我们就继续给GPT4o上点更加复杂一些的页面,测试一下其能力

image.png

这是一个典型的三栏式布局

接下来我们就将他交给GPT4o了

你问我为什么不给通义千问也测试一下?通义千问:家人们,对抗路可能有点小崩了

开个玩笑啦,通义千问其实已经是很强的了,只是大模型之间的功能是有所不同的,他在生成代码这个方面相对来说确实会弱一些,GPT4o在这方面会强一些,但是通义千问其他方面不可否认的,他确实是一线水准的

接下来我们看看GPT4o能生成出个什么水准吧,请看效果

image.png

整体的效果还是相对来说可以的

我们继续来分析一下他代码的页面布局吧

整体布局为一个aside标签和一个main标签,按理来说应该是两个aside标签和一个main标签的,这里还是欠缺了点

image.png

aside内部使用了nav标签,以及通过ulli的方式构建了左栏,水准还是在的

image.png

接下来查看main内部结构

里面有一个headersection,在section里面放入了articleaside

页面布局还是相对来说有点没有达到预期,不过经过修改还是可以使用的,整体也将页面60%以上的工作量完成了

image.png

通过将任务再细分,相信他一定能够完成的更加完美的,通过ai去完成任务还是可以提高很多效率的

总结

本文对比了通义千问和GPT4o在代码生成方面的差异性

ai的发展正不断地提高程序员的开发效率,相信在不久的将来,ai协助开发将全面进入白热化

对于普通的页面生成,ai对其的准确性将不断提高,程序员能够更加快速的进行页面的开发

可以更好的专注于业务逻辑,而不是在繁琐的页面开发中焦头烂额

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/37723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++11中引入的auto关键字和范围for循环(range-based for loop)。

C11中引入的auto关键字和范围for循环&#xff08;range-based for loop&#xff09;是两项重要的新特性&#xff0c;它们旨在提高代码的可读性和简洁性&#xff0c;同时减少编写错误。 auto关键字 auto关键字在C11中被赋予了新的含义&#xff0c;用于自动类型推断。在C11之前…

Django 自定义过滤器

1&#xff0c;编写自定义过滤器并注册 创建目录 Test/app5/templatetags 分别创建文件 Test/app5/templatetags/__init__.py Test/app5/templatetags/myfilter.py 添加过滤器脚本 Test/app5/templatetags/myfilter.py from django import template register template.…

Python功能制作之使用streamlit做一个简单的WebUI

使用Streamlit创建WebUI 1. 什么是Streamlit Streamlit 是一个开源的Python库&#xff0c;用于快速创建美观的Web应用。 它适合数据科学家和机器学习工程师&#xff0c;因为它能够以最小的代码量将数据应用程序带到浏览器中。通过简单的Python脚本&#xff0c;可以创建交互式…

c++类和对象(三)日期类

类和对象 一.拷贝构造函数定义二.拷贝构造函数特征三.const成员函数权限权限的缩小权限的缩放大 四.隐式类型转换 一.拷贝构造函数定义 拷贝构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存 在的类类型对象…

kettle创建资源库无法登录问题

问题&#xff1a;You dont seem to be getting a connection to the server. Please check the path youre using and make sure the server is up and running. 1. 删除资源库 2.删除数据库中R_开头的表 3.重新创建资源库连接&#xff0c;查看是否成功产生表 4.创建成功&…

如何在离线环境下安装Docker社区版

目录 1. 引言 2. 准备工作 3. 下载Docker安装包 4. 下载Docker的依赖包 5. 将安装包传输到目标系统 6. 安装Docker社区版 7. 配置Docker 8. 解决常见问题 9. 维护和更新Docker 10. 创建离线安装脚本 11. 使用离线镜像 12. 高级配置与优化 13. 安全性考虑 14. 总结…

005-GeoGebra基础篇-GeoGebra的矩形

上一篇关于点的介绍已经触及到了诸多GeoGebra的基础操作&#xff0c;这一篇我们根据画矩形&#xff0c;继续探索GeoGebra。 目录 一、最粗暴的方式绘制矩形1. 使用“Polygon”工具直接绘制2. 注意看代数列表3. 关于矩形和线段 二、用点和线段绘制矩形&#xff08;1&#xff09;…

52、基于K 均值聚类实现基于颜色的分割(matlab)

1、K 均值聚类实现基于颜色的分割原理及流程 K 均值聚类是一种常用的聚类算法&#xff0c;通过将数据点分配到 K 个簇中&#xff0c;每个簇的中心代表簇的平均值来实现聚类的目的。 基于颜色的分割的原理是利用像素的颜色信息来对图像进行分割。首先需要将图像的每个像素点表…

计算机网络微课堂(湖科大教书匠)TCP部分

计算机网络微课堂&#xff08;湖科大教书匠&#xff09;TCP部分 【计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;】 TCP的流量控制 一般来说&#xff0c;我们希望数据传输得更快一些。但如果发送方把数据发送得过快&#xff0c;接收方就可能来不及接收&#…

FFmpeg 剪切(Seeking)视频后音画不同步问题分析

问题 需求:最近,需要剪切一段mp4格式的视频,要求从第30s位置开始剪切,持续30s的视频段。于是乎,拿出音视频领域最强工具之一,FFmpeg神器,输入命令行:ffmpeg -i input.mp4 -ss 00:00:30.0 -codec copy -t 30 output.mp4播放这段视频output.mp4,问题出现了:前几秒没有画…

Django 表单使用示例:数据格式校验

在本文中,我们将使用 Django 的表单(Forms)功能来创建一个添加角色的页面,并对用户提交的数据进行格式校验。 创建 Django 项目和应用 首先,我们创建一个名为 ​​form_demo​​​ 的 Django 项目和一个名为 ​​app01​​ 的应用: django-admin startproject form_de…

FAST SPLIT PARTITION 快速分割分区

How to Perform a FAST SPLIT PARTITION Using ALTER TABLE? (Doc ID 1268714.1) 快速分割分区&#xff0c;就是如果最大的分区全部满足新split分区的条件&#xff0c;直接把最大的这个改名&#xff0c;再新加一个max分区出来。这样可以避免partition分区index的unsable&…

Nginx配置referer报错大坑:unknown directive “valid_referers“

错误&#xff1a; nginx: [emerg] unknown directive "if($invalid_referer)" in /usr/local/nginx/conf/nginx.conf:27 代码&#xff1a; 设置有效的refer值 none&#xff1a;检测地址没有refer&#xff0c;则有效server_name&#xff1a;检测主机地址&#xf…

KV260视觉AI套件--开箱报告

目录 1. 简介 2. 与 Zynq 的渊源 3. 官方的入门步骤 4. 总结 1. 简介 传统的ARMFPGA或DSPFPGA控制方案在软件、逻辑、硬件以及系统工程的协同调试中&#xff0c;往往需要团队成员之间严格按照预定计划和接口规范进行分工合作&#xff0c;这不仅增加了测试过程的复杂性&…

求一个集合里面的所有子集 使用c++

#include <iostream> // 包含输入输出流头文件 #include <vector> // 包含vector容器头文件 #include <cmath> // 包含数学函数头文件&#xff0c;用于pow函数using namespace std; // 使用std命名空间&#xff0c;避免每次都写std::// 定义生成幂集…

《概率论与数理统计》期末复习笔记_上

目录 第1章 随机事件与概率 1.1 随机事件 1.2 事件的关系与运算 1.3 概率的定义与性质 1.4 古典概型_重点 1.5 几何概型 1.6 条件概率与乘法公式 1.7 全概率公式与贝叶斯公式_重点 1.8 事件的独立性_重点 1.9 伯努利概型_重难点 第2章 随机变量及其分布 2.1 随机变…

实验2 色彩模式转换

1. 实验目的 ①了解常用的色彩模式&#xff0c;理解色彩模式转换原理&#xff1b; ②掌握Photoshop中常用的颜色管理工具和色彩模式转换方法&#xff1b; ③掌握使用Matlab/PythonOpenCV编程实现色彩模式转换的方法。 2. 实验内容 ①使用Photoshop中的颜色管理工具&#xff…

Dubbo 简单入门

Dubbo 简单入门 Dubbo 是一个高性能的分布式服务框架&#xff0c;旨在解决微服务架构下的 RPC&#xff08;远程过程调用&#xff09;问题。其核心原理包括服务注册与发现、通信协议、负载均衡、容错机制等。以下是对这些核心原理的详细讲解&#xff1a; 1. 服务注册与发现 服…

Kafka~消息系列问题解决:消费顺序问题解决、消息丢失问题优化(不能保证100%)

消息消费顺序问题 使用消息队列的过程中经常有业务场景需要严格保证消息的消费顺序&#xff0c;比如我们同时发了 2 个消息&#xff0c;这 2 个消息对应的操作分别对应的数据库操作是&#xff1a; 用户等级升级。根据用户等级下的订单价格 假如这两条消息的消费顺序不一样造…

第0章_项目方案介绍

文章目录 第0章 项目方案介绍0.1 功能介绍0.2 硬件方案0.3 软件方案0.3.1 上位机方案0.3.2 **中控方案**0.3.3 **传感器方案**0.3.4 **技术难点** 第0章 项目方案介绍 0.1 功能介绍 本课程来自一个真实项目&#xff1a;多个气体传感器的管理。由于气体传感器比较昂贵&#xf…