今天小編分享的科學經驗:蘋果讓ChatGPT成為設計師助手,1分鍾搞定動畫設計,歡迎閲讀。
新春佳節,蘋果又給設計師們奉上了新的大禮——全新的 AI 動畫助手!
有了它,只要一句話,就能讓靜态的影像 " 運動 " 起來,沒有專業知識也能輕松上手。
利用 ChatGPT,工程師們研發出了這款智能動畫工具 Keyframer,它的界面十分簡潔,初始狀态下只有圖片和提示詞兩個輸入框。
只需要用自然語言描述動畫的内容,它就會為我們搞定動畫代碼并進行實時渲染,平均耗時 17 秒,最長也不過 1 分鍾。
如果對效果不滿意,還可以通過語言描述、圖形界面或直接改代碼等多種方式進行編輯調整。
一名 UI 設計師看到後表示,雖然自己(對 AI)抱有偏見,但這項成果确實太棒了。
那麼,Keyframer 這個工具,都能做些什麼呢?
一鍵生成動畫代碼
首先需要明确的是,Keyframer 添加動畫的對象是 SVG(Scalable Vector Graphics,可縮放矢量圖形)格式的圖稿。
不同于我們常見的 jpg、png 等圖片格式,SVG 是通過人類可讀的代碼來表示影像當中的元素的。
比如下面這張圖,就是用 SVG 仿制的量子位 logo,它直接以右側的代碼形式存儲,可以直接被浏覽器讀取。
通過給 SVG 代碼中的屬性設定動态變化,就可以實現元素的位移、縮放、旋轉、變色等各式各樣的動畫。
其中,屬性變化既可以通過 SVG 規範設定的内置動畫實現,還可以嵌入到網頁中通過 JS 腳本或 CSS(層疊樣式表)動畫實現,Keyframer 采用的是 CSS 方式。
在 Keyframer 中,用户需要做的就是上傳靜态的 SVG 影像,并用自然語言描述動畫的需求。
需要注意的是,SVG 文檔中的元素需要帶有 id 标注,這既是為了讓大模型能夠知道添加動畫的位置,也是為 CSS 動畫代碼提供靶點。
點擊綠色的生成、按鈕後,Keyframer 就會調用 GPT,生成動畫代碼并可在頁面中顯示渲染結果。
如果需要對生成的動畫做進一步調整,還可以向其中繼續添加新的 prompt。
當然也可以自己直接上手修改,支持 " 代碼 " 和 " 屬性 " 兩種方式。
代碼模式就是直接對代碼進行改動,如果不懂代碼就可以利用屬性模式,調整動畫中的一些關鍵參數。
據開發者統計,Keyframer 生成一段動畫代碼的平均時間約 17 秒,最快 6 秒即可完成,最長也只有一分鍾。
生成質量方面,Keyframer 在大多數情況下都能生成高質量的動畫代碼,測試中錯誤率只有 6.7%。
這樣一來,Keyframer 解決了設計師難以将動畫遷移到 Web 界面的問題,快速的修改方式也大大降低了動畫版本迭代過程的工作量。
在體驗用户中的調查結果表明,Keyframer 的總體用户滿意度達到了 3.9 分(滿分 5 分)。
那麼,Keyframer 是如何實現的呢?
提示工程新成果
研發過程中,蘋果的工程師并沒有訓練任何新的模型,而是直接使用了 GPT。
所以,除了用户界面之外,最關鍵也是最困難的便是提示詞的設計——而除了開發者,用户也需要思考這個問題。
為了探究這一問題,讓使用者可以更好地運用 Keyframer,研究團隊邀請了來自不同職業的 13 名測試人員。
這 13 名測試者都有 AI 工具的使用經歷,其中 11 人用過 ChatGPT,7 人用過 DALL · E 或 MidJourney,按照他們平時工作中 " 代碼 " 和 " 設計 " 含量的高低,這 13 名人員被抽成了四組。
(表中 Low Code,Low Animation 可簡寫為 LCLA,以此類推)
這些受試者首先用 15 分鍾的時間了解了關于 SVG 動畫的基礎知識和 Keyframer 的使用方法。
接着,他們又用了 3 分鍾的時間體驗了傳統的 SVG 動畫設計工具,并觀看了 Keyframer 的效果演示。
完成這些鋪墊後,他們被要求用 Keyframer 為下面兩張圖添加動畫,兩張圖各有 5 分鍾思考和 15 分鍾操作時間。
每完成一張圖的動畫,研究人員都會和他們進行 5 到 10 分鍾的談話,詢問對 Keyframer 是否滿意,以及操作過程中遇到的問題,最後還會談論整體感受。
通過對體驗者的 prompt 特征進行分析,13 人中有 9 人更傾向于分步式的提示風格,另外 4 人則設計了 " 一體式 " 的提示詞。
另外,研究者還發現,用户對 " 語義 "(Semantic)提示詞的青睐程度高于高特異性(High Specificity)提示詞。
語義提示詞主要通過非技術性的自然語言對動畫進行描述,後者則會直接使用具體的關鍵詞和參數值。
在實驗中,研究團隊收集到的提示詞中,有 84.4% 都是語義性的,特異性提示詞則主要是被 HCLA 組選擇。
這些研究結果雖未直接應用到 Keyframer 當中,但仍不失為未來用户的一項重要參考。
目前,Keyframer 的 DEMO 尚未發布,感興趣的朋友可以持續關注一下 ~
論文地址:
https://arxiv.org/abs/2402.06071
— 完 —
點這裏關注我,記得标星哦~
一鍵三連「分享」、「點贊」和「在看」
科技前沿進展日日相見 ~
>