想要快速制作一款網(wǎng)頁(yè)小游戲、交互式動(dòng)畫(huà)或是教學(xué)演示，卻苦于復(fù)雜的代碼邏輯與多元素交互調(diào)試？盡管如今大語(yǔ)言模型或 AI Agent 能幫我們寫(xiě)代碼、搭建交互場(chǎng)景，但在處理多元素交互時(shí)往往極易出錯(cuò)，且純文本的交互方式讓人難以直觀地調(diào)整視覺(jué)效果。

近日，來(lái)自香港浸會(huì)大學(xué)、香港科技大學(xué)、香港城市大學(xué)及深圳大學(xué)的研究團(tuán)隊(duì)共同提出了一款名為 MoGraphGPT 的創(chuàng)新系統(tǒng)。該系統(tǒng)結(jié)合了上下文感知模塊化大模型與直觀的圖形化和精確化控制，讓用戶通過(guò)自然語(yǔ)言和簡(jiǎn)單的畫(huà)布涂鴉，就能零代碼快速搭建出邏輯復(fù)雜的 2D 交互場(chǎng)景。該研究成果最近已被計(jì)算機(jī)圖形學(xué)與可視化領(lǐng)域頂級(jí)期刊 IEEE TVCG 錄用。

論文作者包括：香港浸會(huì)大學(xué)傳理學(xué)院互動(dòng)媒體系助理教授葉卉，香港科技大學(xué)肖楚烽，香港城市大學(xué)創(chuàng)意媒體學(xué)院博士生冷佳業(yè)，以及深圳大學(xué)計(jì)算機(jī)與軟件學(xué)院副教授徐鵬飛，通訊作者為香港科技大學(xué)藝術(shù)與機(jī)器創(chuàng)造力學(xué)部教授、代理系主任傅紅波。該團(tuán)隊(duì)長(zhǎng)期深耕于計(jì)算機(jī)圖形學(xué)、人機(jī)交互和計(jì)算機(jī)視覺(jué)的交叉方向。

• 論文標(biāo)題：MoGraphGPT: Creating Interactive Scenes Using Modular LLM and Graphical Control
• 作者：Hui Ye (HKBU/HKUST), Chufeng Xiao (HKUST), Jiaye Leng (CityU), Pengfei Xu (SZU), Hongbo Fu (HKUST)
• 錄用期刊：IEEE Transactions on Visualization and Computer Graphics (TVCG) 2026
• 論文鏈接：https://ieeexplore.ieee.org/abstract/document/11410096

一、 研究背景：

LLM 生成交互場(chǎng)景的四大痛點(diǎn)

使用 LLM/Agent 可以直接生成 2D 交互場(chǎng)景（比如游戲，動(dòng)畫(huà)）或代碼，在實(shí)際操作中，創(chuàng)作者通常會(huì)面臨四個(gè)致命挑戰(zhàn)：

1.代碼質(zhì)量堪憂：在處理多個(gè)元素（如主角、怪物、障礙物）的復(fù)雜交互邏輯時(shí)，LLM 容易生成不完整或存在錯(cuò)誤的代碼。

2.缺乏獨(dú)立編輯性：LLM 的線性對(duì)話結(jié)構(gòu)導(dǎo)致修改非常困難。比如只是想讓平臺(tái)移動(dòng)，卻可能不小心把原本靜止的背景也帶跑了。

3.圖形控制缺失：僅靠文本很難精準(zhǔn)描述空間信息。例如想讓物體沿著特定的 S 型曲線運(yùn)動(dòng)，用文字描述極其痛苦且不準(zhǔn)確。

4.精確控制極其繁瑣：生成效果后，如果想微調(diào)速度、彈跳高度等參數(shù)，用戶必須反復(fù)修改提示詞進(jìn)行盲盒式抽獎(jiǎng)，極大地消耗耐心。

二、 核心技術(shù)：

MoGraphGPT 如何破局？

為了解決上述痛點(diǎn)，研究團(tuán)隊(duì)提出了 MoGraphGPT 的架構(gòu)，帶來(lái)了兩項(xiàng)具有突破性的核心機(jī)制：

1. 上下文感知的 LLM 模塊化

MoGraphGPT 摒棄了將所有需求丟給單一 LLM 的做法，采用了自頂向下的分層管理結(jié)構(gòu)：

• 專屬獨(dú)立模塊（Individual LLM Modules）：場(chǎng)景中的每個(gè)元素（如 “猴子”、“香蕉”）都有自己專屬的 LLM 會(huì)話。用戶可以獨(dú)立調(diào)整單一元素的行為，完全不用擔(dān)心破壞其他元素的代碼。
• 中心統(tǒng)籌模塊（Central LLM Module）：作為大管家，專門負(fù)責(zé)處理元素之間的交互（如 “猴子吃到香蕉加一分”）。各個(gè)獨(dú)立模塊會(huì)將其變量和函數(shù)精簡(jiǎn)為上下文（Context）供中心模塊調(diào)用，實(shí)現(xiàn)了既獨(dú)立互不干擾，又能完美協(xié)同的優(yōu)雅邏輯。

2. 無(wú)縫融合的圖形控制與 UI 精準(zhǔn)微調(diào)

代碼生成不應(yīng)該是純文本的黑盒，MoGraphGPT 賦予了用戶強(qiáng)大的可視化和精準(zhǔn)掌控力：

• 指哪打哪的圖形代理：用戶可以在系統(tǒng)畫(huà)布上直接標(biāo)點(diǎn)、畫(huà)直線、畫(huà)曲線或圈出區(qū)域（P1, L1, C1, R1），然后在輸入提示詞時(shí)直接引用（例如：“讓平臺(tái)沿著 C1 曲線來(lái)回移動(dòng)”）。系統(tǒng)會(huì)在底層自動(dòng)將這些手繪圖形轉(zhuǎn)化為精確的坐標(biāo)參數(shù)。
• 自動(dòng)生成的控制滑塊：生成交互邏輯后，系統(tǒng)會(huì)利用專屬 LLM 自動(dòng)解析代碼中的關(guān)鍵參數(shù)，并在界面右側(cè)動(dòng)態(tài)生成滑動(dòng)條。用戶想精確調(diào)整移動(dòng)速度或重力大?。客蟿?dòng)滑塊即可，所見(jiàn)即所得。

三、 效果與對(duì)比

為了驗(yàn)證系統(tǒng)的實(shí)際表現(xiàn)，研究團(tuán)隊(duì)與當(dāng)前業(yè)界頂尖的 AI 編程助手 Cursor Composer 進(jìn)行了對(duì)比實(shí)驗(yàn)：

• 效率實(shí)現(xiàn)顯著提升：在完成同樣的交互場(chǎng)景還原任務(wù)時(shí)，MoGraphGPT 的平均耗時(shí)比 Cursor 縮短了約 73.8%。
• 極大降低試錯(cuò)成本：用戶所需要輸入的提示詞數(shù)量和文本長(zhǎng)度分別大幅 減少了 68.4% 和 88.9%。在易用性、可控性與總體表現(xiàn)等主觀評(píng)分上也顯著提升。
• 告別致命 Bug：基于 LLM-as-a-Judge 及真實(shí)編譯環(huán)境的測(cè)試結(jié)果顯示，MoGraphGPT 生成的代碼在致命錯(cuò)誤（Fatal）和嚴(yán)重錯(cuò)誤（Major）數(shù)量上均遠(yuǎn)低于基線工具。

開(kāi)放式創(chuàng)作：釋放無(wú)界創(chuàng)意

在自由創(chuàng)作環(huán)節(jié)中，無(wú)論是完全沒(méi)有編程基礎(chǔ)的小白，還是經(jīng)驗(yàn)豐富的游戲開(kāi)發(fā)者，都能在 10 到 30 分鐘內(nèi)使用 MoGraphGPT 完整構(gòu)建出各具特色的作品，涵蓋了雙人游戲、射擊游戲、教學(xué)演示動(dòng)畫(huà)、學(xué)術(shù)論文動(dòng)態(tài)插圖以及網(wǎng)頁(yè)交互 Demo 等多種應(yīng)用。

四、 總結(jié)與展望

MoGraphGPT 巧妙地在大語(yǔ)言模型代碼生成與可視化無(wú)代碼編輯之間架起了一座橋梁。其核心的模塊化 LLM 調(diào)度策略和圖形化操控不僅解決了復(fù)雜場(chǎng)景下的代碼耦合問(wèn)題，也為未來(lái)多智能體協(xié)同生成復(fù)雜應(yīng)用程序提供了一種全新的交互范式。

未來(lái)，團(tuán)隊(duì)將進(jìn)一步探索如何支持更龐大場(chǎng)景的交互式創(chuàng)作，探索代碼可見(jiàn)性分級(jí)，并驗(yàn)證其在更多專業(yè)級(jí)引擎中的管線對(duì)接潛力。

想要體驗(yàn)零代碼創(chuàng)造世界的樂(lè)趣嗎？歡迎閱讀原論文獲取更多技術(shù)細(xì)節(jié)！