言完全指南：讓 0.6B 模型寫出漂亮網(wǎng)頁(yè))
如果你關(guān)注 AI 生成網(wǎng)頁(yè)一定見過(guò)這樣的場(chǎng)景讓大模型直接輸出 HTML結(jié)果小模型生成的頁(yè)面要么標(biāo)簽嵌套錯(cuò)亂要么配色一言難盡。小思框架Xiaothink發(fā)布的前端生成模型Xiaothink-T17-RWKV5-MLA-Frontend0.6B給出了一個(gè)新解法讓模型輸出一種中文聲明式前端語(yǔ)言 WanlyFrontendWF再用開源編譯器把 WF 編譯成完整 HTML/CSS/JS 頁(yè)面。模型與工具地址 - Frontend 模型https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend - WF 編譯器開源倉(cāng)庫(kù)https://github.com/Ericsjq/Open-WanlyFrontend - Instruct-Pro 通用助手https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Instruct-Pro## 一、為什么是語(yǔ)言 編譯器先對(duì)比兩種路線。路線 A模型直接輸出 HTML模型需要同時(shí)學(xué)會(huì)標(biāo)簽配對(duì)div/span/p、CSS 選擇器與屬性、JS 事件綁定、語(yǔ)義化結(jié)構(gòu)。這些語(yǔ)法細(xì)節(jié)占用了大量 token 預(yù)算小模型往往顧此失彼——結(jié)構(gòu)對(duì)了配色亂配色好了標(biāo)簽閉合又出錯(cuò)。路線 B模型輸出 WF 語(yǔ)言編譯器生成頁(yè)面模型只負(fù)責(zé)寫語(yǔ)言一條語(yǔ)句描述一個(gè)組件屬性用中文鍵值對(duì)表達(dá)。編譯器負(fù)責(zé)把 WF 翻譯成 HTML/CSS/JS語(yǔ)法正確性由編譯器保證。0.6B 模型的全部容量都用在了理解需求、組織結(jié)構(gòu)、設(shè)計(jì)配色上。實(shí)測(cè)結(jié)果這條路線讓 0.6B 模型在 DeepSeek-V4-Flash 裁判盲測(cè)中拿到52.6 分反超 llama-3-8B35.4簡(jiǎn)單頁(yè)面任務(wù)達(dá) 63.0 分。## 二、WF 語(yǔ)言核心語(yǔ)法WF 是中文為主的極簡(jiǎn)聲明式語(yǔ)言一條語(yǔ)句即一個(gè)組件組件路徑.組件名屬性值屬性值示例一個(gè)帶標(biāo)題和按鈕的卡片__頁(yè)面__頁(yè)面填充#f5f5f5彈性縱向排列居中內(nèi)邊距40px頁(yè)面.卡片背景色#ffffff圓角16px陰影0 4px 12px rgba(0,0,0,0.1)內(nèi)邊距24px寬度360px頁(yè)面.卡片.標(biāo)題文本歡迎使用 WF字號(hào)20px字重700文字色#1a1a2e頁(yè)面.卡片.按鈕文本點(diǎn)擊我背景色#38bdf8文字色#ffffff圓角8px內(nèi)邊距10px 20px支持的屬性類別-樣式背景色/填充/文字色、字號(hào)/字重、圓角、陰影、寬度/高度、內(nèi)外邊距、彈性布局、網(wǎng)格布局-事件被點(diǎn)擊時(shí)、被懸停時(shí)、輸入改變時(shí)-邏輯如果/否則、循環(huán)遍歷、變量綁定-動(dòng)畫過(guò)渡、關(guān)鍵幀三、WF 實(shí)戰(zhàn)從一句話到完整頁(yè)面光看語(yǔ)法還不夠我們走一遍完整流程一句話需求 → WF 源碼 → 編譯 → 可交互頁(yè)面。以世界時(shí)鐘為例需求生成一個(gè)展示北京、倫敦、紐約三個(gè)城市時(shí)間的暗色時(shí)鐘頁(yè)面。模型輸出的 WF 源碼頁(yè)面頁(yè)面最小高度100vh填充#0f172a彈性縱向排列居中內(nèi)邊距20px頁(yè)面.標(biāo)題文本“ 世界時(shí)鐘”字號(hào)28px字重700文字色#f8fafc下邊距30px頁(yè)面.時(shí)鐘列表彈性橫向排列間距20px包裹頁(yè)面.時(shí)鐘列表.北京背景色#1e293b圓角16px內(nèi)邊距24px寬度220px居中頁(yè)面.時(shí)鐘列表.北京.城市文本“北京”字號(hào)16px文字色#94a3b8頁(yè)面.時(shí)鐘列表.北京.時(shí)間文本“14:30”字號(hào)36px字重700文字色#38bdf8頁(yè)面.時(shí)鐘列表.倫敦背景色#1e293b圓角16px內(nèi)邊距24px寬度220px居中頁(yè)面.時(shí)鐘列表.倫敦.城市文本“倫敦”字號(hào)16px文字色#94a3b8頁(yè)面.時(shí)鐘列表.倫敦.時(shí)間文本“07:30”字號(hào)36px字重700文字色#a78bfa頁(yè)面.時(shí)鐘列表.紐約背景色#1e293b圓角16px內(nèi)邊距24px寬度220px居中頁(yè)面.時(shí)鐘列表.紐約.城市文本“紐約”字號(hào)16px文字色#94a3b8頁(yè)面.時(shí)鐘列表.紐約.時(shí)間文本“02:30”字號(hào)36px字重700文字色#34d399編譯把上面的 WF 源碼粘貼到開源編譯器https://github.com/Ericsjq/Open-WanlyFrontend一鍵輸出完整 HTML 文檔瀏覽器直接打開即可看到深藍(lán)漸變背景、三張圓角卡片、城市與時(shí)間層次分明的暗色儀表盤。全程無(wú)需手寫一行 HTML/CSS。 小技巧WF 支持邏輯與事件。給卡片加上 被點(diǎn)擊時(shí) 切換城市、用 循環(huán)遍歷 渲染列表頁(yè)面就具備了交互能力——這些同樣由編譯器轉(zhuǎn)換為原生 JS。## 四、0.6B 憑什么能寫長(zhǎng)頁(yè)面小模型寫前端最怕兩件事上下文一長(zhǎng)就忘、結(jié)構(gòu)一復(fù)雜就崩。Frontend 模型用自研的 RWKV-v5 MLA 純歷史檢索架構(gòu)專門解決這兩點(diǎn)1.當(dāng)前信息由 RWKV 負(fù)責(zé)RWKV-v5 的 TokenShift WKV 線性注意力負(fù)責(zé)處理正在生成的這一句2.長(zhǎng)程歷史由 MLA 檢索生成過(guò)程中每 16 步保存一次 KV 快照需要用前面的組件結(jié)構(gòu)時(shí)通過(guò)標(biāo)準(zhǔn) softmax 注意力只檢索 top-k 個(gè)關(guān)鍵歷史位置而不是對(duì)全部歷史重新計(jì)算3.門控融合可學(xué)習(xí)的標(biāo)量門控自動(dòng)權(quán)衡當(dāng)前信息與歷史信息的比重4.NoPE 無(wú)位置編碼 QK-Norm穩(wěn)定點(diǎn)積尺度長(zhǎng)序列訓(xùn)練更穩(wěn)。配合51200 的訓(xùn)練序列長(zhǎng)度模型能穩(wěn)定承接完整 XX 頁(yè)面這類多區(qū)塊、長(zhǎng)結(jié)構(gòu)的任務(wù)——這正是 WF 語(yǔ)言 長(zhǎng)程檢索雙管齊下的結(jié)果語(yǔ)言降低生成難度檢索保證結(jié)構(gòu)連貫。五、快速開始模型 編譯器兩步跑通第一步安裝 xiaothink 庫(kù)≥ 1.4.8并調(diào)用模型pythonfrom xiaothink import XTModelmodel XTModel.from_pretrained(ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend)wf_code model.chat(生成一個(gè)奶茶店菜單頁(yè)面深色系突出新品)print(wf_code) # 輸出 WF 語(yǔ)言源碼第二步編譯 WF 為 HTML把上一步輸出的 WF 源碼交給開源編譯器github.com/Ericsjq/Open-WanlyFrontend得到完整 HTML 文件后瀏覽器打開即可。消費(fèi)級(jí)顯卡即可運(yùn)行支持 BF16 推理本地部署無(wú)門檻。 ?? 注意模型的輸出是 WF 語(yǔ)言代碼不是可直接預(yù)覽的 HTML務(wù)必先經(jīng)過(guò)編譯器轉(zhuǎn)換。權(quán)重格式為自研架構(gòu)請(qǐng)使用 xiaothink ≥ 1.4.8 庫(kù)調(diào)用詳見 xiaothink.top 官方文檔。## 六、總結(jié)WanlyFrontend 語(yǔ)言 編譯器的組合把前端生成從背 HTML 語(yǔ)法變成寫中文描述讓 0.6B 模型也能穩(wěn)定產(chǎn)出設(shè)計(jì)感強(qiáng)的完整頁(yè)面。RWKV-v5 MLA 純歷史檢索架構(gòu)則為長(zhǎng)頁(yè)面生成提供了結(jié)構(gòu)連貫性保障。如果你對(duì)小模型做前端這條路感興趣歡迎體驗(yàn)-Frontend 前端生成模型https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend-WF 編譯器開源https://github.com/Ericsjq/Open-WanlyFrontend-Instruct-Pro 通用助手https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Instruct-Pro模型不大但路可以很長(zhǎng)。把前端生成交給 0.6B 模型把 HTML 交給編譯器剩下的想象空間留給你。 WanlyFrontend 中文聲明式前端語(yǔ)言完全指南：讓 0.6B 模型寫出漂亮網(wǎng)頁(yè)
如果你關(guān)注 AI 生成網(wǎng)頁(yè)一定見過(guò)這樣的場(chǎng)景讓大模型直接輸出 HTML結(jié)果小模型生成的頁(yè)面要么標(biāo)簽嵌套錯(cuò)亂要么配色一言難盡。小思框架Xiaothink發(fā)布的前端生成模型Xiaothink-T17-RWKV5-MLA-Frontend0.6B給出了一個(gè)新解法讓模型輸出一種中文聲明式前端語(yǔ)言 WanlyFrontendWF再用開源編譯器把 WF 編譯成完整 HTML/CSS/JS 頁(yè)面。模型與工具地址 - Frontend 模型https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend - WF 編譯器開源倉(cāng)庫(kù)https://github.com/Ericsjq/Open-WanlyFrontend - Instruct-Pro 通用助手https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Instruct-Pro## 一、為什么是語(yǔ)言 編譯器先對(duì)比兩種路線。路線 A模型直接輸出 HTML模型需要同時(shí)學(xué)會(huì)標(biāo)簽配對(duì)div/span/p、CSS 選擇器與屬性、JS 事件綁定、語(yǔ)義化結(jié)構(gòu)。這些語(yǔ)法細(xì)節(jié)占用了大量 token 預(yù)算小模型往往顧此失彼——結(jié)構(gòu)對(duì)了配色亂配色好了標(biāo)簽閉合又出錯(cuò)。路線 B模型輸出 WF 語(yǔ)言編譯器生成頁(yè)面模型只負(fù)責(zé)寫語(yǔ)言一條語(yǔ)句描述一個(gè)組件屬性用中文鍵值對(duì)表達(dá)。編譯器負(fù)責(zé)把 WF 翻譯成 HTML/CSS/JS語(yǔ)法正確性由編譯器保證。0.6B 模型的全部容量都用在了理解需求、組織結(jié)構(gòu)、設(shè)計(jì)配色上。實(shí)測(cè)結(jié)果這條路線讓 0.6B 模型在 DeepSeek-V4-Flash 裁判盲測(cè)中拿到52.6 分反超 llama-3-8B35.4簡(jiǎn)單頁(yè)面任務(wù)達(dá) 63.0 分。## 二、WF 語(yǔ)言核心語(yǔ)法WF 是中文為主的極簡(jiǎn)聲明式語(yǔ)言一條語(yǔ)句即一個(gè)組件組件路徑.組件名屬性值屬性值示例一個(gè)帶標(biāo)題和按鈕的卡片__頁(yè)面__頁(yè)面填充#f5f5f5彈性縱向排列居中內(nèi)邊距40px頁(yè)面.卡片背景色#ffffff圓角16px陰影0 4px 12px rgba(0,0,0,0.1)內(nèi)邊距24px寬度360px頁(yè)面.卡片.標(biāo)題文本歡迎使用 WF字號(hào)20px字重700文字色#1a1a2e頁(yè)面.卡片.按鈕文本點(diǎn)擊我背景色#38bdf8文字色#ffffff圓角8px內(nèi)邊距10px 20px支持的屬性類別-樣式背景色/填充/文字色、字號(hào)/字重、圓角、陰影、寬度/高度、內(nèi)外邊距、彈性布局、網(wǎng)格布局-事件被點(diǎn)擊時(shí)、被懸停時(shí)、輸入改變時(shí)-邏輯如果/否則、循環(huán)遍歷、變量綁定-動(dòng)畫過(guò)渡、關(guān)鍵幀三、WF 實(shí)戰(zhàn)從一句話到完整頁(yè)面光看語(yǔ)法還不夠我們走一遍完整流程一句話需求 → WF 源碼 → 編譯 → 可交互頁(yè)面。以世界時(shí)鐘為例需求生成一個(gè)展示北京、倫敦、紐約三個(gè)城市時(shí)間的暗色時(shí)鐘頁(yè)面。模型輸出的 WF 源碼頁(yè)面頁(yè)面最小高度100vh填充#0f172a彈性縱向排列居中內(nèi)邊距20px頁(yè)面.標(biāo)題文本“ 世界時(shí)鐘”字號(hào)28px字重700文字色#f8fafc下邊距30px頁(yè)面.時(shí)鐘列表彈性橫向排列間距20px包裹頁(yè)面.時(shí)鐘列表.北京背景色#1e293b圓角16px內(nèi)邊距24px寬度220px居中頁(yè)面.時(shí)鐘列表.北京.城市文本“北京”字號(hào)16px文字色#94a3b8頁(yè)面.時(shí)鐘列表.北京.時(shí)間文本“14:30”字號(hào)36px字重700文字色#38bdf8頁(yè)面.時(shí)鐘列表.倫敦背景色#1e293b圓角16px內(nèi)邊距24px寬度220px居中頁(yè)面.時(shí)鐘列表.倫敦.城市文本“倫敦”字號(hào)16px文字色#94a3b8頁(yè)面.時(shí)鐘列表.倫敦.時(shí)間文本“07:30”字號(hào)36px字重700文字色#a78bfa頁(yè)面.時(shí)鐘列表.紐約背景色#1e293b圓角16px內(nèi)邊距24px寬度220px居中頁(yè)面.時(shí)鐘列表.紐約.城市文本“紐約”字號(hào)16px文字色#94a3b8頁(yè)面.時(shí)鐘列表.紐約.時(shí)間文本“02:30”字號(hào)36px字重700文字色#34d399編譯把上面的 WF 源碼粘貼到開源編譯器https://github.com/Ericsjq/Open-WanlyFrontend一鍵輸出完整 HTML 文檔瀏覽器直接打開即可看到深藍(lán)漸變背景、三張圓角卡片、城市與時(shí)間層次分明的暗色儀表盤。全程無(wú)需手寫一行 HTML/CSS。 小技巧WF 支持邏輯與事件。給卡片加上 被點(diǎn)擊時(shí) 切換城市、用 循環(huán)遍歷 渲染列表頁(yè)面就具備了交互能力——這些同樣由編譯器轉(zhuǎn)換為原生 JS。## 四、0.6B 憑什么能寫長(zhǎng)頁(yè)面小模型寫前端最怕兩件事上下文一長(zhǎng)就忘、結(jié)構(gòu)一復(fù)雜就崩。Frontend 模型用自研的 RWKV-v5 MLA 純歷史檢索架構(gòu)專門解決這兩點(diǎn)1.當(dāng)前信息由 RWKV 負(fù)責(zé)RWKV-v5 的 TokenShift WKV 線性注意力負(fù)責(zé)處理正在生成的這一句2.長(zhǎng)程歷史由 MLA 檢索生成過(guò)程中每 16 步保存一次 KV 快照需要用前面的組件結(jié)構(gòu)時(shí)通過(guò)標(biāo)準(zhǔn) softmax 注意力只檢索 top-k 個(gè)關(guān)鍵歷史位置而不是對(duì)全部歷史重新計(jì)算3.門控融合可學(xué)習(xí)的標(biāo)量門控自動(dòng)權(quán)衡當(dāng)前信息與歷史信息的比重4.NoPE 無(wú)位置編碼 QK-Norm穩(wěn)定點(diǎn)積尺度長(zhǎng)序列訓(xùn)練更穩(wěn)。配合51200 的訓(xùn)練序列長(zhǎng)度模型能穩(wěn)定承接完整 XX 頁(yè)面這類多區(qū)塊、長(zhǎng)結(jié)構(gòu)的任務(wù)——這正是 WF 語(yǔ)言 長(zhǎng)程檢索雙管齊下的結(jié)果語(yǔ)言降低生成難度檢索保證結(jié)構(gòu)連貫。五、快速開始模型 編譯器兩步跑通第一步安裝 xiaothink 庫(kù)≥ 1.4.8并調(diào)用模型pythonfrom xiaothink import XTModelmodel XTModel.from_pretrained(ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend)wf_code model.chat(生成一個(gè)奶茶店菜單頁(yè)面深色系突出新品)print(wf_code) # 輸出 WF 語(yǔ)言源碼第二步編譯 WF 為 HTML把上一步輸出的 WF 源碼交給開源編譯器github.com/Ericsjq/Open-WanlyFrontend得到完整 HTML 文件后瀏覽器打開即可。消費(fèi)級(jí)顯卡即可運(yùn)行支持 BF16 推理本地部署無(wú)門檻。 ?? 注意模型的輸出是 WF 語(yǔ)言代碼不是可直接預(yù)覽的 HTML務(wù)必先經(jīng)過(guò)編譯器轉(zhuǎn)換。權(quán)重格式為自研架構(gòu)請(qǐng)使用 xiaothink ≥ 1.4.8 庫(kù)調(diào)用詳見 xiaothink.top 官方文檔。## 六、總結(jié)WanlyFrontend 語(yǔ)言 編譯器的組合把前端生成從背 HTML 語(yǔ)法變成寫中文描述讓 0.6B 模型也能穩(wěn)定產(chǎn)出設(shè)計(jì)感強(qiáng)的完整頁(yè)面。RWKV-v5 MLA 純歷史檢索架構(gòu)則為長(zhǎng)頁(yè)面生成提供了結(jié)構(gòu)連貫性保障。如果你對(duì)小模型做前端這條路感興趣歡迎體驗(yàn)-Frontend 前端生成模型https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend-WF 編譯器開源https://github.com/Ericsjq/Open-WanlyFrontend-Instruct-Pro 通用助手https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Instruct-Pro模型不大但路可以很長(zhǎng)。把前端生成交給 0.6B 模型把 HTML 交給編譯器剩下的想象空間留給你。