GPT-4o：来做一名合格的 AI 切图仔

BONE
645 阅读6分钟

前言

在人工智能技术迅猛发展的时代，OpenAI的模型家族以其卓越的性能和广泛的应用场景，成为了行业中的佼佼者，从 gpt-3.5-turbo 到 gpt-4 再到 gpt-4o 的一个更新迭代，大模型的能力也越来越全面；今天我们就用 gpt-4o 来感受一下AI在前端方面的强大表现。

OpenAI 模型

OpenAI 的 AIGC（AI生成内容）模型代表了当前最先进的人工智能内容生成技术，涵盖了从文本到多模态（文本、图片、音频、视频） 的广泛应用。这些模型在自然语言处理、图像识别和生成、音频分析以及视频内容生成等多个领域表现出色。以下是对 OpenAI 的模型介绍：

gpt-3.5-turbo

gpt-3.5-turbo 是OpenAI推出的强大文本生成模型之一，主要用于完成文本任务。其主要优势在于成本低，适用于大多数日常任务，如自动回复、内容生成和简单的语言理解任务。

  • 文本模型：专注于文本生成和处理。

  • 应用场景：对话生成、文本补全、客服自动化等。

  • 性价比：在成本和性能之间达到了良好的平衡，是企业大规模部署的首选。

gpt-4

gpt-4 是gpt-3.5-turbo的升级版，具有更强的语言理解和生成能力。尽管其成本较高，但在复杂任务中表现出色，如深度文本分析、高级对话生成和复杂问题求解。

  • 文本模型：具备更强的自然语言处理能力。

  • 应用场景：复杂的文本生成、分析和推理任务。

  • 性能：在应对复杂任务时，gpt-4的表现远超gpt-3.5-turbo。

gpt-4o

gpt-4o 是OpenAI最新推出的全能型模型，支持多模态处理，即同时处理文本、图片、音频和视频。这一特性使得gpt-4o能够在更广泛的应用场景中展现出非凡的能力，尤其是在需要多模态理解的任务中。

  • 多模态模型：能够处理和生成文本、图片、音频和视频。

  • 应用场景：从简单的文本处理到复杂的图像分析、音频理解和视频生成，gpt-4o都能胜任。

  • 优势：在图像理解、语义化执行和高精度任务中表现优异。

AI 切图

在网页开发领域，切图是一个关键的任务，尤其是在需要将设计稿准确转换为代码时。今天我们就用 AI 大模型来完成切图的任务；

image.png

我们要实现如上图的页面效果，用 AI 大模型怎么去完成这个页面的开发工作呢？

gpt-4o 实现

我们可以给 gpt-4o 提供图片，以及添加上我们的需求，如HTML5语义化标签，BEM国际命名规范等；

image.png

来看看 gpt-4o 生成的代码；

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章榜</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <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--1">
                <span class="article-list__rank">1</span>
                <span class="article-list__title">我开源了一个支持自动生成 co...</span>
            </li>
            <li class="article-list__item article-list__item--2">
                <span class="article-list__rank">2</span>
                <span class="article-list__title">老板：给你20天，写一个可拖...</span>
            </li>
            <li class="article-list__item article-list__item--3">
                <span class="article-list__rank">3</span>
                <span class="article-list__title">只会Vue的我，一入职就让用R...</span>
            </li>
            <li class="article-list__item article-list__item--4">
                <span class="article-list__rank">4</span>
                <span class="article-list__title">改进菜单栏动态展示样式，我...</span>
            </li>
            <li class="article-list__item article-list__item--5">
                <span class="article-list__rank">5</span>
                <span class="article-list__title">最后一次，彻底搞懂kotlin...</span>
            </li>
        </ol>
        <footer class="article-list__footer">
            <a href="#" class="article-list__more-link">查看更多</a>
        </footer>
    </section>
</body>
</html>

CSS：

body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.article-list {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 300px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.article-list__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.article-list__title {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.article-list__refresh-button {
    background-color: #f0f0f0;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

.article-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-list__item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.article-list__item:last-child {
    border-bottom: none;
}

.article-list__rank {
    font-size: 16px;
    font-weight: bold;
    color: #e74c3c;
    margin-right: 10px;
}

.article-list__title {
    font-size: 14px;
    color: #555;
}

.article-list__footer {
    text-align: center;
    padding: 10px 15px;
    border-top: 1px solid #eee;
}

.article-list__more-link {
    text-decoration: none;
    font-size: 14px;
    color: #3498db;
    cursor: pointer;
}

效果如下图：

image.png

可以看到 gpt-4o 大模型实现的页面效果已经达到了70%的相似度，这就省去了我们大部分的开发工作。

通义千问大模型 实现

我们再用通义千问大模型去实现同样的页面，看看通义千问的实现效果如何；

image.png

HTML：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文章榜</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section class="article-list">
        <h2 class="article-list__title">文章榜</h2>
        <ul class="article-list__items">
            <li class="article-list__item article-list__item--rank-1">
                我开源了一个支持自动生成 co...
            </li>
            <li class="article-list__item article-list__item--rank-2">
                老板：给你20天，写一个可拖...
            </li>
            <li class="article-list__item article-list__item--rank-3">
                只会Vue的我，一入职就让用R...
            </li>
            <li class="article-list__item article-list__item--rank-4">
                改进菜单栏动态展示样式，我...
            </li>
            <li class="article-list__item article-list__item--rank-5">
                「最后一次，彻底搞懂kotlin...
            </li>
        </ul>
        <button class="article-list__more-btn">查看更多&gt;</button>
    </section>
</body>
</html>

CSS：

/* styles.css */
.article-list {
    display: flex;
    flex-direction: column;
}

.article-list__title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.article-list__items {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.article-list__item {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1rem;
}

.article-list__item::before {
    content: attr(data-rank);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background-color: #f0f0f0;
    border-radius: 50%;
    text-align: center;
    line-height: 2rem;
    color: #666;
    font-weight: bold;
}

.article-list__item--rank-1::before { background-color: #ff9a70; }
.article-list__item--rank-2::before { background-color: #d6e1f2; }
.article-list__item--rank-3::before { background-color: #cfe2f3; }
.article-list__item--rank-4::before { background-color: #b8daff; }
.article-list__item--rank-5::before { background-color: #ccbe9f; }

.article-list__more-btn {
    display: block;
    width: 100%;
    max-width: 20rem;
    margin-top: auto;
}

实现效果如下：

image.png

可以从页面效果看出， gpt-4o 远超其他模型如通义千问。

小结

OpenAI的模型家族，以gpt-4o为代表，正在引领AI发展的新潮流。特别是在网页切图任务中，gpt-4o 彻底超越了传统的AI模型，如通义千问。gpt-4o 在切图时，能够自动生成符合SEO最佳实践的代码，如使用 article 标签来标记高质量的内容，使用 section 标签来分割不同的功能模块。这种语义化的布局不仅提升了网页的可读性，还提高了搜索引擎的抓取效率，从而有助于SEO优化。

在人工智能时代，拥有像gpt-4o这样的工具，不仅能提高工作效率，还能保证输出质量，从而在激烈的市场竞争中占据优势。未来，AI驱动的编程和设计将成为行业标准，掌握这些工具和方法，将是每个开发者和设计师成功的关键。

avatar
文章
阅读
粉丝