# AI 生圖之 chatgpt 3.5 生成 svg，一場悲劇
## 故事的開始，對生成式 AI 的信心
之前用 stable diffusion AI ，生成了一些香香的妹子圖，讓我對 AI 感到很有信心，不論是要真人風格還是偏動漫畫ACG的風格都可以掌握覺得不錯，例如以下的圖
* 真人風格
* ACG 風格
雖然單看圖都很漂亮沒問題，但如果要再做更多的處理，想要用程式控制，可能還是得自己拆部件，後面還得自己加工才能派上用場。
這時候我想到，如果能夠有向量圖的話，因為每個部位都是拆開的，更方便程式控制，而且尺寸大小的畫質比較不受影響，不過一般畫圖的繪師比較少做向量圖的繪畫，而且stable diffusion也無法產生向量圖，於是我把腦筋動到了 chatgpt 身上。
## 簡單的 chatgpt 生成程式碼介紹
chatgpt 已經夠紅了，對於一般的問答都不是問題，也可以用來產生程式碼，例如這是一段我的提問，可以看到很好的回應，也有完整的程式碼以及主動告知使用上該注意的事
> 我：請給我一段C# mvc controller 語法，產生使用者ip
> chatgpt 回覆
以下是一段可以獲取使用者 IP 的 C# MVC Controller 程序碼：
```=C#
public ActionResult Index()
{
// 取得使用者 IP
string ipAddress = Request.UserHostAddress;
return View();
}
```
在這個範例中，使用 Request.UserHostAddress 方法獲取使用者的 IP 地址。注意，使用者的 IP 地址可能會因為設置在 NAT 網路下或是使用者使用 VPN 或代理伺服器等原因而變化。
---
## 能不能讓 chatgpt 畫向量圖?
向量圖顧名思義，其實是用程式碼標註不同的點或形狀，讓電腦運算出來，其中以 SVG 為最容易在網頁上使用的格式，於是我先嘗試性的問了 chatgpt 能不能生成 svg
> 你能否生成 svg 的字串呢?
> 是的，我可以生成 SVG 字符串。SVG 是一种可缩放矢量图形格式，可用于在 Web 上显示图像和图形。
以下是一个简单的示例 SVG 字符串：
```=svg
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
```
此代码将创建一个 100x100 像素的 SVG 画布，其中包含一个半径为 40 像素的红色圆圈，圆心位于 (50,50)。
你可以通过编程语言将此字符串嵌入到 HTML 页面中，或者将其写入 SVG 文件中。
---
雖然是簡體的，但看起來有模有樣，於是我就丟到 html 內看看，結果是個很正常的 svg，這讓我感到異常興奮，想說要找出好用的東西了，於是正式開始實驗！
---
## 試著畫個撲克牌梅花符號看看
我先從簡單的圖形開始，我想的是看能不能畫出撲克牌花色，不過方塊稜形太簡單了，故意找個有挑戰性的梅花符號，而且剛好大家的梅花符號有可能有些許不同，以下圖來說，fb 的梅花底就很窄
不過想歸想，還是讓 ai 跑看看比較實際，第一次測試開始
> 請生成一個500x500px的svg畫布，裡面有一個長寬約300px的梅花符號，不要外框，著色為黑色
> 好的，以下是一个生成 SVG 字符串的 Python 代码示例，用于创建一个 500x500 像素的 SVG 画布，并在其中绘制一个填充为黑色的梅花符号：
```=python
svg_string = '<svg width="500" height="500">'
svg_string += '<path d="M250,100 L350,200 L300,200 L300,300 L200,300 L200,200 L150,200 Z" fill="black"/>'
svg_string += '</svg>'
```
---
## 第一次修正
這段 svg 怎麼跟前面範例給我的 svg 不一樣，自己幫我改成 python 語法，多了一大堆的 svg_string += ...我要的是純 svg 才好處理，請他修正後，終於拿到乾淨的 svg 了。
> 我不要 python 代碼，我要單純 svg 標籤的語法
```=svg
<svg width="500" height="500">
<path d="M250,100 L350,200 L300,200 L300,300 L200,300 L200,200 L150,200 Z" fill="black"/>
</svg>
```
---
## 畫了什麼出來?
其實剛看到 svg 的長度時，我心中想的是怎麼這麼短，我印象中的梅花符號的向量圖應該不會這麼少啊，該不會是我孤陋寡聞，AI能夠用更簡短的步驟完成吧，算了總之丟到畫面上看看，然後看到了這個
這....好銳利的梅花啊，我還以為是箭頭符號呢
我自我檢討，覺得可能是我沒有給參考圖不太好，於是我改了一下問句，直接把符號的 unicode 貼給他，這樣總該懂了吧
> 我想要的梅花符號是類似撲克牌花色的 ♣，請重新生成一個給我
---
## 欸不是...這哪裡梅花了??
這圖連梅花的底都沒有，我立刻請他再改一版給我
> 這個梅花符號似乎有誤，請檢查一次再給我
非常抱歉，上一个梅花符号的路径确实有误。以下是一个新的代码示例，用于创建一个类似于扑克牌花色中的草花的梅花符号：
```
<svg width="500" height="500">
<path d="M250,100 C175,200 325,200 250,100" fill="black"/>
<path d="M250,100 C200,250 300,250 250,100" fill="black"/>
<circle cx="250" cy="250" r="50" fill="black"/>
</svg>
```
在这个代码中，我使用两个三次贝塞尔曲线来定义梅花符号的两个叶片。每个曲线由两个控制点和一个终点组成。
---
## 誠懇道歉的結果
看起來好像有模有樣吧，還跟我說什麼什麼貝茲區線、兩片葉片等等的，多說無益，看圖吧
....我懷疑 chatgpt 在開車，但是我沒有證據
---
## 聽說用英文溝通比較好
我想說人家都講要英文，但我就爛英文不好，不過賭博有關的單字還是會的，我決定在梅花符號追加英文註解，並且明確告知他哪裡有問題
> 梅花符號的左右兩側不夠明顯，請增加精緻程度讓他與撲克牌梅花花色符號(club) 更為接近
---
## 嘗試更改溝通方式
精緻程度是有了，但這圖跟梅花一點關係都沒有，甚至還是中空的，我決定換個描述方式，並且明確告知不要中空
> 請使用一個Path完成，避免圖片中有空白的區域
```=svg
<svg width="500" height="500">
<path d="M 250,75
C 150,225 150,325 250,425
C 350,325 350,225 250,75
Z" fill="black"/>
</svg>
```
我說 chatgpt 你真的不是在開車...? 你前面不是才道歉過嗎，讓我想到某個道歉句型
> 他的道歉一直都很誠懇，他每次做了一些我們不能接受的事情的時候，他的道歉都會讓我們覺得他下次絕對不會再這麼幹，但是每次他下次又這麼幹了。
---
## 換個題目看看
我後來想想，可能花色這個東西太模擬兩可了，如同一開始的圖，每個人的心中都有一個自己想像的梅花，各自都不太一樣，應該要尊重大家的想法，或許在 chatgpt 的認知中那就是梅花。
但就這樣放棄又太早了，我決定改成大家都知道的有名符號，就選挑 apple logo 吧
> 請用 svg 生成 iphone 手機的蘋果 logo 圖案
程式碼貼那麼多大家也看膩了這次直接放上正版 apple logo 做比較，可以看到顏色是對了，但圖...與其說是被咬一口的蘋果，說是吃剩的果核我覺得還差不多。
先用老方法，糾正他一下，看看拿到什麼結果
> 這與 apple logo 似乎不太相似，請在給我一個
這次要說是蘋果，我覺得還比較像是 diablo 風格的 icon ，看來拿 chatgpt 生成一些不明所以的 logo 可能不錯? 似乎用錯地方了
---
## 最後的大招，嘗試大量生成
我想到 stable diffusion 生圖的時候，其實大多數圖片也都不盡理想，只是靠大量的圖取出符合自己喜好的，於是我把提問改成請他大量生成範例
> 請用 svg 生成 iphone 手機的蘋果 logo 圖案，有差異無所謂，但請生成5個讓我自行挑選
結果生到第3個就斷了，無妨，挑前兩個來看一下
看來是無解了...雖然風格不同，但跟蘋果真的是一點關係都沒有
---
## 模仿不成的話，那請你創造自己吧
我決定轉換想法，既然模仿現實世界的東西不行，反而可以自己開車甚至原創出類似 diablo logo 的東西，那就挑他的長處，請他生成一個 chatgpt 的 logo 好了，順便一提我想像的成果是 chatgpt 對話框的綠底白框三個環繞圓圈
總之就開始吧
> 請生成一個 chatgpt 的 svg 圖案
---
## 結論：有創意，但不好用
最後生出來的東西長這樣，讓我想到有人說英文字母 26個我都懂，但組合在一起我就不懂了。不知道這個 logo 是我不理解最新的設計風格，還是時代跟不上 ai 的角度，希望之後有更好的應用，但短時間內還是拿來生成普通程式碼就好。
Sign in with Wallet
Connect another wallet