ChatGPT 时代，程序员的生存之道 | 人工智能 AI

HT for Web

发布于 2023-10-16 18:11:55

1920

发布于 2023-10-16 18:11:55

文章被收录于专栏：HTHT

前言

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';
                    ctx.fill();
                }
            }
        }
    }
}

接下来再瞧瞧最终的运行效果：