山东大学软件学院创新实训-易学探索助手 象数图画功能开发记录

开发记录-基于多模型协同的智能对话与卦象生成

一、效果演示

在传统文化与人工智能技术融合的探索中，我们开发了一套支持多模型协同对话的智能系统，创新性地整合了自然语言处理与易经卦象可视化功能。用户可通过自然语言提问，系统将自动解析问题内容，同时调用多个AI模型进行协同响应，并根据对话内容动态生成卦象图示。

二、技术架构与核心组件

1. 技术栈全景

• 前端框架: Vue3 + Composition API
• 后端服务: Spring Boot 2.7 + RESTful API
• 可视化引擎: D3.js v7
• 网络通信: Axios + Fetch API
• 状态管理: Vue Reactive System

2. 系统核心功能

• 多模型并行对话（支持3+主流AI模型）
• 实时流式响应处理
• 动态卦象生成与动画展示
• 对话上下文管理
• 跨模型响应聚合

三、关键技术实现解析

1. 多模型协同工作机制

const createMessageHandler = (modelType, prompt) => {
  return async () => {
    const response = await sendRequestByModel(modelType, prompt)
    // 各模型差异化处理逻辑
    if(modelType === 'deepseek') {
      // 卦象生成预处理
    }
    // 流式数据处理
    const reader = response.body.getReader()
    // ...流处理逻辑
  }
}

通过Model Handler工厂模式实现不同模型的差异化处理，支持动态扩展新模型。

2. 流式数据双通道处理

while (true) {
  const { done, value } = await reader.read()
  // 文本流处理
  buffer += decoder.decode(value)
  // 卦象生成指令检测
  if(modelType === 'deepseek') {
    checkDrawPromise = fetch('/api/DrawPromise', ...)
  }
}

采用双通道处理机制：主通道处理文本流，辅助通道检测绘图指令，确保即时响应。

3. 卦象动态生成算法

@PostMapping("/Draw")
public ResponseEntity<String> draw(@RequestBody String textData) {
  JSONObject jsonSeq = new JSONObject(res);
  Object seqValue = jsonSeq.get("Seq");
  // 生成卦象序列
}

后端通过深度解析模型响应，提取卦象序列数据，返回标准化的JSON数据结构。

4. D3.js可视化实现

const paintGua = (id, seq) => {
  d3.select(`#diagram-${id}`)
    .append("svg")
    // 动态创建卦象元素
    .transition()
    .duration(500)
    .delay(i*400)
    // 动画效果实现
}

采用数据驱动方式生成SVG元素，通过transition实现逐爻绘制的动画效果。

四、技术挑战与解决方案

1. 多模型响应同步

• 挑战: 不同模型响应速度差异导致界面抖动
• 方案: 采用Promise.all+动态布局计算

const layoutClass = count === 2 ? 'two-models' 
               : count >=3 ? 'three-models' 
               : 'one-model'

2. 流式传输与绘图指令的协调

• 挑战: 绘图指令需要在流处理完成前触发
• 方案: 双通道异步处理机制

const checkDrawPromise = fetch('/api/DrawPromise')

3. 卦象动画时序控制

• 方案: 基于爻位的延迟动画

.transition()
.delay(i * 400) // 每爻间隔400ms

五、系统优化与扩展方向

功能扩展计划

• 卦象交互式解读
• 对话历史追溯
• 多模态输入支持

六、应用价值与总结

1. 易学文化数字化传播
2. 多视角智能决策支持
3. 传统文化教育创新
4. AI模型协同研究平台