skip to content
声控烤箱 | KazooTTT 博客

Notes(102) RSS feed
flow

21. 2025-01-06

Updated:

最近一直都很忙,忙到有时候怀疑自己从上海回成都是否是好的决定。

但又觉得换了工作后,个人能力确实有提升,眼界也开拓了一些。所以目前仍在纠结阶段,要明确未来的方向得先想清楚我到底要什么,不能再草率做决定了。

之前也提过,想把那个搁置的项目重新写起来,因为现在也在学 unity 了,靠这个来进一步提升学习的动力是很好的方向。而且前期队友们都做了那么多准备了,感觉没有落地比较可惜。

我个人的想法是我先做一个框架出来,把流程跑通。资源部分使用文本或者简单的图片占位替代。

之前在电视,投影仪,ar 眼镜之间纠结,今天试用同事买的 ar 眼镜,有些被劝退了,对于近视人群的佩戴体验不是很好。戴上去比较费劲,且容易反光。

最近的状态有点像高三,从早忙到晚,专注时间比较长,回到家脑子里还有点兴奋

很喜欢黑客松的感觉,外部压力下短时间内快速实现想法,动力满满

备忘

dhcp 切换器

新版布局

22. whisper ui 下载模型 镜像设置

Updated:

在使用 whisper ui 的时候,需要下载模型,如果不做配置默认是从 huggingface 下载的,但是 huggingface 在国内访问速度很慢,所以需要配置镜像。

配置方法如下:

第一步,在项目文件的 backend\configs 里新增.env 文件(如果你使用的是 pinokio,则是在 app\backend\configs 里新增.env 文件)

第二步,在.env 文件中添加镜像配置

HF_ENDPOINT=https://hf-mirror.com

第三步,重新运行 whisper ui

参考

如何快速下载huggingface大模型 – padeoe的小站

23. 2024-12-23 星期一 学习 unity day01

Updated:

学习 unity day01

今天看了唐老师的 unity 入门课程(感谢网友的推荐,这门课真的质量很高,思路清晰且容易看进去),搭配豆包和哔哔君看视频学习也比较高效了。

看了 mrtk2 的一些 demos,个人的感受是学 unity 的一个方法是可以试着复刻一些常用的 prefab 或者 class,方便自己,也能增加熟练度。(比如前端封装 slider,unity 中也封装 slider)

最后就是直接阅读后续要上手的项目代码并学习使用 remote app 快速看效果。

其实在大学的时候有参加过 VR 的社团,当时看过 B 站上一个虚拟小屋的教学视频也体验过 VR 设备。后来大创也申报过 VR + 医疗相关的项目,不过被砍后已经很久没有接触过 unity。

然后去年和同担一起有策划过一个模拟经营类的游戏,但是因为我太忙并且主动性不高这个项目搁置了。希望能通过这次好好学一下 unity 并把这个项目重新做起来。(做到一定阶段再跟别人说,而不是还没开始就大范围告诉他人,我觉得我一直都是这种喜欢给自己画饼之余也爱给别人画饼的,这样的缺点真的需要改)

今天同组同事也跟我聊了一下,教了我一些技巧,有句话对我来说印象比较深刻就是“你就是缺了迈出去的那一步。”

不管怎么样实践和学习总是没错,不要抵触新的事物,先做一个垃圾出来至少也算是做出来了。

image.png

24. 2024-12-19

Updated:

值得记录的事情

帮朋友单糊了一个大模型应用,被她和她的领导夸好,超开心的。

之前在公司做项目的时候被 leader 夸说我写的真的很快,有的事情没我搞不定。

听到这种被认可的话,就会觉得更有动力。

今天写好了一个 合并多个PDF 的小项目,写完之后用了合并功能在微信读书已经看上了杂货铺的中文翻译✌️

PDF文件合并工具 - 在线免费合并PDF文档

739C4785-E7F0-412D-B4CC-BC3EA1A7BD7A_1_105_c.jpeg

碎片化记录(基于 n8n + rss + 飞书 webhook 生成)

11:53:昨天的打卡

12:27:这个真的很好用

不打游戏,办公够了

安利安利

13:11:21 牛爱能闪耀运动会吗

13:39:今夜你会不会来

15:17:如果使用 remix,然后用 cloudflare 进行部署。

通过 remix 的官方脚手架创建,在 Workers 和 Pages 中直接 import 仓库然后部署是无效的。部署完成后点击对应的域名访问,会无响应。

正确的做法是:

参考 cloudflare>) 的文档,使用 cloudflare + remix 的模板创建

shell

pnpm create cloudflare@latest my-remix-app —framework=remix

然后再在 Workers 和 Pages 中 import 你对应的 git 仓库,然后构建设置选择 remix,它会帮你填好默认的配置,保留该配置即可。

参考

Remix + Vite: assets not generated in /public - Developers / Cloudflare Pages - Cloudflare Community

16:18:黄金和纳斯达克都跌了,感觉今天亏的能抵半个月赚的

16:15:忙了一下午点开社交平台什么新物料的没有

16:20:昨天在看曼谷旅居一个月的开销

感觉涉及到省钱,真的离不开搭子

吃饭,住房很多地方都是两个人性价比更高

但是我现生哪里去找这样的搭子

18:32:朋友要处理一些数据但是比较敏感所以只能用本地大模型。

花了点时间,帮写了一个 ollama 安装运行脚本(离线拷贝的,因为感觉大概率会碰到 pull 不下来的问题),然后还把 excel 的处理也写了,最后做了个简单的 gui 方便操作。

19:17:忙的时候遭不住,闲的时候又不乐意了

19:12:以前用豆包觉得回复好慢

现在快了好多

(用来水字数还可以,输出贼多

19:33:回家吃完饭刚好 8 点

8 点有事情要核对一下

好匆忙

19:59:想给别人发大文件除了网盘还有什么方法

阿里和百度都限速

20:10:是不是可以

把 gameobject 理解为 elements container

然后 component 对应的就是 container 中的各种 element

prefab 才对应的是 component

20:03:给别人分享网盘链接,结果对方没会员下载很慢的时候,很想把账号借给对方

但是真的存了很多不方便分享的东西,好烦好烦,删了可惜,不删借不出账号又焦虑

20:00:牛爱两人还认识吗

20:16:大二的时候大创报错类型了,报了商业型项目

当时的想法是通过 vr 治疗幽闭恐惧症(我也忘了为什么要做这个)

我是负责人,拉着队友们写了几天申报书,商业计划书,寒假的时候每天在家学 unity,学到骨骼和动画的时候就开学了

结果去立项答辩的时候被卡了(商业型项目很严格…),给我留下了很深的阴影,从那之后再也没碰过 unity 和 vr

回头想想那个时候有点封闭自己,虽然最后没做下去,但也应该请队友们吃个饭,或者感谢一下的

没想到过了 6 年,又要重操旧业了

20:28:明天把那个 stl 打一下

看看什么效果

20:31:买了个显示器支架希望稳一点

22:46:学到了虽然用不上

  • 转发 @曝猛: 以防你想了解用手机直播的技巧……

22:57:拉了几下 v 字把手就这样了

23:03:转发微博

  • 转发 @全是狗狗啊: 只要一碰小狗狗的鼻子,狗狗就会自动地吐舌头!这也太可爱了吧!啊啊啊啊我能玩一天 全是狗狗啊的微博视频

25. 合并多个PDF

Updated:

地址:

PDF文件合并工具 - 在线免费合并PDF文档

背景

昨天在超话看到了杂货铺的小说的翻译

中字自翻《Whale… - @Co_Shean01的微博 - 微博

image.png

然后由于是分章节每个章节有对应的 pdf,而我比较喜欢使用微信读书来进行阅读,所以产生了想要把所有的 pdf 合并为一个的需求。

虽然现在随便搜索都能搜到有这样现成的工具,但是出于学习目的,还是自己写了一个合并 pdf 的网站。

鸣谢

使用了 GitHub - nbesli/pdf-merger-js 这个库来进行 pdf 的合并

26. 使用cloudflare部署remix项目

Updated:

如果使用 remix,然后用 cloudflare 进行部署。

通过 remix 的官方脚手架创建,在 Workers 和 Pages 中直接 import 仓库然后部署是无效的。部署完成后点击对应的域名访问,会无响应。

image.png

正确的做法是:

参考 [cloudflare](<Remix · Cloudflare Pages docs>) 的文档,使用 cloudflare + remix 的模板创建

Terminal window
pnpm create cloudflare@latest my-remix-app --framework=remix

然后再在 Workers 和 Pages 中 import 你对应的 git 仓库,然后构建设置选择 remix,它会帮你填好默认的配置,保留该配置即可。

image.png

参考

Remix + Vite: assets not generated in /public - Developers / Cloudflare Pages - Cloudflare Community

28. react-scan的用法

Updated:

在本地运行 follow 的源代码的时候是我第一次接触到 react-scan, 后来又在 x 的首页山上面刷到了原作者以及其他人对于 react-scan 的推荐。

下面来介绍一下它的用法,以及我个人认为它好用的原因。

安装

安装方式可以分为两种,开发环境安装,使用浏览器插件。官方文档 有比较详细的教程,这里不做赘述。

如果通过 npm 安装,可以自定义更多的配置,可以参考这里的 API Reference

使用

react-scan 有三个按钮

  1. 是否查看元素的开关
  2. 是否查看 re-render 的开关
  3. 是否开启声音的开关

开启元素查看

会在面板上显示当前的元素,以及它的 props,context,state。

如果发生变化,会变为紫色,这样可以方便你排查是什么值的变化导致了 re-render。

在某些元素的 props 中会显示一个⚠️警告标志(isBadRender),提醒开发者这里可能存在性能优化的空间

const isBadRender =
isChanged &&
['object', 'function'].includes(typeof lastValue) &&
fastSerialize(lastValue) === fastSerialize(contextObj[key]);

为什么情况下会出现:

  • 组件发生了重新渲染(isChanged 为 true)
  • 变化的值是对象或函数类型([‘object’, ‘function’].includes(typeof lastValue))
  • 但是当我们序列化新旧值时,它们是完全相同的(fastSerialize(lastValue) === fastSerialize(contextObj[key]))

开启 re-render 查看

会显示当前的 re-render 的次数,以及每个 re-render 的组件。

为什么觉得好用

虽然 devtool 也可以查看 re-render 的情况,但是 react-scan 把 component 的 props,context,state 都显示出来并且标记了 bad render,让问题的排查更加方便。

并且 react-scan 自带面板,不需要像 devtool 一样首先需要打开 devtool 再勾选上 re-render 的画面闪烁监听。

image.png

参考

还有这种前端技巧?REACT-SCAN 代码鉴赏|精简版_哔哩哔哩_bilibili

29. 网页端判断是什么系统,从而显示不同的组件。

Updated:

看到 b 站投稿页的右上角有一个下载投稿工具的按钮。

image.png

点了之后发现是.exe 文件,而我的电脑是 macos 的系统。所以这次的下载算是无效操作。

image.png

体验要做的更好一点的话,应该根据系统来显示不同的组件。(在这里如果不是 windows,就不要显示 exe 相关的文件夹下载)

function getOperatingSystem() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/windows/i.test(userAgent)) {
return "Windows";
} else if (/macintosh|mac os x/i.test(userAgent)) {
return "macOS";
} else if (/linux/i.test(userAgent)) {
return "Linux";
} else if (/android/i.test(userAgent)) {
return "Android";
} else if (/iphone|ipad|/i.test(userAgent)) {
return "iOS";
} else {
return "Unknown";
}
}

userAgent 的例子:

‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36’

参考

User-Agent - HTTP | MDN

What are the latest user agents for popular web browsers?

30. 配置nginx以成功代理websocket

Updated:

配置 nginx 以成功代理 websocket

在使用 socket.io 的时候遇到这样一个问题:websocket 接收的消息的顺序错位了,然后看了一下浏览器的 console 的报错,提示连接到 ws 失败,然后在浏览器的开发者工具的网络中看了一下 ws 对应的消息里面报错:Error during WebSocket handshake: Unexpected response code: 200

查了一下发现是 nginx 没有配置的问题。

相关的类似的问题:

https://github.com/websockets/ws/issues/979

nginx 官方文档提到的解决方法:

WebSocket proxying

需要注意的是:

location /chat/socket.io {
proxy_pass <http://backend>;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}

这里的 backend 就是 ip 地址或者域名,不需要加后缀/chat/socket.io。