我搞了一个免费的前端训练营，第二次练习是“做一个在线讲解数独题目的 AI 小工具”

大家好，我是哥飞。

上次给大家布置练习题《哥飞免费提供 API 给新手一个练习在 Vercel 编写和部署项目的机会》，很多朋友都做出来了，更有优秀的朋友 gantrol 还把每个步骤的开源了，且写了教程。

开源教程和代码：https://github.com/gantrol/whois-nextjs/

在线演示：https://whois.gantrol.com/

前天哥飞在《分享一个月收入 39 万的在线数独游戏网站，每月从搜索引擎获取 1190 万访问量》分享了这个访问量最大的在线数独游戏网站 sudoku.com 。

哥飞就想，我们现在再去做一个在线数独游戏，肯定是搞不到流量了，但如果结合 GPT 去做一个讲解数独游戏的小工具，这就有新意，有传播点了。

最终需求是上传一张数独游戏截图，程序能够读取题目，然后让 GPT 去讲解解答这个游戏的每一个步骤，如果能够用上 TTS ，语音讲解就最好了。

我们依然把需求分解，分成多个版本来实现，每个版本逐步加功能，另外考虑到 OCR 比较难，所以把 OCR 读题放到后面的版本里。

第一版：正常数独游戏

网页显示 9X9 的格子，玩家点击出题按钮后，随机出题。

之后玩家可以在空白格子填入数字，每次填入后，你都需要调用 js 程序判断当前的回答是否符合要求。

直到全部空格填满之后，还需要判断用户是否解答正确。

第二版：实现后端保存功能

在第一版的基础上，每次随机出题之后，都把当前题目保存到后端数据库中，并且生成一个唯一的题目 ID ，跳转到题目页面，如路由可以是 /game/18256 。

玩家每次填写的记录也保存起来，填几次就保存几次，也就是可以记录玩家游戏每一步骤情况。

最后玩家的游戏结果也需要保存。

第三版：重放游戏步骤

在第二版的基础上，没有玩完的题目，可以下次打开继续玩。

已经玩结束的题目，可以按照步骤回放。

可以是自动一步一步回放，也可以是手动点击上一步下一步回放。

第四版：允许用户录入题目

在第三版的基础上，玩家既可以选择随机出题，也可以选择手动录入题目。

玩家选择录入题目后，网页显示 9X9 的格子，每一个格子都可以输入数字，玩家可以把别的地方看到的题目录入进去，最后保存题目。

保存之后，生成唯一的题目 ID ，跳转到题目页面。

之后流程跟前面几版一样。

第五版：实现 JS 自动解题

在第四版的基础上，这次玩家可以不自己答题，而是点击解答按钮，让程序来给出答案。

你需要用 JS 实现一个解答数独的算法，说是算法，其实不要被吓倒，你就把我们人答题的整个过程都用程序来实现就可以了，暂时不需要上其它更高深的算法。

我们用程序循环遍历每一个空格，找到这个空格所在的 3x3 正方形，以及横向和竖向的，总共三组数字，每一组数字都要求必须有 1 到 9 ，且不能重复。

你写一个函数判断当前格子是否可以确定要填哪个数字，如果不能确定，就跳过这个格子，跳到下一个格子，继续重复这个过程，直到所有格子都被解答出来了。

这里程序运行可能会很快，你可以每次在确定一个格子的数字后暂停 2 秒钟，之后再继续找下一个可以确定的格子，这样就可以让玩家看清楚整个游戏过程。

注意，这里程序答题也一样要每个步骤保存到后端，确保游戏结束后可以回放。

第六版：让 GPT 来讲解

在第五版的基础上，每次确定一个格子的数字后，就调用 GPT 接口，传入三组数字和正确答案的数字，让 GPT 来讲解，为什么要这样做，为什么能够确定这个格子的数字。

使用流式传输，把 GPT 的回答显示到页面上。

几个注意事项：

这里需要识别用户浏览器语言，或者让用户选择语言，然后使用这个指定的语言来让 GPT 输出文字；
这一步，就不是每次暂停 2 秒了，而是需要等 GPT 回答完之后，才开始下一个格子的探索；
这次还要把 GPT 的输出文字也保存起来，最后支持回放。

第七版：接入 TTS 实现语音讲解

在第六版的基础上，接入 TTS ，让 GPT 的回答可以语音播放出来。

依然需要把语音也保存起来，支持回放时语音讲解。

能够实现以上版本，就足够去做一些可以赚钱的小工具了。哥飞还给学有余力的同学准备了两个版本的附加题。

第八版：尝试合成视频

在之前的基础上，把讲解录制成视频。

这里有两个方案，你可以后端渲染图片最终生成视频，也可以用一些前端库，直接在前端录制视频。

注意不管前后端生成视频，都需要把语音讲解也合成进去，最后得到一个讲解数独游戏的视频。

第九版：尝试 OCR

在之前的基础上，实现上传图片，或者调用摄像头读取数独题目，识别每一个格子的数字，特别要注意空格的处理，之后保存题目，生成题目 ID 。

怎么样，想来挑战一下吗？

哥飞专门为这次小练习，搞了一个在线训练营，完全免费的，扫描就可以加群。

但是注意，每周都会检查作业，如果没有实现，就会被请出群去，所以请确定你真的想参加，真的有时间参加，再来报名。

如果群满了，请加哥飞微信 qiayue 进群。