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 開源專案