Vue 3 结合状态机流转:开发魔珐星云高拟真 AI 面试官

针对 AI 面试缺乏沉浸感且算力成本高的痛点,本文分享如何基于魔珐星云 SDK 与 Vue 3,利用状态机流转构建具备严格流程控制与评分系统的高拟真 AI 面试官。

Vue 3状态机AI 面试
星云工作室头像星云工作室

一、项目背景:为什么我们需要升级现有的 AI 面试系统?

在企业招聘初筛场景中,现有的文本或纯语音 AI 面试系统虽然降低了人力成本,但在实际运行中面临显著的体验瓶颈:

  • 缺乏严肃感与职业压迫感:纯文本交互无法传递真人面试官的眼神注视与肢体气场,导致求职者缺乏「正式面试」的沉浸感与严肃感,易造成答题随意。
  • 流程把控与状态反馈割裂:真实的面试包含提问、思考、聆听、打分等多个环节。系统很难在没有视觉载体的情况下,清晰地向求职者传递「我现在正在听你作答」的信号。
  • 算力与成本约束:若追求高保真 3D 效果,传统云端渲染方案极度依赖高昂的 GPU 资源,极大地限制了 AI 面试官的低成本、规模化并发部署。

二、技术解法:职业姿态控制与端侧低成本解算

在本项目中,我们利用魔珐星云作为具身智能表达层,其底层架构完美契合了严谨的业务流程需求:

  • 职业常驻姿态控制(状态机):相比高频的手势互动,面试场景更需要「收敛与专业」。星云 SDK 提供了细粒度的状态接口(如 listen 专注倾听、interactiveidle 职业待机),让开发者可以通过状态机严格管控面试官的体态表现。
  • AI 端渲技术(打破并发成本瓶颈):将渲染负载从云端彻底转移至终端,使高质量 3D 面试官能在无需独立显卡的轻薄办公本或百元级移动设备上流畅运行,且 100% 兼容信创环境。

三、实战拆解:基于状态机实现面试流程管控

与常规的自由对话不同,AI 面试官的代码架构侧重于「严格的流程控制」。以下是基于 Vue 3 异步流程控制的实战代码。

1. 定义标准化面试配置

定义单题的思考时间、回答时间以及多维度评分权重,确保流程严谨性。

// 定义面试配置:包含思考时间、回答时间及评分权重
export const INTERVIEW_CONFIG = {
  THINKING_TIME: 10,
  ANSWER_TIME: 120,
  SCORE_WEIGHTS: {
    content: 0.4, // 内容质量
    communication: 0.3, // 沟通表达
    logic: 0.2 // 逻辑思维
  }
};

2. 面试流程控制器 (Interview Controller)

利用 async/await 构建状态机,控制数字人在「提问 - 待机 - 倾听」状态间无缝流转。

/**
 * 核心逻辑:进入下一道面试题
 */
async function nextQuestion(): Promise<void> {
  const { avatar, interview } = appState;

  // 1. 获取当前面试题
  const currentQuestion = interview.questions[interview.currentQuestionIndex];

  // 2. 状态:驱动播报(提出问题)
  await avatar.instance.speak(currentQuestion.question, true, true);

  // 3. 状态:进入思考倒计时(数字人保持职业待机 interactiveidle)
  avatar.instance.interactiveidle();
  await startThinkingTime();

  // 4. 状态:进入回答环节(强制锁定为专注倾听 listen 状态)
  avatar.instance.listen();
  await startAnswerTime();
}

3. 多维度评分系统的数据结算

面试结束后,系统后台根据 ASR 收集的文本数据进行 LLM 分析,得出得分后,交由数字人进行终场播报。

async function endInterview(): Promise<void> {
  // 汇总各题回答记录,执行打分算法
  const scores = calculateScores(appState.interview.answers);

  // 拼接结语并驱动数字人播报
  const summaryMessage = `面试结束,您的总得分为 ${scores.total} 分。其中沟通表达 ${scores.communication} 分。感谢您的参与!`;

  await appState.avatar.instance.speak(summaryMessage, true, true);
}

四、开发与集成避坑指南

  • 状态接口互斥原则:在调用 avatar.listen() 后,数字人会保持注视倾听姿态。在进入下一轮提问 speak() 前,无需手动解除,引擎会自动进行状态平滑过渡。
  • Code 50001 断线重连:当系统长时间停留在某一道题未发生指令交互时,实例可能进入空闲休眠模式以节省资源。前端业务层需捕获该状态码,并按需执行隐式的自动重连机制。
  • SDK 必填参数项:即使业务逻辑不需要处理底层日志,在实例化时 onMessage 监听器仍为必填项,防止编译抛错。

五、结语

具身智能正在重塑招聘与考核场景的交互形态。通过魔珐星云 SDK 赋能,开发团队仅需通过简练的 Web 技术栈与状态机模型,即可将原本干瘪的面试算法转化为具有专业威严感的 3D 职业形象。这不仅极大提升了系统的沉浸感,更为高并发场景的低成本落地奠定了基础。

相关推荐

魔珐星云,不止是数字人,让 AI 从会思考,走向能表达、会交流。