V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qiayue
V2EX  ›  程序员

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

  •  
  •   qiayue · 338 天前 · 1594 次点击
    这是一个创建于 338 天前的主题,其中的信息可能已经有所发展或是发生改变。

    大家好,我是哥飞。

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

    whois-nextjs

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

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

    whois-site

    前天哥飞在《分享一个月收入 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 。

    怎么样,想来挑战一下吗?

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

    wechat group

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

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

    6 条回复    2023-12-28 09:51:30 +08:00
    kakalongcn
        1
    kakalongcn  
       338 天前   ❤️ 1
    前阵子第一次接触数独,很有意思,虽然菜但是玩得有点上瘾,网上搜了下竟然还有数独协会。也没想到这种小益智游戏竟然还能赚钱。
    看了下楼主说的这些步骤,有些我需要,比如有时候某一局会感觉找起来特别困难,就特别想多次尝试,如果能让 GPT 根据我的操作,告诉我,其实有一个解题技巧可能是因为我一直不知道所以每次遇到类似情况都有点卡壳,那就更妙了。
    yesterdaysun
        2
    yesterdaysun  
       338 天前
    之前有段时间研究过数独, 如果像第五版里说的用类似穷举的方法解数独没有问题, 可以解出来, 顶多一些难题要花费好几秒钟, 但是即使是一些简单的题, 没有经过优化, 计算机最终的步骤数都在千到万这个级别, 这样出结果没有问题, 但是要输出可以给人看的步骤太粗犷了一点.

    说白了, 这里的穷举只是相当于应用了基本的唯一余数技巧和候选数加回溯的算法, 要真的生成可以给人看的步骤, 需要实现人所用的技巧, 比如 https://hodoku.sourceforge.net/en/techniques.php 这里列出的几十种从简单到复杂的解题技巧, 但是这样算法逻辑就会大大复杂了

    不过这个 HoDoKu 是开源的, 可以用他的 C#算法复刻一遍转成文字再输出, 大概可以
    qinfengge
        3
    qinfengge  
       338 天前
    跟即刻上的是同一个人?都叫哥飞?
    qiayue
        4
    qiayue  
    OP
       338 天前
    @qinfengge 都是我
    qiayue
        5
    qiayue  
    OP
       338 天前
    @yesterdaysun 是的,这里给初学者,就不能用太复杂的方法,所以我先列出来一个可以简单用程序实现的办法,更优化的算法就需要大家自己去探索了。
    finalsatan
        6
    finalsatan  
       337 天前
    支持一下大佬,纯后端开发,先不参与了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1019 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:56 · PVG 06:56 · LAX 14:56 · JFK 17:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.