传统的 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 开源仓库中。欢迎各位前端开发者及商显行业的同仁前往我的主页: [安全验证]查看源码并交流架构设计思路。 传统的 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 开源仓库中。欢迎各位前端开发者及商显行业的同仁前往我的主页: [安全验证]查看源码并交流架构设计思路。