识图生成代码：通义千问vsGPt4o，有点小崩

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

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

效果对比

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

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

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

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

GPT4o的代码运行结果为

效果对比小结

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

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>