同学看到震惊！！——我用gpt-4o写出了稀土掘金

yunyi
254 阅读6分钟

在最近，随着gpt-4o的爆火，以及其各种功能的升级，我也尝试着将其与国内的大模型进行性能对比。

gpt-4o的优势

  1. 多模态能力增强：GPT-4o原生支持对音频和视频文件的理解与处理，不仅限于文本数据，这使得它能在自动字幕生成、多媒体数据分析等应用场景中发挥重要作用。
  2. 响应速度与实时处理：GPT-4o在响应速度上有显著提升，能够以接近人类对话的速度（例如，232毫秒内对音频输入做出反应）进行交互，大大减少了延迟，提升了用户体验。这对于实时翻译、语音助手等应用至关重要。
  3. 输出质量与准确性：在输出质量方面，GPT-4o在处理复杂逻辑、科学原理或创造性写作时表现更佳，能够提供更详尽、准确的答案，显示出对逻辑悖论和高级语言结构的深入理解，减少了偏见，提高了内容的准确性。
  4. 图像和文本生成：GPT-4o在图片生成能力上有所增强，不仅生成速度更快，而且生成的图片质量整体提升，同时在长文本生成方面也更为高效和连贯，减少了输出中断的情况。
  5. 用户体验与功能：提供了更自然的人机交互体验，增强了记忆功能管理，使得与ChatGPT的交互更为便捷快速。在某些特定任务上，如生成诗词，GPT-4o展现出了更高的文学创造能力。
  6. 性能与成本：性能上的显著提升不仅限于文本处理，还包括语音和视觉处理，同时可能提供了更多灵活的计费选项，比如按任务执行次数计费，有利于控制成本。
  7. 语言处理与多语言支持：GPT-4o在处理上下文关系和多语言支持上更为出色，支持超过50种语言，且在处理语言时能够保留更多的细节，如笑声、歌唱声和情感表达等，使得其应用范围更加广泛。

国内大模型——通义千问

  1. 广泛知识基础：我背后有着庞大而多样的知识库，这使我能够处理各种主题的问题，从科学、技术到文化、艺术等。
  2. 实时更新与学习能力：我能持续学习最新的信息和数据，确保提供的内容是最新和准确的。这种自我更新的能力让我能够适应快速变化的信息环境。
  3. 多语言支持：我支持多种语言，能够帮助来自不同国家和文化背景的用户，促进全球交流。
  4. 个性化交互：通过理解用户的偏好和上下文，我可以提供更加个性化的回答和服务，提升用户体验。
  5. 综合技能：除了文字交流，我还能够辅助进行信息检索、日程管理、提醒服务等多种任务，成为日常生活和工作的得力助手。

用gpt-4o来写掘金

从文章榜入手

image.png

这是gpt-4o的代码

image.png

<!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>


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

通义千问的实现

image.png

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章榜</title>
    <link rel="stylesheet" href="styles2.css">
</head>
<body>
    <div class="container">
        <h1 class="block__title">文章榜</h1>
        <ul class="article-list">
            <li class="article-list__item">
                <span class="article-list__number">1</span>
                我开源了一个支持自动生成 co...
            </li>
            <li class="article-list__item">
                <span class="article-list__number">2</span>
                老板：给你20天，写一个可拖...
            </li>
            <li class="article-list__item">
                <span class="article-list__number">3</span>
                只会Vue的我，一入职就让用R...
            </li>
            <li class="article-list__item">
                <span class="article-list__number">4</span>
                改进菜单栏动态展示样式，我...
            </li>
            <li class="article-list__item">
                <span class="article-list__number">5</span>
                「最后一次，彻底搞懂kotlin...
            </li>
        </ul>
        <button class="view-more">查看更多&gt;</button>
    </div>
</body>
</html>

/* Reset some browser default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

.block__title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.article-list {
    list-style-type: none;
}

.article-list__item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.article-list__number {
    width: 30px;
    height: 30px;
    background-color: #f7f7f7;
    color: #333;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    margin-right: 10px;
}

.view-more {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #f7f7f7;
    color: #333;
    text-align: center;
    cursor: pointer;
}

效果如图 image.png

这里可以看出来，通义千问在许多细节上都不及gpt-4o

  • 从左往右依次是原图/gpt-4o/通义千问 image.png

html代码细节对比

  • 左边是gpt-4o的body，右边是通义千问的body

image.png

  • 1.功能上，左图实现了换一换的功能按钮，右图没有
  • 2.标签上，左图使用了section标签，可以对子标签实现包裹功能，就如上面的html页面中，文章榜和下面的内容有横线分割
  • 3.左图使用了有序列表，右图是无序列表，更加严谨

image.png

  • 查看更多部分左图使用了超链接，右图只使用了button

整个掘金首页

对比图

掘金首页 image.png gpt-4o写的 image.png 通义千问写的

image.png

对比更加直观

结语

通过对比gpt-4o和国产大模型对图片理解和功能实现，gpt-4o展现出了更加优越的分析能力，以及情感理解能力和代码实现能力，在前几天OpenAI公司也宣布关闭中国的API，这无疑是对中国头部程序员的一次打击

image.png 这也不得不让我们意识到，在AI赛道上，我们与国际差的非常大，希望国产大模型可以发光发彩，与国际接轨，不依赖国外的大模型。

avatar
文章
阅读
粉丝