RexUniNLU 前端联动：Vue 组件封装 + Schema 可视化编辑器

它不是简单的表单，而是针对 NLU 场景深度定制的编辑器：

• 意图字段：单行输入框，自动校验非空、去重、长度限制（≤20 字符），输入时实时提示常见命名规范（如'建议以动词开头：查询 XX、预订 XX'）。
• 槽位列表：支持拖拽排序（影响后续模型推理时的注意力权重顺序），每项右侧提供'设为必填'开关（标记该槽位在识别中必须出现）。
• 智能补全：当用户输入'天气'时，自动下拉推荐'查询天气''天气预报''今日天气'等高频意图变体。
• 导出/导入：一键下载当前 Schema 为 JSON 文件，或拖拽上传已有配置，团队协作无障碍。

<template>
  <RexNluEditor v-model="currentSchema" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { RexNluEditor } from 'rex-uninlu-vue'
const currentSchema = ref({
  intent: '查询天气',
  entities: ['城市', '时间'],
  examples: ['今天北京天气怎么样？', '明天上海会下雨吗？']
})
</script>

3.2 <RexNluPreview />：毫秒级响应的交互沙盒

预览器的核心价值在于'快'和'真'——它调用的是真实后端 API，而非模拟数据：

• 双模式输入：支持手动输入文本，也支持从右侧'常用测试集'中一键插入（如'智能家居''金融客服'等预置语料）。
• 结果高亮渲染：识别出的槽位在原文中用不同色块精准标注，悬停显示置信度分数（0.0~1.0），意图单独显示在顶部横幅。
• 调试信息折叠：点击右上角按钮展开原始 JSON 响应，方便开发者排查问题。

<template>
  <RexNluPreview :schema="currentSchema" :api-url="'http://localhost:8000/nlu'" />
</template>

3.3 <RexNluWidget />：生产环境就绪的嵌入式组件

这是最终交付给业务系统的'成品'。它做了三件事：

• 自动降级：检测到 GPU 不可用时，自动切换至 CPU 推理路径，保证基础功能可用。
• 错误兜底：网络超时或模型加载失败时，显示友好提示并保留最后一次成功结果。

轻量集成：仅需传入 schema 和 onResult 回调，其余全部内置：

<RexNluWidget :schema="mySchema" @result="handleNluResult" />

4. Schema 可视化编辑器：告别手写 JSON 的繁琐时代

传统方式定义 Schema，就是打开 test.py，手动修改 my_labels = [...] 数组。这种方式在原型阶段尚可，一旦进入多角色协作，立刻暴露三大痛点：易错、难协同、无追溯。

我们的可视化编辑器彻底重构了这一流程：

4.1 标签语义化引导设计

• 输入槽位名时，自动匹配知识库中的标准实体类型（如输入'地址'，提示'地理位置 - 详细地址''地理位置 - 行政区划'）。
• 意图命名强制校验：若未包含动词（如'天气'），则标黄警告并给出优化建议（'建议改为'查询天气''）。

4.2 结构化校验与反馈

• 实时检查 Schema 合法性：意图不能为空、槽位不能重复、名称不能含特殊字符。
• 当用户删除最后一个槽位时，弹出确认框：'删除所有槽位将退化为纯意图识别，确定吗？'

4.3 协作与版本管理

• 内置本地存储：每次修改自动保存至浏览器 localStorage，刷新不丢失。

支持 Git 友好的 JSON 导出：生成格式化、带注释的 Schema 文件，便于纳入版本控制：

{
  "intent": "订票意图",
  "entities": ["出发地", "目的地", "时间"],
  "examples": [
    "帮我定一张明天去上海的机票",
    "后天从北京飞广州的航班有吗？"
  ],
  "//": "此 Schema 于 2024-06-15 由张三创建，适用于机票预订 H5 页面"
}

5. 实时效果预览：所改即所见，消除理解鸿沟

预览器不是'演示玩具'，而是连接技术与业务的信任桥梁。它的设计原则就一条：让非技术人员也能看懂 NLU 在做什么。

5.1 文本输入区：降低试错成本

• 提供'常用语料库'侧边栏，按领域分类（电商/医疗/政务），点击即填入，免去反复输入。
• 支持批量测试：粘贴 5 条语句，一键运行，对比识别一致性。

5.2 结果呈现区：用视觉代替术语

• 意图识别：顶部绿色横幅显示'识别为：订票意图（置信度：0.92）'，数字用大号字体突出。
• 槽位提取：原文中'明天''上海'被黄色高亮，'明天'下方标注'时间（0.87）'，'上海'下方标注'目的地（0.94）'。
• 未识别提示：若某槽位未命中，显示灰色虚线框'[时间]（未识别）'，避免用户误以为模型漏判。

5.3 调试辅助：给开发者留一扇窗

• 点击任意高亮词，底部展开该词的原始 token embedding 相似度热力图（基于 Siamese-UIE 的双塔输出）。
• 查看请求详情：显示实际发送的 HTTP payload、响应耗时、模型缓存命中状态。

6. 从开发到上线：三步完成项目集成

整个方案已沉淀为标准化流程，新项目接入平均耗时<15 分钟：

6.1 第一步：安装依赖

# 在你的 Vue 3 项目中
npm install rex-uninlu-vue
# 或使用 pnpm
pnpm add rex-uninlu-vue

6.2 第二步：注册全局组件（可选）

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { RexNluEditor, RexNluPreview, RexNluWidget } from 'rex-uninlu-vue'

const app = createApp(App)
app.component('RexNluEditor', RexNluEditor)
app.component('RexNluPreview', RexNluPreview)
app.component('RexNluWidget', RexNluWidget)
app.mount('#app')

6.3 第三步：在业务页面中组合使用

<template>
  <div>
    <h2>机票预订 NLU 配置中心</h2>
    <!-- 左侧：编辑器 -->
    <RexNluEditor v-model="flightSchema" />
    <!-- 右侧：预览与代码 -->
    <div>
      <RexNluPreview :schema="flightSchema" />
      <div>
        <h3>复制以下代码到你的页面：</h3>
        <pre><code>{{ generatedCode }}</code></pre>
        <button @click="copyCode">复制代码</button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { RexNluEditor, RexNluPreview } from 'rex-uninlu-vue'

const flightSchema = ref({
  intent: '订票意图',
  entities: ['出发地', '目的地', '时间']
})

const generatedCode = computed(() => `
  <RexNluWidget :schema="flightSchema" @result="onNluResult" />
`.trim())
</script>

7. 总结：让 NLU 能力真正长在业务土壤里

RexUniNLU 的零样本特性解决了'数据荒'，而今天我们构建的这套前端联动方案，则解决了'落地难'。它带来的改变是实质性的：

• 对产品经理：不再需要提需求等排期，自己就能定义、测试、验证 NLU 能力，迭代周期从'周'缩短到'小时'。
• 对前端工程师：告别手写请求、解析 JSON、处理边界情况，三个组件覆盖全部场景，专注业务逻辑。
• 对算法工程师：获得真实业务语料反馈（通过预览器的'提交问题样本'按钮），持续优化模型泛化能力。

技术的价值，从来不在模型有多深，而在于它能让多少人轻松用起来。当你看到运营同学自己在编辑器里调整了三个标签，然后指着预览区说'这个'优惠券'现在能正确识别了'，那一刻，RexUniNLU 才算真正完成了它的使命。