1. 背景与核心概念B站AI创造公开赛的技术价值近期B站低调上线了一项名为“AI创造公开赛”的活动在技术社区引发了不小的关注。这并非一次简单的营销活动而是一个面向广大开发者、内容创作者和AI爱好者的综合性技术实战平台。对于从事AI应用开发、内容生成算法研究或是希望将AI能力融入创意项目的工程师而言这是一个绝佳的“练手场”和“灵感库”。简单来说B站AI创造公开赛是一个以竞赛形式鼓励参与者利用各类AI技术如大语言模型、文生图/视频、语音合成、智能剪辑等进行内容创作和工具开发的系列活动。其核心价值在于提供真实场景与数据相比个人闭门造车公开赛通常会提供B站生态内的特定场景如视频摘要生成、弹幕智能过滤、AI辅助剪辑模板、部分脱敏数据或明确的评价指标让开发者的项目能直面真实业务需求。降低AI应用门槛活动往往会整合或推荐一些易用的AI开发平台和工具链例如百度的文心大模型、阿里云的通义千问等国内主流模型的API帮助开发者快速搭建原型聚焦于创意和业务逻辑的实现。连接创意与技术它打破了“技术”与“内容”的壁垒鼓励开发者思考如何用AI提升创作效率、丰富内容形式如AI生成虚拟UP主、自动生成视频字幕和章节这正是当前AIGC领域最核心的命题。对于开发者而言参与此类比赛其意义远超比赛本身。它是一个系统性的学习路径从理解赛题、技术选型、环境搭建、模型调用/微调、前后端集成到最终的项目部署与演示。接下来我们将以一个典型的参赛项目为例完整走通一个“AI视频智能摘要生成器”的开发全流程。2. 环境准备与版本说明在开始一个AI应用项目前清晰的环境定义是成功的基石。本次实战我们将构建一个Web应用后端处理AI逻辑前端展示结果。以下是我们推荐的环境配置请根据你的实际情况进行调整。核心环境栈操作系统Ubuntu 20.04 LTS / Windows 10 WSL2 / macOS Monterey 及以上。本文示例基于 Ubuntu 22.04。编程语言Python 3.8 - 3.10AI模型生态支持最广泛的版本范围。后端框架FastAPI 0.104。选择FastAPI因其异步特性适合AI推理的I/O密集型操作且能自动生成API文档。前端框架Vue 3 Element Plus。用于快速构建交互界面。AI模型服务百度千帆大模型平台ERNIE系列、OpenAI-Compatible API或使用本地模型如ChatGLM3-6B。开发工具VS Code 或 PyCharm。版本控制Git。项目结构预览在开始编码前我们先规划好项目目录这有助于管理复杂的依赖和模块。ai-video-summarizer/ ├── backend/ # 后端FastAPI服务 │ ├── app/ │ │ ├── __init__.py │ │ ├── main.py # FastAPI应用主入口 │ │ ├── api/ # 路由模块 │ │ │ └── endpoints.py │ │ ├── core/ # 核心配置 │ │ │ └── config.py │ │ ├── models/ # Pydantic数据模型 │ │ │ └── schemas.py │ │ └── services/ # 业务逻辑层含AI调用 │ │ └── ai_service.py │ ├── requirements.txt # Python依赖 │ └── Dockerfile ├── frontend/ # 前端Vue应用 │ ├── public/ │ ├── src/ │ │ ├── views/ │ │ │ └── HomeView.vue │ │ ├── components/ │ │ ├── api/ # 前端API调用封装 │ │ │ └── backend.js │ │ └── main.js │ ├── package.json │ └── vite.config.js # 构建配置 └── docker-compose.yml # 容器编排3. 核心原理与技术选型拆解我们的目标是实现“视频智能摘要”。其核心流程可以拆解为以下几个关键技术环节每个环节都有多种技术方案可选。3.1 视频内容理解关键信息提取AI不能直接“看”视频我们需要先将视频转化为AI可以处理的文本信息。方案一语音识别ASR提取视频中的旁白、对话。可选用开源方案OpenAI Whisper精度高支持多语言但推理稍慢。云服务API阿里云、腾讯云、百度云的语音识别服务稳定有免费额度。方案二关键帧分析与OCR提取视频中的字幕、标题、图表文字。可选用开源方案OpenCV抽帧 PaddleOCR / EasyOCR识别文字。方案三直接使用视频理解大模型如Video-LLaMA、InternVideo等可直接输出视频描述但部署门槛较高。对于公开赛快速原型推荐方案一ASR结合方案二OCR抽字幕能覆盖大部分信息型视频。3.2 文本摘要生成核心AI能力获得视频文本稿后需要生成简洁摘要。方案一调用大语言模型LLMAPI这是最快捷、效果通常最好的方式。国内平台百度文心千帆ERNIE-Bot、阿里通义千问、智谱AIChatGLM、月之暗面Kimi。它们提供了丰富的上下文窗口和强大的指令跟随能力。提示词工程这是决定摘要质量的关键。你需要设计一个清晰的“系统提示词”System Prompt来引导模型。方案二使用本地摘要模型如BART、T5等经过微调的文本摘要模型。优点是数据隐私性好、无网络延迟但需要一定的机器学习部署能力。对于公开赛强烈推荐方案一。我们以百度千帆的ERNIE-Bot API为例进行演示。3.3 系统架构设计一个可用的应用还需要前后端架构。异步处理视频转文本和AI摘要都是耗时操作必须采用异步任务避免HTTP请求阻塞。可以使用Celery Redis或者利用FastAPI的BackgroundTasks简单处理。API设计遵循RESTful风格设计清晰的任务提交、状态查询、结果获取接口。前端交互需要提供文件上传、任务进度显示、结果展示摘要文本、高亮关键词、时间戳片段的界面。4. 完整实战案例构建视频摘要生成Web应用下面我们开始分步实现。我们将先搭建后端AI服务再构建一个简单的前端界面。4.1 后端服务搭建FastAPI 千帆大模型第一步创建虚拟环境并安装依赖# 进入后端目录 cd backend # 创建虚拟环境以venv为例 python -m venv venv # 激活虚拟环境 # Linux/macOS source venv/bin/activate # Windows venv\Scripts\activate # 安装核心依赖 pip install fastapi uvicorn httpx python-multipart pydantic-settings # 安装ASR依赖以Whisper为例需确保已安装ffmpeg pip install openai-whisper # 安装OCR依赖以PaddleOCR为例 pip install paddlepaddle paddleocr第二步编写配置文件创建backend/app/core/config.py管理敏感信息和设置。# backend/app/core/config.py from pydantic_settings import BaseSettings from typing import Optional class Settings(BaseSettings): # 百度千帆API配置 (从环境变量读取避免硬编码) qianfan_ak: Optional[str] None # API Key qianfan_sk: Optional[str] None # Secret Key qianfan_api_base: str https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions # 模型选择 qianfan_model: str ernie-3.5-8k # 或 ernie-4.0-8k-preview # 应用配置 project_name: str B站AI创造赛-视频摘要器 api_v1_prefix: str /api/v1 # 文件上传设置 max_upload_size: int 200 * 1024 * 1024 # 200MB allowed_extensions: set {.mp4, .avi, .mov, .mkv} class Config: env_file .env # 从.env文件加载配置 settings Settings()创建.env文件切记加入.gitignoreQIANFAN_AKyour_actual_api_key_here QIANFAN_SKyour_actual_secret_key_here第三步实现AI服务层创建backend/app/services/ai_service.py封装所有AI能力。# backend/app/services/ai_service.py import httpx import whisper from paddleocr import PaddleOCR import asyncio from typing import List, Tuple import logging from ..core.config import settings logger logging.getLogger(__name__) class AIService: def __init__(self): self.ocr_engine PaddleOCR(use_angle_clsTrue, langch) # Whisper模型加载较慢可延迟加载或单例管理 self.asr_model None async def extract_text_from_video(self, video_path: str) - str: 从视频提取文本结合ASR和OCR full_text # 1. 使用Whisper进行语音识别 asr_text await self._run_async(self._transcribe_audio, video_path) if asr_text: full_text f[语音内容]\n{asr_text}\n\n # 2. 使用PaddleOCR识别关键帧字幕简化抽第1, 中间最后帧 # 此处省略具体的抽帧和OCR代码核心是调用 self.ocr_engine.ocr(img_path) # ocr_results self.ocr_engine.ocr(frame_path, clsTrue) # ocr_text .join([line[1][0] for res in ocr_results for line in res]) # full_text f[字幕内容]\n{ocr_text}\n return full_text if full_text else 未能从视频中提取到有效文本。 def _transcribe_audio(self, video_path: str) - str: 同步的Whisper转录函数需在线程池中运行避免阻塞事件循环 if self.asr_model is None: self.asr_model whisper.load_model(base) # 可选 tiny, base, small result self.asr_model.transcribe(video_path, languagezh, fp16False) return result[text] async def _run_async(self, func, *args): 将同步CPU密集型函数放入线程池执行 loop asyncio.get_event_loop() return await loop.run_in_executor(None, func, *args) async def generate_summary_with_llm(self, extracted_text: str) - str: 调用千帆大模型生成摘要 if not settings.qianfan_ak or not settings.qianfan_sk: raise ValueError(千帆API配置未设置) # 构建提示词 system_prompt 你是一个专业的视频内容总结助手。请根据用户提供的视频转录文本生成一个简洁、准确、连贯的摘要。 摘要要求 1. 长度在150-300字之间。 2. 抓住核心论点、关键数据和结论。 3. 用中文输出语言流畅自然。 4. 如果文本中有明显的时间戳或章节标记可以在摘要中提及。 请直接输出摘要正文不要加“摘要”等前缀。 messages [ {role: system, content: system_prompt}, {role: user, content: f视频转录文本\n{extracted_text}} ] # 获取Access Token (千帆API需要) async with httpx.AsyncClient() as client: token_url fhttps://aip.baidubce.com/oauth/2.0/token?grant_typeclient_credentialsclient_id{settings.qianfan_ak}client_secret{settings.qianfan_sk} token_resp await client.post(token_url) access_token token_resp.json().get(access_token) if not access_token: logger.error(获取千帆Access Token失败) return 调用AI服务失败请检查API配置。 # 调用Chat Completion接口 api_url f{settings.qianfan_api_base}?access_token{access_token} payload { messages: messages, stream: False, temperature: 0.7, top_p: 0.8, } headers {Content-Type: application/json} try: resp await client.post(api_url, jsonpayload, headersheaders, timeout30.0) resp.raise_for_status() result resp.json() return result.get(result, AI生成摘要时出现未知错误。) except httpx.RequestError as e: logger.error(f请求千帆API失败: {e}) return f网络请求失败: {str(e)} except Exception as e: logger.error(f处理AI响应失败: {e}) return fAI服务处理异常: {str(e)} # 创建全局服务实例 ai_service AIService()第四步创建数据模型与API路由创建backend/app/models/schemas.py# backend/app/models/schemas.py from pydantic import BaseModel from typing import Optional class SummaryRequest(BaseModel): video_url: Optional[str] None # 或通过文件上传 class SummaryResponse(BaseModel): task_id: str status: str # processing, completed, failed extracted_text: Optional[str] None summary: Optional[str] None error_message: Optional[str] None创建backend/app/api/endpoints.py# backend/app/api/endpoints.py from fastapi import APIRouter, UploadFile, File, BackgroundTasks, HTTPException import uuid import os from typing import Dict from ...services.ai_service import ai_service from ..models.schemas import SummaryRequest, SummaryResponse router APIRouter() # 内存中存储任务状态生产环境应用数据库或Redis tasks: Dict[str, dict] {} router.post(/summarize, response_modelSummaryResponse) async def create_summary_task( background_tasks: BackgroundTasks, file: UploadFile File(...) ): 上传视频文件并创建摘要任务 # 1. 文件验证 file_ext os.path.splitext(file.filename)[1].lower() from ..core.config import settings if file_ext not in settings.allowed_extensions: raise HTTPException(400, detailf不支持的文件格式。允许的格式: {settings.allowed_extensions}) # 2. 保存文件 task_id str(uuid.uuid4()) save_dir fuploads/{task_id} os.makedirs(save_dir, exist_okTrue) file_path os.path.join(save_dir, file.filename) with open(file_path, wb) as f: content await file.read() f.write(content) # 3. 初始化任务状态 tasks[task_id] {status: processing, file_path: file_path} # 4. 将耗时的处理任务加入后台 background_tasks.add_task(process_video_summary, task_id, file_path) return SummaryResponse(task_idtask_id, statusprocessing) router.get(/task/{task_id}, response_modelSummaryResponse) async def get_task_status(task_id: str): 查询任务状态和结果 task tasks.get(task_id) if not task: raise HTTPException(status_code404, detail任务不存在) return SummaryResponse(**task) async def process_video_summary(task_id: str, file_path: str): 后台处理任务的核心逻辑 try: tasks[task_id][status] processing # 步骤1: 提取视频文本 extracted_text await ai_service.extract_text_from_video(file_path) tasks[task_id][extracted_text] extracted_text # 步骤2: 调用LLM生成摘要 summary await ai_service.generate_summary_with_llm(extracted_text) tasks[task_id][summary] summary tasks[task_id][status] completed except Exception as e: tasks[task_id][status] failed tasks[task_id][error_message] str(e) # 生产环境应记录详细日志 print(f任务 {task_id} 处理失败: {e})第五步组装主应用创建backend/app/main.py# backend/app/main.py from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from fastapi.staticfiles import StaticFiles import os from .core.config import settings from .api.endpoints import router as api_router app FastAPI(titlesettings.project_name) # 配置CORS允许前端访问 app.add_middleware( CORSMiddleware, allow_origins[http://localhost:5173], # Vue开发服务器默认端口 allow_credentialsTrue, allow_methods[*], allow_headers[*], ) # 创建上传文件目录 os.makedirs(uploads, exist_okTrue) app.mount(/uploads, StaticFiles(directoryuploads), nameuploads) # 注册API路由 app.include_router(api_router, prefixsettings.api_v1_prefix) app.get(/) async def root(): return {message: 欢迎使用视频智能摘要生成API服务, docs: /docs}第六步运行后端服务在backend目录下创建requirements.txt并安装所有依赖后运行uvicorn app.main:app --reload --host 0.0.0.0 --port 8000访问http://localhost:8000/docs即可看到自动生成的交互式API文档并可以测试接口。4.2 前端界面搭建Vue 3 Element Plus第一步初始化Vue项目并安装依赖# 在项目根目录下 npm create vuelatest frontend # 按照提示选择项目特性确保选中 TypeScript, Vue Router, Pinia cd frontend npm install npm install axios element-plus element-plus/icons-vue第二步封装后端API调用创建frontend/src/api/backend.js// frontend/src/api/backend.js import axios from axios; const apiClient axios.create({ baseURL: http://localhost:8000/api/v1, // 后端API地址 timeout: 60000, // 超时时间设长因为处理视频可能较慢 }); export default { // 上传视频并创建摘要任务 async createSummaryTask(file) { const formData new FormData(); formData.append(file, file); const response await apiClient.post(/summarize, formData, { headers: { Content-Type: multipart/form-data, }, }); return response.data; }, // 查询任务状态 async getTaskStatus(taskId) { const response await apiClient.get(/task/${taskId}); return response.data; }, };第三步创建主页面组件创建frontend/src/views/HomeView.vue!-- frontend/src/views/HomeView.vue -- template div classhome-container el-card classbox-card template #header div classcard-header spanB站AI创造赛 - 视频智能摘要生成器/span /div /template !-- 文件上传区域 -- el-upload classupload-demo drag action# :auto-uploadfalse :on-changehandleFileChange :show-file-listfalse :disabledisProcessing el-icon classel-icon--uploadupload-filled //el-icon div classel-upload__text 将视频文件拖到此处或 em点击上传/em /div template #tip div classel-upload__tip 支持 MP4, AVI, MOV, MKV 格式文件大小不超过200MB /div /template /el-upload !-- 上传文件信息 -- div v-ifuploadFile classfile-info el-tag typeinfo{{ uploadFile.name }}/el-tag el-button sizesmall clickstartProcessing typeprimary :loadingisProcessing 开始生成摘要 /el-button /div !-- 任务状态与结果展示 -- div v-ifcurrentTaskId classtask-section el-divider / h3任务处理状态/h3 el-steps :activestepActive align-center finish-statussuccess el-step title上传完成 / el-step title内容提取中 / el-step titleAI摘要生成中 / el-step title完成 / /el-steps div classstatus-display el-alert v-iftaskStatus processing title正在处理中请稍候... typeinfo :closablefalse show-icon / el-alert v-iftaskStatus completed title摘要生成成功 typesuccess show-icon / el-alert v-iftaskStatus failed :title处理失败: errorMessage typeerror show-icon / /div !-- 结果显示 -- div v-iftaskStatus completed classresult-container el-tabs typeborder-card el-tab-pane label生成的摘要 div classsummary-text{{ summaryText }}/div el-button typeprimary clickcopyToClipboard(summaryText)复制摘要/el-button /el-tab-pane el-tab-pane label提取的原始文本 div classextracted-text{{ extractedText }}/div /el-tab-pane /el-tabs /div /div /el-card /div /template script setup langts import { ref, computed, onUnmounted } from vue; import { UploadFilled } from element-plus/icons-vue; import { ElMessage } from element-plus; import backendApi from /api/backend; const uploadFile refFile | null(null); const currentTaskId refstring(); const taskStatus refstring(); // processing, completed, failed const extractedText refstring(); const summaryText refstring(); const errorMessage refstring(); const isProcessing refboolean(false); let pollInterval: number | null null; const stepActive computed(() { switch (taskStatus.value) { case processing: return 2; case completed: return 4; case failed: return 0; default: return 1; } }); const handleFileChange (file: any) { uploadFile.value file.raw; }; const startProcessing async () { if (!uploadFile.value) return; isProcessing.value true; taskStatus.value processing; try { // 1. 上传文件创建任务 const response await backendApi.createSummaryTask(uploadFile.value); currentTaskId.value response.task_id; ElMessage.success(任务已提交开始处理); // 2. 开始轮询任务状态 startPollingTaskStatus(); } catch (error: any) { ElMessage.error(任务提交失败: error.message); isProcessing.value false; taskStatus.value failed; errorMessage.value error.message; } }; const startPollingTaskStatus () { if (pollInterval) clearInterval(pollInterval); pollInterval setInterval(async () { if (!currentTaskId.value) return; try { const statusResp await backendApi.getTaskStatus(currentTaskId.value); taskStatus.value statusResp.status; if (statusResp.status completed) { extractedText.value statusResp.extracted_text || ; summaryText.value statusResp.summary || ; isProcessing.value false; stopPolling(); ElMessage.success(摘要生成完成); } else if (statusResp.status failed) { errorMessage.value statusResp.error_message || 未知错误; isProcessing.value false; stopPolling(); ElMessage.error(处理失败); } // 如果状态仍是 processing继续轮询 } catch (error) { console.error(轮询任务状态失败:, error); } }, 2000); // 每2秒查询一次 }; const stopPolling () { if (pollInterval) { clearInterval(pollInterval); pollInterval null; } }; const copyToClipboard (text: string) { navigator.clipboard.writeText(text).then(() { ElMessage.success(已复制到剪贴板); }); }; onUnmounted(() { stopPolling(); }); /script style scoped .home-container { max-width: 900px; margin: 40px auto; padding: 20px; } .file-info { margin-top: 20px; display: flex; align-items: center; gap: 15px; } .task-section { margin-top: 30px; } .status-display { margin: 20px 0; } .summary-text, .extracted-text { white-space: pre-wrap; line-height: 1.6; padding: 15px; background-color: #f9f9f9; border-radius: 4px; margin-bottom: 15px; max-height: 400px; overflow-y: auto; } /style第四步运行前端应用在frontend目录下npm run dev访问http://localhost:5173即可看到一个完整的视频上传、处理状态跟踪、摘要结果展示的Web应用。5. 部署与优化从本地到可分享的参赛作品完成本地开发后为了让你的作品能在B站AI创造公开赛中展示你需要将其部署到一个可公开访问的环境。5.1 容器化部署使用Docker这是最推荐的方式能确保环境一致性。后端Dockerfile (backend/Dockerfile):# backend/Dockerfile FROM python:3.9-slim WORKDIR /app # 安装系统依赖Whisper需要ffmpeg RUN apt-get update apt-get install -y \ ffmpeg \ rm -rf /var/lib/apt/lists/* # 复制依赖文件并安装 COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt # 复制应用代码 COPY ./app ./app # 创建上传目录 RUN mkdir -p uploads # 环境变量在运行时通过docker-compose或云平台注入 ENV PYTHONPATH/app CMD [uvicorn, app.main:app, --host, 0.0.0.0, --port, 8000]前端Dockerfile (frontend/Dockerfile):# frontend/Dockerfile FROM node:18-alpine as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine as production-stage COPY --frombuild-stage /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]前端Nginx配置 (frontend/nginx.conf):# frontend/nginx.conf server { listen 80; server_name localhost; root /usr/share/nginx/html; index index.html; # 处理前端路由如Vue Router的history模式 location / { try_files $uri $uri/ /index.html; } # 代理后端API请求 location /api/ { proxy_pass http://backend:8000; # 指向后端服务名 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }Docker Compose编排 (docker-compose.yml):# docker-compose.yml version: 3.8 services: backend: build: ./backend ports: - 8000:8000 environment: - QIANFAN_AK${QIANFAN_AK} - QIANFAN_SK${QIANFAN_SK} volumes: - ./uploads:/app/uploads # 持久化上传文件 restart: unless-stopped frontend: build: ./frontend ports: - 80:80 depends_on: - backend restart: unless-stopped运行docker-compose up --build -d即可一键启动整个应用栈。5.2 云服务器部署你可以将上述Docker Compose项目部署到任何支持Docker的云服务器如阿里云ECS、腾讯云CVM。关键步骤在服务器安装Docker和Docker Compose。将项目代码上传至服务器使用Git或SCP。在服务器项目根目录创建.env文件并填入你的千帆API密钥。运行docker-compose up -d。配置服务器安全组开放80前端和8000后端API可选端口。绑定域名可选并配置Nginx反向代理。5.3 部署到Vercel / Netlify (前端) Railway / Render (后端)对于不想管理服务器的开发者可以使用Serverless或PaaS平台前端将frontend/dist目录构建的静态文件部署到Vercel或Netlify并配置重写规则支持SPA。后端将Backend服务部署到Railway或Render。这些平台能直接连接你的Git仓库自动构建和部署并方便地管理环境变量。6. 常见问题与排查思路在开发与部署过程中你可能会遇到以下典型问题问题现象可能原因排查步骤与解决方案上传视频后任务长时间处于“processing”状态1. 视频文件过大处理耗时。2. Whisper模型首次加载慢。3. 千帆API调用超时或失败。4. 后台任务线程阻塞。1. 查看后端日志确认处理进度。2. 增加前端轮询超时时间并给用户进度提示。3. 对于大文件考虑使用Celery等分布式任务队列并提供更精确的任务状态。4. 在ai_service.py中添加更详细的日志记录每个步骤的开始和结束。调用千帆API返回“认证失败”或“无效的Access Token”1. API Key或Secret Key错误。2. 环境变量未正确加载。3. Token获取URL或参数有误。1. 检查.env文件中的QIANFAN_AK和QIANFAN_SK是否正确无误并确保已重启服务。2. 在代码中打印或日志输出settings.qianfan_ak的前几位确认是否成功加载。3. 参考百度千帆官方文档确认Token获取接口是否有更新。Whisper识别中文视频效果差1. 使用了不支持中文的模型如tiny.en。2. 视频背景噪音过大。3. 语音方言或语速问题。1. 确保加载模型时指定languagezh如whisper.load_model(base, languagezh)。2. 尝试更大的模型如small或medium精度更高但速度更慢。3. 考虑在调用Whisper前使用ffmpeg对音频进行降噪预处理。前端访问后端API出现CORS错误后端未正确配置CORS或前端请求的Origin不在允许列表中。1. 检查后端main.py中allow_origins是否包含了前端运行的地址如http://localhost:5173。2. 生产环境部署时需将其改为前端的实际域名或使用动态配置。3. 对于复杂请求如带自定义头需在CORS配置中明确允许allow_headers。Docker容器内无法写入上传文件容器内的应用用户权限不足或挂载的卷权限不正确。1. 在Dockerfile中创建目录时指定权限RUN mkdir -p uploads chmod 777 uploads。2. 在docker-compose.yml中检查volume挂载路径是否正确。3. 确保宿主机对应目录有写权限。PaddleOCR初始化失败或识别慢1. 首次运行需要下载模型文件网络问题可能导致失败。2. 服务器内存或CPU不足。1. 检查网络或考虑在构建Docker镜像时预先下载好模型文件。2. 对于轻量级应用可以关闭角度分类(use_angle_clsFalse)以提升速度。3. 如果OCR不是核心需求可以考虑移除该功能或改用更轻量的OCR引擎。7. 进阶优化与参赛建议一个能打动评委的参赛作品不仅在于功能的实现更在于细节的打磨和创意的延伸。7.1 功能增强支持视频URL输入除了文件上传允许用户输入B站、YouTube等平台的视频链接后端自动使用yt-dlp等工具下载并处理。摘要风格化让用户选择摘要风格如“学术报告风”、“轻松口语化”、“要点罗列bullet points”、“适合发微博的简短文案”。通过修改LLM的System Prompt实现。关键片段定位不仅生成摘要还输出视频中对应核心观点的时间戳。这需要更复杂的算法例如在ASR结果的时间戳中找出与摘要句子语义最匹配的片段。多语言支持利用Whisper的多语言识别能力和LLM的多语言生成能力支持中英文视频的摘要生成。7.2 性能与体验优化任务队列与状态持久化使用Celery Redis或RQ管理后台任务将任务状态存入数据库如PostgreSQL即使服务重启也不会丢失任务。进度反馈将视频处理拆分为“下载中”、“语音识别中”、“文本分析中”、“摘要生成中”等多个子步骤并通过WebSocket或Server-Sent Events (SSE) 向前端实时推送进度百分比。结果缓存对同一视频文件可通过MD5判断的摘要结果进行缓存避免重复处理节省资源和API调用成本。前端优化使用Vue的Suspense组件优化加载状态对长文本结果实现虚拟滚动。7.3 工程化与可维护性配置中心化将所有配置API密钥、模型路径、超时时间移至环境变量或配置中心如Apollo避免硬编码。完善的日志与监控集成structlog或loguru进行结构化日志记录并接入Sentry等错误监控平台。单元测试与集成测试为关键的AI服务函数和API端点编写测试确保代码质量。API限流与鉴权使用slowapi为公开接口添加限流防止滥用。为管理接口添加JWT鉴权。7.4 针对B站AI创造公开赛的包装建议清晰的README在项目仓库根目录提供详细的README.md说明项目背景、技术架构、快速启动方式、功能演示和未来规划。录制演示视频这是最重要的一环。录制一个2-3分钟的高清视频清晰展示从上传一个B站知识区视频到获得精炼摘要的全过程。视频中可简要口述技术亮点。突出创意与实用性在项目描述中强调你的作品解决了B站用户或UP主的什么痛点如快速了解长视频内容、为视频自动生成章节摘要、辅助创作等。代码规范与注释确保代码结构清晰有必要的注释这能体现你的工程素养。通过以上步骤你不仅完成了一个可用于参赛的“视频智能摘要生成器”项目更系统地实践了从AI模型选型、前后端开发、异步处理到服务部署的全栈开发流程。B站AI创造公开赛提供的正是这样一个将前沿AI技术转化为具体应用场景的舞台关键在于动手实现并在过程中不断迭代优化。 基于大语言模型与语音识别的视频智能摘要生成系统实战
1. 背景与核心概念B站AI创造公开赛的技术价值近期B站低调上线了一项名为“AI创造公开赛”的活动在技术社区引发了不小的关注。这并非一次简单的营销活动而是一个面向广大开发者、内容创作者和AI爱好者的综合性技术实战平台。对于从事AI应用开发、内容生成算法研究或是希望将AI能力融入创意项目的工程师而言这是一个绝佳的“练手场”和“灵感库”。简单来说B站AI创造公开赛是一个以竞赛形式鼓励参与者利用各类AI技术如大语言模型、文生图/视频、语音合成、智能剪辑等进行内容创作和工具开发的系列活动。其核心价值在于提供真实场景与数据相比个人闭门造车公开赛通常会提供B站生态内的特定场景如视频摘要生成、弹幕智能过滤、AI辅助剪辑模板、部分脱敏数据或明确的评价指标让开发者的项目能直面真实业务需求。降低AI应用门槛活动往往会整合或推荐一些易用的AI开发平台和工具链例如百度的文心大模型、阿里云的通义千问等国内主流模型的API帮助开发者快速搭建原型聚焦于创意和业务逻辑的实现。连接创意与技术它打破了“技术”与“内容”的壁垒鼓励开发者思考如何用AI提升创作效率、丰富内容形式如AI生成虚拟UP主、自动生成视频字幕和章节这正是当前AIGC领域最核心的命题。对于开发者而言参与此类比赛其意义远超比赛本身。它是一个系统性的学习路径从理解赛题、技术选型、环境搭建、模型调用/微调、前后端集成到最终的项目部署与演示。接下来我们将以一个典型的参赛项目为例完整走通一个“AI视频智能摘要生成器”的开发全流程。2. 环境准备与版本说明在开始一个AI应用项目前清晰的环境定义是成功的基石。本次实战我们将构建一个Web应用后端处理AI逻辑前端展示结果。以下是我们推荐的环境配置请根据你的实际情况进行调整。核心环境栈操作系统Ubuntu 20.04 LTS / Windows 10 WSL2 / macOS Monterey 及以上。本文示例基于 Ubuntu 22.04。编程语言Python 3.8 - 3.10AI模型生态支持最广泛的版本范围。后端框架FastAPI 0.104。选择FastAPI因其异步特性适合AI推理的I/O密集型操作且能自动生成API文档。前端框架Vue 3 Element Plus。用于快速构建交互界面。AI模型服务百度千帆大模型平台ERNIE系列、OpenAI-Compatible API或使用本地模型如ChatGLM3-6B。开发工具VS Code 或 PyCharm。版本控制Git。项目结构预览在开始编码前我们先规划好项目目录这有助于管理复杂的依赖和模块。ai-video-summarizer/ ├── backend/ # 后端FastAPI服务 │ ├── app/ │ │ ├── __init__.py │ │ ├── main.py # FastAPI应用主入口 │ │ ├── api/ # 路由模块 │ │ │ └── endpoints.py │ │ ├── core/ # 核心配置 │ │ │ └── config.py │ │ ├── models/ # Pydantic数据模型 │ │ │ └── schemas.py │ │ └── services/ # 业务逻辑层含AI调用 │ │ └── ai_service.py │ ├── requirements.txt # Python依赖 │ └── Dockerfile ├── frontend/ # 前端Vue应用 │ ├── public/ │ ├── src/ │ │ ├── views/ │ │ │ └── HomeView.vue │ │ ├── components/ │ │ ├── api/ # 前端API调用封装 │ │ │ └── backend.js │ │ └── main.js │ ├── package.json │ └── vite.config.js # 构建配置 └── docker-compose.yml # 容器编排3. 核心原理与技术选型拆解我们的目标是实现“视频智能摘要”。其核心流程可以拆解为以下几个关键技术环节每个环节都有多种技术方案可选。3.1 视频内容理解关键信息提取AI不能直接“看”视频我们需要先将视频转化为AI可以处理的文本信息。方案一语音识别ASR提取视频中的旁白、对话。可选用开源方案OpenAI Whisper精度高支持多语言但推理稍慢。云服务API阿里云、腾讯云、百度云的语音识别服务稳定有免费额度。方案二关键帧分析与OCR提取视频中的字幕、标题、图表文字。可选用开源方案OpenCV抽帧 PaddleOCR / EasyOCR识别文字。方案三直接使用视频理解大模型如Video-LLaMA、InternVideo等可直接输出视频描述但部署门槛较高。对于公开赛快速原型推荐方案一ASR结合方案二OCR抽字幕能覆盖大部分信息型视频。3.2 文本摘要生成核心AI能力获得视频文本稿后需要生成简洁摘要。方案一调用大语言模型LLMAPI这是最快捷、效果通常最好的方式。国内平台百度文心千帆ERNIE-Bot、阿里通义千问、智谱AIChatGLM、月之暗面Kimi。它们提供了丰富的上下文窗口和强大的指令跟随能力。提示词工程这是决定摘要质量的关键。你需要设计一个清晰的“系统提示词”System Prompt来引导模型。方案二使用本地摘要模型如BART、T5等经过微调的文本摘要模型。优点是数据隐私性好、无网络延迟但需要一定的机器学习部署能力。对于公开赛强烈推荐方案一。我们以百度千帆的ERNIE-Bot API为例进行演示。3.3 系统架构设计一个可用的应用还需要前后端架构。异步处理视频转文本和AI摘要都是耗时操作必须采用异步任务避免HTTP请求阻塞。可以使用Celery Redis或者利用FastAPI的BackgroundTasks简单处理。API设计遵循RESTful风格设计清晰的任务提交、状态查询、结果获取接口。前端交互需要提供文件上传、任务进度显示、结果展示摘要文本、高亮关键词、时间戳片段的界面。4. 完整实战案例构建视频摘要生成Web应用下面我们开始分步实现。我们将先搭建后端AI服务再构建一个简单的前端界面。4.1 后端服务搭建FastAPI 千帆大模型第一步创建虚拟环境并安装依赖# 进入后端目录 cd backend # 创建虚拟环境以venv为例 python -m venv venv # 激活虚拟环境 # Linux/macOS source venv/bin/activate # Windows venv\Scripts\activate # 安装核心依赖 pip install fastapi uvicorn httpx python-multipart pydantic-settings # 安装ASR依赖以Whisper为例需确保已安装ffmpeg pip install openai-whisper # 安装OCR依赖以PaddleOCR为例 pip install paddlepaddle paddleocr第二步编写配置文件创建backend/app/core/config.py管理敏感信息和设置。# backend/app/core/config.py from pydantic_settings import BaseSettings from typing import Optional class Settings(BaseSettings): # 百度千帆API配置 (从环境变量读取避免硬编码) qianfan_ak: Optional[str] None # API Key qianfan_sk: Optional[str] None # Secret Key qianfan_api_base: str https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions # 模型选择 qianfan_model: str ernie-3.5-8k # 或 ernie-4.0-8k-preview # 应用配置 project_name: str B站AI创造赛-视频摘要器 api_v1_prefix: str /api/v1 # 文件上传设置 max_upload_size: int 200 * 1024 * 1024 # 200MB allowed_extensions: set {.mp4, .avi, .mov, .mkv} class Config: env_file .env # 从.env文件加载配置 settings Settings()创建.env文件切记加入.gitignoreQIANFAN_AKyour_actual_api_key_here QIANFAN_SKyour_actual_secret_key_here第三步实现AI服务层创建backend/app/services/ai_service.py封装所有AI能力。# backend/app/services/ai_service.py import httpx import whisper from paddleocr import PaddleOCR import asyncio from typing import List, Tuple import logging from ..core.config import settings logger logging.getLogger(__name__) class AIService: def __init__(self): self.ocr_engine PaddleOCR(use_angle_clsTrue, langch) # Whisper模型加载较慢可延迟加载或单例管理 self.asr_model None async def extract_text_from_video(self, video_path: str) - str: 从视频提取文本结合ASR和OCR full_text # 1. 使用Whisper进行语音识别 asr_text await self._run_async(self._transcribe_audio, video_path) if asr_text: full_text f[语音内容]\n{asr_text}\n\n # 2. 使用PaddleOCR识别关键帧字幕简化抽第1, 中间最后帧 # 此处省略具体的抽帧和OCR代码核心是调用 self.ocr_engine.ocr(img_path) # ocr_results self.ocr_engine.ocr(frame_path, clsTrue) # ocr_text .join([line[1][0] for res in ocr_results for line in res]) # full_text f[字幕内容]\n{ocr_text}\n return full_text if full_text else 未能从视频中提取到有效文本。 def _transcribe_audio(self, video_path: str) - str: 同步的Whisper转录函数需在线程池中运行避免阻塞事件循环 if self.asr_model is None: self.asr_model whisper.load_model(base) # 可选 tiny, base, small result self.asr_model.transcribe(video_path, languagezh, fp16False) return result[text] async def _run_async(self, func, *args): 将同步CPU密集型函数放入线程池执行 loop asyncio.get_event_loop() return await loop.run_in_executor(None, func, *args) async def generate_summary_with_llm(self, extracted_text: str) - str: 调用千帆大模型生成摘要 if not settings.qianfan_ak or not settings.qianfan_sk: raise ValueError(千帆API配置未设置) # 构建提示词 system_prompt 你是一个专业的视频内容总结助手。请根据用户提供的视频转录文本生成一个简洁、准确、连贯的摘要。 摘要要求 1. 长度在150-300字之间。 2. 抓住核心论点、关键数据和结论。 3. 用中文输出语言流畅自然。 4. 如果文本中有明显的时间戳或章节标记可以在摘要中提及。 请直接输出摘要正文不要加“摘要”等前缀。 messages [ {role: system, content: system_prompt}, {role: user, content: f视频转录文本\n{extracted_text}} ] # 获取Access Token (千帆API需要) async with httpx.AsyncClient() as client: token_url fhttps://aip.baidubce.com/oauth/2.0/token?grant_typeclient_credentialsclient_id{settings.qianfan_ak}client_secret{settings.qianfan_sk} token_resp await client.post(token_url) access_token token_resp.json().get(access_token) if not access_token: logger.error(获取千帆Access Token失败) return 调用AI服务失败请检查API配置。 # 调用Chat Completion接口 api_url f{settings.qianfan_api_base}?access_token{access_token} payload { messages: messages, stream: False, temperature: 0.7, top_p: 0.8, } headers {Content-Type: application/json} try: resp await client.post(api_url, jsonpayload, headersheaders, timeout30.0) resp.raise_for_status() result resp.json() return result.get(result, AI生成摘要时出现未知错误。) except httpx.RequestError as e: logger.error(f请求千帆API失败: {e}) return f网络请求失败: {str(e)} except Exception as e: logger.error(f处理AI响应失败: {e}) return fAI服务处理异常: {str(e)} # 创建全局服务实例 ai_service AIService()第四步创建数据模型与API路由创建backend/app/models/schemas.py# backend/app/models/schemas.py from pydantic import BaseModel from typing import Optional class SummaryRequest(BaseModel): video_url: Optional[str] None # 或通过文件上传 class SummaryResponse(BaseModel): task_id: str status: str # processing, completed, failed extracted_text: Optional[str] None summary: Optional[str] None error_message: Optional[str] None创建backend/app/api/endpoints.py# backend/app/api/endpoints.py from fastapi import APIRouter, UploadFile, File, BackgroundTasks, HTTPException import uuid import os from typing import Dict from ...services.ai_service import ai_service from ..models.schemas import SummaryRequest, SummaryResponse router APIRouter() # 内存中存储任务状态生产环境应用数据库或Redis tasks: Dict[str, dict] {} router.post(/summarize, response_modelSummaryResponse) async def create_summary_task( background_tasks: BackgroundTasks, file: UploadFile File(...) ): 上传视频文件并创建摘要任务 # 1. 文件验证 file_ext os.path.splitext(file.filename)[1].lower() from ..core.config import settings if file_ext not in settings.allowed_extensions: raise HTTPException(400, detailf不支持的文件格式。允许的格式: {settings.allowed_extensions}) # 2. 保存文件 task_id str(uuid.uuid4()) save_dir fuploads/{task_id} os.makedirs(save_dir, exist_okTrue) file_path os.path.join(save_dir, file.filename) with open(file_path, wb) as f: content await file.read() f.write(content) # 3. 初始化任务状态 tasks[task_id] {status: processing, file_path: file_path} # 4. 将耗时的处理任务加入后台 background_tasks.add_task(process_video_summary, task_id, file_path) return SummaryResponse(task_idtask_id, statusprocessing) router.get(/task/{task_id}, response_modelSummaryResponse) async def get_task_status(task_id: str): 查询任务状态和结果 task tasks.get(task_id) if not task: raise HTTPException(status_code404, detail任务不存在) return SummaryResponse(**task) async def process_video_summary(task_id: str, file_path: str): 后台处理任务的核心逻辑 try: tasks[task_id][status] processing # 步骤1: 提取视频文本 extracted_text await ai_service.extract_text_from_video(file_path) tasks[task_id][extracted_text] extracted_text # 步骤2: 调用LLM生成摘要 summary await ai_service.generate_summary_with_llm(extracted_text) tasks[task_id][summary] summary tasks[task_id][status] completed except Exception as e: tasks[task_id][status] failed tasks[task_id][error_message] str(e) # 生产环境应记录详细日志 print(f任务 {task_id} 处理失败: {e})第五步组装主应用创建backend/app/main.py# backend/app/main.py from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from fastapi.staticfiles import StaticFiles import os from .core.config import settings from .api.endpoints import router as api_router app FastAPI(titlesettings.project_name) # 配置CORS允许前端访问 app.add_middleware( CORSMiddleware, allow_origins[http://localhost:5173], # Vue开发服务器默认端口 allow_credentialsTrue, allow_methods[*], allow_headers[*], ) # 创建上传文件目录 os.makedirs(uploads, exist_okTrue) app.mount(/uploads, StaticFiles(directoryuploads), nameuploads) # 注册API路由 app.include_router(api_router, prefixsettings.api_v1_prefix) app.get(/) async def root(): return {message: 欢迎使用视频智能摘要生成API服务, docs: /docs}第六步运行后端服务在backend目录下创建requirements.txt并安装所有依赖后运行uvicorn app.main:app --reload --host 0.0.0.0 --port 8000访问http://localhost:8000/docs即可看到自动生成的交互式API文档并可以测试接口。4.2 前端界面搭建Vue 3 Element Plus第一步初始化Vue项目并安装依赖# 在项目根目录下 npm create vuelatest frontend # 按照提示选择项目特性确保选中 TypeScript, Vue Router, Pinia cd frontend npm install npm install axios element-plus element-plus/icons-vue第二步封装后端API调用创建frontend/src/api/backend.js// frontend/src/api/backend.js import axios from axios; const apiClient axios.create({ baseURL: http://localhost:8000/api/v1, // 后端API地址 timeout: 60000, // 超时时间设长因为处理视频可能较慢 }); export default { // 上传视频并创建摘要任务 async createSummaryTask(file) { const formData new FormData(); formData.append(file, file); const response await apiClient.post(/summarize, formData, { headers: { Content-Type: multipart/form-data, }, }); return response.data; }, // 查询任务状态 async getTaskStatus(taskId) { const response await apiClient.get(/task/${taskId}); return response.data; }, };第三步创建主页面组件创建frontend/src/views/HomeView.vue!-- frontend/src/views/HomeView.vue -- template div classhome-container el-card classbox-card template #header div classcard-header spanB站AI创造赛 - 视频智能摘要生成器/span /div /template !-- 文件上传区域 -- el-upload classupload-demo drag action# :auto-uploadfalse :on-changehandleFileChange :show-file-listfalse :disabledisProcessing el-icon classel-icon--uploadupload-filled //el-icon div classel-upload__text 将视频文件拖到此处或 em点击上传/em /div template #tip div classel-upload__tip 支持 MP4, AVI, MOV, MKV 格式文件大小不超过200MB /div /template /el-upload !-- 上传文件信息 -- div v-ifuploadFile classfile-info el-tag typeinfo{{ uploadFile.name }}/el-tag el-button sizesmall clickstartProcessing typeprimary :loadingisProcessing 开始生成摘要 /el-button /div !-- 任务状态与结果展示 -- div v-ifcurrentTaskId classtask-section el-divider / h3任务处理状态/h3 el-steps :activestepActive align-center finish-statussuccess el-step title上传完成 / el-step title内容提取中 / el-step titleAI摘要生成中 / el-step title完成 / /el-steps div classstatus-display el-alert v-iftaskStatus processing title正在处理中请稍候... typeinfo :closablefalse show-icon / el-alert v-iftaskStatus completed title摘要生成成功 typesuccess show-icon / el-alert v-iftaskStatus failed :title处理失败: errorMessage typeerror show-icon / /div !-- 结果显示 -- div v-iftaskStatus completed classresult-container el-tabs typeborder-card el-tab-pane label生成的摘要 div classsummary-text{{ summaryText }}/div el-button typeprimary clickcopyToClipboard(summaryText)复制摘要/el-button /el-tab-pane el-tab-pane label提取的原始文本 div classextracted-text{{ extractedText }}/div /el-tab-pane /el-tabs /div /div /el-card /div /template script setup langts import { ref, computed, onUnmounted } from vue; import { UploadFilled } from element-plus/icons-vue; import { ElMessage } from element-plus; import backendApi from /api/backend; const uploadFile refFile | null(null); const currentTaskId refstring(); const taskStatus refstring(); // processing, completed, failed const extractedText refstring(); const summaryText refstring(); const errorMessage refstring(); const isProcessing refboolean(false); let pollInterval: number | null null; const stepActive computed(() { switch (taskStatus.value) { case processing: return 2; case completed: return 4; case failed: return 0; default: return 1; } }); const handleFileChange (file: any) { uploadFile.value file.raw; }; const startProcessing async () { if (!uploadFile.value) return; isProcessing.value true; taskStatus.value processing; try { // 1. 上传文件创建任务 const response await backendApi.createSummaryTask(uploadFile.value); currentTaskId.value response.task_id; ElMessage.success(任务已提交开始处理); // 2. 开始轮询任务状态 startPollingTaskStatus(); } catch (error: any) { ElMessage.error(任务提交失败: error.message); isProcessing.value false; taskStatus.value failed; errorMessage.value error.message; } }; const startPollingTaskStatus () { if (pollInterval) clearInterval(pollInterval); pollInterval setInterval(async () { if (!currentTaskId.value) return; try { const statusResp await backendApi.getTaskStatus(currentTaskId.value); taskStatus.value statusResp.status; if (statusResp.status completed) { extractedText.value statusResp.extracted_text || ; summaryText.value statusResp.summary || ; isProcessing.value false; stopPolling(); ElMessage.success(摘要生成完成); } else if (statusResp.status failed) { errorMessage.value statusResp.error_message || 未知错误; isProcessing.value false; stopPolling(); ElMessage.error(处理失败); } // 如果状态仍是 processing继续轮询 } catch (error) { console.error(轮询任务状态失败:, error); } }, 2000); // 每2秒查询一次 }; const stopPolling () { if (pollInterval) { clearInterval(pollInterval); pollInterval null; } }; const copyToClipboard (text: string) { navigator.clipboard.writeText(text).then(() { ElMessage.success(已复制到剪贴板); }); }; onUnmounted(() { stopPolling(); }); /script style scoped .home-container { max-width: 900px; margin: 40px auto; padding: 20px; } .file-info { margin-top: 20px; display: flex; align-items: center; gap: 15px; } .task-section { margin-top: 30px; } .status-display { margin: 20px 0; } .summary-text, .extracted-text { white-space: pre-wrap; line-height: 1.6; padding: 15px; background-color: #f9f9f9; border-radius: 4px; margin-bottom: 15px; max-height: 400px; overflow-y: auto; } /style第四步运行前端应用在frontend目录下npm run dev访问http://localhost:5173即可看到一个完整的视频上传、处理状态跟踪、摘要结果展示的Web应用。5. 部署与优化从本地到可分享的参赛作品完成本地开发后为了让你的作品能在B站AI创造公开赛中展示你需要将其部署到一个可公开访问的环境。5.1 容器化部署使用Docker这是最推荐的方式能确保环境一致性。后端Dockerfile (backend/Dockerfile):# backend/Dockerfile FROM python:3.9-slim WORKDIR /app # 安装系统依赖Whisper需要ffmpeg RUN apt-get update apt-get install -y \ ffmpeg \ rm -rf /var/lib/apt/lists/* # 复制依赖文件并安装 COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt # 复制应用代码 COPY ./app ./app # 创建上传目录 RUN mkdir -p uploads # 环境变量在运行时通过docker-compose或云平台注入 ENV PYTHONPATH/app CMD [uvicorn, app.main:app, --host, 0.0.0.0, --port, 8000]前端Dockerfile (frontend/Dockerfile):# frontend/Dockerfile FROM node:18-alpine as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:alpine as production-stage COPY --frombuild-stage /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]前端Nginx配置 (frontend/nginx.conf):# frontend/nginx.conf server { listen 80; server_name localhost; root /usr/share/nginx/html; index index.html; # 处理前端路由如Vue Router的history模式 location / { try_files $uri $uri/ /index.html; } # 代理后端API请求 location /api/ { proxy_pass http://backend:8000; # 指向后端服务名 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }Docker Compose编排 (docker-compose.yml):# docker-compose.yml version: 3.8 services: backend: build: ./backend ports: - 8000:8000 environment: - QIANFAN_AK${QIANFAN_AK} - QIANFAN_SK${QIANFAN_SK} volumes: - ./uploads:/app/uploads # 持久化上传文件 restart: unless-stopped frontend: build: ./frontend ports: - 80:80 depends_on: - backend restart: unless-stopped运行docker-compose up --build -d即可一键启动整个应用栈。5.2 云服务器部署你可以将上述Docker Compose项目部署到任何支持Docker的云服务器如阿里云ECS、腾讯云CVM。关键步骤在服务器安装Docker和Docker Compose。将项目代码上传至服务器使用Git或SCP。在服务器项目根目录创建.env文件并填入你的千帆API密钥。运行docker-compose up -d。配置服务器安全组开放80前端和8000后端API可选端口。绑定域名可选并配置Nginx反向代理。5.3 部署到Vercel / Netlify (前端) Railway / Render (后端)对于不想管理服务器的开发者可以使用Serverless或PaaS平台前端将frontend/dist目录构建的静态文件部署到Vercel或Netlify并配置重写规则支持SPA。后端将Backend服务部署到Railway或Render。这些平台能直接连接你的Git仓库自动构建和部署并方便地管理环境变量。6. 常见问题与排查思路在开发与部署过程中你可能会遇到以下典型问题问题现象可能原因排查步骤与解决方案上传视频后任务长时间处于“processing”状态1. 视频文件过大处理耗时。2. Whisper模型首次加载慢。3. 千帆API调用超时或失败。4. 后台任务线程阻塞。1. 查看后端日志确认处理进度。2. 增加前端轮询超时时间并给用户进度提示。3. 对于大文件考虑使用Celery等分布式任务队列并提供更精确的任务状态。4. 在ai_service.py中添加更详细的日志记录每个步骤的开始和结束。调用千帆API返回“认证失败”或“无效的Access Token”1. API Key或Secret Key错误。2. 环境变量未正确加载。3. Token获取URL或参数有误。1. 检查.env文件中的QIANFAN_AK和QIANFAN_SK是否正确无误并确保已重启服务。2. 在代码中打印或日志输出settings.qianfan_ak的前几位确认是否成功加载。3. 参考百度千帆官方文档确认Token获取接口是否有更新。Whisper识别中文视频效果差1. 使用了不支持中文的模型如tiny.en。2. 视频背景噪音过大。3. 语音方言或语速问题。1. 确保加载模型时指定languagezh如whisper.load_model(base, languagezh)。2. 尝试更大的模型如small或medium精度更高但速度更慢。3. 考虑在调用Whisper前使用ffmpeg对音频进行降噪预处理。前端访问后端API出现CORS错误后端未正确配置CORS或前端请求的Origin不在允许列表中。1. 检查后端main.py中allow_origins是否包含了前端运行的地址如http://localhost:5173。2. 生产环境部署时需将其改为前端的实际域名或使用动态配置。3. 对于复杂请求如带自定义头需在CORS配置中明确允许allow_headers。Docker容器内无法写入上传文件容器内的应用用户权限不足或挂载的卷权限不正确。1. 在Dockerfile中创建目录时指定权限RUN mkdir -p uploads chmod 777 uploads。2. 在docker-compose.yml中检查volume挂载路径是否正确。3. 确保宿主机对应目录有写权限。PaddleOCR初始化失败或识别慢1. 首次运行需要下载模型文件网络问题可能导致失败。2. 服务器内存或CPU不足。1. 检查网络或考虑在构建Docker镜像时预先下载好模型文件。2. 对于轻量级应用可以关闭角度分类(use_angle_clsFalse)以提升速度。3. 如果OCR不是核心需求可以考虑移除该功能或改用更轻量的OCR引擎。7. 进阶优化与参赛建议一个能打动评委的参赛作品不仅在于功能的实现更在于细节的打磨和创意的延伸。7.1 功能增强支持视频URL输入除了文件上传允许用户输入B站、YouTube等平台的视频链接后端自动使用yt-dlp等工具下载并处理。摘要风格化让用户选择摘要风格如“学术报告风”、“轻松口语化”、“要点罗列bullet points”、“适合发微博的简短文案”。通过修改LLM的System Prompt实现。关键片段定位不仅生成摘要还输出视频中对应核心观点的时间戳。这需要更复杂的算法例如在ASR结果的时间戳中找出与摘要句子语义最匹配的片段。多语言支持利用Whisper的多语言识别能力和LLM的多语言生成能力支持中英文视频的摘要生成。7.2 性能与体验优化任务队列与状态持久化使用Celery Redis或RQ管理后台任务将任务状态存入数据库如PostgreSQL即使服务重启也不会丢失任务。进度反馈将视频处理拆分为“下载中”、“语音识别中”、“文本分析中”、“摘要生成中”等多个子步骤并通过WebSocket或Server-Sent Events (SSE) 向前端实时推送进度百分比。结果缓存对同一视频文件可通过MD5判断的摘要结果进行缓存避免重复处理节省资源和API调用成本。前端优化使用Vue的Suspense组件优化加载状态对长文本结果实现虚拟滚动。7.3 工程化与可维护性配置中心化将所有配置API密钥、模型路径、超时时间移至环境变量或配置中心如Apollo避免硬编码。完善的日志与监控集成structlog或loguru进行结构化日志记录并接入Sentry等错误监控平台。单元测试与集成测试为关键的AI服务函数和API端点编写测试确保代码质量。API限流与鉴权使用slowapi为公开接口添加限流防止滥用。为管理接口添加JWT鉴权。7.4 针对B站AI创造公开赛的包装建议清晰的README在项目仓库根目录提供详细的README.md说明项目背景、技术架构、快速启动方式、功能演示和未来规划。录制演示视频这是最重要的一环。录制一个2-3分钟的高清视频清晰展示从上传一个B站知识区视频到获得精炼摘要的全过程。视频中可简要口述技术亮点。突出创意与实用性在项目描述中强调你的作品解决了B站用户或UP主的什么痛点如快速了解长视频内容、为视频自动生成章节摘要、辅助创作等。代码规范与注释确保代码结构清晰有必要的注释这能体现你的工程素养。通过以上步骤你不仅完成了一个可用于参赛的“视频智能摘要生成器”项目更系统地实践了从AI模型选型、前后端开发、异步处理到服务部署的全栈开发流程。B站AI创造公开赛提供的正是这样一个将前沿AI技术转化为具体应用场景的舞台关键在于动手实现并在过程中不断迭代优化。