Design

基本的基本

版面设计的基本原理

认知与设计

理解 UI 设计准则

About Face

The Essentials of Interaction Design

Math

Calculus

Early Transcendentals

Linear Algebra and its Applications

Infinite Powers

Nonlinear Dynamics and Chaos

Vector Calculus, Linear Algebra, and Differential Forms

Rendering

Physically Based Rendering

Real-Time Rendering

Coding

HTML & CSS

设计与构建网站

Wolfram 语言入门

Generative Art

The Nature of Code

Generative Art

直到今天，我终于有办法在微信公众号中插入公式了。

缘起

为什么微信公众号就没有插入数学公式的功能呢？

这个问题困扰了我很久。看看知乎，看看语雀，人家早就已经支持公式插入了，唯独这保守的微信，永远听不到用户的声音。不加就不加吧，大不了我自己做！一！个！

现有方法

方法有吗？有，还不少。

1. 插入公式图片

给公式截图，插入图片，比如这篇极其优秀的图文：理想披萨方程式。

这种方法有什么问题呢？

1. 不清晰

2. 加载慢

3. 插入麻烦

4. 不支持公众号内编辑

可这可能偏偏是别人不说我们唯一能想到的一种方法了，所以许多人都是这么用过来的。大家都妥协了。

我偏不，盗版书都不会这么做。

2. 在知乎上输入公式并复制

不知道是哪个鬼才第一个想到这个神奇的方法，最有毒的是，知乎有自己的公式后端，在复制微信的时候会自动迁移图床。同样是矢量的格式，清晰无比，速度也够快。

但是吧，就有那么一点小问题，比如：

1. 公式以图像标签插入，难控制字号

2. 不支持 Darkmode

3. 不支持公众号内编辑

OK，我又拒绝了。

3. Markdown Nice

可能这个时候，有人会来告诉你，有那么一个神器可以生成插入微信的公式：

mdnice.com

喜欢 MathJax 的同理

这真的是个非常完美的编辑器，大概是全网第一个实现公式插入的编辑器吧（这篇文章就是使用 mdnice 上传的）。可是微信公众号自己的编辑器又是一个很能令人愤怒的东西，总会出一些奇怪的问题，比如：

1. 公式复制到微信后 SVG 被加上一层 embed 标签，自动传至微信图床，失去 currentColor 的继承，不支持 Darkmode

针对这个问题，我的一位师哥（公众号 Cigaret）给出了十分好的解决方案，可以一键去除被微信加上的 embed 标签：

github.com/kongxiangyan/bookmarklet

4.$\TeX$ $\rightarrow$ SVG

公式这一行，一直存在一个鄙视链：

Word 公式 < MathType < $\LaTeX$

其中，Word 公式是公认的最难看，但是方便且普及；MathType 是个还算过的去的商业软件，但它就只是个桌面端程序；而 $\LaTeX$，不仅最好看，而且适用范围最广，前有 MathJax 适配网页，后有 $\verb|\| \text{blah} \{ \TeX \}$ 特供 Pages，唯一的问题就是，我们不知道也不会用。

所以我选择排出了大概是全微信第一篇 $\TeX$ SVG 的图文：一道从初中做到大学的数学题。但是这样的流程对于普通用户来说太复杂，学习成本太高，听说过也放弃了。

自己开发插件

说了这么多方法，为什么最后还是选择了自己开发插件呢？

原因很简单，就是这个我们又爱又恨的公众号原生编辑器。

你说它有多令人头疼吧，很多人一上来根本排不出好看的文章，打击强烈。

但为什么我们还要选择用它编辑呢？因为微信强迫你，没有它你连音视频和小程序都插入不了。所以，我至今选择在内部编辑而不是第三方网站。

在这样的情况下，也是权当学习，我和 @CPunisher，两个刚上大一的前端小白开始做起了微信公众号公式编辑 Chrome 插件。几番波折，我们已经发出了一个还算稳定的版本，并且在 Github 上开源：

github.com/ciaochaos/mpMath

公式编辑插件

公式插入演示

没想到 mdnice 社区的大佬们立马响应，为这个插件做好了适配。接下来，在 mdnice 中生成好的公式也能在公众号编辑器中通过插件进行二次编辑了！

但是细数开发过程中碰到的那些坑，我们都有些哭笑不得，比如：

1. 不知道怎样做插件

2. 我们一开始连 JavaScript 都不懂

3. 微信编辑器在命令插入的时候会遇到各种各样的问题

4. 公式莫名其妙地消失、变化、出错

5. 在原生编辑器里点保存的那一刻，一切都消失了

好在，通过不懈的努力，我们已经解决了大部分的问题。剩下的，还望大家能来 Github 提供一些帮助……

在这个过程中，特别感谢 mdnice、idx 和 Cigaret 提供的帮助。

就这样，我们两个不满微信的「愤青」，也摸爬滚打地拿出了一个看上去很不错的方案，也是第一次，接触了开源的世界。

作者

• ciaochaos - CUC

• CPunisher - BUAA

置顶：我们的二维码生成网站 qrbtf.com

有人说，二维码是 线下向线上转化最重要的入口，无论是对于线下商家、自媒体运营者、策展人还是纸媒编辑，二维码都是非常重要的一环。而标准二维码形式单一、对比浓重，常常在一张海报中「拉低审美」。

缘起

二维码是什么？

从大学开始，大范围地接触生成艺术——利用计算机算法制作的视听艺术作品，有那么一刻，我心中也会想，二维码不也可以是一种生成艺术？

《Generative Art》插图

还记得几年前的一个下午，我打开了初代 Apple Watch，我永远忘不了配对的时候，Apple Watch 上出现的动画。我看了足足五分钟，才忍心完成配对——失去观赏动画的机会。后来，我还是没忍住重装了手表，就为了再看一次这段动画。当时的我为什么这么着迷？不是因为这个动画有多「好看」，而是惊叹于我居然能通过扫描一个混沌的、肉眼看不出规律的动态图形，完成信息的识别、手表的配对。

这种体验，一下子把我震撼了。

原来信息的传递，可以如此的艺术化，原来生成艺术的背后，还有「还原的艺术」。后来，网络上能找到这段视频了，我也得知，苹果在五年前「Patented!」这项叫做「Invisible optical label for transmitting information between computing devices」的技术，也就是 设备间隐式光标记信息交换技术。

这项技术起源于光标记，在我看来，真正有趣的是其中的「隐形」二字。这也恰恰是今天，我们想在二维码上看到的东西。

二维码的默认样式对比强烈，像是一种椒盐噪声。我们想尽办法，让他变得低调、融入背景、「隐形」。这是大多数人心目中，对二维码美化、艺术二维码的共识。

不满现有美化方案，自己做一个二维码生成网站

二维码美化，方案还是有很多的。

徒手设计是一招，商业报价千元起步；找淘宝是一招，六块钱一次，自选模版，不但丑还改不了；网上现成的编辑器是一招，要素过多，完全学不会。

这些方案可以大致分为三类。一是纯手工打造，甲方爸爸换一个网址你掉一桌头发；二是模版选择，质量不高也定制不了，大多数模版还只是背景图、颜色的更换；三是专门的编辑器，太难学。

于是一周前，我明白了，我无非是想要一个 满足自己的需求、满足自己的质量要求、丰富自己选择、匹配自己的工作流程 的二维码生成工具。

好一个「以自我为中心」的设计。

push pull push

今天，在和一位天赋异禀同学一起学习、设计、开发一周百余次 push 后，我拿出了第一个还算能用的版本。从零学习了前端框架，也终于涉猎了后端知识。上才艺：

网址：qrbtf.com

与同学一起制作的网页，能做出来，
实属「初生牛犊不怕虎」

我在测试阶段制作的样式

复习一下所学，这个页面中我将二维码列表横向排布在一个溢出的盒子里。在移动端，我借鉴了 Apple 一个非常出色的设计。即每页放置两个二维码，而第三个二维码露出一截。这样的设计在保证对称性的同时暗示了用户这个区域是可以滑动的。这个暗示是怎么做到的呢？前有格式塔封闭性原理，用户会认为露出来的那一截背后有一个完整的二维码，后有设计心理，这一小节充当了意符的作用，是一种很棒的隐喻，远胜于文字提示、切换按钮、滑动条。

由于，我只需要满足我自己的需求，就将网站的重点放在了「参数化设计」上。

参数化设计

什么是参数化设计？

在过去，传统的艺术创作流程通常会带有「线性设计」的痕迹，比如画一幅水彩画、写一篇作文，不可撤销、一旦初始条件发生更改只能重做。这种模式逼迫、鼓励艺术家全神贯注地投入创作，一旦出错，一幅作品就毁了。到了视频剪辑领域，大家发现传统的线性编辑不再能适应浩大的影视制作工程，于是非编——非线性编辑的概念被提出。到了工业设计领域，工程量对设计流程又提出了更高的要求，程序化、流程化、参数化的方法接踵而至，提供便利的同时也降低了门槛、提高了上限。

小时候我们玩过 Scratch——模块化编程。实质上，他就是一种流程化的设计，流程化不仅体现在入门级应用上，行业级应用如 Grasshopper、Houdini、UE4、Blender 等也都吸收了这种方法，打造了十分引人的「连连看系统」，通过给节点连线的方式设计，无疑是一种对创意、艺术的解放。

无论是程序化（写代码）还是流程化（连连看、搭积木），无疑是一种参数化、计算机辅助的设计。在制作这样一个二维码工具之前，我花了几分钟时间，以自身体验为中心，思考了学习成本、创作体验与创作限制等维度，设计了这样一个预设样式、可调参数的生成器。提供二维码样式而不是提供编辑器，降低了学习的成本、创作的时间成本，同时可以对样式的审美感受进行统一把关，提供可调参数，满足了我以及与我需求类似的用户对更自由、更规范的统一调整方案的需要，提供 SVG 的导出，为设计师进行二次创作提供了可能。

我的愿景：借力现代化设计流程，

启发设计更多有趣的二维码

同学的原创纯手工设计

我的数字化复刻

线性与非线性设计，都有有趣、有价值的一面，也都有各自的问题。我希望我的工具能提供我需要的 I/O，能接入我的工作流程。即便是看上去无懈可击的非线性设计，有时候也需要那样一个「神来之笔」，比如生成完二维码我可以导入我的设计工具，在中间删去一些信息点，加个头像，这一步，你认为是写程序好还是自己摆弄好？

借力现代化设计流程，可以节省很多的人力成本，比如过去我们要改变二维码信息点的尺寸，只能依靠软件深处的特殊功能，或是修改图形代码，而现在，就是网站上一个参数的事情。设计、搭建这个网站，也有想要做一个二维码发布平台的企图。如果你也有兴趣，欢迎联系，加入设计、开发。

最后要感谢 JZ Creatice 的一篇文章 「九分之八」二维码美化设计法，给了我一些很棒的启发。

另外，我正在设法把二维码生成的工具集成到 mdnice.com，一个支持 Markdown、数学公式、CSS 样式编辑的微信公众号编辑器上面。一起期待吧！

完。

• WebStorm
• Node.js / npm
• Yarn

安装步骤

一、安装 Node.js / npm

nodejs.org

二、配置 npm

npm config set registry https://registry.npmmirror.com

打开 终端，输入后回车。

作用：将 npm（Node.js 默认包管理软件）软件源替换为淘宝镜像。

三、安装 Yarn

安装

npm install -g yarn

作用：使用更好的软件源 Yarn。

配置

yarn config set registry https://registry.npmmirror.com

作用：将 Yarn 软件源替换为淘宝镜像。

五、安装 WebStorm

1. 下载：https://www.jetbrains.com/webstorm/
2. 学生优惠申请：https://www.jetbrains.com/community/education/#students

完成

怀着这份朴素的思考，我克服了艺术生的专业壁垒，开始研究起了复杂系统（Complex System）、群体智能（Swarm Intelligence）、元启发式（Metaheuristics）、自组织（Self-Organization）、涌现（Emergence）、ABM（Agent-Based Modeling）这些曾经离我十分遥远的概念，将这些研究与发现做成了艺术作品，发布了人生第一个 App Store / Steam 应用。

如果你也有兴趣，不妨了解一下这个故事，和我们一起探索……

最初的启发

我是一个很少玩游戏的人，但《Frost》和他的续作《Lifelike》却给我留下了异常深刻的印象，游戏的官网告诉我，目前没有任何 CPU 能提供如此高性能的集群模拟，而该游戏基于 Metal 开发了 GPU 算法。

后来学习到了 Unity Visual Effect Graph，一个先进且易用的 GPU 粒子系统，但这个系统没有办法模拟粒子间作用，这加深了我的困惑。Frost 是怎么实现的？

和吕老师分享了我的困惑

从鸟群开始

在学术界，群集系统的开山之作是一个 1986 年的仿生程序 Boids，它将鸟群的运动归纳成了个体运动的三个基本法则，排斥（Separation）、对齐（Alignment）、靠近（Cohesion），且每个个体只能观察到一定范围甚至一定视域的其他个体。

，时长00:27

经典的鸟群算法 Boids

Processing 官网的 Boids 算法案例，https://processing.org/examples/flocking.html

两群鸟的相遇

项目网站：https://bingweb.binghamton.edu/~sayama/SwarmChemistry/

当我发现这一研究时，瞬间兴奋了起来，粒子系统继承了鸟群模型的三个基本法则，添加了更多的行为法则，同时在一个场景里，添加了不同的鸟群。多样性在一瞬间涌现了出来。

项目官网上可以下载 Java 程序，同时也开源了代码。

但是，程序把粒子的个数限制在了 300，而我们都清楚的一点是，CPU 的（单线程、遍历）找邻居算法，复杂度是 O(N2)，即粒子数量多一倍，计算的耗时是原来的四倍，模拟的瓶颈一下子就出现了。

GPU：一万倍性能提升

英伟达的老黄曾经说过一句话，根据摩尔定律，GPU 相比 CPU 的提升相当于把十年后的计算资源交到现在的研究人员手中，这也是 GPU 计算感知明显的原因吧。

YouTube 上的一位博主，游戏 Headmaster 的制作人，实现了 50w 粒子的 Boids 模拟，原理和 Processing 的 Pixel Flow 库例子程序一样，并不是真正在查找邻居，而是将粒子的信息写入一张向量材质，从而改变每一个粒子的位置。

基于向量场材质绘制的模拟，可以轻松实现十万级别的 Boids 近似模拟，但这种方法不适用我想实现的复杂模型

第一次尝试
Python + Numba

我的第一次实验是在 Python 上使用 Numba 库绑定 CUDA 进行加速，借助 Python 极低的门槛和 Numba 神奇的语法，我们很快就将 CPU 算法移植到了 GPU 平台，并用 OpenGL 绘制出来。

Numba 库，只需要添加几行代码就可以让一个函数在 GPU 上并行

第一次跑通算法，当时的画面还是黑白的

，时长00:27

使用 OpenGL 渲染的程序

在教室里测试运行

展览效果图

第二次尝试
TouchDesigner

第一次用 TouchDesigner，很多效果都不知道该怎么做，但至少是跑通了

结课忽悠人的时候，已经有了 60 倍的性能提升

遗憾的是，我们并没有在 TouchDesigner 中直接调用 OpenGL 计算着色器（因为 macOS 不支持），所有的运算仍然是在 Python 的 Numba 中完成，只是将绘图部分从 OpenGL 转移到 TouchDesigner 中。

除此之外，Python（Numba）没有结构体和向量类型，所有的数据都需要存在数组中，x、y 坐标的运算就都得写两次，非常麻烦。

第三次尝试
Houdini

在学习了 Houdini 之后，我打开了新的世界，对 OpenCL 的支持让我有了编写底层 GPU 程序的机会（CUDA C++ 对我来说真的太困难了），便捷的数据绑定、超高的性能，只用几个节点几次连接就把算法全部移植成功了。

在 Houdini 中运用 OpenCL 节点加速模拟，借助向量语法轻松改写三维

用 Redshift 渲染（没对上焦就很艺术）

Houdini OpenCL 的表现让我有了进一步优化的动力，甚至也有了想做跨平台应用的念头。明明是一个离线特效软件，却能拥有异常流畅的实时性能，比 Python 的 Numba 不知道好多少……

最后的集大成

Unity

在踩遍无数坑后，我终于找到了最最合适的平台。

计算着色器：解决互操作问题，多平台编译

在此前的 Python / Houdini 程序中，所有粒子数据的计算和渲染都需要在 CPU、GPU 之间来回拷贝，由于传统架构的内存不共享，这将严重影响计算性能，而事实上，GPU 的计算程序和绘图程序是可以互操作的，即索引同一段数据（Buffer）。

而 Unity 恰好提供了一个完美的解决方案，HLSL Compute Shader。Unity 会将写好的 HLSL 程序编译成 Metal、DirectX、Vulkan 和 OpenGL，从而省去多平台重写代码的麻烦，同普通的 Shader 程序一样，都支持读取 GPU 中的 Buffer。

即便什么优化都没有做，也能轻松实现数倍的性能提升，在粒子数量大的情况下尤为明显。

追求极限的优化：空间分割算法

直到现在，所有粒子的找邻居计算都是一整个暴力遍历，而有几种奇妙的方法，可以让程序对每个粒子只查找周围的粒子，大大省去检索的时间。其中最好理解也最适合这个场景的方法，就是空间分割。

由于每个粒子都有最大的观察半径 40，我便可以将 1280 × 720 的活动区域分割成 32 × 18 个长宽 40 的正方形网格，这样，每个粒子只需要遍历所在网格周围的九个网格。理由是，间隔了一个网格的粒子，相互距离肯定超过了 40。

在经过空间分割优化后，性能相比未优化平均提升三倍。

除此之外，还有排序算法、K-D Tree 分割，值得探索。

经过基本的网格空间分割后，性能达到了 20w 粒子 60FPS，3070Ti，对比 Processing 的 CPU 程序性能提升达一万倍

经过基本的网格空间分割后，性能达到了 20w 粒子 60FPS，3070Ti，对比 Processing 的 CPU 程序性能提升达一万倍

新的发现：粒子系统生成斑马纹

一次偶然的尝试，我发现只要给粒子加入一个小小的机制：敌我识别，即根据类型区别对待近邻粒子，就可以产生非常奇妙的自组织形态。可能是一朵小花，也可能是一个斑马纹样。

以往斑马纹只能通过 Reaction-Diffusion 算法或是 Multi-Neighborhood Cellular Automata 算法实现，而现在，基于粒子的模型也能做到了，这或许能打开生命科学的新思路，因为，生物的基础是细胞，而不是像素。

，时长01:16

粒子运动时开出的一朵小花，也是现在的应用图标

类似蠕虫的效果，完全由粒子自组织，破坏后依旧可以恢复

独特的斑马纹路

连接 MIDI 键盘后的效果，24 个参数正好对应了 AKAI MPD218 上的二十四个旋钮，体验极佳

在学院里测试时拍摄的照片

我为作品制作的移动端 UI，可以选择有趣的预设，拍摄截图、复制粘贴参数。

VR 版本，正在开发中～

从想法到上架

一些小体会

迈出第一步，坚持尝试

还记得头一回和老师分享这个想法，是在今年的三月，那个时候我是有一些畏惧，毕竟我不是科班出身，却想去研究大部分计算机本科都不会教的 GPU 计算。

突然有一天，我被丹琪姐拉到学院问，环保部要办一个 COP15 生物多样性大会的展览，你们有没有兴趣做一些作品？

我才再一次想起这个话题，心想，要不要挑战一下？

我找来了有着同样追求的朋友们：我的高中死党，跑通了第一个 Python 程序的陈同学（Github：CPunisher），过着美国时间、每晚 24 点交接工作的 Unity 队友时辰（抖音@时辰不死于背锅），以及一起做创意、策划和展览的金希、杜西大师哥。

一路上遇到了不少高人，给了我们成吨成吨的帮助。

Github 好♂友，懂得都懂

连肝了三天三夜，才把 iOS 程序的黑屏点亮了，这时队友带上来的 0.72（楼下一串串香店名）让我顿时心虚激荡，双厨狂喜

班主任杨老师，我们的显卡爸爸，承包了一整个专业的算力，带领全班秒杀 R9000P

沈浩老师向我引荐的新媒体艺术家任远，《Processing 创意编程》一书的作者，给我提的一个 “小目标”，成为了我不断追求极限的动力

游戏系的萌神呼风唤雨，请费老师、郑师哥教我空间分割等算法

这位研究群集化学的可爱的日本教授回复了我的邮件，并问我能不能做出带进化算法的版本

和上面提到的游戏开发者分享了我的程序

系主任：你们这是雁过拔毛，我要收管理费

高手，都是高手

课程海报，感谢环保部赏脸！

聆听 WWF 官方介绍生物多样性

特别感谢孙老师、丹琪姐、博哥以及黑弓的大佬们，鸥哥、老曹、小鹿姐，挤出时间亲临指导，带我们混吃混喝，希望速速再来玩

（都说我们这届是最惨的，因为疫情一众小学期出国访学的项目都取消了，但也还是成功拥有了一个个精彩的小学期，只能说，中传数媒，入股不亏 👍）

发布、提交审核

终于过审了！

一直听说苹果的审核很严格，经历了一次后觉得，是真的很麻烦，但踩这些坑特别值。

曾经做过的很多东西，都停在了原型、Demo，从未想过要发布出来，让更多的人看到。这一次我选择放下了心里的完美主义，不等功能 100% 完善，先发了再说。

然后迎接我的，是开发者账号注册，出口合规，美国报税单，外汇账户，分级评定，打包上传，这些完全没接触过的东西。

App Store 必须提交的废话文学作品：隐私政策（没有别的意思，只想说对于这种不收集任何隐私数据的程序还要专门开一个网页说明没有收集真的很费事）

第一次打包上传成功

一直在打包，一直在测试

上传了几十张不同尺寸的截图、宣传图，终于见到了自己的商店页面

Steam 过审！

App Store 过审！

写在最后

就在不久前，2021 年诺贝尔物理力学奖颁发给了三位对复杂物理系统作出重要贡献的科学家，复杂性思维正变得越来越重要。天气在确定性中无端变化，生命在无序世界中积累秩序。每一个个体都有独立的目标，在有限的连结中传递信息，却能产生令人震惊的群体智慧。这大概也是我如此痴迷于此的原因吧。

正在构筑东京铁路的黏菌

大一时绘制的朋友圈点赞关系网，根据图关系进行聚集分区

我的奇异吸引子的生成艺术作品

多近邻感知细胞自动机（Multi-Neighborhood Cellular Automata）

反应—扩散（Reaction-Diffusion）

完。

点击阅读原文或在 App Store 中搜索 “参数生命” 即可购买应用（Steam 版本 2021.12.3 上线）。如果你有任何疑问，欢迎添加我的微信（nhciao，请备注名字），一起交流！

Because of this, I plan to move QRBTF into MidReal AI Lab and no longer maintain its independent user system, GPU cluster and front-end and back-end servers.

• The new QR code generation page will be moved from qrbtf.com/ai to midreal.ai/qrcode. During the beta test, you can generate a QR code for any URL by just logging in to your Discord account.

• QRBTF’s Discord server will also be renamed Latent Cat and will continue to bring you a variety of AI experimental applications.

Also feel free to try out my new product MidReal and join its Discord server, it's still in its very early stages and any feedback and ideas are welcome.

许久没有更新公众号，来分享一个新作： ControlNet for QR Code

什么效果？有什么用处？来看下面的例子。

这是一张平平无奇，看上去略有些错乱的 Stable Diffusion 生成的风格化图像：

但给它加上三个定位点后，这张图就变成一个可以扫描识别的二维码了：

长按识别二维码，跳转至 qrbtf.com

很神奇吧！下面是这个项目的缘起、训练过程和更多生图结果……

缘起

大二的时候，我和同学做了一个参数化二维码生成器，qrbtf.com（如何制作一个漂亮的二维码），出于各种（摆烂）原因，至今没有继续更新。记得一次和创新工场的咏刚老师交流时，突然聊到，能不能在任何肉眼观察完全正常的图像中编码隐藏的信息。在那个 GAN 的年代，机器学习的生态远没有如今活跃，不说有 Gradio Web UI、Diffusers 这样好用的框架，但配环境就足够劝退我了，这个想法就此搁置。

直到 Stable Diffusion 横空出世、ControlNet 席卷各大行业，经历了很长一段时间的摸索，我才重新开了这个坑，能不能用扩散模型生成一个看上去很像一张图片的二维码？

最初的 ControlNet 尝试

训练的中国传统纹样 LoRA

AIGC All in One 文档，持续更新中

HuggingFace JAX/Diffusers Sprint

训练

ControlNet 训练的数据结构十分简单，仅为一张输入图（conditioning image）、一张输出图（image）和一段标注（caption）。官方给出了非常多预训练模型，包括 1.0 版本中的 Depth、HED、OpenPose 和 1.1 中非常有创意的 Shuffle、Tile 和 Instruct Pix2Pix 等。

ControlNet 的训练对数据量和算力均有较高要求，论文中记录的训练数据量从 8 万到 300 万不等，训练时间可达 600 个 A100 GPU 小时。好在作者提供了基础的训练脚本，HuggingFace 也做了 Diffusers 实现。

在此前的 JAX Sprint 中，我们有幸使用 Google TPU v4，非常快地完成了 300 万张图的训练。可惜活动结束，我们回到了实验室的 A6000 / 4090，训练了一个 10 万张图的版本，且学习率非常大，只为尽早出现“突变拟合”（Sudden Convergence）。

GPU / TPU 训练参数

灰度控制 ControlNet，训练流程见 aigc.ioclab.com/sd-showcase/brightness-controlnet

光影控制 ControlNet，训练流程见 aigc.ioclab.com/sd-showcase/light_controlnet

推理

测试模型训练完毕后，我们尝试了多种 Checkpoint + LoRA + QR Code ControlNet 的组合。得到了下面各式各样的可识别二维码。

中国传统纹样

LoRA 训练流程：aigc.ioclab.com/sd-showcase/chinese-ornament  LoRA 模型下载：civitai.com/models/29858/chinese-traditional-pattern

浮世绘风格

LoRA 训练流程：aigc.ioclab.com/sd-showcase/fuyue  LoRA 模型下载：civitai.com/models/25222/ukiyo-e-fuyue-style-background-mix

二次元和插画风格

水墨风格（MoXin）

水彩风格

立体风格

抽象风格

PCB 风格

Bonus：Ps 重绘

后记

本科毕业之际，疫情退散，看到了生成式 AI 如此蓬勃发展，不禁感叹，真想重读一次本科。

这次的 QR Code ControlNet 离不开和 @陈柏宇(时辰) @王照涵 @陈智勇 几位同学的通力合作，一起在三天内完成了数据集准备、训练和推理测试，以及来自吕欣老师、孙国玉老师实验室的 GPU 资源支持。也要隆重感谢 Google、HuggingFace 此前慷慨提供的 TPU 服务器，属实是爽了一把。

模型发布、技术文档请留意公众号后续更新和文档更新（aigc.ioclab.com），欢迎点击阅读原文给文档留言！

Before making your first API request, you need to pick which API client you will use. In addition to good ol' cURL HTTP requests, Protocol offers clients for JavaScript, Python, and PHP. In the following example, you can see how to install each client.

# cURL is most likely already installed on your machine
curl --version

Choose your client

123

GFM

Autolink literals

www.example.com, https://example.com, and [email protected].

Footnote

A note¹

Strikethrough

one or two tildes.

Table

Tasklist

• to do
• done

又：面向非科班程序员的前端指南

还没开写，列了一下大纲

前端

• Vercel
• Next.js
• Tailwind CSS
• shadcn/ui
• Framer

后端

• FastAPI
• Railway

AI

• Vercel AI SDK
• Gradio

大家不妨思考一下这个问题：

你认为什么时候发朋友圈最合适？

有人说，晚饭后发朋友圈最合适，因为那个时候大部分人都会闲下来刷朋友圈；也有人说，晚上发朋友圈的人太多了，自己发的内容太容易被淹没，反而更难取得关注；还有人说，早起发朋友圈更好、正午发朋友圈更好，因为大家有起床后工作前或是午饭后刷朋友圈的习惯，而且那时朋友圈更新的频率比较小……

以上都是大家对朋友圈发布的基于经验的思考，经验会不会出错呢？我想研究一下。

首先，我们发朋友圈最期待的就是两个反馈：点赞和评论，因为它们是由我们所发布的内容转化而来的，所以我们称之为 “转化量”。来看看我朋友圈一天中点赞量和评论量在 24 小时时间上的分布，其中图中的每一个点代表一条朋友圈，纵坐标是其收获的点赞量 / 评论量，横坐标是朋友圈发布的时间。

朋友圈点赞数与时间散点图

朋友圈评论数与时间散点图

看到这里，很多人就想下结论了，显然朋友圈晚上发最合适嘛，晚上的点又高又密。真的是这样吗？这其中有许多的问题。

首先是样本，图中的 7418 个点代表我获取我的朋友圈的 7418 条数据，局限性很大，不能代表所有人朋友圈的发布情况。其次，点的密度大只能说明该时段朋友圈的发布量大，这没什么。还有，晚上点赞量高的朋友圈多，但点赞量低的朋友圈也多，点赞量的期望真的会高于其他时段吗？

抛开样本的局限性不说，我们先看一看这些朋友圈都是在什么时候发的：

朋友圈发布时间直方图

工作日和周末各时段的平均发布量对比图：

工作日与周末朋友圈平均发布量对比图

可以看出，我的朋友喜欢在正午、傍晚、和晚间发布朋友圈，在每晚 21:00 - 23:00 达到全日的最高峰。同时，周末的高峰比工作日更高。

这就是为什么有人会觉得晚上发朋友圈会被 “淹没” 了。

可是，发朋友圈的人多，看朋友圈的人也会多啊！我把一天拆成 48 个时段，统计每个时段朋友圈的数量、点赞总量、评论总量，绘制成如下散点图。

各时间段点赞量（黑）、评论量（灰）与发布量的散点图与拟合直线

其中，每一个点代表一个时段，横坐标是其间朋友圈的数量，纵坐标是其点赞总量（黑）/ 评论总量（灰）。再进行一波线性拟合，发现……无论什么时候发朋友圈，获得点赞、评论数量的期望几乎是一样的，一样的！

这可真是太尴尬了。

这个时候老师发来了一条公式：选择或然率公式。

将其投影在微信朋友圈上，我也得出了一条类似的公式：（微信朋友圈）转化量公式。

进行简单的转换，可以得出：

也就是：

所以，转化量期望恒定的源头就在于：我们发朋友圈的时间和浏览朋友圈的时间分布几乎是一致的。

等等，回到刚才的问题，期望一样又能怎样呢？期望恒定了，我们获得更大转化量的机会也恒定了吗？

这时，我们来关注一个新的指标：注意熵。

微信朋友圈的发布、浏览、点赞、评论都是符号互动的重要组成，它形成了比以往更多的人与人之间的强弱互惠性服务关系。这些互动拓展了个体维持关系的能力，同时也挤压了用户的时间，占用了用户的注意力。

假设我们的注意在各条朋友圈之间的分配是完全随机的，那么各条朋友圈获得的曝光机会也就是相等的。但事实上，我们的注意力会集中在某几个位置而忽视其余位置，我们怎样去描述注意的集中或分散程度？

基于香农的信息熵理论，用户朋友圈的注意熵可以反应用户注意的不确定性。

熵被用来衡量一个随机变量出现的期望值，计算方法是：

我将点赞以及评论数据作为计算注意熵的来源，探究用户注意的分散度。对于一份点赞样本 C，P(ci) = ci / ∑ C，即某条朋友圈的点赞数可反应用户注意停留在该内容上的概率。

同样把一天分为 48 个时段，对每个时段的所有朋友圈计算注意熵，可以得到总注意熵的趋势图：

各时间段的总注意熵

如果对每个时段取定量的朋友圈样本，可以绘制各时段确定样本数注意熵的趋势图：

各时间段确定样本数的注意熵

由图可知，在一个确定时间段内，用户的注意的随机性会因内容的增多而变强，而在一个确定数量的样本中，用户注意的随机性几乎恒定。

这就说明，用户浏览内容时，注意力出现的概率是恒定的，即用户出现对某条朋友圈关注度提升的概率是恒定的，但是用户的注意总量会被有限时间的内容数量所稀释，信息量越大，用户随时间分配注意的随机性越强。

太玄学了。

紧接着，我的神仙老师又发来了一本书——巴拉巴西的《链接》，读完之后，我发现其中无尺度网络的幂律分布同样适用于微信朋友圈。

首先，我们把我朋友圈的每一个用户视作一个节点，每一个次点赞都形成两个节点之间的有向边，这样一来，一个有向图就形成了：

一个相同阶数和边数的随机图：

统计两个图中各个节点的度（节点连接的边数），可以发现，朋友圈的图的度的分布是幂律分布，而随机图的分布是二项式分布。对于幂律分布来说，研究其度的期望的意义不很大。

二图度分布对比图

平均没有意义，多少不是关键。

综上所述，如果朋友圈的质量足够高，那么我们可以一直维持在自己朋友圈这个幂律分布的顶端节点——那个拥有连接数最多的节点，这个时候，朋友圈转化率的期望值没有意义——它几乎是恒定的，朋友圈发布的数量不是关键——大部分朋友圈会被 “淹没”，起决定作用的就是我们获得的曝光量。所以，质量足够高，什么时候 “人多” 什么时候发，这，就是互联网时代的 “黄金时间”。

用《链接》里的另一句话作为此次小思考的收尾：节点永远在为链接而竞争。

One more thing……

根据点赞关系绘制的社区图，可以非常精准的分类我的各个好友群体

非常感谢吕欣老师、沈浩老师、孙国玉老师、张辉老师的悉心教导！

完。

After struggling for a long time with domain names (formerly nhciao.com / ciaochaos.com), front-end architecture, etc., I finally set up troyni.com as my personal website.

Tech stack

• Next.js + React.js + Tailwind CSS + shacd/ui for front-end
• MDX + KaTeX for article content
• Mixpanel for analysis
• Vercel for CI/CD

Plans

In the future, I will continue to write English/Chinese articles on the /articles page, share projects on the /projects page, and add some cool stuff to /playground.