鳄梨科技-AI视频面试web端插件

AI视频面试web端插件是鳄梨科技提供的【AI视频题目+AI视频报告】的服务，致力于用AI解决大规模人力资源问题，此插件需搭配【小程序插件】来使用。

:sparkles: 特性

• 简单易用
• 包含的组件有AI视频题目、AI视频报告、视频预览
• 使用 TypeScript 构建，提供完整的类型定义文件

:package: 安装

// npm
npm i eli-video-interview --save

// yarn
yarn add eli-video-interview

🔨 配置

import { avocadoVideoInterview } from 'eli-video-interview';

const App: React.FC = () => {
  useEffect(() => {
    avocadoVideoInterview.init({
      server_url: '', // 接口域名地址
      auth_callback: () => new Promise((resolve, reject) => { // 授权认证回调 return Promise
        resolve({
          accessToken: '', // 必须返回accessToken为接口授权认证
          expireTime: 0, // accessToken过期时间（可以不返回）
        });
      }),
    });
  }, []);
}

AI视频题目

AI视频题目组件内置了AI测评题目模版，支持9种题型【普通题、色盲检测、英文字母识别、语言能力、游戏决策-气球、数字记忆、情绪判断、全身素质检测、局部纹身检测】，也可以根据自身需求自定义自由作答题或语言能力题，可自定义引导视频。

Example

import { AiQuestion, useAiQuestion } from 'eli-video-interview';

const { handleSubmit, handleValues, ...aiQuestionProps } = useAiQuestion({ token });

const handleSave = async () => {
  const { code, message, data } = await handleSubmit();
  if (code === 0) { // code === 0: 提交成功
    console.log({ code, message, data });
    // 具体业务实现逻辑
  }
};

return (
  <AiQuestion {...aiQuestionProps} />
)

API

| 参数 | 说明 | 类型 | 必传 | 默认值 | | :--- | :--- | :--- | :--- | :--- | | token | - | string | 是 | - | | name | 职位名称 | string | 否 | - | | historyPatterns | 已有岗位模型，当数据为空时会禁用已有岗位模型切换 | Array<any> | 否 | [] | | mediaList | 引导视频 | Array<MediaList> | 否 | [] |

AiQuestionInstance

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | handleValues | 获取AI视频题目所有字段值 | () => AiQuestionValues | | handleSubmit | 提交AI视频题目 | () => Promise<AiQuestionSubmitRes> |

MediaList

| 参数 | 说明 | 类型 | | :--- | :--- | :--- | | url | 视频地址 | string | | thumbUrl | 视频图片 | string |

AiQuestionValues

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | data | 题目信息 | { name?: string; token?: string; steps: QuestionModelStep[] | undefined; } | | media | 引导视频 | { mediaUrl?: string; thumbUrl?: string; } |

AiQuestionSubmitRes

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | code | 业务状态码 | number | | data | 主体信息 | { token: string; mediaUrl: string; thumbUrl: string; } | undefined | | message | 提示信息 | string |

QuestionModelStep

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | name | 题目名称 | string | | token | 题目ID | string | | type | 题目类型 | number | | desc | 题目描述 | string | | prepareTime | 准备时长 | number | | duration | 回答时长 | number | | category | 标签信息 | string[] | | broadcastType | 题目播报类型 | number | | aiSwitch | 题目是否开启AI分析 | number | | aiType | 是否可AI评分，值为2视为是可AI评分题目 | number | | weight | 题目权重 | number | string | | language | 语种 | number | | aiShowType | 题目作答类型 | number | | answerStatus | 题目重复作答状态 | number | | videoBroadcast | 题目播报类型为视频播报时存储的参数 | VideoBroadcast | | aiAbilities | 题目AI分析参数集合 | AiAbilityParams[] |

VideoBroadcast

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | videoRetry | 允许重复听题 | number | | videoUrl | 视频地址 | string |

AiAbilityParams

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | name | AI维度名称 | string | | token | AI维度ID | string | | type | AI维度类型 | number | | category | AI维度分类 | number | | desc | AI维度描述 | string | | weight | AI维度权重 | number | string | | relatedAbilities | 语种所关联的AI维度类型集合 | number[] | | extra | AI维度【是否意愿、要点分析】字段值 | string | | sort | AI维度排序 | number |

AI视频报告

AI视频报告组件可根据面试者的答题情况，计算出视频面试得分及单题目的综合评分，您也可以手动调节单题的评分分值，手动调节后会重新计算视频面试得分。

Example

import React, { FC, useState, useCallback } from 'react';
import { Box } from 'fbm-ui';
import { AiReport, VideoPreview, useAiReport } from 'eli-video-interview';

const Report: FC = () => {
  const token = ''; // 具体业务token
  const [steps, setSteps] = useState<any[]>([]); // 题目信息
  const [faceAnalysis, setFaceAnalysis] = useState<any>({}); // 人脸识别信息
  const [pageStepIndexes, setPageStepIndexes] = useState<number[]>([]); // 具有视频信息的下标集合
  const [stepIndex, setStepIndex] = useState<number>(0); // 当前题目下标

  const aiReport = useAiReport({
    token,
    disabledScore: false,
    scoreRankIntervals: [],
    stepToken: steps[pageStepIndexes[stepIndex]]?.token,
    operableButtons: ['export', 'refresh', 'scoreRank', 'abilities'],
    onLoad: params => {
      setSteps(params.steps);
      setFaceAnalysis(params.faceAnalysis);
      setPageStepIndexes(params.pageStepIndexes);
    },
    onScoreChange: scoreState => {
      console.log(scoreState);
    },
    onStepChange: stepToken => {
      const index = steps.findIndex(({ token }) => token === stepToken);
      const stepIndex = pageStepIndexes.findIndex(i => i === index);
      setStepIndex(stepIndex);
    },
    onScoreRankIntervalsChange: scoreRankIntervals => {
      console.log(scoreRankIntervals);
    },
  });

  const handlePrev = useCallback(() => {
    setStepIndex(stepIndex - 1);
  }, [stepIndex]);

  const handleNext = useCallback(() => {
    setStepIndex(stepIndex + 1);
  }, [stepIndex]);

  return (
    <Box sx={{ width: '100%', height: '100%', overflow: 'hidden' }}>
      <Box sx={{ position: 'absolute', left: 100 }}>
        {steps.length > 0 && pageStepIndexes.length > 0 && (
          <VideoPreview
            url={steps[stepIndex].answer.videoUrl}
            faceAnalysis={faceAnalysis}
            currentPage={pageStepIndexes[stepIndex] + 1}
            totalPage={steps.length}
            disabledPrev={stepIndex === 0}
            disabledNext={stepIndex === pageStepIndexes.length - 1}
            onNext={handleNext}
            onPrev={handlePrev}
          />
        )}
      </Box>
      <Box sx={{ width: '584px', height: '100%', margin: '0 auto' }}>
        <AiReport {...aiReport} />
      </Box>
    </Box>
  );
};

export default Report;

API

| 参数 | 说明 | 类型 | 必传 | 默认值 | | :--- | :--- | :--- | :--- | :--- | | token | 订单ID | string | 是 | - | | scoreRankIntervals | 排名区间 | ScoreRankInterval[] | 否 | - | | disabledScore | 禁用调整分值 | boolean | 否 | true | | reminderSent | 是否已提醒面试者作答 | boolean | 否 | - | | operableButtons | 可操作按钮组 | Array<'export' | 'refresh' | 'scoreRank' | 'abilities' | 'sendReminder'> | 否 | - | | stepToken | 当前选中视频题目token | string | 否 | - | | onLoad | 报告数据获取成功后回调事件 | (values: AiReportLoadedValues) => void | 否 | - | | onExportReportClick | 点击导出报告后回调事件 | () => void | 否 | - | | onScoreChange | 分值更新时触发回调事件 | (scoreState?: ScoreManualUpdateState) => void | 否 | - | | onStepChange | 选中视频题更新时触发回调事件 | (stepToken: string) => void | 否 | - | | onSendReminderClick | 点击发送提醒后回调事件 | () => void | 否 | - | | onScoreRankIntervalsChange | 排名区间更新时触发回调事件 | (scoreRankIntervals?: ScoreRankIntervals[]) => void | 否 | - | | onScoreRankIntervalsSubmit | 排名区间提交成功后触发回调事件 | (scoreRankIntervals?: ScoreRankIntervals[]) => Promise<any> | 否 | - |

AiReportInstance

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | handleRefresh | 刷新报告数据 | () => void |

AiReportLoadedValues

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | faceUrl | 人脸照片 | string | | faceAnalysis | 人脸分析（颜值得分、年龄） | FaceAnalysis | | steps | 题目信息 | any[] | | pageStepIndexes | 具有视频信息的下标集合 | number[] |

FaceAnalysis

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | age | 年龄 | number | | beauty | 颜值得分 | number |

ScoreRankInterval

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | rank | - | number | | scoreRankIntervals | 排名区间 | ScoreRankIntervals | | score | 排名分数 | Score |

ScoreRankIntervals

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | startRankProportion | 开始区间比例 | number | | endRankProportion | 结束区间比例 | number |

Score

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | startScore | 开始区间分数 | number | | endScore | 结束区间分数 | number |

ScoreManualUpdateState

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | flowStepToken | 当前分值的token | string | | type | 分值类型（1: 总分；2: ai纬度） | 1 | 2 | | aiAbilityChangeType | 纬度类型，type=2时存在 | number | | score | 分值 | number |

AI视频预览

AI视频预览组件可配合AI视频报告组件使用，展示单题答题者的视频情况。

Example

import { VideoPreview } from 'eli-video-interview';

// 具体示例请在AI视频报告查看

API

| 参数 | 说明 | 类型 | 必传 | 默认值 | | :--- | :--- | :--- | :--- | :--- | | url | 预览视频链接 | string | 是 | - | | faceAnalysis | 人脸分析（颜值得分、年龄） | FaceAnalysis | 否 | - | | isShowPageTurning | 是否显示分页 | boolean | 否 | true | | currentPage | 当前页数 | number | 否 | 1 | | totalPage | 总页数 | number | 否 | 1 | | disabledPrev | 禁用上一页按钮 | boolean | 否 | false | | disabledNext | 禁用下一页按钮 | boolean | 否 | false | | width | 组件宽度 | number | string | 否 | - | | style | 自定义样式 | CSSProperties | 否 | - | | onPrev | 点击上一页后回调事件 | () => void | 否 | - | | onNext | 点击下一页后回调事件 | () => void | 否 | - |

全局类型常量

题目作答类型

1: 自由作答
2: 跟读

题目播报类型

1: 语音播报
2: 视频播报

题目是否开启AI分析

1: 开启
2: 关闭

题目重复作答状态

1: 允许重复作答
2: 不允许重复作答

AI分析语种

2: 普通话
11: 英文
12: 日语
16: 粤语

AI维度类型

1: 形象打分
3: 语意流畅
4: 保持微笑
5: 语言丰富
6: 要点分析
7: 语速
8: 是否意愿
9: 年龄
10: 颜值

AI维度分类

1: 语种
2: 语意
3: 表达
4: 形象
6: 语言能力

允许重复听题

0: 不允许
1: 允许

HTTP状态码

API采用标准HTTP错误码来表示接口的错误:

| 状态码 | 含义 | | :--- | :--- | | 200 | OK -- 请求成功 | | 400 | Bad Request -- 接口请求参数错误. | | 401 | Unauthorized -- 认证信息非法. | | 403 | Forbidden -- 所访问的资源拒绝访问. | | 404 | Not Found -- 访问的资源不存在. | | 405 | Method Not Allowed -- 错误的请求Method. | | 500 | Internal Server Error -- 服务器内部错误. | | 503 | Service Unavailable -- 服务器暂时不可用. |

业务状态码

| 状态码 | 含义 | | :--- | :--- | | 0 | OK -- 请求成功 | | 其他code | ERROR -- 请求失败 |