深入大模型-42-大模型交互之前端代码详解JavaScript代码

文章目录

• 1 前端结构
• 2 HTML结构
• • 2.1 顶部导航栏
  • 2.2 主体(左侧面板和右侧聊天)
  • 2.3 左侧面板
  • • 2.3.1 阶段1：信息收集
    • 2.3.2 阶段2：数据处理
    • 2.3.3 阶段3：结果展示
  • 2.4 右侧聊天区
• 3 JavaScript
• • 3.1 核心状态管理
  • 3.2 辅助函数
  • • 3.2.1 API连接状态setApiStatus(connected)
    • 3.2.2 更新整个界面的状态显示updateUI()
    • 3.2.3 添加消息appendMsg(role,text)
    • 3.2.4 HTML转义escHtml(text)
    • 3.2.5 自动调整输入框的高度autoResize(el)
    • 3.2.6 控制输入区域的加载状态setLoading(flag)
  • 3.3 初始化init()
  • 3.4 发送消息sendMessage()
  • 3.5 阶段结果处理handleStageResult(result)
  • • 3.5.1 fillCard1(data)
    • 3.5.2 fillCard2(data)
    • 3.5.3 fillCard3(data)
    • 3.5.4 setCardState(cardId, state)
    • 3.5.5 setField(valId, dotId, value)
    • 3.5.4 整体代码handleStageResult(result)
  • 3.6 重置会话resetSession()