传统的 Web 工具通常采用密集的表单或滑块（Slider）来进行配置，当配置项多达几十个时，用户的学习曲线极其陡峭。为了突破这一交互瓶颈，在博视锐科技近期迭代的全链路商显可视化架构中，我们重构了底层逻辑，引入了 VUI（语音用户界面）与 GUI 深度融合 的智能架构。
核心架构：前端状态中枢与 AI 意图解析引擎
以我们系统中实际部署的 DIAIDI AI 智能助理为例，其核心逻辑并非简单的“聊天机器人”，而是一个“基于 LLM 的工程参数状态机（State Machine）”。
1. 语音转文字与意图抽取 当业务人员按住麦克风说出：“帮我配置一个宽16列、高8行的户外 P4.0 裸眼 3D 转角屏，转角要平滑弧形”时，前端通过原生 MediaRecorder 采集高压缩音频流送入后端，随后将文本输入给大模型。
2. 结构化指令拦截（Prompt 工程） 我们通过在 System Prompt 中注入严格的 JSON Schema，强制大模型将自然语言转化为前端状态库可执行的指令对象：
{
"action": "UPDATE_SCREEN_PARAMS",
"payload": {
"screenType": "corner_3d",
"cornerCraft": "smooth_arc",
"pixelPitch": "P4.0",
"cabinetColumns": 16,
"cabinetRows": 8
}
}
核心算法：箱体矩阵的动态推导与分辨率实时换算
拿到 AI 解析出的行列参数后，系统需要实时解算出一系列工程数据，以指导后期的 CAD 蓝图生成和视频素材制作。
以 P4.0 规格（像素间距 4.0mm）、单箱体 960mm×960mm、宽 16 列 × 高 8 行为例，其底层的矩阵推导算法骨架如下：
/**
* 博视锐LED显示屏物理阵列与像素分辨率核心解算器
* @param {number} cols - 横向箱体列数
* @param {number} rows - 纵向箱体行数
* @param {number} cabinetSize - 单箱体尺寸 (mm)
* @param {number} pixelPitch - 像素间距 (mm)
*/
function calculateScreenMatrix(cols, rows, cabinetSize = 960, pixelPitch = 4.0) {
// 1. 计算单箱体分辨率 (960 / 4.0 = 240 像素)
const pixelsPerCabinet = cabinetSize / pixelPitch;
// 2. 计算展平物理尺寸 (转换为米)
const physicalWidth = (cols * cabinetSize) / 1000; // 15.36 m
const physicalHeight = (rows * cabinetSize) / 1000; // 7.68 m
// 3. 计算物理点阵分辨率 (PX)
const resolutionX = cols * pixelsPerCabinet; // 16 * 240 = 3840 PX
const resolutionY = rows * pixelsPerCabinet; // 8 * 240 = 1920 PX
// 4. 计算净发光面积
const totalArea = physicalWidth * physicalHeight; // 117.96 m²
// 5. 计算实际显示比例 (最大公约数算法)
const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
const divisor = gcd(resolutionX, resolutionY);
return {
physicalSize: `${physicalWidth.toFixed(2)}m × ${physicalHeight.toFixed(2)}m`,
resolution: `${resolutionX} × ${resolutionY} PX`,
area: `${totalArea.toFixed(2)} m²`,
ratio: `${resolutionX / divisor} : ${resolutionY / divisor}` // 2 : 1
};
}
技术验证：以上算法精准推导出了 15.36m × 7.68m 的尺寸，以及 3840 × 1920 的超清分辨率。这对于后期内容制作团队输出 2:1 比例的裸眼 3D 视频源，是至关重要的工程基准。
技术验证：以上算法精准推导出了 15.36m × 7.68m 的尺寸，以及 3840 × 1920 的超清分辨率。这对于后期内容制作团队输出 2:1 比例的裸眼 3D 视频源，是至关重要的工程基准。
可视化透视与 CAD 自动化链路
除了数值推导，界面的 3D 视窗配置了可视化的视图解析。用户可以一键在“外装显示”与“钢结构透视”之间自由切换。
在 WebGL 底层，我们通过动态修改屏幕外部材质的渲染层级，将表面的显示模组隐藏，暴露出内部通过矩阵算法生成的钢结构主辅龙骨。当尺寸确立后，后端 DXF 模板引擎会接收 cols 和 rows 数据，实现毫秒级自动导出包含受力节点的标准 CAD 施工图纸。
总结与工程展望
通过整合 自然语言处理（LLM）+ 状态管理中心 + Web3D 图形学渲染，我们成功将一个原本需要多部门协同、耗时数天的工程算料与画图流程，压缩进了一个单一的 Web 应用中。这标志着 B2B 工业软件正向着“智能辅助设计（AI-CAD）”的极简交互方向演进。
开源与技术交流： 受限于篇幅，本文主要探讨了多维系统融合的架构设计模式与前端换算逻辑。关于 AI 指令解析的完整 Prompt 调优方案，以及 3D 钢结构透视的底层 Shader 具体实现代码，我已做脱敏处理并整理至个人的 GitHub 开源仓库中。
欢迎各位前端开发者及商显行业的同仁前往我的主页: [安全验证] 查看源码并交流架构设计思路。
