之前两篇文章介绍了 Xiaothink-T17-RWKV5-MLA-Frontend（≈0.6B 中文前端生成模型）的测评成绩与架构原理。这篇文章进入实战：从零开始，10 分钟跑通"中文提示词 → WF 代码 → 编译 HTML"全流程，在本地用一张消费级显卡生成一个完整网页。
一、流程总览
中文提示词（"想要一个......页面"）
↓
模型生成 WanlyFrontend（WF）代码 ← 本模型输出的是 WF 语言，不是 HTML！
↓
WanlyFrontend 编译器
↓
完整 HTML/CSS/JS 页面（浏览器直接打开）记住关键一点：模型输出的是 WF 代码，必须先编译再预览，千万别把 WF 源码直接当 HTML 用。
二、环境准备
1. 安装依赖
bash
# 小思推理库（含 PyTorch 后端）
pip install xiaothink[torch]
# WanlyFrontend 编译器源码
# 仓库地址: https://github.com/Ericsjq/Open-WanlyFrontend需要 xiaothink ≥ 1.4.8。模型权重目录需包含
tokenizer.json和checkpoints/权重文件。
2. 下载模型
从 ModelScope 下载模型： https://www.modelscope.cn/models/ericsjq/Xiaothink-T17-RWKV5-MLA-0.6B-Frontend
解压后得到目录 ckpt_test_t17_rwkv5_mla_frontend/，里面含 tokenizer.json 和 checkpoints/。
三、生成 WF 代码
1. 加载模型
python
from xiaothink.llm.inference_torch.torch_formal import TorchModel
model = TorchModel(
ckpt_dir='path/to/ckpt_test_t17_rwkv5_mla_frontend', # 指向模型权重目录
MT='t17_rwkv5_mla_frontend',
use_bf16=False, # 显存不足时设为 True（需显卡支持 BF16）
inference_mode='auto'
)2. 生成页面
python
# 清空历史，开始新任务
model.clear_history()
wf_code = model.chat(
'想要一个具有电影海报风格的复古影院页面，主色调暗红与金色，包含片单列表、票价信息与宣传语',
temperature=0.9,
max_length=10000
)
print(wf_code)模型输出的 wf_code 是 WF 声明式语言，例如会是这样一段结构（示意）：
__页面__（）
页面（填充：#1a0e0e；弹性；纵向排列；内边距：20px）
页面.头部（显示：弹性；主轴对齐：两端对齐；交叉轴对齐：居中）
页面.头部.标题（文本："🎬 复古影院"；字号：28px；字重：700；文字色：#d4af37）
页面.片单列表.片一.片名（文本："《城市之光》"；字号：18px；文字色：#f5e6c8）
......四、编译为 HTML
python
from wanlyfontend import WanlyFontend # 来自 Open-WanlyFrontend 仓库
compiler = WanlyFontend()
result = compiler.to_web(wf_code)
# result 是一个字典：{'html': ..., 'css': ..., 'js': ..., 'full': ..., 'errors': [...]}
html = result['full'] # 完整 HTML 文档
print('编译器错误数:', len(result['errors']))
with open('page.html', 'w', encoding='utf-8') as f:
f.write(html)用浏览器打开 page.html，一个完整的复古影院页面就诞生了。如果 errors 列表不为空，通常是模型偶发的语法瑕疵，编译器会容错跳过（默认宽松模式），不影响整体预览。
五、参数建议
不同的提示词开头对应不同难度的任务，参数要跟着调整：
| 任务类型 | 提示词示例 | temperature | max_length |
|---|---|---|---|
| 简单页面 | "请生成一个关于咖啡的页面" | 0.7~0.9 | 4096 |
| 长页面/复杂任务 | "想要一个完整的商城页面" | 0.78~0.9 | 10000 |
提示词小技巧：
- 以"想要...... ""弄一个......"开头 → 长页面复杂任务，给足 max_length；
- 以"请生成...... ""给我生成......"开头 → 简单页面任务，生成更快；
- 在提示词里带上配色、风格、区块的描述（"暗红与金色""赛博霓虹""含片单列表"），页面设计感会显著提升。
六、常见问题
Q1：为什么我拿到的直接是 HTML？
A：不会。本模型输出的一定是 WF 语言。如果你看到了 HTML 标签，说明模型输出被误判了，请检查 MT 参数是否为 t17_rwkv5_mla_frontend。
Q2：编译后页面空白怎么办？
A：检查 result['errors']；如果错误较多，降低温度（如 0.7）重新生成，或把任务拆小（先"弄一个头部"，再"弄一个列表"）。
Q3：显存不够怎么办？
A：设置 use_bf16=True（需显卡支持 BF16），或用 CPU 推理（inference_mode 自动降级，速度慢但可用）。
Q4：能不能生成小游戏？
A：可以，但强交互场景是弱项（盲测中"简单小游戏"领域 41.7 分）。静态展示型页面是它的强项，复杂 JavaScript 建议交给云端大模型。
Q5：这个模型能商用吗？
A：Apache License 2.0，可自由商用，但需保留版权声明。
七、进阶玩法
- 批量生成：循环遍历多条提示词，自动生成一批页面，再统一编译；
- 搭配评测：用 DeepSeek/GLM 等大模型当裁判，对多个模型生成结果盲测打分，量化迭代你的训练数据；
- 结合前端框架：编译出的 HTML 可进一步嵌入 Vue/React 项目做原型；
- 多轮精修：把"页面.头部.标题（......）"这样的行当作可编辑单元，让模型按需增删改。
结语
10 分钟，一张显卡，0.6B 参数------你已经拥有一个"说中文、出网页"的本地前端生成器。相比云端大模型，它免费、私有、可商用，尤其适合快速原型和本地自动化。快去 ModelScope 下载模型，写一个属于你的"想要......"试试吧！