1. 前端“已死”？AI 浪潮下的反思
“前端已死”的论调近年来屡见不鲜，尽管这其中不乏标题党的夸张成分，但也反映出开发者们对于自身工作内容被技术变革冲击的隐忧。尤其是近年来AI技术的飞速发展，更是加剧了这种焦虑。本文将结合AI绘画的技术总结，探讨AI对前端开发乃至整个行业的影响，尝试拨开迷雾，寻找未来的方向。
绘画与摄影的启示
2022年的AI热潮，绘画行业首当其冲。当时“绘画已死”的悲观论调甚嚣尘上，这不禁让人想起1839年，法国画家 H·保罗·德拉罗什在看到银版摄影术的成品时发出的惊呼：“此时此刻，绘画死了。” 摄影的出现，以其快速、精确地记录现实的能力，直接威胁到了古典绘画中结构和透视这两项耗时费力的核心技巧。 如今，AI绘画似乎也具备了类似的能力，只需寥寥几个关键词，就能生成以往需要长期训练才能掌握的图像。那么，AI绘画真的能够取代传统绘画吗？我们不妨先来看看AI技术在前端开发领域的应用情况。
2. AI 辅助网页开发：效率提升还是颠覆？
目前已经涌现出不少AI工具，试图将设计图直接转化为网页代码。笔者选取了几款口碑尚可的工具进行了测试，并特意选择了较为规整的设计图，因为在处理复杂海报时，效果往往差强人意。
设计图如下：
FrontendAI
两次生成的结构基本正常，但在细节上有所欠缺：
调整需求：将播放器改为浮动
FrontendAI 允许选择不同的框架：
Open UI
生成的结构过于简单：
Screenshot to Code
因缺少 GPT key，未能进行试用。
v0
Vercel推出的AI代码生成工具 v0 表现相对较好，能够快速生成前端组件代码。 Vercel作为前端部署平台，在这方面具有一定的优势。
生成的网页截图：
从首次生成的结果来看，只能说外形相似，细节处理远不够完善。默认生成 React 代码：
v0支持使用自然语言描述需求，逐步细化，从而获得更优的结果：
收费模式为会员制，提供少量免费试用项目：
AI 网页开发工具总结
除了 v0 采用收费模式外，其他三款工具均为开源项目，可以自行部署，但需要使用 GPT 的 key，且生成效果相对较差。这些工具都支持通过自然语言描述需求，结合 Chat-GPT 逐步细化需求，从而获得更好的结果。 然而，从还原度来看，AI 工具的表现仍然有待提高，难以完美呈现设计图的细节。尽管如此，AI 工具在快速生成代码方面具备优势，可以作为结构参考，甚至直接使用 HTML 部分的结构。但样式方面仍需进行调整。
值得注意的是，这些框架普遍采用了原子化 CSS 方案，使用多个类名代替 CSS 属性。这种方案近年来在前端领域较为流行，例如 Open AI 官网就使用了 Tailwind CSS 框架。然而，在大型和样式复杂的项目中，原子化 CSS 的运用仍存在争议。如果团队成员不熟悉这种写法，代码的可维护性可能会受到影响。
AI 生成网页的前景是值得期待的。例如，可以将其集成到 IDE 中，读取当前项目的代码风格进行生成，或者实现类似 v0 的效果，生成更符合项目风格的代码。此外，像 v0 这样的产品，作为快速生成原型、验证设计的工具，已经具备了足够的价值。 总的来说，AI 在网页开发领域的进步空间仍然很大。将设计图转化为代码仅仅是前端工作的冰山一角，目前完全依赖 AI 仍存在困难。直接使用 Copilot 这类 AI 代码提示工具进行开发，效率可能与之相当。
3. AI 绘画：触及艺术的灵魂？
如果说AI暂时无法完全替代前端开发，那么首当其冲的绘画行业现状如何呢？我们先来简单了解一下AI绘画的原理。
前文提到的AI代码生成工具，都具备两种形式的输入：自然语言和设计图，即文生图和图生图。这两种输入方式也是AI绘画的核心。在探索AI设计工具的过程中，笔者产生了一些疑问：AI 是如何从一张图片生成代码的？AI又是如何理解图片的呢？
关于AI绘画的原理，已经有很多深入浅出的资料。如果直接从原理入手可能会有些困难，不妨先了解一下流程，这里只挑选几个对生成影响较大的重点进行说明：
- 文字生成图片:
- 文字输入
- clip_tokenizer（文字转换成数字）
- text_encoder（对输入的文字进行特征编码，用于引导 diffusion 模型进行内容生成）
- diffusion_model（核心部分，下面说）
- decoder（将潜在特征解码成图片）
- 图片生成图片:
- 图片输入
- image_encoder 转为文字
- clip_tokenizer
- text_encoder
- diffusion_model
- decoder
其中，Clip 模型和 Diffusion 模型是两个关键模型：
Clip 模型
由 OpenAI 在 2021 年提出，通过使用大量图片和文字对模型进行训练，让模型学会理解图片和文字之间的关系，降低了标注成本，提高了模型的泛化能力。简单来说，就是给一张图片打标签。
Diffusion 模型
Diffusion 模型是当下AI绘画的核心技术。其原理是，首先对照片添加噪声，然后在该过程中学习到当前图片的各种特征。之后再随机生成一个服从高斯分布的噪声图片，然后逐步减少噪声，直至生成预期的图片。
2021 年，Open AI 发布了 DALL-E 模型，声称可以从任何文字中创建高质量图像，其使用的技术正是 Diffusion Models。随后，基于 Diffusion Models 模型的图片生成成为主流。2022 年，OpenAI 又发布了 DALL-E 2，可以生成更高质量的图片。但 OpenAI 一直未公开 DALL·E 的算法和模型。
3.1 AI 绘画工具的发展历程
2021年，AI 绘画的理论模型日趋完善，随后在2022年迎来了爆发式发展，各种AI 绘画工具如雨后春笋般涌现。
- 2022 年 2 月：Disco diffusion V5
Disco diffusion V5是由 somnai 等几个开源社区工程师制作的基于扩散模型的AI绘图生成器，相比传统模型更易于使用，但生成的图片较为抽象。 在此阶段，人们对 AI 绘画普遍持怀疑态度。
- 2022 年 3 月：Midjourney
Midjourney 由 Disco diffusion 的核心开发者参与建设，搭载在 discord 平台，通过 discord 聊天式的人机交互方式，引导设计结果，并允许用户选择倾向的结果，使 AI 能够按照指定方向进行深化，无需设置复杂参数。 Midjourney 发布 5 个月后，美国科罗拉多州博览会的艺术比赛将第一名颁给了一幅名为《太空歌剧院》的画作。令人震惊的是，该作品并非出自人类画师之手，而是由人工智能 MidJourney 完成的。参赛者公布这是一张 AI 绘画作品时，引发了很多人类画师的愤怒和焦虑。
- 2022 年 4 月：DALL·E 2
DALL·E 2 能够生成质量更高的图片。
- 2022 年 7 月：Stable Diffusion
Stable Diffusion 是本文介绍的重点。它由 Stability AI 公司发布，该公司崇尚开源，其宗旨是 “AI by the people，for the people”。 相对于闭源的 DALL·E 和以产品形式收费的 Midjourney，Stable Diffusion 具有独特的优势。
- 2022 年 10 月：NovelAI
Nova AI 是由美国特拉华州的 Anlatan 公司开发的云端软件。该软件最初于 2021 年 6 月 15 日推出测试版，主要功能是辅助故事写作。之后，在 2022 年 10 月 3 日，Nova AI 推出了图像生成服务，因其生成的二次元图片效果出众而广受欢迎。
除已停止更新的 Disco Diffusion 外，其他几款工具在 2023 年至 2024 年均有良好发展，凭借各自的特点占据了 AI 绘画的一席之地。时至今日，仍有大量绘画工具和绘画模型发布，用途和效果各异，在此不一一列举。
3.2 AI 绘画工具的使用
笔者将以通用的开源工具 Stable Diffusion 为例，介绍 AI 绘画工具的使用方法。
部署
自行部署模型固然可行，但环境配置问题繁琐复杂，需要根据自身情况进行处理。本文以整合包为例，以便快速进入使用阶段。
- 选择一个整合包
市面上有多种整合包可供选择，例如早期流行的 AUTOMATIC1111/stable-diffusion-webui，以及国内基于该版本开发的绘世整合包。整合包具有独立的运行环境，不会影响本地系统，可以有效解决环境配置问题。 这里选择秋叶的绘世整合包。解压后打开，进入高级选项-环境维护-安装 PyTorch——这是 Python 的深度学习框架，选择一个版本进行安装。
- 启动
AMD 显卡会提示安装 ROCm，NVIDIA 显卡可能会提示安装 CUDA。安装完成后点击启动，启动后会自动打开浏览器，默认端口为 7860，可以在高级选项中修改。
使用
- 选择模型
实际上可以使用多个模型。常见的模型分为大模型和用于微调大模型的小模型。这里选择的是最重要的大模型，也称为 Checkpoint。 整合包默认安装的是基于 SD1.5 的 Anything 模型，该模型可以生成各种风格的图片，但相对比较早期。目前可以使用 SD XL 模型。针对想要绘制的不同内容和风格，应选择不同的模型。模型的使用涉及的内容非常丰富，这里先使用默认模型进行演示。
- 正向提示词
即 Prompt，用于引导模型生成图片，可以是一个或多个关键词。例如，常用的改善画质的 Tag： masterpiece, best quality
- 逆向提示词
与正向提示词相反，逆向提示词用于限制模型生成的内容。例如，常用的限制 Tag： lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry
例如，首先使用正面提示词Ocean生成一张图片（Anything 模型偏卡通风格，效果不太明显，这里使用了另一个模型）：
通常来说，海是蓝色的。如果在负面提示词中加入blue，会发现生成的图片不一定是蓝色的海：
如果再添加一个负面提示词green，生成的图片可能是夕阳下的海，因为此时的海既不是蓝色也不是绿色：
提示词还可以添加权重。例如，(ocean)表示 1.1 倍，((ocean))表示 1.1×1.1=1.21 倍，[ocean]则表示减少权重，(ocean:1.5)表示指定 1.5 倍权重。 Stable Diffusion 刚兴起时，Prompt 被戏称为“咒语”，因为复制别人的咒语就能生成类似的画风。但很多因素都会影响 AI 的生成，这是由模型的原理决定的。
- 采样方法
Stable Diffusion 在生成图像前，会先生成一张完全随机的图像，然后噪声预测器会在图像中减去预测的噪声。随着这个步骤的不断重复，最终会生成一张清晰的图像。整个去噪过程叫做采样，使用到的方法叫做采样方法或采样器。
推荐使用 Euler a 和 DPM++ 2M Karras，该整合包默认也是这两种。使用同样的提示词、同样的种子、迭代步数 20：
DPM++ 2M
Euler a
- 采样迭代步数
一般选择 50 以内，通常可以选择 28。有很大的调整空间，采样方法不同，合适的迭代步数也不同。
DPM++ 2M，迭代 20 步：
DPM++ 2M，迭代 28 步：
DPM++ 2M，迭代 50 步：
Euler a，迭代 20 步：
Euler a，迭代 28 步：
Euler a，迭代 50 步：
- 图片分辨率
不宜设置过大，一般不要超过 512×512。超过该范围可能导致生成的图片变形、结构崩溃，这与模型的原理有关，并且会增加计算成本。如果需要更高分辨率的图片，可以勾选高分辨率修复，生成较小分辨率后再进行超分。
下图是 512×512 的图片，第一张是原图，第二张是超分后的图，但超分其实是一种图生图的重绘：
再次理解 AI 绘画原理
理解这些参数和生成过程后，再次理解模型的原理就更容易了。 将提示词和种子传给模型，经过降噪和扩散，最后 VAE 修复，图片生成。
参考资料： 【AI 绘画】大魔导书：AI 是如何绘画的？Stable Diffusion 原理全解（一） 【AI 绘画】深入理解 Stable Diffusion！ Tensor Book 潜工具书
补充一些模型
- LoRA 和 LyCORIS
LoRA 是除了主模型外最常用的模型。LoRA 和 LyCORIS 都属于微调模型，一般用于控制画风、控制生成的角色、控制角色的姿势等等。可以自己喂数据进行训练，例如喂 X 张同一个角色让 AI 学习，再加上 LoRA 模型进行输出，就有一定概率生成需要的角色。
使用方式是以提示词的方式加入。此处使用的 Lora 是 Silicon-landscape-isolation：
固定种子，不加入 LoRA 模型，使用提示词 landscape/scenery：
固定种子，加入 LoRA 模型，使用提示词 landscape/scenery：
- VAE
VAE 会影响出图的画面的色彩和某些极其微小的细节。一般用于图片亮度和饱和度的修正、画面校正和以及补光等。绘图时如果出现图片亮度过低、发灰等问题时就需要用到，一般来说大模型自带 VAE。
- ControlNet
ControlNet 是强大的控制模型，可以实现画面控制、动作控制、色深控制、色彩控制等。可以通过 ControlNet 来控制人物的姿势：
- Flux
前 Stability AI 核心成员 Robin Rombach 创立了一个名为 Black Forest Labs 的新公司，并获取了 3200 万美元的融资，并开源了 FLUX.1 系列模型。细节和手脚精准度也非常高，但配置需求也相应提高。
更多详细内容可以参考 【AI 绘画】全部模型种类总结 / 使用方法 / 简易训练指导——魔导绪论
插件、扩展及其他
- 超分
- 重绘
重绘学派法术绪论 1.1
可以看出，AI绘画已经发展为一个全新的研究领域，并非一蹴而就的简单技术。
3.3 AI 绘画的挑战
- 版权问题
AI绘画的版权问题源于提示词。仅仅凭借一个提示词或训练模型，就能以特定画师的风格生成类似的图片。对于画师而言，形成自己的风格往往需要日积月累的练习。这与当年绘画和摄影面临的情况如出一辙。
- 结构问题
人物的结构以及手指等细节对于人类画师来说都难以掌握。尽管现在有微调模型和重绘的辅助，处理这些内容仍然非常耗时且困难。值得一提的是，摄影擅长的透视和结构反而是 AI 绘画的难点。
- 一致性问题
即使使用同样的种子和提示词，生成的结果也会有所不同。这由扩散模型的原理决定。尽管可以通过微调模型来解决，但模型的上限就在这里。这也是 AI 绘画在商业应用上的阻力之一。同样的人物，同样的配饰，更换分镜就可能有所不同。毕竟人物配饰也是人物设计的一部分，可能包含着一些信息表达，这可以称作是作画事故。
- 缺乏创造性
前面的问题或许可以通过不断改进模型来解决，但缺乏创造性是最本质的问题。即使经过成千上万的数据训练，模型仍然是在重复已有的内容。从创作领域来说，AI 并不具备所谓的灵感、想法、创意等，距离真正的“智能”还有一定距离。现在的 AI 不会因为某天偶然看到的夕阳而产生拍照的想法。AI 绘画的使用者反复调整 Prompt、采样方法、模型等，以获得符合自身想法的结果图，这本身不就是以模型为画笔进行的一种创作吗？
AI 绘画的应用前景
基于上述的局限性，AI 绘画的商业价值据笔者了解非常有限。目前只在一些小型工作室的作品或低成本广告中有所应用（可能一些更隐性的地方也有应用，例如概念美术和草图等）。越是专业领域，AI 的限制就越明显。 但反过来说，AI 对于个人而言是一个很好的工具，可以帮助我们快速生成一些图片，例如博客的封面或一些简单的插图。也有画师表示，AI 绘画可以为他们提供一些前期设计的参考，例如构图、色彩和感受等。
4. ChatGPT与AI绘画的本质：精度与极限
在对AI绘画进行了四个多月的研究，并将ChatGPT作为日常工具使用了一个多月后，我逐渐领悟了特德·姜在《ChatGPT是互联网的一张模糊JPEG图像》中所表达的深刻含义。
AI目前的训练集主要由512×512到768×768分辨率的图片构成。而各种附加的、混合的、经过额外训练的模型，由于算力限制，无法从根本上提升其精度。
当你看到的AI作品越精美，实际上意味着它越接近原始训练集，换句话说，就是出现了过拟合现象。
如果试图仅依靠AI绘制出一张细节尽可能完美的图片，结果往往令人沮丧。例如，当只有一只手不够完美时，理论上我们可以使用Inpaint单独重画，但很可能经过几百轮重画都无法达到理想效果。而全图重画又可能顾此失彼，手部完美了，其他地方又出现问题。
这几乎是“精度不足”现状下的必然结果。区区数GB的基础模型和消费级显卡，在可接受的时间范围内能生成的极限就是如此。
能精准控制绘画结果的Controlnet发布后令人精神一振，恰恰说明了AI绘画至今困扰我们的局限：在不借助人力进行强力干预的情况下，单靠AI画出理想的作品难如登天。
绘画和ChatGPT、还有精度之间存在着怎样的关联呢？
虽然它们同为AI，同样基于神经网络，但底层终究会遇到相似的问题。
我们尚不清楚背后的GPT 3.5模型究竟有多大规模。但可以肯定的是，无论如何它都会比其吸收学习的整个互联网和人类知识总和要小得多，至少有几个数量级的差距。
在咨询一些笼统概念、进行文本写作时，ChatGPT会给出相当令人满意的结果。
但一旦你深入探究细节，试图让它在所有方面都尽善尽美，就会得到一些啼笑皆非的结论。
不久前，我在微博上看到一道小学数学题，非常简单，便打算让ChatGPT尝试解答。
只要学过九九乘法表，对其中的数字就会有直觉，从而得出正确结果。
