人工智能 AIChat | GPT 时代,程序员的生存之道

人工智能 AIChat | GPT 时代,程序员的生存之道

ChatGPT 近期炙手可热,仿佛没有什么问题是它不能解决的。出于对 ChatGPT 的好奇,我们决定探索下它对于前端开发人员来讲,是作为辅助工具多一些,还是主力工具更多一些?

2D 能力测试

我们就挑选一个著名的递归回溯问题——“八皇后”,看看 ChatGPT 的表现如何。

什么是“八皇后”

首先,我们先让它完整介绍下“八皇后“问题。让我们拭目以待 ChatGPT 会给出什么样的答案,沟通如下图所示:

​只是要求介绍一下“八皇后”问题,它竟然连解题思路也如此清晰地一并给出。

编程能力

既然如此,那就来考考编程能力。

先要求它使用 JavaScript 求解“八皇后”问题的所有解。为了方便查看最终效果,又要求它使用 Canvas 将结果绘制出来。具体问答如图所示:

​目不转睛地注视着屏幕中的 ChatGPT ,它一行一行噼里啪啦地给出答案,且代码编写地如此整洁,不禁由衷赞叹。虽然还不确定这些代码能否真的运行起来,得到我们想要的效果,但是从生成代码的结构和逻辑性来看,已经足够令人震撼。

接下来,我们来验证一下代码是否真的可以顺利运行。复制粘贴 ChatGPT 给出的答案,在未更改一行代码的情况下,页面的确运行了。一起看看运行效果:

​看着实现出来的效果,我的内心开始忐忑不安。脑海里疯狂计算着这样一个问题:我需要花费多长时间才能解决以上问题?反正肯定无法像 ChatGPT 这样,不到 30S 就给出结果。

输出所有解

再回过头来看答案,却发现只打印出一个结果,所以它能否将所有的结果都打印出来呢?我们接着提出需求,答案如图所示:

​Unbelievable,竟然真的可以,立即复制粘贴操作,检验运行效果:

​仔细数了下,发现只输出了 16 个解,但是开头提到总共是有 92 个解。通过仔细查阅代码,发现一个小格子被定义为 40 个像素,而整个 Canvas 的大小是 1280 像素,所以这个 Canvas 最多只能画 16 个棋盘。

在此输出中,棋盘和棋盘之间没有点间隔,很难辨别棋盘边界,观看起来有些费力。问题相对简单,只需调整几个参数即可解决,我们选择手动调整,调整后的 drawChessboards 方法。如下所示:

function drawChessboards(solutions) {
const canvas = document.getElementById('chessboard');
const ctx = canvas.getContext('2d');
const n = solutions[0].length;
const solutionsPerRow = Math.ceil(Math.sqrt(solutions.length));
const sizeWithGap = canvas.width / solutionsPerRow / n;
const size = sizeWithGap * 0.95;
for (let k = 0; k < solutions.length; k++) {
const offsetX = ((k % solutionsPerRow) * n + 0.2) * sizeWithGap;
const offsetY = (Math.floor(k / solutionsPerRow) * n + 0.2) * sizeWithGap;
for (let row = 0; row < n; row++) {
for (let col = 0; col < n; col++) {
if ((row + col) % 2 === 0) {
ctx.fillStyle = '#FFFFFF';
} else {
ctx.fillStyle = '#000000';
ctx.fillRect(col * size + offsetX, row * size + offsetY, size, size);
if (solutions[k][row][col] === 'Q') {
ctx.beginPath();
ctx.arc(col * size + size / 2 + offsetX, row * size + size / 2 + offsetY, size / 4, 0, 2 * Math.PI);
ctx.fillStyle = '#FF0000';