AI-SDK 配套 UI 组件

说明

@polyv/live-watch-ai-ui 是保利威直播观看 AI UI 组件库，基于 Vue 2.x 的开箱即用组件集。包含以下功能

• AI 聊天助手: 完整的 AI 对话界面，支持流式响应、消息列表、语音输入
• 智能大纲: 回放视频的 AI 智能分析，支持思维导图展示
• 字幕逐字稿: AI 生成的字幕内容，支持时间轴点击跳转
• 互动答题: 回放视频中的互动问题展示
• 数字人支持: AI 数字人视频预览和播放

如果需要定制更改，可以使用保利威配套的UI 开源项目进行二次开发

安装

npm install @polyv/live-watch-ai-ui
# 或
yarn add @polyv/live-watch-ai-ui
# 或
pnpm add @polyv/live-watch-ai-ui

Peer Dependencies

需要安装以下 peer dependencies：

npm install vue@^2.7.16 @polyv/live-watch-ai-sdk

快速开始

1. 全局注入配置

在应用根组件中注入全局配置：

import Vue from 'vue';
import { useAIGlobalProvider } from '@polyv/live-watch-ai-ui';
import { PolyvWatchAICore } from '@polyv/live-watch-ai-sdk';

// 初始化 SDK
const aiCore = new PolyvWatchAICore({
  lang: 'zh_CN',
  domainInfo: {
    polyvWatchApiDomain: 'https://watch-api.polyv.cn',
  },
  getViewerToken: async () => ({ viewerToken: 'your-token' }),
  getChatToken: async () => ({ chatToken: 'your-token' }),
  getChannelInfo: async () => ({ channelId: 'your-channel-id' }),
  getUserInfo: async () => ({ userId: 'user-123', nick: '用户', pic: '' }),
});

// 全局注入
useAIGlobalProvider({
  globalLang: 'zh_CN', // 语言
  theme: 'dark', // 主题：'dark' | 'light'
  isMobile: () => /mobile/i.test(navigator.userAgent), // 移动端检测
  getWatchAICore: () => aiCore, // SDK 实例
});

2. 使用 AI 聊天助手

<template>
  <ai-assistant-chat
    :channel-id="channelId"
    :show-digital-human="true"
  />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { AiAssistantChat } from '@polyv/live-watch-ai-ui';

@Component({
  components: { AiAssistantChat },
})
export default class YourComponent extends Vue {
  channelId = 'your-channel-id';
}
</script>

3. 使用 AI 聚合功能面板

<template>
  <ai-aggregate-feature-panel
    :channel-id="channelId"
    :show-outline="true"
    :show-subtitle="true"
    :show-question="true"
    :current-time="currentTime"
    @seek-video="onSeekVideo"
  />
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { AiAggregateFeaturePanel } from '@polyv/live-watch-ai-ui';

@Component({
  components: { AiAggregateFeaturePanel },
})
export default class YourComponent extends Vue {
  @Prop({ type: String, required: true }) channelId!: string;
  @Prop({ type: Number, default: 0 }) currentTime!: number;

  onSeekVideo(time: number) {
    // 跳转视频到指定时间
    console.log('跳转视频到:', time, '秒');
  }
}
</script>

更多功能

如果需要查阅更多功能和更新日志，请查阅保利威 AI-SDK 配套的UI 开源项目