这里是由哥飞发起的一次免费前端训练营,题目是实现一个能够讲解数独解法的网页小工具。
大家交作业可以通过发 PR 的形式提交自己的作业地址在下方表格中:
之前哥飞在公众号文章《分享一个月收入 39 万的在线数独游戏网站,每月从搜索引擎获取 1190 万访问量》分享了这个访问量最大的在线数独游戏网站 sudoku.com 。
哥飞就想,我们现在再去做一个在线数独游戏,肯定是搞不到流量了,但如果结合 GPT 去做一个讲解数独游戏的小工具,这就有新意,有传播点了。
最终需求是上传一张数独游戏截图,程序能够读取题目,然后让 GPT 去讲解解答这个游戏的每一个步骤,如果能够用上 TTS,语音讲解就最好了。
我们依然把需求分解,分成多个版本来实现,每个版本逐步加功能,另外考虑到 OCR 比较难,所以把 OCR 读题放到后面的版本里。
网页显示 9X9 的格子,玩家点击出题按钮后,随机出题。
之后玩家可以在空白格子填入数字,每次填入后,你都需要调用 js 程序判断当前的回答是否符合要求。
直到全部空格填满之后,还需要判断用户是否解答正确。
在第一版的基础上,每次随机出题之后,都把当前题目保存到后端数据库中,并且生成一个唯一的题目 ID,跳转到题目页面,如路由可以是 /game/18256 。
玩家每次填写的记录也保存起来,填几次就保存几次,也就是可以记录玩家游戏每一步骤情况。
最后玩家的游戏结果也需要保存。
在第二版的基础上,没有玩完的题目,可以下次打开继续玩。
已经玩结束的题目,可以按照步骤回放。
可以是自动一步一步回放,也可以是手动点击上一步下一步回放。
在第三版的基础上,玩家既可以选择随机出题,也可以选择手动录入题目。
玩家选择录入题目后,网页显示 9X9 的格子,每一个格子都可以输入数字,玩家可以把别的地方看到的题目录入进去,最后保存题目。
保存之后,生成唯一的题目 ID,跳转到题目页面。
之后流程跟前面几版一样。
在第四版的基础上,这次玩家可以不自己答题,而是点击解答按钮,让程序来给出答案。
你需要用 JS 实现一个解答数独的算法,说是算法,其实不要被吓倒,你就把我们人答题的整个过程都用程序来实现就可以了,暂时不需要上其它更高深的算法。
我们用程序循环遍历每一个空格,找到这个空格所在的 3x3 正方形,以及横向和竖向的,总共三组数字,每一组数字都要求必须有 1 到 9,且不能重复。
你写一个函数判断当前格子是否可以确定要填哪个数字,如果不能确定,就跳过这个格子,跳到下一个格子,继续重复这个过程,直到所有格子都被解答出来了。
这里程序运行可能会很快,你可以每次在确定一个格子的数字后暂停 2 秒钟,之后再继续找下一个可以确定的格子,这样就可以让玩家看清楚整个游戏过程。
注意,这里程序答题也一样要每个步骤保存到后端,确保游戏结束后可以回放。
在第五版的基础上,每次确定一个格子的数字后,就调用 GPT 接口,传入三组数字和正确答案的数字,让 GPT 来讲解,为什么要这样做,为什么能够确定这个格子的数字。
使用流式传输,把 GPT 的回答显示到页面上。
几个注意事项:
这里需要识别用户浏览器语言,或者让用户选择语言,然后使用这个指定的语言来让 GPT 输出文字;
这一步,就不是每次暂停 2 秒了,而是需要等 GPT 回答完之后,才开始下一个格子的探索;
这次还要把 GPT 的输出文字也保存起来,最后支持回放。
在第六版的基础上,接入 TTS,让 GPT 的回答可以语音播放出来。
依然需要把语音也保存起来,支持回放时语音讲解。
能够实现以上版本,就足够去做一些可以赚钱的小工具了。哥飞还给学有余力的同学准备了两个版本的附加题。
在之前的基础上,把讲解录制成视频。
这里有两个方案,你可以后端渲染图片最终生成视频,也可以用一些前端库,直接在前端录制视频。
注意不管前后端生成视频,都需要把语音讲解也合成进去,最后得到一个讲解数独游戏的视频。
在之前的基础上,实现上传图片,或者调用摄像头读取数独题目,识别每一个格子的数字,特别要注意空格的处理,之后保存题目,生成题目 ID。
怎么样,想来挑战一下吗?
哥飞专门为这次小练习,搞了一个在线训练营,完全免费的,可以加哥飞微信 qiayue 入群。
但是注意,每周都会检查作业,如果没有实现,就会被请出群去,所以请确定你真的想参加,真的有时间参加,再来报名。