mirror of
https://github.com/Mabbs/mabbs.github.io
synced 2026-07-22 01:13:22 +08:00
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b8b29f86d5 | |||
| 0e4e4d2fb7 | |||
| 7943cc7d6a | |||
| 772e3ed0b7 | |||
| ee4c9acfde | |||
| 2acc1f6fd7 | |||
| 5f2a3a99ee | |||
| 36cf19d4aa | |||
| 9c769e4ab2 | |||
| fd5f1703dd | |||
| 2a512a487d | |||
| 556e27c9ad |
+2
-1
@@ -178,5 +178,6 @@
|
|||||||
"/2026/03/01/llm3.html": "这篇文章介绍了作者近期在LLM部署和应用方面的经历,主要包括以下几个方面:\n\n首先,作者升级硬件,从单张RTX4090 48GiB升级到双路RTX4090 48GiB,并购买了TRX40+TR 3960X的主板套装,用于运行GPT-OSS模型。随后,作者尝试使用vLLM框架替换Ollama,并成功配置了GPT-OSS模型,达到了接近190Tps的性能。\n\n其次,作者体验了DeepSeek 1M上下文模型,发现其在处理长上下文任务时表现出色,能够展现摘要无法捕捉的细节,并成功生成简历、分析人格等。\n\n此外,作者还尝试使用DeepSeek重构Mabbs,并发现DeepSeek能够识别作者的博客信息,这表明训练样本中包含了作者的信息。\n\n最后,作者在8GiB内存的MacBook Pro上运行了LFM2.5-1.2B-Thinking模型,并使用了Apollo软件,体验了其快速的推理速度和良好的思考能力。作者总结认为,AI的发展令人惊叹,软件优化使其在有限硬件环境下也能运行。",
|
"/2026/03/01/llm3.html": "这篇文章介绍了作者近期在LLM部署和应用方面的经历,主要包括以下几个方面:\n\n首先,作者升级硬件,从单张RTX4090 48GiB升级到双路RTX4090 48GiB,并购买了TRX40+TR 3960X的主板套装,用于运行GPT-OSS模型。随后,作者尝试使用vLLM框架替换Ollama,并成功配置了GPT-OSS模型,达到了接近190Tps的性能。\n\n其次,作者体验了DeepSeek 1M上下文模型,发现其在处理长上下文任务时表现出色,能够展现摘要无法捕捉的细节,并成功生成简历、分析人格等。\n\n此外,作者还尝试使用DeepSeek重构Mabbs,并发现DeepSeek能够识别作者的博客信息,这表明训练样本中包含了作者的信息。\n\n最后,作者在8GiB内存的MacBook Pro上运行了LFM2.5-1.2B-Thinking模型,并使用了Apollo软件,体验了其快速的推理速度和良好的思考能力。作者总结认为,AI的发展令人惊叹,软件优化使其在有限硬件环境下也能运行。",
|
||||||
"/2026/04/14/ai-agent.html": "这篇文章介绍了“AI个人助理”Agent的发展现状和各种尝试。作者体验了OpenClaw、QClaw、WorkBuddy、Cline、LuckClaw和ApkClaw等不同的Agent项目,发现它们在功能、易用性和性能上各有优劣。OpenClaw安装和使用存在困难,国内大厂的QClaw和WorkBuddy则更易于上手,但免费额度有限。作者认为,开发任务更适合在编辑器集成AI中进行,如GitHub Copilot。LuckClaw在微型开发板上运行表现出色,ApkClaw则利用手机的优势操作移动应用。尽管Agent技术仍存在诸多问题,但其应用场景不断拓展,有望吸引更多人参与其中,推动AI应用化进程。",
|
"/2026/04/14/ai-agent.html": "这篇文章介绍了“AI个人助理”Agent的发展现状和各种尝试。作者体验了OpenClaw、QClaw、WorkBuddy、Cline、LuckClaw和ApkClaw等不同的Agent项目,发现它们在功能、易用性和性能上各有优劣。OpenClaw安装和使用存在困难,国内大厂的QClaw和WorkBuddy则更易于上手,但免费额度有限。作者认为,开发任务更适合在编辑器集成AI中进行,如GitHub Copilot。LuckClaw在微型开发板上运行表现出色,ApkClaw则利用手机的优势操作移动应用。尽管Agent技术仍存在诸多问题,但其应用场景不断拓展,有望吸引更多人参与其中,推动AI应用化进程。",
|
||||||
"/2026/05/01/virtual-net.html": "这篇文章介绍了作者在尝试异地组网搭建虚拟局域网时,对多种组网工具的探索和体验。作者首先尝试了n2n,但由于其项目停止更新且在NAT后的机器间存在掉线问题,最终选择了WireGuard作为主要方案。文章详细描述了WireGuard的配置过程,包括在Linux、OpenWrt和openEuler系统上的安装和配置,并遇到了各种各样的挑战,例如在红米AX3000路由器上找不到内核模块,以及在openEuler上缺少WireGuard相关包。此外,文章还提到了Netmaker和Headscale等WireGuard的控制平面,以及VNT和EasyTier等其他组网工具,并总结了最终选择WireGuard的原因:简单、够用、可靠性不错,且已经投入了大量配置。",
|
"/2026/05/01/virtual-net.html": "这篇文章介绍了作者在尝试异地组网搭建虚拟局域网时,对多种组网工具的探索和体验。作者首先尝试了n2n,但由于其项目停止更新且在NAT后的机器间存在掉线问题,最终选择了WireGuard作为主要方案。文章详细描述了WireGuard的配置过程,包括在Linux、OpenWrt和openEuler系统上的安装和配置,并遇到了各种各样的挑战,例如在红米AX3000路由器上找不到内核模块,以及在openEuler上缺少WireGuard相关包。此外,文章还提到了Netmaker和Headscale等WireGuard的控制平面,以及VNT和EasyTier等其他组网工具,并总结了最终选择WireGuard的原因:简单、够用、可靠性不错,且已经投入了大量配置。",
|
||||||
"/2026/06/01/dedupe.html": "这篇文章介绍了如何通过优化游戏资源文件来节约游戏占用的硬盘空间。作者由于Mac只有256GiB的硬盘存储空间,在下载了几十部游戏后空间不足,于是寻找解决方法。文章主要介绍了以下几点:\n\n1. 使用jdupes工具去除重复素材:作者发现许多游戏使用相同的引擎和素材,导致硬盘空间浪费。通过使用jdupes工具进行硬链接,可以有效去除重复文件,节约空间。\n\n2. 不同引擎的处理方式:\n - 对于RPG制作大师MV/MZ,作者使用RPG Maker Decrypter工具解密资源文件,并将图片转换为WebP格式以压缩空间。\n - 对于RPG制作大师XP/VX/VA,作者使用mkxp-z工具跨平台运行游戏,并通过RPG Maker Decrypter解包资源文件,与RTP素材合并后进行去重。\n - 对于Ren'Py游戏,作者使用unrpa工具解包rpa文件,但由于公共资源不多,仅在系列游戏情况下进行解包。\n\n3. 最终效果:通过以上优化,作者成功将游戏文件夹大小从47G降至33G,节约了大量硬盘空间。"
|
"/2026/06/01/dedupe.html": "这篇文章介绍了如何通过优化游戏资源文件来节约游戏占用的硬盘空间。作者由于Mac只有256GiB的硬盘存储空间,在下载了几十部游戏后空间不足,于是寻找解决方法。文章主要介绍了以下几点:\n\n1. 使用jdupes工具去除重复素材:作者发现许多游戏使用相同的引擎和素材,导致硬盘空间浪费。通过使用jdupes工具进行硬链接,可以有效去除重复文件,节约空间。\n\n2. 不同引擎的处理方式:\n - 对于RPG制作大师MV/MZ,作者使用RPG Maker Decrypter工具解密资源文件,并将图片转换为WebP格式以压缩空间。\n - 对于RPG制作大师XP/VX/VA,作者使用mkxp-z工具跨平台运行游戏,并通过RPG Maker Decrypter解包资源文件,与RTP素材合并后进行去重。\n - 对于Ren'Py游戏,作者使用unrpa工具解包rpa文件,但由于公共资源不多,仅在系列游戏情况下进行解包。\n\n3. 最终效果:通过以上优化,作者成功将游戏文件夹大小从47G降至33G,节约了大量硬盘空间。",
|
||||||
|
"/2026/07/01/vibe-coding.html": "这篇文章介绍了作者使用AI Agent进行Vibe Coding的体验。作者通过AI Agent生成代码,实现了博客的PJAX功能和一个立直麻将Wordle小游戏。在使用AI Agent的过程中,作者发现它能够理解整个项目的代码,并且能够根据需求进行修改和优化。然而,作者也遇到了一些问题,例如生成的代码质量不高,需要手动优化和调试。\n\n作者首先使用AI Agent为博客添加了PJAX功能,实现了无刷新加载页面。虽然生成的代码质量不高,但作者还是成功地实现了该功能。接着,作者使用AI Agent生成了一个立直麻将Wordle小游戏,并对其进行了优化和修改。作者还遇到了一些技术问题,例如字体兼容性和役种计算问题,但最终都通过AI Agent解决了。\n\n通过这次体验,作者认为Vibe Coding的体验相当不错,但也存在一些问题。完全由AI生成的代码可能会出现问题,需要手动优化和调试。然而,如果能够正确地使用AI Agent,也可以实现高质量的代码。作者还提到,有时候自己调查和研究比问AI更有效,可以避免浪费时间和精力。"
|
||||||
}
|
}
|
||||||
+5
-3
@@ -2,7 +2,7 @@ title,link,feed_url,description
|
|||||||
花火学园,https://www.sayhanabi.net/,,和谐融洽的ACG交流以及资源聚集地
|
花火学园,https://www.sayhanabi.net/,,和谐融洽的ACG交流以及资源聚集地
|
||||||
资源统筹局,https://gkdworld.com/,,统筹保管用户分享的资源
|
资源统筹局,https://gkdworld.com/,,统筹保管用户分享的资源
|
||||||
贫困的蚊子,https://mozz.ie/,https://mozz.ie/index.xml,
|
贫困的蚊子,https://mozz.ie/,https://mozz.ie/index.xml,
|
||||||
极客兔兔,https://geektutu.com/,https://geektutu.com/atom.xml,致力于分享有趣的技术实践
|
极客兔兔,https://geektutu.com/,https://geektutu.com/feed.xml,致力于分享有趣的技术实践
|
||||||
维基萌,https://www.wikimoe.com/,https://www.wikimoe.com/rss,萌即是正义!一名热爱acg的前端设计师的小站!
|
维基萌,https://www.wikimoe.com/,https://www.wikimoe.com/rss,萌即是正义!一名热爱acg的前端设计师的小站!
|
||||||
7gugu's blog,https://www.7gugu.com/,https://7gugu.com/index.php/feed/,"一个用来存放我爱好的地方,编程,摄影之类的空间"
|
7gugu's blog,https://www.7gugu.com/,https://7gugu.com/index.php/feed/,"一个用来存放我爱好的地方,编程,摄影之类的空间"
|
||||||
Kingfish404,https://blog.kingfish404.cn/,https://blog.kingfish404.cn/index.xml,"Stay curious,stay naive. WUT. Jin Yu's Blog"
|
Kingfish404,https://blog.kingfish404.cn/,https://blog.kingfish404.cn/index.xml,"Stay curious,stay naive. WUT. Jin Yu's Blog"
|
||||||
@@ -18,7 +18,9 @@ Lanke's blog,https://blog.blueke.top/,https://blog.blueke.top/rss.xml,请为一
|
|||||||
寒士杰克,https://www.hansjack.com/,https://www.hansjack.com/feed/,喜欢捣鼓,不断进步!
|
寒士杰克,https://www.hansjack.com/,https://www.hansjack.com/feed/,喜欢捣鼓,不断进步!
|
||||||
Pinpe 的云端,https://pinpe.top/,https://pinpe.top/rss.xml,一个属于自己的云朵。
|
Pinpe 的云端,https://pinpe.top/,https://pinpe.top/rss.xml,一个属于自己的云朵。
|
||||||
Chise Hachiroku,https://chise.hachiroku.com/zh/,https://chise.hachiroku.com/zh/feed/,向明日的辉迹,干杯!
|
Chise Hachiroku,https://chise.hachiroku.com/zh/,https://chise.hachiroku.com/zh/feed/,向明日的辉迹,干杯!
|
||||||
映屿,https://www.glowisle.me/,https://www.glowisle.me/atom.xml,关于互联网、书籍、生活琐事以及那些一闪而过的念头
|
映屿,https://blog.verdant.ee/,https://blog.verdant.ee/atom.xml,关于互联网、书籍、生活琐事以及那些一闪而过的念头
|
||||||
Restent's Notebook,https://blog.gxres.net/,https://blog.gxres.net/atom.xml,不前沿技术分享
|
Restent's Notebook,https://blog.gxres.net/,https://blog.gxres.net/atom.xml,不前沿技术分享
|
||||||
Coseroom,https://coseroom.com,,
|
|
||||||
RavelloH's Blog,https://ravelloh.com,https://ravelloh.com/feed.xml,Beginning of meditation.
|
RavelloH's Blog,https://ravelloh.com,https://ravelloh.com/feed.xml,Beginning of meditation.
|
||||||
|
初然忆,https://www.imcry.vip,https://www.imcry.vip/index.xml,初心如初见,然忆似流年。
|
||||||
|
姓王者,https://xingwangzhe.fun/,https://xingwangzhe.fun/rss.xml,探索、学习、进步、创造无限可能!
|
||||||
|
EXYONE@BLOG:~$,https://exyon.ee,https://exyon.ee/feed.xml,一隅藏天地,流水遇知音。
|
||||||
|
|||||||
|
+148
-309
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,60 @@
|
|||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: Vibe Coding新体验
|
||||||
|
tags: [Vibe Coding, AI, PJAX, 麻将]
|
||||||
|
---
|
||||||
|
|
||||||
|
All in AI!<!--more-->
|
||||||
|
|
||||||
|
# 起因
|
||||||
|
前段时间,我写了一篇关于[AI Agent](/2026/04/14/ai-agent.html)的文章,虽然当时我说这并没有什么创新之处,但在那之后用着用着感觉还是挺好用的,至少相比以前[在云端Vibe Coding](/2025/04/08/feed.html)来说又快又免费,所以我打算分享一下最近我用AI Agent的经历。
|
||||||
|
不过大多数情况下我写代码都可以直接让各路AI在对话中给我生成,那到底有什么样的场景才需要用AI Agent呢?一般应该就是需要边改边测的东西吧。
|
||||||
|
|
||||||
|
# 关于PJAX的改造
|
||||||
|
虽然说AI生成的东西可靠性并不是很高,但至少在网上已经有很多例子的代码应该不至于乱生成吧……其实我一直都想给我的博客增加全站无刷新的功能,但是每次看到PJAX都要自己重新调用当前页面的各种函数就懒得动手了😂。不过其实这也不是什么复杂的事情,主要是一个一个分析函数比较麻烦,所以既然有AI了,不如直接让AI帮我做吧。于是我让它克隆了我的仓库,分析并写出PJAX的代码。
|
||||||
|
用AI Agent最大的好处就是能让它了解整个项目的所有代码,如果是直接在对话里让AI修改的话就很难做到这一点。总之我告诉它之后等了一会它真的写出来了,我试了一下确实能用,虽然刚开始有不少问题,主要是因为我用了[Live2D](/Live2dHistoire/),不少问题也是这个功能引起的。不过只要我告诉它问题在哪里,它总是能给我改好,先不论它实现的代码怎么样,但至少从效果来说还是相当不错的。
|
||||||
|
最终生成的代码我看了一下,代码质量非常糟糕,把我在别处的代码到处复制粘贴到PJAX用的代码里了,但是体验效果不错……所以没办法,虽然代码很糟糕,但先用着吧。不过我觉得优化应该也能交给AI Agent,只是它有时候改来改去还会把正常代码改坏,所以优化看起来还是只能自己做……
|
||||||
|
最终的代码就是:[pjax.js](/assets/js/pjax.js),虽然我对这个代码质量不是很满意,但是毕竟能用,效果也不错,就先这样用吧~
|
||||||
|
|
||||||
|
# 生成一个小游戏
|
||||||
|
前段时间,我在Bilibili上看视频的时候发现了一个有趣的微信小游戏,叫做“雀谜”,它把立直麻将和Wordle两个玩法结合到一起,看起来挺有意思。不过它作为微信上的小游戏有些问题,一是看提示要看广告,二是换题也要看广告,而且看广告就算能换题也有次数限制,一天也就几次机会,让我有点不爽。
|
||||||
|
不过从功能上来说看起来并不复杂,感觉用AI直接Vibe Coding完全不是问题,不过AI Agent从零开始写比较考验模型的水平,所以我打算先让各路网页上的AI生成初版的Demo,之后再考虑怎么改。于是我对它们说:
|
||||||
|
> 帮我制作一款立直麻将Wordle网页小游戏,规则为:
|
||||||
|
> 1. 系统随机生成一个有役能和的14张牌,必须按照万、筒、索、字的顺序排列,同花色内数字从小到大,但是第14张用来和的牌可以不遵守排列规则
|
||||||
|
> 2. 让玩家猜6次来猜到这个牌型,每次猜的牌也必须是满足有役和牌的条件
|
||||||
|
> 3. 位置和内容正确的牌用绿色标注、只有内容正确但是位置不正确的用黄色标注,不在生成范围内的牌用灰色标注
|
||||||
|
> 4. 界面中所有的牌使用Unicode中的麻将字符,并且提供一组输入按钮用于输入这些麻将字符
|
||||||
|
> 5. 输入按钮在游玩过程中也要标注颜色
|
||||||
|
> 6. 随机生成的牌需要标注场风、自风和是否自摸,如果是荣和需要额外的役,需要考虑平和之类的役种
|
||||||
|
> 7. 加一个提示键,可以查看答案牌型的役种
|
||||||
|
|
||||||
|
直接生成确实很考验水平,有很多AI直接生成出来的完全用不了,像DeepSeek生成出来的按钮按上去都没有反应😅,最终只有Gemini生成出来的感觉还不错,无论是界面还是输入的感觉都很好,于是接下来的修改我就打算以Gemini生成出来的代码为主。
|
||||||
|
刚生成出来的代码虽然能玩,但是每个AI直接生成都不想做完整的役种检测,说什么一个对话不够😥,明明各个都是几百k上下文的AI,有什么不够的……总之想一口气就完美做出来显然是不现实的,不过其实最开始我也不打算把所有役都做了,毕竟条件是“有役和牌”,而且没有副露,所以好多可以叠加的役其实都不需要做,尤其是役满那些,大多都可以用其他役的条件满足。
|
||||||
|
在这期间,“平和”算是实现起来最麻烦的,主要是这个役需要根据和牌判定,必须是顺子的两面听牌才可以……虽然AI理解这些知识,但是写的时候经常出问题,像边张之类的经常误判……但是不实现又不行,毕竟这是可以nomi的牌型。
|
||||||
|
最终写的差不多了,感觉还不错,于是在GitHub Pages上[部署了一份](https://mabbs.github.io/riichi-mahjong-wordle/),起名叫[立直麻将 Wordle](https://github.com/Mabbs/riichi-mahjong-wordle)。
|
||||||
|
最开始我以为这个小游戏的玩法是他们原创的,于是把生成的代码又丢给AI,让它评价一下创新性,结果AI说已经有开源了😂,有个叫做[Mahjong Handle](https://github.com/xnuk/mahjong-handle)的才是最早做这个玩法的……还好这代码不是我写的,要是我写了半天结果发现有现成的那就很无语了😆。
|
||||||
|
当然我让AI写的版本也有一些特色,Mahjong Handle那个和原版Wordle一样,每天只有一道题,而且这个题是从题库里抽的,我让AI Agent看了一下它的代码,似乎是用[phoenix-logs](https://github.com/MahjongRepository/phoenix-logs)这个脚本从天凤上下载的牌谱数据解析得到的题库,所以它的题目数量是有限的,而我的代码是完全随机生成的,所以结果是无限的。但AI似乎认为作为Wordle来说一天一题才是它的特色,无限就显得没意思了……既然如此,那干脆让它给我把两个游戏合并了,让它参考Mahjong Handle把一天一题的功能也给我加上,另外Mahjong Handle还有一个MPSZ快速输入法,也让AI给我合并进我的游戏里了。
|
||||||
|
这时候就体现了AI Agent的优势,如果直接用线上的AI把Mahjong Handle中的功能移植到我的代码,我还得完整描述要实现的功能,但是AI Agent能自己看人家仓库的代码,就知道要改什么东西了。
|
||||||
|
最终实现的效果也很不错,虽然我的代码没有题库,但是使用了当天日期作为随机种子,用mulberry32算法搞出了一天一题的功能,还挺有意思的。
|
||||||
|
另外在Mahjong Handle以及原版的Wordle中,还有一个困难模式,就是每次猜测必须使用之前的猜测条件,不过我觉得如果原模原样把这个功能抄过来似乎有点无聊,而且我发现玩这个东西一般直接一个国士+两个一气就基本上把要猜的牌找完了,有点简单,所以我想了一下,要不然限制一下提交的条件,提交的牌型必须包含目标的役种之类的……不过要是做这个功能就不能像之前那样只实现部分役种了,得把所有能用到的都实现一遍,还好这种事情肯定也不是我来做,肯定还得是让AI来😋。
|
||||||
|
实现的时候还不能让AI直接一口气全加上,还得一步一步的提示,而且每个牌型还得手动测一遍……最终虽然做的看起来似乎已经很完善了,不过逻辑的根本还是有点问题,AI设计役种计算的时候是按拆解后役种数量最多的情况来算,但事实上立直麻将算役种是按照高点法,要最终点数最大才行。虽然按照目前的方法绝大多数情况下都能正常工作,但偶尔也会遇到问题,比如像这副牌:
|
||||||
|
- 🀈🀈🀈🀉🀉🀉🀊🀊🀊🀞🀟🀗🀗 🀝
|
||||||
|
|
||||||
|
按照目前的方法计算的结果是:
|
||||||
|
- 断幺·平和·一杯口 = 3番30符
|
||||||
|
|
||||||
|
然而正确答案是:
|
||||||
|
- 断幺·三暗刻 = 3番50符
|
||||||
|
|
||||||
|
但是符数的计算又很麻烦……不过反正提示和验牌都是同一套程序,题倒是也能做出来……所以就懒得修了🤣。当然说到底还是因为AI没有用现有的计算库,像Mahjong Handle用的是现成的[Riichi](https://github.com/takayama-lily/riichi)库,制作起来比我这个就简单多了。
|
||||||
|
|
||||||
|
# 为游戏添加字体
|
||||||
|
在我制作“立直麻将 Wordle”这个小游戏的时候,我让AI使用的是Unicode中的麻将字符,毕竟有现成的字符总比去找牌的图片要方便,而且实现起来感觉更简单一些。不过用字符确实也会遇到一些问题,我不知道为什么在macOS和Android上其他牌都是黑白的,唯有🀄️是彩色的😅,Windows上使用的Segoe UI Emoji倒都是彩色的,但是牌很丑,像是小学生设计的……虽然不影响玩,但是看着很难受,至少牌的颜色统一一下也好吧?虽然也可以搞出黑白的🀄︎,但如果用这个,在Windows上又成了只有🀄️是黑白的😅。虽然Mahjong Handle是直接用了SVG格式的牌图片,但我觉得应该有现成的麻将字体,像这种问题应该有现成的解决方法才对吧?
|
||||||
|
于是我直接问AI有没有这样的字体,AI搜了一下看起来还真有,有个叫做[Mahjong Colored](https://github.com/kfarwell/Mahjong-Colored)就是基于那些SVG做的OpenType-SVG字体,我本来以为问题就会这样解决,然而当我应用了字体之后发现牌的位置变成了白色的方块,貌似只有Firefox才支持这种字体……然而现在谁还用Firefox啊?
|
||||||
|
那遇到这种问题怎么办?当然还是让AI解决,它说要在Safari和Chrome上使用彩色字体,用COLR或者SBIX格式比较好,COLR格式的兼容性最好,三个浏览器都能用,而SBIX的话Firefox没法用。不过Firefox既然基本上没人用了,我倒是不太在乎它的兼容性,但我肯定还是更希望能用兼容性更好的方案,于是我把OpenType-SVG字体转换为COLR的工作交给了AI Agent。
|
||||||
|
结果它整了半天也没整出来,貌似是因为SVG的特效太多,没办法转换为COLR格式,于是它选择了SBIX方案,不过COLR存储的是矢量图,而SBIX存储的是位图,大小要大一些,而且放大还会有锯齿。只是目前实在是没办法了,只能用这种格式。
|
||||||
|
最终我把它转换后的字体存了一份到[仓库](https://github.com/Mabbs/Mahjong-Colored-SBIX),但是看着它1MiB多的大小以及不太好的浏览器兼容性,再考虑到它还是位图,实在是不太想在我的游戏里应用它……
|
||||||
|
结果后来我又搜了一下,原来是有现成的麻将字体啊,有个叫做[Mahjong Font](https://github.com/rutopio/mahjong-font)的项目用的就是COLR格式,兼容性非常好,而且大小只有80KiB,算是最完美的解决方案了。垃圾AI给我推荐的Mahjong Colored真的是……浪费了不少时间,看来有的时候自己调查要比问AI好一些吧。
|
||||||
|
|
||||||
|
# 感想
|
||||||
|
总的来看,目前Vibe Coding的体验确实是相当不错,只是问题也非常明显,完全让AI生成的代码要么实现的不优雅,要么就会出BUG,如果完全不懂要写的东西,纯粹由AI生成,那出问题的概率就非常高了。不过要是看不出来错误,完全被AI忽悠过去了,也许这时候的Vibe Coding在另一方面算是完美吧😂?至少对用的人来说也算是解决了问题呢。
|
||||||
Vendored
+5
-4
File diff suppressed because one or more lines are too long
@@ -17,6 +17,25 @@ function initVisitors() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function highlightKeyword() {
|
||||||
|
var match = location.search.match(/[?&]kw=([^&]+)/);
|
||||||
|
var kw = match ? $.trim(decodeURIComponent(match[1].replace(/\+/g, ' '))) : '';
|
||||||
|
if (!kw) return;
|
||||||
|
|
||||||
|
var reg = new RegExp('(' + kw.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
|
||||||
|
var escapeMap = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };
|
||||||
|
|
||||||
|
$('section, section *').not('script, style, textarea').contents().filter(function () {
|
||||||
|
return this.nodeType === 3;
|
||||||
|
}).each(function () {
|
||||||
|
var escapedText = this.nodeValue.replace(/[&<>"']/g, function (m) { return escapeMap[m]; });
|
||||||
|
var highlighted = escapedText.replace(reg, '<mark>$1</mark>');
|
||||||
|
if (escapedText !== highlighted) {
|
||||||
|
$(this).replaceWith(highlighted);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
(function () {
|
(function () {
|
||||||
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
|
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
|
||||||
@@ -42,6 +61,7 @@ $(function () {
|
|||||||
});
|
});
|
||||||
console.warn("Mayx may already be Dead");
|
console.warn("Mayx may already be Dead");
|
||||||
}
|
}
|
||||||
|
highlightKeyword();
|
||||||
});
|
});
|
||||||
|
|
||||||
function getSearchJSON(callback) {
|
function getSearchJSON(callback) {
|
||||||
|
|||||||
@@ -1,52 +1,3 @@
|
|||||||
/**
|
|
||||||
* 根据 URL ?kw= 参数高亮页面内匹配的关键词。
|
|
||||||
* 提取为全局函数,供 pjax.js 在页面切换后复用,避免重复实现。
|
|
||||||
*/
|
|
||||||
function highlightKeyword() {
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const keyword = urlParams.get('kw')?.trim();
|
|
||||||
|
|
||||||
if (!keyword) return;
|
|
||||||
|
|
||||||
// 转义正则表达式特殊字符,避免安全问题
|
|
||||||
const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
||||||
// 创建不区分大小写的正则表达式(全局匹配)
|
|
||||||
const regex = new RegExp(`(${escapedKeyword})`, 'gi');
|
|
||||||
|
|
||||||
// 递归遍历并高亮文本节点
|
|
||||||
const escapeHTML = str => str.replace(/[&<>"']/g,
|
|
||||||
tag => ({
|
|
||||||
'&': '&',
|
|
||||||
'<': '<',
|
|
||||||
'>': '>',
|
|
||||||
'"': '"',
|
|
||||||
"'": '''
|
|
||||||
}[tag] || tag));
|
|
||||||
function highlightTextNodes(element) {
|
|
||||||
$(element).contents().each(function () {
|
|
||||||
if (this.nodeType === Node.TEXT_NODE) {
|
|
||||||
const $this = $(this);
|
|
||||||
const text = escapeHTML($this.text());
|
|
||||||
|
|
||||||
// 使用正则替换并保留原始大小写
|
|
||||||
if (regex.test(text)) {
|
|
||||||
const replaced = text.replace(regex, '<mark>$1</mark>');
|
|
||||||
$this.replaceWith(replaced);
|
|
||||||
}
|
|
||||||
} else if (
|
|
||||||
this.nodeType === Node.ELEMENT_NODE &&
|
|
||||||
!$(this).is('script, style, noscript, textarea')
|
|
||||||
) {
|
|
||||||
highlightTextNodes(this);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$('section').each(function () {
|
|
||||||
highlightTextNodes(this);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function initCopyButtons() {
|
function initCopyButtons() {
|
||||||
$('.copy').remove();
|
$('.copy').remove();
|
||||||
$('div.highlight').each(function () {
|
$('div.highlight').each(function () {
|
||||||
@@ -63,6 +14,5 @@ function initCopyButtons() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
highlightKeyword();
|
|
||||||
initCopyButtons();
|
initCopyButtons();
|
||||||
});
|
});
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
24f0040157c07cc424b28b7b52ea734d
|
||||||
+4
-2
@@ -12,7 +12,7 @@ image: https://screenshot.mayx.eu.org/
|
|||||||
<!-- 遍历分页后的文章 -->
|
<!-- 遍历分页后的文章 -->
|
||||||
<table class="entry-content h-feed">
|
<table class="entry-content h-feed">
|
||||||
{% for post in paginator.posts %}
|
{% for post in paginator.posts %}
|
||||||
<tr><td class="h-entry" data-url="{{ post.url }}">
|
<tr><td class="h-entry post-row" data-url="{{ post.url }}">
|
||||||
<h2 class="p-name"><a class="post-link u-url" href="{{ post.url }}">{{ post.title }}{% if post.layout == "encrypt" %} [加密] {% endif %}</a></h2>
|
<h2 class="p-name"><a class="post-link u-url" href="{{ post.url }}">{{ post.title }}{% if post.layout == "encrypt" %} [加密] {% endif %}</a></h2>
|
||||||
<p>
|
<p>
|
||||||
<time class="date dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%-d %B %Y" }}</time>
|
<time class="date dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%-d %B %Y" }}</time>
|
||||||
@@ -66,7 +66,9 @@ image: https://screenshot.mayx.eu.org/
|
|||||||
<h2>其他页面</h2>
|
<h2>其他页面</h2>
|
||||||
<p>
|
<p>
|
||||||
<a href="/service.html">Mayx的公开服务</a><br />
|
<a href="/service.html">Mayx的公开服务</a><br />
|
||||||
|
<a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/linux/">Mayx's Blog Terminal</a><br />
|
||||||
凯露&危险生存( <a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/karyl-yabaival/?cn">CHS</a> | <a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/karyl-yabaival/">JA</a> | <a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/karyl-yabaival/?kr">KO</a> )<br />
|
凯露&危险生存( <a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/karyl-yabaival/?cn">CHS</a> | <a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/karyl-yabaival/">JA</a> | <a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/karyl-yabaival/?kr">KO</a> )<br />
|
||||||
|
<a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/riichi-mahjong-wordle/">立直麻将 Wordle</a><br />
|
||||||
<a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/brainfuck-visualizer/">Brainfuck可视化演示</a><br />
|
<a href="{% unless site.github %}https://mabbs.github.io{% endunless %}/brainfuck-visualizer/">Brainfuck可视化演示</a><br />
|
||||||
<a href="/message.html">留言板</a><br />
|
<a href="/message.html">留言板</a><br />
|
||||||
<a href="/links.html">Links</a><br />
|
<a href="/links.html">Links</a><br />
|
||||||
@@ -79,7 +81,7 @@ image: https://screenshot.mayx.eu.org/
|
|||||||
<a href="https://xn--sr8hvo.ws/next">→</a><br /><a href="https://icp.gov.moe/?keyword=20218888" target="_blank">萌ICP备 20218888号</a></small>
|
<a href="https://xn--sr8hvo.ws/next">→</a><br /><a href="https://icp.gov.moe/?keyword=20218888" target="_blank">萌ICP备 20218888号</a></small>
|
||||||
<input name="live2dBGM" value="https://music.163.com/song/media/outer/url?id=523658881.mp3" type="hidden" />
|
<input name="live2dBGM" value="https://music.163.com/song/media/outer/url?id=523658881.mp3" type="hidden" />
|
||||||
<script>
|
<script>
|
||||||
$(document).on('click', '.h-entry', function(e) {
|
$(document).on('click', '.post-row', function(e) {
|
||||||
if ($(e.target).closest('.p-category').length === 0) {
|
if ($(e.target).closest('.p-category').length === 0) {
|
||||||
go($(this).attr('data-url'));
|
go($(this).attr('data-url'));
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
32691808d04b4e838d0c0610ec848ca2
|
||||||
Reference in New Issue
Block a user