企业官网建设流程全解析

1. 项目概述：从标题拆解一个“全栈长任务”的实战蓝图

看到“GLM-5「全栈长任务」实测：3小时复刻TikTok视频生成SaaS”这个标题，我的第一反应是，这绝对是一个充满挑战和诱惑的命题。它精准地戳中了当前技术圈的两个核心兴奋点：一是以GLM-5为代表的新一代大语言模型在复杂、长链条任务上的实际能力边界；二是如何快速将前沿AI能力产品化，构建一个可演示、可复现的SaaS应用原型。这不仅仅是测试一个模型，更是一次对开发者全栈工程化能力、产品思维和敏捷开发极限的综合性检验。

所谓“全栈长任务”，我的理解是，它要求AI模型不仅能理解一个复杂的、多步骤的指令，还能自主规划任务流，调用合适的工具（或生成可执行的代码），并处理过程中可能出现的分支和异常，最终交付一个完整可用的成果。而“复刻TikTok视频生成SaaS”，则为我们框定了一个极具代表性的场景：一个典型的、包含前端交互、后端逻辑、AI服务调用和媒体处理的现代Web应用。在3小时的极限时间内，我们要验证的是，GLM-5能否像一个经验丰富的技术合伙人，帮助我们快速搭建起这个系统的核心骨架。

这个项目的核心价值在于“可行性验证”和“模式探索”。对于个人开发者或小团队而言，它回答了一个关键问题：在创意涌现的初期，我能否借助最先进的AI编码助手，将想法快速转化为一个可交互、可演示的原型，从而验证市场反馈或进行技术预研？整个过程涉及的技术栈非常典型：Next.js作为现代React框架构建响应式前端，FastAPI提供高效、异步的Python后端服务，而GLM-5则作为“大脑”，驱动视频生成的核心逻辑。接下来，我将完全基于这个标题的构想，结合我多年的全栈开发经验，为你拆解如何一步步实现这个“3小时挑战”，并分享其中必然会遇到的“坑”与“桥”。

2. 核心思路与架构设计：为什么是Next.js + FastAPI + GLM-5？

在开始敲代码之前，我们必须把架构想清楚。标题暗示的“复刻”并非指做一个与TikTok一模一样的平台，而是构建一个具备其核心特征——用户输入文本或主题，系统自动生成一段短视频——的SaaS服务的最小可行产品（MVP）。选择Next.js + FastAPI + GLM-5这个技术组合，背后有非常务实的工程化考量。

2.1 前端选型：Next.js的必然性

对于需要快速上线、注重SEO和用户体验的SaaS应用原型，Next.js几乎是React生态下的不二之选。首先，它开箱即用的特性（路由、API Routes、渲染策略）能让我们省去大量基础配置时间。更重要的是，在这个视频生成场景中，前端需要处理的状态和交互并不简单：用户输入表单、生成任务的状态轮询（排队中、生成中、完成、失败）、生成进度的实时反馈、以及最终视频的预览与下载。Next.js的App Router和Server Components能让我们更优雅地管理这些状态和数据流。例如，我们可以利用Server Action直接提交生成请求，并用useState和useEffect在客户端管理轮询逻辑，结构清晰，开发高效。

2.2 后端选型：FastAPI的高效与异步优势

后端选择FastAPI，核心诉求是“快”和“异步”。视频生成是一个典型的IO密集型任务，涉及调用GLM-5 API（网络IO）、可能调用其他AI服务（如文生图、音频合成）、以及视频文件的拼接与处理（文件IO）。FastAPI基于Starlette，对异步编程的支持是天生的，使用async/await语法可以非常方便地处理这些并发IO操作，避免阻塞，提高系统的吞吐量。此外，FastAPI自动生成的交互式API文档（Swagger UI）在开发调试阶段能节省大量前后端联调沟通成本。它的数据验证依赖Pydantic，能让我们的API接口既健壮又清晰。

2.3 AI核心：GLM-5的“长任务”驱动角色

GLM-5在这里的角色远超一个简单的聊天接口。我们需要它扮演“产品经理+架构师+开发助手”的综合体。具体来说，我们希望GLM-5能完成以下“长任务”：

1. 需求理解与拆解：接收用户模糊的创意（如“生成一段关于夏日旅行的快节奏短视频”），将其拆解为具体的视频要素：主题、风格（欢乐、怀旧）、节奏、预期长度、需要的镜头（海滩、公路、美食等）。
2. 脚本与分镜生成：根据拆解的要素，撰写一段简短的视频文案（旁白/字幕），并规划出分镜序列（每个镜头的描述、持续时间、转场效果）。
3. 资源规划与调用：根据分镜，判断需要哪些资源。例如，是调用文生图模型生成图片，还是从无版权素材库搜索？背景音乐是生成还是选取？GLM-5需要给出明确的资源清单和获取方式（甚至生成调用相关API的代码片段）。
4. 任务流程编排：将以上步骤串联成一个可执行的工作流，并处理可能出现的错误（如图片生成失败，需要有备用方案）。

整个系统的架构流程图在脑海中应该是这样的：用户在前端（Next.js）提交请求 -> 请求到达FastAPI后端 -> FastAPI将用户请求和系统指令整合，调用GLM-5 API -> GLM-5返回结构化的任务规划 -> FastAPI根据该规划，异步调度并监控各个子任务（调用图片生成、音频生成、视频合成等服务） -> 将所有中间结果组装成最终视频 -> 将视频文件存储（如到云存储）并返回访问链接给前端 -> 前端展示视频。

注意：在3小时的极限挑战中，我们不可能实现所有细节。因此，架构设计必须遵循“最大化利用现有服务”的原则。例如，视频合成可以使用FFmpeg（通过子进程调用），图片生成可以暂时用DALL-E 3或Midjourney的API（或甚至用静态图片替代），音频可以用TTS服务。我们的核心是让GLM-5来编排这个流程，并用代码将各个环节粘合起来。

3. 实战环境搭建与核心依赖配置

理论清晰后，我们立刻进入实战。3小时倒计时开始，第一步就是搭建一个干净、高效的开发环境。

3.1 项目初始化与结构规划

我习惯从后端开始，因为API的接口定义是整个数据流转的契约。使用命令行快速创建项目骨架：

# 创建项目根目录 mkdir tiktok-video-saas && cd tiktok-video-saas # 初始化后端FastAPI项目 mkdir backend && cd backend python -m venv venv # 创建虚拟环境，隔离依赖 # 在Windows上: venv\Scripts\activate # 在Mac/Linux上: source venv/bin/activate pip install fastapi uvicorn httpx pydantic python-multipart # httpx用于异步HTTP客户端调用GLM-5等外部API # python-multipart用于处理文件上传（如果未来需要） # 创建前端Next.js项目（在项目根目录） cd .. npx create-next-app@latest frontend --typescript --tailwind --app # 选择TypeScript和Tailwind CSS是为了开发效率和界面美观，--app使用App Router

项目结构规划如下：

tiktok-video-saas/ ├── backend/ # FastAPI后端 │ ├── main.py # 应用入口 │ ├── core/ # 核心配置、依赖 │ ├── models/ # Pydantic数据模型 │ ├── services/ # 业务逻辑层，如视频生成服务 │ ├── routers/ # API路由 │ └── requirements.txt └── frontend/ # Next.js前端 ├── app/ │ ├── page.tsx # 主页面 │ ├── api/ # Next.js API路由（可选，本例主要用FastAPI） │ └── globals.css ├── components/ # 可复用组件 └── package.json

3.2 GLM-5 API接入配置

这是项目的AI引擎。假设我们已经获得了GLM-5的API密钥和接入点。在backend/core/config.py中配置：

import os from pydantic_settings import BaseSettings class Settings(BaseSettings): glm5_api_base: str = "https://api.openai.com/v1" # 示例，需替换为实际GLM-5端点 glm5_api_key: str # 其他配置如视频存储路径、外部服务密钥等 class Config: env_file = ".env" # 从.env文件加载配置 settings = Settings()

然后在backend/services/ai_service.py中，创建与GLM-5交互的客户端。这里的关键是设计一个能触发“长任务”思维的Prompt。我们不能简单地问“请生成一个视频”，而需要引导它进行结构化思考。

import httpx from ..core.config import settings class GLM5Service: def __init__(self): self.client = httpx.AsyncClient( base_url=settings.glm5_api_base, headers={"Authorization": f"Bearer {settings.glm5_api_key}"}, timeout=30.0 ) async def generate_video_plan(self, user_prompt: str) -> dict: """调用GLM-5，生成视频制作规划""" system_prompt = """你是一个专业的短视频制作AI助手。请根据用户的需求，生成一个详细的视频制作任务规划。规划必须为JSON格式，包含以下字段： - theme: 视频主题 - style: 视频风格（如：快节奏、温馨、科技感） - duration_seconds: 预期时长（秒） - script: 视频文案/旁白（不超过100字） - scenes: 分镜列表，每个分镜包含： - description: 镜头描述 - duration: 该镜头时长（秒） - visual_type: 视觉类型（如：实拍风景、卡通插图、文字特效） - need_bgm: 是否需要背景音乐 - overall_bgm_mood: 整体背景音乐风格 请确保规划合理，分镜总时长等于预期时长。""" try: response = await self.client.post( "/chat/completions", # 接口路径需根据GLM-5实际API调整 json={ "model": "glm-5", # 指定模型 "messages": [ {"role": "system", "content": system_prompt}, {"role": "user", "content": user_prompt} ], "temperature": 0.7, "response_format": {"type": "json_object"} # 要求返回JSON } ) response.raise_for_status() result = response.json() # 解析返回的JSON内容 import json plan_str = result["choices"][0]["message"]["content"] video_plan = json.loads(plan_str) return video_plan except (httpx.RequestError, json.JSONDecodeError, KeyError) as e: # 记录日志并抛出更明确的异常 raise Exception(f"GLM-5 API调用或解析失败: {e}")

这个generate_video_plan方法就是整个系统的“大脑”入口。它通过精心设计的System Prompt，约束GLM-5以我们需要的JSON格式进行结构化输出，为后续的自动化流程提供了清晰的蓝图。

实操心得：与大型语言模型API协作时，Prompt工程的质量直接决定输出结果的稳定性和可用性。务必在System Prompt中明确：

1. 角色定位：让AI清楚自己的任务。
2. 输出格式：强制要求JSON等机器可读格式，并详细说明每个字段的含义和类型。
3. 约束条件：如字数限制、时长总和等，减少后续处理的纠错成本。
4. 示例：如果任务复杂，在Prompt中给出一两个示例（Few-shot Learning）能极大提高输出质量。由于时间限制，本例未加入，但在实际产品开发中强烈建议加上。

4. 后端核心服务实现：任务编排与视频合成

有了GLM-5生成的视频规划（Plan），后端的工作就是当一个“执行导演”，按照规划调度资源、执行任务。我们会在FastAPI中创建一个核心的服务类VideoGenerationService。

4.1 定义数据模型与API接口

首先，在backend/models/schemas.py中定义请求和响应的数据模型，这能让我们的API接口清晰且安全。

from pydantic import BaseModel from typing import List, Optional class VideoGenerateRequest(BaseModel): prompt: str # 用户输入的文本描述 # 未来可扩展参数，如视频尺寸、格式等 class Scene(BaseModel): description: str duration: float visual_type: str need_bgm: bool class VideoPlan(BaseModel): # 对应GLM-5返回的结构 theme: str style: str duration_seconds: float script: str scenes: List[Scene] overall_bgm_mood: str class VideoGenerateResponse(BaseModel): task_id: str status: str # 'pending', 'processing', 'completed', 'failed' message: Optional[str] = None video_url: Optional[str] = None # 生成完成后的视频访问地址

接着，在backend/routers/video.py中创建API路由：

from fastapi import APIRouter, BackgroundTasks from ..models.schemas import VideoGenerateRequest, VideoGenerateResponse from ..services.video_service import VideoGenerationService import uuid router = APIRouter(prefix="/api/video", tags=["video"]) video_service = VideoGenerationService() @router.post("/generate", response_model=VideoGenerateResponse) async def generate_video(request: VideoGenerateRequest, background_tasks: BackgroundTasks): """提交视频生成任务（异步）""" task_id = str(uuid.uuid4()) # 立即返回任务ID和状态，实际处理放入后台任务 background_tasks.add_task(video_service.process_video_generation, task_id, request.prompt) return VideoGenerateResponse( task_id=task_id, status="pending", message="任务已提交，正在处理中" ) @router.get("/task/{task_id}", response_model=VideoGenerateResponse) async def get_task_status(task_id: str): """查询任务状态""" status, message, video_url = video_service.get_task_status(task_id) return VideoGenerateResponse( task_id=task_id, status=status, message=message, video_url=video_url )

这里使用了FastAPI的BackgroundTasks，将耗时的视频生成过程放到后台执行，避免HTTP请求长时间阻塞，这是构建响应式Web服务的常见做法。

4.2 实现视频生成服务

这是最核心的部分，在backend/services/video_service.py中。我们将模拟一个完整的、基于GLM-5规划的执行流程。

import asyncio import json import os from typing import Dict, Tuple from ..services.ai_service import GLM5Service from ..models.schemas import VideoPlan import subprocess # 用于调用FFmpeg class VideoGenerationService: def __init__(self): self.ai_service = GLM5Service() self.tasks: Dict[str, dict] = {} # 内存中存储任务状态，生产环境需用Redis或数据库 async def process_video_generation(self, task_id: str, user_prompt: str): """视频生成后台任务主流程""" self.tasks[task_id] = {"status": "processing", "message": "正在生成视频规划..."} try: # 步骤1: 调用GLM-5生成视频规划 plan_dict = await self.ai_service.generate_video_plan(user_prompt) video_plan = VideoPlan(**plan_dict) # 用Pydantic验证数据 self.tasks[task_id]["message"] = "视频规划完成，正在准备素材..." # 步骤2: 根据规划，准备视觉素材（模拟） # 实际应用中，这里会调用文生图API、或从素材库搜索 scene_images = [] for i, scene in enumerate(video_plan.scenes): image_path = await self._generate_scene_image(scene, i) scene_images.append((image_path, scene.duration)) self.tasks[task_id]["message"] = f"正在生成第{i+1}个镜头..." # 步骤3: 生成或获取背景音乐（模拟） bgm_path = await self._get_background_music(video_plan.overall_bgm_mood) # 步骤4: 使用FFmpeg合成视频 self.tasks[task_id]["message"] = "所有素材就绪，正在合成最终视频..." output_video_path = f"/tmp/generated_{task_id}.mp4" # 临时路径 await self._compose_video_ffmpeg(scene_images, bgm_path, output_video_path, video_plan.script) # 步骤5: (模拟)上传到云存储并获取URL # 例如：upload_to_s3(output_video_path) -> video_url video_url = f"/assets/generated/{task_id}.mp4" # 模拟URL self.tasks[task_id].update({ "status": "completed", "message": "视频生成成功！", "video_url": video_url }) except Exception as e: self.tasks[task_id].update({ "status": "failed", "message": f"视频生成失败: {str(e)}" }) async def _generate_scene_image(self, scene, index: int) -> str: """模拟生成或获取分镜图片""" # 这里是模拟操作。真实场景下： # 1. 调用DALL-E 3: `await dalle_client.generate_image(scene.description)` # 2. 或使用Stable Diffusion API # 3. 或从Unsplash等无版权图库搜索关键词 # 为简化，我们创建一个带文字的纯色图片作为占位 import PIL.Image, PIL.ImageDraw, PIL.ImageFont img = PIL.Image.new('RGB', (640, 360), color=(73, 109, 137)) d = PIL.ImageDraw.Draw(img) # 注意：字体路径需要根据系统调整，这里仅为示例 # d.text((10,10), f"Scene {index}: {scene.description}", fill=(255,255,255)) temp_path = f"/tmp/scene_{index}.jpg" img.save(temp_path) return temp_path async def _get_background_music(self, mood: str) -> str: """模拟获取背景音乐""" # 真实场景：调用TTS生成语音，或从免版税音乐库根据mood选择片段 # 这里返回一个静音音频文件路径或示例音乐路径 return "/path/to/silent_or_sample.mp3" # 需准备一个示例文件 async def _compose_video_ffmpeg(self, scene_images, bgm_path, output_path, script): """使用FFmpeg命令行工具合成视频""" # 构建FFmpeg命令 # 1. 为每个图片生成指定时长的视频片段 filter_complex_parts = [] inputs = [] for i, (img_path, duration) in enumerate(scene_images): inputs.extend(['-loop', '1', '-t', str(duration), '-i', img_path]) filter_complex_parts.append(f'[{i}:v]scale=640:360,setsar=1[v{i}]') # 2. 拼接所有视频片段 concat_inputs = ''.join([f'[v{i}]' for i in range(len(scene_images))]) filter_complex = ';'.join(filter_complex_parts) + f';{concat_inputs}concat=n={len(scene_images)}:v=1:a=0[outv]' # 3. 添加背景音乐 inputs.extend(['-i', bgm_path]) filter_complex += ';[outv][3:a]concat=v=0:a=1[outa]' # 假设bgm是第3个输入 # 4. 添加字幕（脚本） # 这里简化处理，可以将script写入一个.srt字幕文件，然后通过-filter_complex添加 # 为简化演示，此步骤暂略 cmd = ['ffmpeg', '-y'] + inputs + ['-filter_complex', filter_complex, '-map', '[outv]', '-map', '[outa]', '-c:v', 'libx264', '-c:a', 'aac', output_path] # 执行命令 process = await asyncio.create_subprocess_exec(*cmd, stdout=asyncio.subprocess.PIPE, stderr=asyncio.subprocess.PIPE) stdout, stderr = await process.communicate() if process.returncode != 0: raise Exception(f"FFmpeg合成失败: {stderr.decode()}") def get_task_status(self, task_id: str) -> Tuple[str, str, str]: """获取任务状态""" task = self.tasks.get(task_id, {"status": "not_found", "message": "任务不存在"}) return task.get("status", "unknown"), task.get("message", ""), task.get("video_url", "")

这个服务类勾勒出了从规划到合成的完整闭环。它清晰地展示了如何将GLM-5的“思考”结果转化为一系列可执行的动作。请注意，其中的素材生成和视频合成部分做了大量简化（模拟），在真实3小时挑战中，我们可能会用更取巧的方式，比如使用固定的图片和音乐模板，重点演示GLM-5的规划能力和前后端联调。

踩坑预警：FFmpeg的命令行参数极其复杂，滤镜图（filter_complex）的设计很容易出错。在开发中，建议先在命令行手动测试通一个简单的图片合成视频的命令，再将其转化为Python代码。另外，异步执行子进程（asyncio.create_subprocess_exec）是正确做法，避免阻塞事件循环。生产环境中，这类耗时极长的任务一定要放入像Celery这样的分布式任务队列，并与消息队列（如Redis）结合，实现更可靠的状态跟踪和横向扩展。

5. 前端交互界面实现：状态管理与用户体验

后端引擎在轰鸣，前端则需要提供一个简洁直观的控制面板。我们的目标是：一个输入框让用户描述想法，一个按钮提交，然后实时展示生成状态，最后播放生成的视频。

5.1 构建主页面与状态管理

在frontend/app/page.tsx中，我们将使用React的useState和useEffect来管理异步任务的状态。

'use client'; // Next.js App Router中，使用状态的组件必须是客户端组件 import { useState, useEffect } from 'react'; // 定义任务状态类型 interface TaskStatus { task_id: string; status: 'pending' | 'processing' | 'completed' | 'failed'; message?: string; video_url?: string; } export default function Home() { const [prompt, setPrompt] = useState(''); const [currentTask, setCurrentTask] = useState<TaskStatus | null>(null); const [isLoading, setIsLoading] = useState(false); const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(null); const API_BASE = process.env.NEXT_PUBLIC_API_BASE || 'http://localhost:8000'; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!prompt.trim()) return; setIsLoading(true); setCurrentTask(null); // 清除旧任务 try { const res = await fetch(`${API_BASE}/api/video/generate`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt.trim() }), }); if (!res.ok) throw new Error('提交任务失败'); const data: TaskStatus = await res.json(); setCurrentTask(data); // 开始轮询任务状态 startPolling(data.task_id); } catch (error) { console.error('Error:', error); alert('提交失败，请检查网络或后端服务。'); setIsLoading(false); } }; const startPolling = (taskId: string) => { // 清除之前的轮询 if (pollingInterval) clearInterval(pollingInterval); const interval = setInterval(async () => { try { const res = await fetch(`${API_BASE}/api/video/task/${taskId}`); const data: TaskStatus = await res.json(); setCurrentTask(data); // 任务完成或失败，停止轮询 if (data.status === 'completed' || data.status === 'failed') { clearInterval(interval); setPollingInterval(null); setIsLoading(false); } } catch (error) { console.error('轮询失败:', error); } }, 2000); // 每2秒轮询一次 setPollingInterval(interval); }; // 组件卸载时清除定时器 useEffect(() => { return () => { if (pollingInterval) clearInterval(pollingInterval); }; }, [pollingInterval]); return ( <main className="flex min-h-screen flex-col items-center p-8 md:p-24"> <h1 className="text-4xl font-bold mb-2">TikTok风格视频生成器</h1> <p className="text-gray-600 mb-8">描述你的创意，AI帮你生成短视频（技术原型演示）</p> <form onSubmit={handleSubmit} className="w-full max-w-2xl mb-12"> <div className="flex flex-col md:flex-row gap-4"> <input type="text" value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="例如：生成一段关于城市夜景的、带有赛博朋克风格的15秒短视频..." className="flex-grow p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" disabled={isLoading} /> <button type="submit" disabled={isLoading || !prompt.trim()} className="px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" > {isLoading ? '生成中...' : '开始生成'} </button> </div> <p className="mt-2 text-sm text-gray-500">尝试描述得越具体，生成的视频规划越精准。</p> </form> {/* 任务状态展示区域 */} <div className="w-full max-w-4xl"> {currentTask && ( <div className="border rounded-xl p-6 shadow-sm bg-white"> <div className="flex justify-between items-center mb-4"> <h2 className="text-xl font-semibold">任务状态</h2> <span className={`px-3 py-1 rounded-full text-sm font-medium ${ currentTask.status === 'completed' ? 'bg-green-100 text-green-800' : currentTask.status === 'failed' ? 'bg-red-100 text-red-800' : currentTask.status === 'processing' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800' }`}> {currentTask.status === 'pending' && '排队中'} {currentTask.status === 'processing' && '处理中'} {currentTask.status === 'completed' && '已完成'} {currentTask.status === 'failed' && '失败'} </span> </div> <p className="text-gray-700 mb-2">任务ID: <code className="bg-gray-100 px-2 py-1 rounded">{currentTask.task_id}</code></p> <p className="text-gray-700 mb-4">{currentTask.message}</p> {/* 进度条模拟（根据状态动态变化） */} <div className="w-full bg-gray-200 rounded-full h-2.5 mb-6"> <div className="bg-blue-600 h-2.5 rounded-full transition-all duration-500" style={{ width: currentTask.status === 'pending' ? '10%' : currentTask.status === 'processing' ? '60%' : currentTask.status === 'completed' ? '100%' : '100%' }} ></div> </div> {/* 视频展示区域 */} {currentTask.status === 'completed' && currentTask.video_url && ( <div className="mt-6"> <h3 className="text-lg font-medium mb-3">生成结果</h3> <div className="aspect-video max-w-2xl mx-auto bg-black rounded-lg overflow-hidden"> {/* 注意：模拟的video_url可能需要正确的MIME类型或代理 */} <video key={currentTask.video_url} // 强制重新加载视频 controls className="w-full h-full" src={currentTask.video_url} > 您的浏览器不支持视频标签。 </video> </div> <div className="mt-4 flex justify-center"> <a href={currentTask.video_url} download className="px-4 py-2 border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition-colors" > 下载视频 </a> </div> </div> )} {currentTask.status === 'failed' && ( <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg"> <p className="text-red-700">视频生成过程中出现错误。请尝试调整描述词重新提交，或检查后端服务日志。</p> </div> )} </div> )} {!currentTask && !isLoading && ( <div className="text-center py-12 text-gray-500 border-2 border-dashed rounded-xl"> <p>提交一个创意描述，开始你的视频生成之旅。</p> <p className="text-sm mt-2">示例：&quot;一只小猫在阳光下追逐毛线球的温馨短片&quot;</p> </div> )} </div> </main> ); }

这个前端页面实现了核心的用户交互闭环：输入、提交、状态轮询、结果展示。使用Tailwind CSS可以快速构建出美观的界面。状态轮询（Polling）虽然简单，但对于这种原型演示足够有效。在生产环境中，对于实时性要求更高的场景，可以考虑WebSocket或Server-Sent Events (SSE)。

5.2 环境变量与跨域配置

为了让前端能访问后端API，我们需要配置环境变量和解决跨域问题。

在frontend/.env.local文件中：

NEXT_PUBLIC_API_BASE=http://localhost:8000

在backend/main.py中启动FastAPI应用时，需要添加CORS中间件：

from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from .routers import video app = FastAPI(title="TikTok视频生成SaaS API") # 配置CORS，允许前端Next.js开发服务器访问 app.add_middleware( CORSMiddleware, allow_origins=["http://localhost:3000"], # Next.js默认端口 allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) app.include_router(video.router) @app.get("/") async def root(): return {"message": "TikTok Video Generation SaaS API is running."}

6. 系统联调、部署与优化思考

当前后端代码都准备就绪，最激动人心的联调时刻就到了。在3小时挑战的尾声，我们需要让整个系统跑起来，并思考如何让它从一个原型进化为一个真正的SaaS服务。

6.1 本地运行与测试

首先，确保FFmpeg已安装在你的系统路径中（brew install ffmpeg/apt-get install ffmpeg/ 从官网下载）。然后，在两个终端分别启动前后端：

# 终端1：启动后端FastAPI服务 cd backend source venv/bin/activate # 激活虚拟环境 uvicorn main:app --reload --port 8000 # 终端2：启动前端Next.js开发服务器 cd frontend npm run dev

访问http://localhost:3000，输入一段描述，点击生成。观察后端日志，你应该能看到GLM-5 API被调用、任务状态更新、以及FFmpeg命令执行的日志。前端则会从“排队中”变为“处理中”，最后显示“已完成”并展示一个模拟的视频播放器。

6.2 3小时挑战的取巧与妥协

在如此短的时间内完成一个复杂系统，我们必须做出明智的妥协：

1. 素材生成：我们没有真正集成文生图API，而是用PIL生成纯色图片。在演示中，你可以准备几张精美的静态图片作为素材库，根据GLM-5返回的visual_type关键词进行匹配，效果会好很多。
2. 视频合成：复杂的FFmpeg滤镜（如转场、字幕）被暂时省略。优先保证“图片序列+背景音乐”能合成一个可播放的视频。
3. 存储与CDN：视频文件保存在服务器本地临时目录。真实SaaS需要对象存储（如AWS S3、Cloudinary）和CDN来提供稳定、快速的访问。
4. 错误处理与重试：当前错误处理比较基础。生产环境需要对每个子任务（API调用、文件处理）实现重试机制和更细致的状态回滚。
5. 任务队列：使用内存字典存储任务状态，服务器重启即丢失。必须换用Redis或数据库，并引入Celery等任务队列管理长时间运行的任务。

6.3 从原型到SaaS的演进路径

如果这个原型验证成功，并希望将其发展为真正的SaaS，你需要从以下几个维度进行深化：

1. AI能力增强：

   • 多模态理解：让GLM-5不仅能处理文本，还能分析用户上传的参考图片或视频，生成更贴合的脚本。
   • 素材库集成：接入专业的无版权图片、视频片段、音乐库API，让GLM-5的规划能直接关联到高质量素材。
   • 风格化控制：允许用户选择视频滤镜、字体、动画模板，并将这些参数融入给GLM-5的Prompt中。

2. 工程化与可扩展性：

   • 微服务化：将视频生成拆分为更独立的服务，如“规划服务”、“素材获取服务”、“合成渲染服务”，通过消息队列通信，便于独立扩展。
   • 渲染集群：视频合成是计算密集型任务，需要可水平扩展的渲染集群（可能基于GPU）。
   • 异步流水线：使用更强大的工作流引擎（如Apache Airflow、Prefect）来管理复杂的、有依赖关系的任务流。

3. 产品与用户体验：

   • 模板系统：提供热门风格的模板，用户只需微调文案。
   • 实时预览：在生成过程中提供低分辨率预览或关键帧预览。
   • 精细化编辑：生成后，允许用户在线裁剪、替换片段、调整音乐和文字。

6.4 关于GLM-5“全栈长任务”能力的实测体会

通过这个高强度的3小时原型开发，我对GLM-5这类大模型在“全栈长任务”中的角色有了更具体的认识。它不是一个能直接吐出完整、无bug代码的“银弹”，而是一个强大的“高级别规划师”和“代码生成助手”。它的价值在于：

• 快速理解复杂需求：将模糊的用户指令转化为结构化的、可操作的技术方案（JSON规划）。
• 填补知识盲区：当你忘记某个FFmpeg参数的具体用法，或某个FastAPI装饰器的细节时，可以直接向它提问，它能快速给出准确的代码片段。
• 加速开发流程：从前端React组件到后端API路由，再到数据处理逻辑，它都能根据你的描述生成七成可用的代码骨架，你只需要进行调试、集成和边界条件处理。

然而，它也明确地告诉我们，当前AI无法替代的：

• 系统架构设计：选择Next.js还是Vite？用BackgroundTasks还是Celery？这些高层次决策需要人类的经验和判断。
• 复杂逻辑调试：当FFmpeg命令报错，或者异步任务状态死锁时，你需要深厚的调试技能和问题排查经验。
• 性能与安全：如何防止API被滥用？如何优化视频合成速度？这些关乎产品生死的问题，AI无法给出终极答案。

这个“3小时复刻”项目，与其说是一个可交付的产品，不如说是一个高效的“技术可行性验证沙盒”。它证明了利用现有AI工具链，一个全栈开发者可以在极短时间内，将一个大而模糊的创意，转化为一个可运行、可演示、可迭代的技术原型。这极大地降低了创新试错的门槛和成本。接下来的工作，就是将这个充满潜力的原型，通过扎实的工程化、产品化和运营，打磨成一个真正为用户创造价值的SaaS服务。