【HarmonyOS 5.0.0 或以上】构建 WASM 驱动的错因诊断引擎：结构树比对 + 错误定位可视化机制-CSDN博客

本文链接：https://blog.csdn.net/2501_92048894/article/details/148115416

🎯 一、目标

传统评分系统只能给出一个总分，而无法具体指出学生表达式哪一部分出了错。本篇将基于 HarmonyOS 5.0.0 或以上，构建一个 WASM 驱动的错因诊断引擎，支持：

将表达式解析为结构树（AST）
与标准表达式结构树进行节点级比对
精确定位错误点（如符号错、顺序错、括号错）
在 ArkTS 前端高亮错误位置，实现可视化诊断

🧱 二、系统结构概览

[ 学生表达式输入 ]
      ↓
[ AST 解析器（前端或 WASM） ]
      ↓
[ WASM 错因比对模块 ]
      ↓
[ 错误节点信息列表 ]
      ↓
[ ArkTS UI 高亮错误部分 + 建议 ]

📐 三、表达式结构树（AST）示例

表达式：(2 + 3) * x

其 AST 树：

{
  "type": "Multiply",
  "left": {
    "type": "Add",
    "left": "2",
    "right": "3"
  },
  "right": "x"
}

⚙️ 四、WASM 模块：结构树递归比对核心逻辑（C伪代码）

#include <string.h>

typedef struct Node {
    char type[16];
    struct Node* left;
    struct Node* right;
    char value[16];
} Node;

int compare(Node* a, Node* b) {
    if (!a || !b) return 0;
    if (strcmp(a->type, b->type) != 0) return 0;
    if (a->left && b->left && !compare(a->left, b->left)) return 0;
    if (a->right && b->right && !compare(a->right, b->right)) return 0;
    return 1;
}

WASM 版本中可接受 AST 的 JSON 序列化字符串，解析后递归比对。

📦 五、输入输出结构设计

✅ 输入

{
  "studentAst": { ... },
  "standardAst": { ... }
}

✅ 输出

{
  "match": false,
  "differences": [
    {
      "path": "left.right",
      "expected": "3",
      "actual": "5",
      "type": "value_mismatch"
    }
  ]
}

🧰 六、ArkTS 调用流程（配合 WASM）

async function diagnoseExpressionError(studentExprAst: object, standardExprAst: object) {
  const instance = await loadWasmInstance('ast_compare.wasm')
  const memory = instance.exports.memory as WebAssembly.Memory
  const u8 = new Uint8Array(memory.buffer)

  const offsetIn = 1024
  const offsetOut = 4096
  const maxLen = 2048

  const inputStr = JSON.stringify({ studentAst: studentExprAst, standardAst: standardExprAst }) + '\0'
  u8.set(new TextEncoder().encode(inputStr), offsetIn)

  const fn = instance.exports.run as CallableFunction
  fn(offsetIn, offsetOut, maxLen)

  const raw = u8.slice(offsetOut, offsetOut + maxLen)
  return JSON.parse(new TextDecoder().decode(raw).split('\0')[0])
}

🔍 七、可视化高亮 UI 组件设计（表达式错误定位）

function highlightError(expr: string, differences: string[]): string {
  // 示例：用 <span class="error"> 包裹错误部分
  return expr.replace('3', `<span class="error">3</span>`)
}

配合 CSS：

.error {
  color: red;
  font-weight: bold;
  text-decoration: underline wavy;
}

📊 八、错误类型分类建议

错误类型	示例	建议文案
value_mismatch	学生写了 5，标准为 3	检查加法项是否写错了
type_mismatch	学生写了乘号，标准是加号	运算符类型错误，请检查题意
node_missing	少了括号、乘号或等号	表达式缺失结构，请补全
node_extra	多写了括号、空项、符号	表达式有冗余项，请检查书写逻辑

📚 九、应用场景建议

场景	效果
作业错题反馈卡	精确展示学生表达式中错在哪一项
教师讲评辅助	一眼看到学生的“结构错” vs “计算错”
AI 对话讲解引导	搭配 LLM 实现“你这一项错了，我来告诉你为啥”
自动出题复练系统	根据错误类型推送相似结构题目练习