写点什么

chatgpt-o1 能完成初级的前端开发任务吗?

  • 2025-01-26
    北京
  • 本文字数:2775 字

    阅读完需:约 9 分钟

大小:630.96K时长:03:35
chatgpt-o1 能完成初级的前端开发任务吗?

当我刚开始成为一名初级软件工程师时(大约 14 年前),我记得自己做的一个前端项目需要用纯色部分填充一朵“云”的 SVG,做出一个漂亮的进度条。

 

作为一名刚入职的初级开发人员,彼时我急着证明自己的技能水平。我记得自己疯狂地在谷歌上搜索解决方案,但只找到了填充整个 SVG 对象的示例。在针对这个问题调整了一段时间后,我想出了一个巧妙的解决方案,关键是操纵一个渐变停止点。

这个技巧是使用有两个停止点的线性渐变,一个是透明色,另一个是纯色。通过操纵这些停止点的偏移量,渐变分界线会随着数据加载而不断移动,并逐渐用颜色填充那朵云。


由于当时网上没有这方面的资源,我记得自己觉得这是个非常巧妙的技巧,并想写一篇关于它的博客文章,结果我直到现在才开始做这件事情。

我的解决方案

这是我当时使用的技巧的现代版示例。

const CloudFillHuman: React.FC<CloudFillProps> = ({ percentage }) => {  /*    calculate the offset of the gradient stops based on the passed    percentage and render the cloud filled with the gradient   */  const clampedPercentage = Math.max(0, Math.min(percentage, 100));  const offset = 100 - clampedPercentage;  return (    <svg       xmlns="http://www.w3.org/2000/svg"       width="200"       height="200"       strokeWidth={0.5}       viewBox="0 0 24 24"       stroke="#fff"    >      /* Define the Gradient with two stops */      <defs>        <linearGradient id="cloud-gradient" x1="0%" y1="0%" x2="0%" y2="100%">          <stop offset={`${offset}%`} style={{stopColor: "#ffffff00", stopOpacity: 0}} />          <stop offset={`${offset}%`} style={{stopColor: "#5cc6fe", stopOpacity: 1}} />        </linearGradient>      </defs>      /* Define the Shape to be filled */      <path         fill="url(#cloud-gradient)"         strokeLinecap="round"         strokeLinejoin="round"         d="M 2.25 15a4.5 4.5 0 0 0 4.5 4.5           H 18a3.75 3.75 0 0 0 1.332-7.257            3 3 0 0 0-3.758-3.848 5.25 5.25            0 0 0-10.233 2.33 A 4.502 4.502            0 0 0 2.25 15Z"      />    </svg>  )};

复制代码

考虑到 LLM 模型已经训练过大量在线数据,加上我第一次解决这个问题后已经过去了这么久的时间,我很好奇 ChatGPT-o1 今天会如何解决这个问题。所以我决定测试一下。

提示

这是我用来测试 ChatGPT-o1 的提示。公平地说,我给了它非常明确的指示,我希望我当时的老板也能这样做就好了。

 

我有一个云形状的 SVG,我希望你编写一个 typescript 函数,以 0 到 100 之间的整数作为输入,并用纯色部分填充云。例如,如果输入值为 50,我希望一半的云填充蓝色,另一半是透明的。

 

SVG 形状如下……

 

I have an SVG in the shape of a cloud, I want you to write a typescript function that takes an integer number between 0 and 100 as input and partially fill the cloud with a solid color. For example, if the input value is 50, I expect half the cloud to be filled with the color blue and the other half to be transparent.

 

here is the SVG shape ...

 

O1 思考了 30 秒,然后提供了以下解决方案

const CloudFill: React.FC<CloudWithFillProps> = ({ percentage }) => {  // Ensure percentage is within 0 to 100  const clampedPercentage = Math.max(0, Math.min(percentage, 100));  const yPosition = (24 * (100 - clampedPercentage)) / 100; // Calculate Y position based on percentage  // Generate a unique ID for the clip path to avoid ID conflicts if multiple clouds are rendered  const clipPathId = React.useMemo(() => `clip-${Math.random().toString(36).substr(2, 9)}`, []);  return (    <svg      xmlns="http://www.w3.org/2000/svg"      viewBox="0 0 24 24"      strokeWidth={0.5}      stroke="currentColor"      width={200}      height={200}    >      <defs>        <clipPath id={clipPathId}>          {/* Rectangle that determines the filled area based on the percentage */}          <rect x="0" ={yPosition} width="24" height={24 - yPosition} />        </clipPath>      </defs>      {/* Filled cloud shape clipped to the percentage */}      <path        fill="#5cc6fe"        d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75           3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848           5.25 5.25 0 0 0-10.233           2.33A4.502 4.502 0 0 0 2.25 15Z"        clipPath={`url(#${clipPathId})`}      />      {/* Cloud outline */}      <path        fill="none"        strokeLinecap="round"        strokeLinejoin="round"        d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75           3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848           5.25 5.25 0 0 0-10.233           2.33A4.502 4.502 0 0 0 2.25 15Z"      />    </svg>  );};

复制代码

GPT o1 使用了一个 ClipPath(https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath),在云的轮廓后面渲染了一朵填充颜色云的一部分。

 

老实说,这个解决方案非常好,它对提示的理解程度令我印象深刻。

 

现在我们来对这两个解决方案做做对比测试。

对比解决方案

乍一看,这两个解决方案看起来非常像。LLM 给出的解决方案似乎符合预期。但我们来看看当我们操纵百分比的值时它们的表现如何。

 

可以看到,LLM 解决方案直到滑块超过 20% 才开始填充形状,并且当百分比为 80% 或以上时,它就已经填充了整个形状。

结论

那么这给我们留下了什么结论?LLM 是否准备好了代替人类完成中等复杂度的前端任务?

 

虽然这项技术无疑是很有用的,但 LLM 是否准备好了在没有任何人工监督的情况下接管工程任务呢?答案仍然是斩钉截铁的“否”,尽管这并不意味着一些公司不会尝试走这条路。

 

很难从单个例子​​中推断出太多信息,但有一点是肯定的,软件工程一直看重准确度和精确性,就像它看重创造力和创新一样。

 

虽然 LLM 擅长生成内容、回答问题和辅助开发人员,但要让它们自己编写出一致、无错误的代码还需要该领域取得重大突破。

 

也许让多个代理对同一代码进行迭代可能是朝着正确方向迈出的一步? 然而,我相信在可预见的未来这依旧会是一个挑战,毕竟,LLM 是在数十亿行由人类编写的“不完美”代码上进行训练的,而我们自己依旧没有解决这个问题。

 

原文链接:https://www.charbzg.com/blog/gpt-frontend-task

2025-01-26 11:048682

评论

发布
暂无评论

瞰源 | 当我们谈论开源时,我们在谈论什么?

OpenTEKr

狄安瞰源

quarkus微服务+istio+k8s云原生devops持续集成演示( Tekton(ci/cd) + quarkus + harbor + Nexus)

weir威尔

Kubernetes istio 持续集成 Tekton Quarkus

给弟弟的信第4封|你需要尽早知道的理财知识

大菠萝

28天写作

大厂算法面试之leetcode精讲22.字典树

全栈潇晨

LeetCode 算法面试

异构组网如何解决共享资源冲突?|HDC2021技术分论坛

HarmonyOS开发者

HarmonyOS

Java 开发中常见的 10 个错误

编程江湖

JAVA开发 java编程

Java 动态代理之 InvocationHandler 最简单的入门教程

汪子熙

Java 动态代理 28天写作 SAP 12月日更

学习心得 - 架构训练营 - 毕业设计项目

Fm

大厂算法面试之leetcode精讲21.树

全栈潇晨

算法 LeetCode

如何查看Java进程和线程

李子捌

28天写作 JAV A 12月日更

华为AppCube入选Forrester《中国低代码平台市场分析报告》

华为云开发者联盟

华为 低代码 AppCube 应用魔方 Forrester

react源码解析15.scheduler&Lane

buchila11

React React Hooks

让设计如语言一般自然

鲸品堂

设计 通信 运营商

Flutter 自定义 ACERaido 单选框 & ACECheckBox 复选框

阿策小和尚

28天写作 内容合集 签约计划第二季 12月日更

分布式系统中,权限设计实践

架构 分布式 权限设计

深度解读|Spark 中 CodeGen 与向量化技术的研究

Kyligence

说了半天跨平台,今儿咱就来跨跨!(上)

为自己带盐

Docker dotnet 28天写作 签约计划第二季 12月日更

Kotlin 初学者教程【Kotlin专题1】

坚果

kotlin 28天写作 12月日更

Git进阶(九):Git 命令实现提交指定文件

No Silver Bullet

git 12月日更

TDS构建数据湖、数据仓库应用介绍

星环科技

陈齐彦 Roby:开源也许是中国未来IT行业最重要的统战对象 I OpenTEKr 大话开源 Vol.1

OpenTEKr

大话开源

Linux系统学习《Linux一学就会》Linux文件系统结构

侠盗安全

Linux linux运维 运维工程师 云计算架构师

node服务端渲染

编程江湖

node.js 大前端

从源码分析快速实现对新开源软件的检测

华为云开发者联盟

二进制 开源软件 二进制SCA 特征

java开发SSM框架整合之MyBatis动态SQL

@零度

mybatis ssm JAVA开发

架构训练营 模块五 作业

dog_brother

「架构实战营」

网络协议之:还在用HTTP代理?弱爆了!快试试SOCKS5

程序那些事

网络协议 HTTP 程序那些事 12月日更 SOCKS5

python入门难?十之八九是因为python 协程吧!

梦想橡皮擦

12月日更

react源码解析16.concurrent模式

buchila11

React React Hooks

爱奇艺基础数据平台演进

爱奇艺技术产品团队

全面适配DPDK 20.11,DPVS发布v1.9.0版本

爱奇艺技术产品团队

chatgpt-o1 能完成初级的前端开发任务吗?_生成式 AI_Charbel Ghossain_InfoQ精选文章