1. 又說“前端已死”
為什麼說“又”呢？因為前兩年我在一些部落格網站三天兩頭就能看到這個標題，雖然今年好像換話題了，但感覺前端每年都要死個七八次，當然這裡面還是標題黨偏多，不過也體現了有一些開發者對自己當前所做的工作內容的憂慮，尤其是這一次衝擊的浪潮是來自於 AI 的，經歷了兩年的火熱，我們已經感受到 AI 對行業的影響，今天在這裡想借初學 AI 繪畫的一些技術總結來探討 AI 對我們工作產生的影響。
繪畫與攝影
回顧 2022 年的 AI 熱潮，最先受到衝擊的就是繪畫行業，現在翻看當時的討論，有很多人抱持悲觀態度，說出了“繪畫已死”，但這也不是第一次有人這麼說，無獨有偶，1839 年法國畫家 H·保羅·德拉羅什看到銀版攝影攝影法的成品後，留下了一句話：
此時此刻，繪畫死了。
攝影在現在的我們看來，與繪畫是兩個門類，但當時的畫家為什麼會有如此激動呢？因為當時的歐洲古典繪畫，有兩個最重要的技巧——結構和透視，而在攝影中只要按下快門就能完美地記錄場景和人物，不像畫家需要窮極一生去練習這兩種技法，而當下的 AI 繪畫好像可以只透過幾個關鍵詞就能生成以往需要大量練習才能得到的圖片，但事實真是如此嗎？我們先看下 AI 技術怎麼改變前端的。
2. AI 網頁開發
我們先跳過設計和框架搭建階段，最常用的場景是拿到設計圖後，將其轉化成網頁程式碼，能實現這個步驟的 AI 工具也有不少了，我找了幾個稍微有些口碑的試用，儘量選了一些橫平豎直的設計圖，因為試了一些較複雜的海報，發現效果差很多。
設計圖如下：
FrontendAI
生成了兩次，結構還算正常，細節不夠：
要求將播放器改為浮動的：
程式碼可以選擇不同的框架：
Open UI
只有極簡的結構：
Screenshot to Code
最近沒有準備 GPT 的 key，無法試用。
v0
效果比較好的是 Vercel 推出的一款 AI 程式碼生成工具，可以快速生成前端元件程式碼。
Vercel 本身也是一個前端部署平臺，性質類似 GitHub Pages，這方面也比較有發言權。
生成的網頁截圖：
第一次生成的結果來看，只能說樣子有了，細節是完全不夠的。
預設生成 React 程式碼：
可以用自然語言描述需求並且一步步細化：
收費情況：付費方式是會員制，可以試用一兩個專案。
總結
從收費模式上來看，除了 v0 是收費的，其他三個都是開源的，可以自己部署，但要使用 GPT 的 key，但相對地，生成效果都要差一些。
功能上來看都可以用自然語言說明需求，應該是結合了 Chat-GPT，透過一步步的描述細化需求，可以得到更好的結果。
結果上來看個人認為這個還原度還是比較一般的，很難將設計圖的細節完全表現出來，不過確實能快速生成程式碼，可以用作結構參考甚至直接拿 HTML 部分的結構來用，但樣式肯定是要調整的。
然後再仔細看看程式碼部分，這幾個框架全部採用了原子化 CSS 方案，用多個類名代替 CSS 屬性，這兩年在前端領域也算比較流行，比如 Open AI 官網就使用 Tailwind CSS 框架，另一個框架 UnoCSS 也在一些網站得到應用，但在大型的和樣式較複雜的專案中運用還有些爭議，如果團隊中並不是所有人都熟悉這種寫法，那麼這種程式碼的可維護性還是比較差的。
稍微有一點像當年的 Dreamweaver，可以透過拖控制元件生成程式碼，但大家都知道，全部都是行內樣式有多難維護。不過如今的生成程式碼質量要好得多。
拋開程式碼的優劣，可以看到 AI 生成網頁的前景還是有的，比如整合在 IDE 中的外掛，可以讀取當前專案的程式碼風格進行生成，也可以做到如上幾個專案的效果時，可以生成更符合專案的風格的程式碼，也更方便操作選取需要重新生成的部分，這一點在 AI 繪畫部分也有用到。另一方面來說，像 v0 這種產品作為快速生成原型用於驗證設計的工具已經足夠了。
高情商說法：進步空間還很大。
而且將設計圖轉為程式碼只是前端工作的冰山一角，暫時想完全依賴還是挺難的，直接用 Copilot 這種 AI 程式碼提示工具進行開發，效率也差不多。
3. 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 模型
由 OpenAI 在 2021 年提出，用大量圖片和文字對模型進行訓練，讓模型學會理解圖片和文字之間的關係，降低了標註的成本，提高了模型的泛化能力，說人話就是給一張圖片打標籤。
Diffusion 模型
這個是當下 AI 繪畫的核心技術，簡單來說，先透過對照片新增噪聲，然後在這個過程中學習到當前圖片的各種特徵。之後再隨機生成一個服從高斯分佈的噪聲圖片，然後一步一步的減少噪聲直到生成預期圖片。
2021 年，Open AI 釋出了一個名為 DALL-E 的模型，聲稱這個模型可以從任何文字中建立高質量影像，它所使用的技術即為 Diffusion Models。很快，基於 Diffusion Models 模型的圖片生成成為主流。2022 年又釋出了 DALL-E 2，可以生成更高質量的圖片。但是 OpenAI 一直都沒有公開 DALL·E 的演算法和模型。
3.1 AI 繪畫工具的發展
可以看到，當下的 AI 繪畫的理論模型在 2021 年趨於完善，接下來就是 2022 年走上快車道，各種 AI 繪畫工具百花齊放：
我 21 年換的顯示卡，沒有關心前沿科技，還選了 AMD 😦 ，今年終於折騰好了，具體 AMD 在 Windows 下部署 Stable Diffusion 的問題，可以看我的另一篇文章。
- 2022 年 2 月：Disco diffusion V5
由 somnai 等幾個開源社群的工程師製作的一款基於擴散模型的 AI 繪圖生成器，相比傳統模型更易用，但是生成的圖片比較抽象。
此時人們對於 AI 繪畫還是屬於嗤之以鼻的狀態。
- 2022 年 3 月：Midjourney
由 Disco diffusion 的核心開發參與建設，搭載在 discord 平臺，藉助 discord 聊天式的人機互動方式，透過對話引導設計的結果，也可以選擇傾向的結果，讓 AI 按對應方向繼續深化下去，所以是不需要設定引數的。
Midjourney 釋出 5 個月後，美國科羅拉多州博覽會的藝術比賽評選出了結果，一張名為《太空歌劇院》的畫作獲得了第一名，但它甚至不是人類畫師的作品，而是一個叫 MidJourney 的人工智慧的畫作。參賽者公佈這是一張 AI 繪畫作品時，引發了很多人類畫師的憤怒和焦慮。
- 2022 年 4 月：DALL·E 2
生成的圖片質量更高。
- 2022 年 7 月：Stable Diffusion
這個是我今天介紹的重點：由開發公司 Stability AI 釋出的 Stable Diffusion，這家公司崇尚開源，他們的宗旨是
AI by the people，for the people
因為上面 DALL·E 是閉源的，Midjourney 以產品的形式收費。
- 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 在生成影像前，會先生成一張完全隨機的影像，然後噪聲預測器會在影像中減去預測的噪聲，隨著這個步驟的不斷重複最終會生成一張清晰的影像。整個去噪過程叫做取樣，使用到的方法叫做取樣方法或取樣器。
整合包的噪點不明顯，這裡用 SD.NEXT 的包截圖：
推薦 Euler a，和 DPM++ 2M Karras，這個整合包預設也是這個，用同樣的提示詞，同樣的種子，迭代步數 20：
DPM++ 2M
Euler a
- 取樣迭代步數
一般 50 以內，通常可以選擇 28。有很大的調整空間，取樣方法不同，合適的迭代步數也不同。
這裡也是用 SD.NEXT 的包截圖：
DPM++ 2M，迭代 20 步：
DPM++ 2M，迭代 28 步：
DPM++ 2M，迭代 50 步：
Euler a，迭代 20 步：
Euler a，迭代 28 步：
Euler a，迭代 50 步：
- 圖片解析度
不宜太大，一般不要超過 512×512，超過這個範圍會導致生成的圖片變形，結構崩潰，這個也和模型的原理有關，而且計算成本也會增加，想要更高解析度的圖片，可以勾選高解析度修復，生成較小解析度再超分。
下圖是 512×512 的圖片，第一張是原圖，第二張是超分後的圖，但超分其實是一種圖生圖的重繪：
再看一遍原理
理解完這些引數和生成過程後，再回頭看一下模型的原理，就相對好理解了。
把提示詞和種子傳給模型，經過降噪和擴散，最後 VAE 修復，圖片生成。
【AI 繪畫】大魔導書：AI 是如何繪畫的？Stable Diffusion 原理全解（一）
【AI 繪畫】深入理解 Stable Diffusion！
Tensor Book 潛工具書
補充一些模型
- LoRA 和 LyCORIS
LoRA 是除了主模型外最常用的模型。LoRA 和 LyCORIS 都屬於微調模型，一般用於控制畫風、控制生成的角色、控制角色的姿勢等等，你可以自己喂資料進行訓練，比如喂 X 張同一個角色讓 AI 學習，再加上 LoRA 模型進行輸出，就有一定機率生成你需要的角色。
使用方式是以提示詞的方式加入，我這裡使用的 Lora 是 Silicon-landscape-isolation：<lora:Silicon-landscape-isolation:1>
固定種子，不加入 LoRA 模型，使用提示詞 landscape/scenery：
固定種子，加入 LoRA 模型，使用提示詞 landscape/scenery：
- VAE
VAE 會影響出圖的畫面的色彩和某些極其微小的細節。一般用於圖片亮度和飽和度的修正、畫面較正和以及補光等。繪圖時如果出現圖片亮度過低、發灰等問題時就需要用到，一般來說大模型自帶 VAE。
- ControlNet
及其強大的控制模型，它可以做到畫面控制、動作控制、色深控制、色彩控制等等。可以透過這樣的方式來控制人物的姿勢：
- Flux
前 Stability AI 核心成員 Robin Rombach 創立了一個名為 Black Forest Labs 的新公司，並獲取了 3200 萬美元的融資，並開源了 FLUX.1 系列模型。細節和手腳精準度也非常高，不過配置需求也提高了。
更多詳細內容可以參考 【AI 繪畫】全部模型種類總結 / 使用方法 / 簡易訓練指導——魔導緒論
外掛、擴充套件及其他
- 超分
- 重繪
重繪學派法術緒論 1.1
可以看到，這些流程已經是一個全新的研究門類了，並不是一個一鍵就能簡單改變世界的東西。
3.3 AI 繪畫的問題
- 版權
這個是來源於提示詞的，只是一個提示詞或者訓練模型，就能以特定畫師的風格生成類似的圖片，而對於畫師來說，也許透過日以繼夜的練習才能形成自己的風格，這與當年繪畫和攝影的情況如出一轍。
- 結構
人物的結構及手指等細節，對於人類畫師也是非常難以掌握的，儘管現在已經有微調模型和重繪的輔助，處理這部分內容也是非常耗時且困難的。順便提一下，攝影強於繪畫表現的透視和結構，反而是 AI 繪畫的難點。
- 一致性
即使是用同樣的種子和提示詞，生成的結果亦有不同，如果理解了前面的內容，就知道這是擴散模型的原理所決定的，雖然也能透過微調模型來解決，但模型的上限就在這裡。這也是我認為 AI 繪畫在商業上的阻力之一，同樣的人物，同樣的配飾換了分鏡就可能不同，可以稱作是作畫事故了，畢竟人物配飾也是人物設計的一部分，可能涵蓋著一些資訊表達。
- 缺乏創造性
前面的問題我覺得也許透過不斷地改進模型可以解決，但缺乏創造性是最本質的問題，我們已經接觸了各種各樣的大模型，應該知道即使經過成千上萬的資料訓練，模型也是在重複已有的內容，而且在從創作領域來說，AI 並不具備所謂靈感、想法、創意等，離真正的“智慧”還有一定的距離，畢竟現在的 AI 不會因為某一天偶然看到的夕陽而產生拍照的想法，而 AI 繪畫的使用者反覆去調整 Prompt、取樣方法、模型等去獲得一個符合自身想法的結果圖時，不正是以模型為畫筆而進行的一種創作嗎？
AI 繪畫的應用
基於上述的缺點，AI 繪畫的商用價值據我瞭解是很有限的，我所瞭解的只有一些比較小的工作室作品，或者一些便宜廣告裡（可能一些更隱性的地方會有應用，比如概念美術和草圖等，不是行業人員接觸不到），越是專業，AI 的限制就越明顯，但反過來說，AI 對於個人來說，是一個很好的工具，可以幫助我們快速生成一些圖片，比如部落格的封面，或者一些簡單的插圖，也看到一些畫師表示 AI 繪畫可以為他們提供一些前期設計的參考，諸如：構圖、色彩、感受等。
4. 寫在最後
在我看來，AI 繪畫是如同攝影一樣的新工具，攝影讓普通人不需要練習繪畫技巧就能記錄下生活，AI 繪畫讓普通人不需要練習繪畫技巧就能生成需要的圖片。畢竟最早研究攝影的人中也不乏畫家，隨著攝影發展的同時也有了攝影師這個行業，之後這兩個行業也在互相借鑑學習，在之後的發展中，繪畫和攝影都產生了不同的新流派，繪畫更有表現力，攝影更有真實感，在 AI 的衝擊下，繪畫也可能會產生新的流派，在 AI 無法完成的複雜結構上取得進步。
這樣看來，當下的 AI 既不能代替畫師，也不會代替前端，可能最先淘汰反而是 AI 的 Prompt 工程師了，畢竟模型一天一個樣，即使是 Stable Diffusion 這樣的熱門模型也在被逐漸替代，此時我們能做還是那句老話：
Keep hungry, keep foolish.