2025年9月19日

利用AI多模態模型生成程式的一些經驗分享

最近剛結束一個AI應用在科學的演講分享,來分享幾個多模態AI可以怎麼用。例如輸入影片做為prompt的UI參考,然後生成程式。


提供影片,生成程式


影片來源就是書商電子教科書提供的範例程式操作影片,不提供也可試試。prompt:「html+css+js in a single file互動模擬程式,使用three.js,一群質點排列在立體網格上,使用者可選擇質點排列成一條線,或是一個平面,或是多面形成的立體結構。使用者可以按鈕選擇縱波和橫波,控制頻率和振幅以及波長,使用者可以用滑鼠轉換視角或放大縮小畫面」如果不知道怎麼下prompt,你也可以先讀取其他的程式操作錄影或截圖,讓AI理解後,由AI來生成給AI的 prompt。


書商的程式錄影到轉成程式的過程,可見此影片



插圖轉程式

提供課本插圖作為prompt一部分,以此生成教學程式

結果見此網頁






剪貼課本截圖組成版面來生成程式



給設計圖,產生OpenScad程式碼進行建模

給予顯微鏡照片,生成三視圖後,生成OpenScad程式生成stl檔,再匯入js,做成互動顯微鏡。
以下設計圖是給顯微鏡照片,用Gemini生成的三視圖



目前的程式碼我還在修整,只是半成品,未來會做出更適合在課堂上使用的


在一年多前,多數 AI 還是「單模態」的設計:
處理文字的就是純文字模型。
處理圖片的就是純影像模型。
因此像「文字生成圖片」的流程,其實是文字模型先把輸入轉成結構化提示,再交給影像生成模型;而「語音對話」在當時則是語音辨識(ASR 系統)→ 傳給文字模型 → 再把文字輸出轉回語音(TTS 系統)。
後來開始出現「多模態模型」,也就是單一模型可以同時處理文字、圖片,甚至聲音與影片,能在同一個架構下理解並跨模態運算,而不是單純「模型接力」。
前幾篇我提到的案例,例如透過影片、插圖或手繪圖直接生成程式,就是多模態模型的應用。
實際應用上也可以這樣做:直接提供互動程式的程式碼,讓 AI 生成操作步驟說明、學習單,甚至考卷。
聰明的你應該也能想到反向應用:即使沒有程式碼,只要有一份學習單、一個虛擬的操作流程,或是一份考卷,也可以把它們作為 prompt 的一部分,來生成對應的程式。