中華民國圖書館學會70週年的賀圖是如何製作出來的？結合Stable Diffusion跟QR碼的資訊圖表 / How to Create the Congratulatory Image for 70th Anniversary of LAROC? An Infographic with Stable Diffusion and QR Code
在閱讀之前，先開啟Facebook粉專的貼文，幫我跟中華民國圖書館學會一起按個讚吧！
賀圖 / The Congratulatory Image
這張賀圖是為了中華民國圖書館學會70週年兼2023圖書館週活動「怦然心動的祝福，七十週年祝福留言活動」所製作的一張圖。同時也是為了實作資訊圖表的理論和用Stable Diffusion產生QR Code的練習。
這張圖包含了三個主要元素：
- 希希助教：因為她是資訊圖表敘事力的課程虛擬助教呢，看板娘是圖表的重點。
- AI產生的QR Code：除了想帶給大家「原來這樣也可以做成QR Code」的新奇感之外，這個連結也會連回到貼文本身，希望大家都能幫忙按讚。這就是資訊圖表的Call For Action應用。
- 設計圖表的平臺：最後是用Google Slides簡單排版。
製作的順序是從QR Code、希希助教，最後才是用Google Slides整合。讓我們一個一個來看看要怎麼作吧。
書堆組成的QR Code / A QR code composed of a stack of books.
這張QR Code背後的製作過程其實還蠻複雜的。這張QR Code仔細一看，你會發現它是由很多本不同顏色的書籍所排列而成，擺在木頭的地板上。這個QR Code的特點是，即使使用Android手機，只需使用相機APP即可輕鬆辨識。如果你手機的相機識別不出來，也可以使用「QR Code Reader」這種專用的QR Code掃描器APP來掃描即可。
短網址 / Shorten URL
在製作QR Code之前，我們必須要先處理一個問題：QR Code要前往那個網址？
為了讓QR Code能具備Call For Action的引流能力，最基本的想法就是應該要導流到貼文的網址去。
然而，FB必須是先有圖，才能有貼文的網址。如果刪除圖片，那貼文就會一起被刪除。因此我們必須要找到某種特別的服務，可以讓我們先產生短網址，等到貼文確定之後再做修改。
最後找到的是t.ly短網址服務，網址縮短後的結果是「 https://t.ly/H-QGw 」。
t.ly不僅短網址特別的短，它還有一項很重要的功能：在建立短網址之後，還能夠修改轉向的網址。
這就可以讓我們先設定好短網址，用這組短網址來產生QR Code跟圖片。待貼文發出去之後，再回到t.ly將短網址更新為貼文的網址。
不過我做完之後發現t.ly的試用期只有一週。不知道一週之後，這個網址還能不能運作呢？先靜觀其變吧。
QR Code遮罩 / QR Code Mask
有了短網址之後，下一步就是要製作QR Code。
在討論QR Code的製作之前，我們要先認識到QR Code的容錯率跟QR Code複雜程度的影響。QR Code的容錯能力分成L (7%)、M (15%)、Q (25%)、H (30%)。容錯率越高，QR Code可接受AI重繪影響的程度也就越大，但是QR Code會變得更加複雜。
有些QR Code產生網頁可以讓你調整容錯等級，QR Code Generator就是一個不錯的服務。
以下讓我們來看看用QR Code Generator產生QR Code的例子：
這是「布丁布丁吃什麼？」的L等級容錯率。雖然它只能接受7%錯誤，但QR Code看起來相對簡單。
這是M等級容錯率。它可以接受15%錯誤，但圖形看起來比L等級複雜得多。
這是Q等級容錯率。雖然看起來只比M等級複雜一點，但它可以接受的錯誤達到了25%。
最高的容錯率就是H等級，可以容許錯誤30%，但QR Code也變得複雜許多。
常見的QR Code使用的容錯率是M等級15%。根據杰克艾米立跟娜娜奇鮮果茶的建議，QR Code的容錯率最好選擇Q等級，也就是即使QR Code的25%破損也還是能夠正常讀取。更高的H等級雖然可以容錯30%，但也會讓QR Code的圖形變得太過複雜。太複雜的QR Code會使得AI繪圖不容易配合，最後可能會產生看起來怪怪的或是難以讀取的QR Code。
除了容錯率會影響QR Code的複雜程度，QR Code裡面的訊息長度更是直接跟QR Code最後的結果息息相關。
先讓我們看看「布丁布丁吃什麼？」網址「 https://blog.pulipuli.info/ 」在容錯率25%的Q等級下產生的結果。
接著我們再用t.ly將網址縮成「 https://t.ly/wrn4k 」，在同樣的Q等級之下，可以看到QR Code的複雜程度大幅度下降。
越簡單的QR Code不僅越容易讓人成功掃描，同時也會影響到AI繪圖的對應設定。一般情況下，盡可能讓QR Code的複雜程度簡單一點會比較好。
用Stable Diffusion產生QR Code / Draw QR Code with Stable Diffusion
接下來是最麻煩的部分。到底要怎麼用Stable Diffusion產生QR Code呢？
幾經探索之後，我發現關鍵點有三個：ControlNet、CHECKPOINT、以及畫布的尺寸。
https://huggingface.co/monster-labs/control_v1p_sd15_qrcode_monster
第一是建議大家使用Controlnet QR Code Monster。ControlNet Weight建議設1或更高。Weight越大，QR Code會越明顯，掃描也越容易成功。我在Starting step設0、Ending Step設1，確保ControlNet從頭到尾都能發揮影響，使得QR Code不被Stable Diffusion扭曲。如果想要讓QR Code的黑色跟白色部分相反，可以在Preprocessor選擇invert (for white bg & black line)。詳情請看Ai Voice Tutor的教學。杰克艾米立提出了brightness跟illumination的組合做法，看起來更美觀，但我卻都無法掃描。
https://civitai.com/models/4855?modelVersionId=5581
其次是大模型checkpoint請選用萬能模型。寫實風格我推薦使用Realistic Vision，這也Ai Voice Tutor的建議。繪圖風格的話我則是推薦AnythingElse。這種萬能模型能夠描繪各種不同的事物，比較容易配合QR Code的形狀，選擇較合理的物件來繪圖。
相較於萬能模型，以往我在繪製希希助教時使用的7th anime v3 c就是相對小的大模型。7th anime v3 c只擅長繪製它熟悉的人物造型，面對QR Code這種刁鑽的要求，它幾乎都沒辦法配合。
最後是解析度不能太低的問題。Stable Diffusion的訓練圖片基本上都是512 * 512像素，而大多QR Code預設產生的圖片大小最多都只到500。如果你用預設的512 * 512來繪製，則Stable Diffusion會嘗試在特定現實物件上，找尋具備能配對QR Code紋路的結果。但這會導致產生的QR Code不僅看起來很彆扭(畢竟通常不會有現實物件長得像是QR Code)，而且也難以掃描。
為了改善這個問題，比較合理的做法就是將繪製的圖片解析度調高。這是1024 * 1024的繪製結果。Stable Diffusion會認為畫布的空間變大了，原本你要畫的物件看起來就相對較小，因此能夠更合理地塞進QR Code之間的縫隙。不僅整體畫面看起來也更加合理，掃描的成功率也上升許多。
按照這個思路，再加上我想要為QR Code周圍加上背景的考量，我重新製作了有更大的畫布、設定QR Code往中下位置擺放的遮罩。這個遮罩的尺寸是1024 * 1200。放大圖片的演算法為Lanczos，可確保QR Code放大後仍保持黑白分明，不會出現過渡的鋸齒狀。
其他參數設定如下：
- Prompt: stacks of books, (books:1.4), wood ground, white wall, bright, clean wall, clean background
- Steps: 27
- Sampler: DPM++ 2M Karras
- Size: 1024x1200
- Model: anythingelseV4_v45
- ControlNet Model: control_v1p_sd15_qrcode_monster
Weight: 1, Starting Step: 0, Ending Step: 1
產生結果看起來有點黯淡。
調整對比之後就成了最後結果。遠看可以看得出是個QR Code，近看則會發現它是由很多書本組成，而且畫風偏向手繪繪本風格。更重要的是，這張QR Code掃描的成功率非常高。如果一張QR Code只是漂亮但卻不能掃描的話，那就喪失它的引流功能了呢。
希希助教 / Sisi
在確定了QR Code的樣子之後，我們接下來要回頭製作希希助教的圖片。希希助教的人物造型在很久之前就已經大致抵定了，但問題是，之前華麗的造型跟QR Code的畫風搭不起來呀。
簡化風格 / How to simplify the style?
為什麼會這樣說呢？這是因為我本來是想要拿希希助教這張預設的大頭貼的。這是7th anime v3 c大模型跟多個LoRA小模型組合而成的結果。這種華麗的邊框跟著色方式都是7th anime v3 c擅長的特色；而Genshin Sticker Chibi Style則能夠產生二頭身的造型；周圍留白則是Gacha splash LORA的效果。
但顯然的，這種畫風跟我們的QR Code差異甚大。希希助教本身的粉紅色頭髮就已經夠顯眼了，其他部分可以再簡化嗎？
https://civitai.com/models/82098/add-more-details-detail-enhancer-tweaker-lora
最後我找到的答案是使用LoRA「Add More Details」，但是是負向地使用「<lora:more_details:-1>」。從上圖可以看到，將LoRA的權重設為-1之後，原本的圖片看起來更加平面與簡化了許多。這使得我們更容易控制畫面的精細程度，使之能夠與其他元素配合。
我又加上了prompt「rough sketch, sketch style」，讓線條更加明顯，最後就產生出上面的結果。
這是一起繪製的另一張圖。之後可以用在投影片裡面呢。
繪製資訊圖表 / Infographic Drawer
主要元素都做完後，最後就是要找個畫布來把它組合在一起了。雖然現在大家想到製作資訊圖表好像都會想到Canva，但我就順手地開啟了平常在用Google Slides來繪製。儘管如此，繪製過程中還是有很多值得深思的問題。
畫布尺寸 / Canvas size
這張圖的最終目的地是放在Facebook的粉絲專頁上。那麼，我應該挑選什麼尺寸的畫布好呢？
考慮到大部分的人都是用手機開啟Facebook，那麼我應該是以垂直的畫布為主。目前手機流行的比例是18:9，考慮到畫面上下需要預留導覽列跟按鈕的空間，因此圖片設為16:9應該會是合理的選擇。
很遺憾的是，結果這是一個錯誤的選擇。Facebook把過長的圖片下面砍掉了，而在平板上又會將圖片縮小。這裡我用親身經歷感受到了，前人說要使用方形畫布，真的要乖乖聽話啊orz
圖示 / Icon
原本圖片中部分圖示我打算用Google Slides的特殊字元來設定。在Google Slides裡面看起來好像都還好，但是一旦輸出之後，特殊字元往往會變成方框，也就是缺乏對應的字型造成的錯誤。
https://www.flaticon.com/search?word=point&color=black&shape=fill&order_by=4
最後還是回來免費圖示網站flaticon找尋圖片。手指圖示的來源是這張Point free icon。還有下面的Blogger圖示也是flaticon來的Blogger free icon。
匯出 / Export
最後提一個容易被人忽視的細節：將Google Slides的投影片匯出成大圖的做法。
很多人都會選用「檔案 > 下載 > PNG 圖片 (.png，目前的投影片)」。但這只會匯出72 dpi的小圖。以這個例子來說，匯出的圖片大小為540 x 959，非常的小。將圖片放大成200%之後，可以看到明顯的鋸齒狀。
這時候正確的做法應該是使用「列印」，將要匯出的投影片儲存成「PDF」。接著再用PDF軟體將PDF匯出成圖片，將解析度調整為300 dpi來匯出大圖。
最後產生的圖片為1688 * 3000。在100%的縮放比例下，看起來圖片的大小跟上面的小圖插不多，但鋸齒狀明顯少了許多。
總之，不要太過相信Google Slides的匯出功能了。還是匯出成PDF之後再做處理，通常會得到比較好的結果喔。
結語 / Conclusion
雖然很多人會認為AI繪圖可以取代設計師，但即使是像我這種非設計本科的人，單單設計這樣一張圖，都有許多要考慮的細節了。更專業的設計師應該會比我想得更加周全才是。比起AI取代了人類這點，我反而覺得它是拉高了整體設計的底線，讓我們對設計的要求越來越高了。
不管怎麼說，這也只是展示了一種AI繪圖跟資訊圖表結合的可能性。在有限的時間跟資源之內，我打算做到這裡就適可而止了。當然，Stable Diffusion的可能性還遠遠不僅於此，但說到底它也只是個工具，最終還是要回歸使用者本身。熟悉工具的使用、磨練自己的品味，才是提升自己功力的不二法門啊。
文章到最後要來提問的是：你對這種用Stable Diffusion這種AI繪製的QR Code有什麼看法呢？
- 1. 還蠻有趣的。我也想試試看用其他的物品來畫QR Code。
- 2. 不仔細看的話，好像也不會發現它是由書堆組成的QR Code。
- 3. 普通的QR Code不好嗎？QR Code應該單純作為溝通的手段，而不應該用AI繪圖來模糊它的功能。
- 4. 其他：在下面留言，說說你的看法吧！
也太有意思了
回覆刪除整個過程與成品都很有趣
To 閔衛(mingway)，
刪除哈哈，感謝稱讚~