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

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

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

• 論文標(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 生成交互場景的四大痛點(diǎn)

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

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

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

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

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

二、 核心技術(shù)：

MoGraphGPT 如何破局？

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

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

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

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

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

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

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

三、 效果與對比

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

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

開放式創(chuàng)作：釋放無界創(chuàng)意

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

四、 總結(jié)與展望

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

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

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