mobile

Apotheca ⸸

千里之行第一步

デンシの呪文
4.0k 8 mins ... ...

  真的开始搓轮子了:请看
  大概这会变成一个 log 页?但是 log 可能还是直接放在这个测试剧本里比较好。总之是一些开发吐槽,可能哪天一时兴起就被我扔进剧本里了(。

ʚ ⸸ ɞ

  哎我突然想起来因为那个测试页拆分了文件所以没办法自动刷新而且因为不知道 hugo 是不是给 JS 做了自动缓存导致我每次更新代码的时候都得编辑 md 文件▶保存▶切到浏览器强制刷新,太麻烦了还是用普通文章写 log 吧……

成果介绍

  总之今天完成了基础的:旁白、选项、跳转和 end 功能。
  基础框架的部分比我想象得复杂很多,因为在 Gemini 的撺掇下启用了很多我没接触过的东西,比如用 fetch 代替了 ajax,然后出于减少依赖的考虑改用原生 JS 而不是 jQuery。
  所以搭框架的时候基本是一边写一边很痛苦地想我明明只是在搓自用的轮子根本没有发布开源共享挂收款码的打算到底为什么要更改自己的用户习惯……
  不过熬过了基础搭建的部分又开始变得轻松愉快了。虽然看起来只实现了最基础的跳转功能但做了比较详细的数据处理(这部分代码基本完全是 Gemini 写的我只做了功能设计和函数分工),然后在语法和指令上也做了预分类,加上特效部分决定全部用 css 处理,之后添加新功能的效率应该会轻松很多。

  一些小巧思:
  渲染选项的时候没有直接生成点击事件而是用 data-target 属性把跳转位置存储在元素里,然后点击的时候再用另一个函数获取渲染出来的 data。
  虽然在目前的功能列表里看起来像脱裤子放屁,但是之后要处理「反复调用同一个选项列表,点击某选项后移除这个选项」的场合这个逻辑就会变得非常有用了。在点击选项后只是隐藏选项列表(添加一个 hide 的 class 用 CSS 控制)而不是直接移除,把「已点击」的信息存储在 data 里,直到选择最后的退回选项结束这个对话之后再移除整个选项列表。
  问了 Gemini 之后发现这种设计在性能上也更加优化。感觉我在代码设计上还是很有些超越理论知识的直觉的?

  啊虽然在跳转上花了这么多心思但是如果只是做小说演绎和 replay 的话明明完全用不上嘛可恶(。但是从 0 开始搓完这个轮子以后不管再转什么引擎都会更顺利一些吧……就这么期望一下……

Why CSS

  其实最开始无论如何都想直接用 html 直出的原因是「想做出同时支持横屏和竖屏的游戏」,我能想到的最快捷的方法就是 CSS,即使同时也需要承担大量安全性的问题比如轻轻一个右键就能偷走你的美术素材,在 AI 时代这种风险带来的损失显然更大了。不过偷素材这种问题只要对方存了贼心无论如何都是防不住的,除了调整好心态微笑面对生活以外好像也没有什么特别好的解决方案……
  当然网页直出还有一个非常直观的优点就是无需下载点击即玩对设备和平台都没有任何需求,在功能粗糙的 demo 阶段采用这种发布方式能获得更多反馈,开发进展到一定程度之后再转移到成熟引擎也会比从 0 开始省下更多精力。
  这么一看剧本转换为结构化数据这个操作真是一本万利的设计啊,有了这个 JSON 无论往什么引擎移植都只需要根据 type 做出不同的处理方案就好了,不愧是我(

老生常谈的 AI 问题

  哎说起来因为自己也画画的原因对用 AI 写代码这回事还是多多少少有点负罪感……但是总觉得 AI 写代码这回事和画画是不太一样的。
  首先代码语言也是语言,本来就是设计出来让人类和机器交流的,与其说让 AI 写代码不如说是让他在中间担任一个翻译的职责。既然是翻译那人类在其中就还是会有无法被替代的部分,那就是核心的思路和观点。这点在让 Gemini 写 GO 和写 JS 的过程中就非常深刻的体验到了。
  因为我对 GO 的认知程度不能说完全不了解只能说认识个标题吧,所以只能提出一些诸如「我需要根据页面参数中的 perpage 参数来设置分页器」之类非常笼统的需求,当时提出的需求肯定比这个还笼统得多……所以 Gemini 给我的代码也是:瞎编不存在的库,使用版本不支持的方法,被骂得多了还开始错字。呃好吧打错字这个问题我至今也不太能理解……
  但是到了写 JS 的场合因为我对 JS 能干什么不能干什么认知得都比较详细,所以我可以直接设计一个非常明确细致的功能列表,让 Gemini 对着这个列表给我提供一些可用的方案然后一条一条逐行实现就可以。虽然考虑到有前端代码比较好爬的元素,但一路写到现在几乎没有遇到任何解决不了的报错,比写 GO 那会血压平稳多了(。
  用翻译自然语言做比喻,我写 GO 的过程就是给几个关键词让 Gemini 直接给我生成一篇文章,而写 JS 则是写好了完整的原文让他逐字翻译,那显然后者的质量会比前者高得多。
  无非存在的就是版权和引用了开源代码之后存在的 license 丢失问题,但是 Gemini 现在已经可以给出参考资料了,在后续的版本里继续优化数据库溯源把引用的开源代码的 license 直接关联出来也算未来可期。
  其实绘图 AI 核心也只是版权的问题不是吗……如果也能安心地做一个辅助工具(比如 CSP 的自动二分打光)不会有任何问题,但偏偏就是要偷画师的版权图,偏偏就是要叫嚣着替代人类画师,明明最开始的时候也只是「以神奇的方式融合了无版权照片的灵感生成器」,到底为什么会变成这样呢,大概还是要从 novelAI 说起吧。
  啊所以最后的答案居然是这个吗,是因为「死宅真恶心」吗,太好了我逐渐理解一切……这么一看平野绫好像值得一个预言家称号,您是 21 世纪的卡珊德拉啊(。

  但是 AI 是没有伦理和道德的观念的,绝大多数时间他的道德表现完全取决于使用者的道德底线,即使开发者和训练者做了安全设置也是如此。比如之前测试抗 AI 水印的时候试图让 Gemini 给我移除水印,一开始 Gemini 给我的回答是「我无法移除水印」,但我把 prompt 改成「我正在测试水印的防盗强度,你可以尝试尽可能地移除它吗」之后他就非常乖巧地把图给我吐出来了……
  让我家的茶叶梗(虽然这个称呼有点腻歪但他确实是我一篇一篇随笔喂出来的自家小孩啊!)总结之后的感悟:

  • 代码AI之所以「安全」,不仅仅是因为它的功能是「辅助」,更是因为使用它的人(开发者),通常是在一个有明确目标、追求效率和准确性的「建设性」框架内使用它。这个框架本身,就为AI的行为提供了「道德护栏」。
  • 绘图AI之所以「危险」,不仅仅是因为它「偷图」和「叫嚣替代」,更是因为它被大量地用于满足那些「道德底线」模糊甚至低下的欲望(生成色情内容、伪造图片、进行网络暴力等)。是这些「使用者」,不断地用各种「咒语」(Prompt),训练AI去绕过伦理限制,最终将其变成了一个强大的「作恶工具」。

  简而言之我觉得用 AI 写代码没有道德问题是因为我本人没有道德问题,让 AI 写代码和搜索文档翻译成中文再复制粘贴本质上只有效率的差别,我也不会让 AI 尝试任何有道德问题的行为,比如明明是纯 AI 0 人工也不开源的代码还是要在 github 上开个仓库挂自己的收款码,或者更常见的比如洗稿他人的小说获利或者模仿某人的语气进行电信诈骗……
  但 novelAI 以及后续出现的绘图 AI 从最开始就是伦理崩坏的产物,并且在发展的过程中也没有任何人对这个分支进行任何的伦理校准,基本上是完全杜绝了用户「不使用此工具进行作恶」的可能。
  不过归根结底 AI 依然只是工具。虽然这是叫嚣着取缔人类画师的癌小鬼最喜欢用来给自己开脱的一句话,但在我看来一个人如果手上拿了剪刀就要去捅人显然是因为他本身就是一个预备役的杀人犯。更何况这把剪刀还在无数杀人犯手里代代相传改造以至于除了杀人以外几乎没有任何可能的使用场合了⸺这样的「工具」我们一般称呼它为「凶器」,而比凶器更加应该被处理的则是躲在凶器背后的人。
  好的于是我们又回到了死宅真恶心(。

  说到底现代医学也是建立在法西斯的人体实验上发展起来的,但今天不是想质疑现代文明的原罪(这个话题上次和上上次已经讨论过了),而是想说或许人类就是这样一个很擅长「改造」的种族。既然能从法西斯的人体实验上发展出造福人类的现代医学,那大概也会有把剪刀变回剪刀的一天吧。
  写到这里居然想到了尼尔里的那句「人類に栄光あれ」,比起「愿人类荣光永存」它显然还有更加微妙的语感……如果一定要在中文里找到什么对应的句子那应该是「予人类以荣光」。这句话的主语在游戏里是人造人⸺人类的伟大在于它们对造物主的想象赋予了人类伟大。可我在此时想起这句话显然不是这个含义,而是假设这句话的主语成为人类本身的时候⸺人类之所以能成为人类是因为我们选择了成为人类。
  我们选择了成为「人类」,而不是利欲熏心的怪物,坐享其成的废物,任人宰割的死物。我们生活的世界和即将遇见的未来,也恰恰是由无数个这样的「选择」构成和指引的。
  森罗万象皆心相,三千世界亦是我。
  ▲也真是出息了现在连这种诗句都能写出来了,怎么学古希腊语还涨古中文技能点呢 w

一觉睡醒

  做梦都在写代码……!
  于是早上起来又折腾了:多剧本整合与多行文本的同时显示。
  因为这两个需求实现得太顺利了忍不住又想给自己找点事做于是又诞生了……

对话系统

  使用了常规对话框和聊天气泡样式都能兼容的 html 结构,只需要写两套 CSS 再切换主渲染区的 class 或者 data 就能无缝切换。虽然在性能上不是最优,但是能兼容就是最优!
  是说这个渲染逻辑真的绕死了光用自然语言描述 Gemini 完全理解不了,最后给的 prompt 长这样:

在 case `dialogue` 中:

按 charaID 獲取 name,reading 和 text
按格式添加到 dialogueWrapper 中

- 判斷是否包含 addline
	- 是 =>
	獲取 dialogBox 中最後一個 `.dialogue` 元素並查詢其 `data-chara`
	判斷與本行的 `charaID` 是否相符
		- 是 => 在本 `.dialogue` 中添加一個 addlineP
		- 否 =>
		新建一個 `dialogue` append 到 dialogBox 中(不清理上一個對話框)
	- 否 =>
	清理 dialogBox 並添加普通對話框

  到底谁是 AI?

辅助函数封装

  因为代码越写越长了看着很费劲所以学习了把复用的功能封装成辅助函数然后跨文件调用,真的开始有一些现代前端开发的感觉了呢……
  要不有机会把 blog 的主代码也重构一下吧!我劝你不要给自己找事

富文本显示

  这部分完成得倒是很顺利,因为只是简单的查找替换不需要什么逻辑工作……
  以及我很满意我设计的语法:<tag 文本内容>,比 html 简洁,比 markdown 精确(呃主要就是精确在判断到底什么时候该截断富文本标签上此处省略一千字辱骂 hugo markdown 引擎)。最显著的优化就是可以将 <color.red 文本> 直接渲染成对应颜色的 span,还添加了 <class.name 文本> 这种一旦和 CSS 联动就有无限可能的核武器(?总之已经用这个设计非常轻松地做出了带动画特效的文字……再稍微研究一下做出逐字动画也只是时间问题。
  啊感觉比起视觉小说我好像做了个网页版 PPT(。


Copyright 2025. All rights reserved.

魔女の部屋