forked from 77media/video-flow
feat: Dashboard optimization with custom scrollbar styles and layout improvements
- Added custom scrollbar styles for better UX - Optimized dashboard layout components - Enhanced network timeline functionality - Cleaned up redundant dashboard components - Improved API integration for video flow
This commit is contained in:
qikongjian
parent
65d0f07db6
commit
cf5d86c840
133
api/video-analysis.ts
Normal file
133
api/video-analysis.ts
Normal file
@ -0,0 +1,133 @@
|
||||
// 视频分析API接口
|
||||
|
||||
export interface VideoAnalysisResponse {
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
project_id: string;
|
||||
total_videos: number;
|
||||
analyzed_videos: number;
|
||||
pending_count: number;
|
||||
failed_count: number;
|
||||
completion_rate: number;
|
||||
analyzed_list: string[];
|
||||
};
|
||||
successful: boolean;
|
||||
}
|
||||
|
||||
export interface VideoAnalysisRequest {
|
||||
project_id: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取视频分析进度
|
||||
* @param params 请求参数
|
||||
* @returns 视频分析进度数据
|
||||
*/
|
||||
export async function getVideoAnalysisProgress(params: VideoAnalysisRequest): Promise<VideoAnalysisResponse> {
|
||||
try {
|
||||
const response = await fetch('https://77.smartvideo.py.qikongjian.com/edit-plan/analyzeProgress', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(params)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('获取视频分析进度失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算分析进度百分比
|
||||
* @param analyzed 已分析数量
|
||||
* @param total 总数量
|
||||
* @returns 进度百分比
|
||||
*/
|
||||
export function calculateProgress(analyzed: number, total: number): number {
|
||||
if (total === 0) return 0;
|
||||
return Math.round((analyzed / total) * 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* 从视频URL中提取文件名
|
||||
* @param url 视频URL
|
||||
* @returns 文件名
|
||||
*/
|
||||
export function extractVideoFileName(url: string): string {
|
||||
try {
|
||||
const parts = url.split('/');
|
||||
const filename = parts[parts.length - 1];
|
||||
|
||||
// 提取FJ开头的部分作为视频名称
|
||||
const match = filename.match(/^(FJ\d+)/);
|
||||
if (match) {
|
||||
return match[1];
|
||||
}
|
||||
|
||||
// 如果是换脸视频，提取时间戳部分
|
||||
if (filename.includes('facefusion_output')) {
|
||||
const timestampMatch = filename.match(/(\d+)_facefusion_output/);
|
||||
if (timestampMatch) {
|
||||
return `换脸视频-${timestampMatch[1]}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认返回文件名（去掉扩展名）
|
||||
return filename.split('.')[0];
|
||||
} catch (error) {
|
||||
return '未知视频';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断视频类型
|
||||
* @param url 视频URL
|
||||
* @returns 视频类型
|
||||
*/
|
||||
export function getVideoType(url: string): 'original' | 'faceswap' {
|
||||
return url.includes('facefusion_output') ? 'faceswap' : 'original';
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化视频分析数据
|
||||
* @param data 原始数据
|
||||
* @returns 格式化后的数据
|
||||
*/
|
||||
export function formatAnalysisData(data: VideoAnalysisResponse['data']) {
|
||||
const analyzedVideos = data.analyzed_list.map((url, index) => ({
|
||||
id: `video-${index}`,
|
||||
url,
|
||||
name: extractVideoFileName(url),
|
||||
type: getVideoType(url),
|
||||
status: 'analyzed' as const,
|
||||
analyzedAt: new Date().toISOString()
|
||||
}));
|
||||
|
||||
const pendingVideos = Array.from(
|
||||
{ length: data.pending_count },
|
||||
(_, index) => ({
|
||||
id: `pending-${index}`,
|
||||
url: '',
|
||||
name: `待分析视频 ${index + 1}`,
|
||||
type: 'original' as const,
|
||||
status: 'pending' as const,
|
||||
analyzedAt: ''
|
||||
})
|
||||
);
|
||||
|
||||
return {
|
||||
...data,
|
||||
analyzedVideos,
|
||||
pendingVideos,
|
||||
totalProgress: data.completion_rate
|
||||
};
|
||||
}
|
||||
@ -19,6 +19,41 @@ import { VideoFlowProjectResponse, NewCharacterItem, NewCharacterListResponse, C
|
||||
import { RoleResponse } from "./DTO/movieEdit";
|
||||
import { RoleRecognitionResponse } from "./DTO/movieEdit";
|
||||
|
||||
/**
|
||||
* 任务项接口定义
|
||||
*/
|
||||
export interface TaskItem {
|
||||
/** 计划ID */
|
||||
plan_id: string;
|
||||
/** 任务ID */
|
||||
task_id: string;
|
||||
/** 任务名称 */
|
||||
task_name: string;
|
||||
/** 任务状态 */
|
||||
task_status: 'COMPLETED' | 'IN_PROGRESS' | 'PENDING' | 'FAILED';
|
||||
/** 任务结果 */
|
||||
task_result: {
|
||||
/** 数据数组 */
|
||||
data?: any[];
|
||||
/** 总数量 */
|
||||
total_count?: number;
|
||||
/** 已完成数量 */
|
||||
completed_count?: number;
|
||||
/** 剩余数量 */
|
||||
remaining_count?: number;
|
||||
/** 进度百分比 */
|
||||
progress_percentage?: number;
|
||||
};
|
||||
/** 任务参数 */
|
||||
task_params?: any;
|
||||
/** 任务消息 */
|
||||
task_message: string;
|
||||
/** 创建时间 */
|
||||
created_at: string;
|
||||
/** 更新时间 */
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 角色替换参数接口
|
||||
*/
|
||||
@ -234,6 +269,34 @@ export const getRunningStreamData = async (data: {
|
||||
return post<ApiResponse<any>>("/movie/get_status", data);
|
||||
};
|
||||
|
||||
// 新增：获取项目任务列表接口
|
||||
export const getProjectTaskList = async (data: {
|
||||
project_id: string;
|
||||
}): Promise<ApiResponse<TaskItem[]>> => {
|
||||
// 使用完整的URL，因为这个接口在不同的服务器上
|
||||
const fullUrl = "https://77.smartvideo.py.qikongjian.com/task/get_project_task_list";
|
||||
|
||||
try {
|
||||
const response = await fetch(fullUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage?.getItem('token') || 'mock-token'}`,
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('获取任务列表失败:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取 脚本 接口
|
||||
export const getScriptTags = async (data: {
|
||||
project_id: string;
|
||||
|
||||
350
app/dashboard/page.tsx
Normal file
350
app/dashboard/page.tsx
Normal file
@ -0,0 +1,350 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import NetworkTimeline from '@/components/dashboard/network-timeline';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { getRunningStreamData } from '@/api/video_flow';
|
||||
import { mockDashboardData } from '@/components/dashboard/demo-data';
|
||||
import { cn } from '@/public/lib/utils';
|
||||
|
||||
export default function DashboardPage() {
|
||||
const searchParams = useSearchParams();
|
||||
// 使用真实项目ID，如果URL没有提供则使用默认的真实项目ID
|
||||
const projectId = searchParams.get('project_id') || 'bc43bc81-c781-4caa-8256-9710fd5bee80';
|
||||
|
||||
const [dashboardData, setDashboardData] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isUsingMockData, setIsUsingMockData] = useState(false);
|
||||
const [isBackgroundRefreshing, setIsBackgroundRefreshing] = useState(false);
|
||||
const [lastUpdateTime, setLastUpdateTime] = useState<Date | null>(null);
|
||||
const [connectionStatus, setConnectionStatus] = useState<'connected' | 'disconnected' | 'checking'>('checking');
|
||||
|
||||
// 使用 ref 来存储最新的状态，避免定时器闭包问题
|
||||
const stateRef = useRef({ isUsingMockData, dashboardData });
|
||||
|
||||
// 初始加载数据
|
||||
const fetchInitialData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setConnectionStatus('checking');
|
||||
|
||||
console.log('正在获取项目数据，项目ID:', projectId);
|
||||
|
||||
// 调用真实API
|
||||
const response = await getRunningStreamData({ project_id: projectId });
|
||||
|
||||
console.log('API响应:', response);
|
||||
|
||||
if (response.code === 0 && response.data) {
|
||||
setDashboardData(response.data);
|
||||
setIsUsingMockData(false);
|
||||
setLastUpdateTime(new Date());
|
||||
setConnectionStatus('connected');
|
||||
console.log('成功获取真实数据');
|
||||
} else {
|
||||
console.warn('API返回错误或无数据，使用演示数据');
|
||||
setDashboardData(mockDashboardData);
|
||||
setIsUsingMockData(true);
|
||||
setLastUpdateTime(new Date());
|
||||
setConnectionStatus('disconnected');
|
||||
setError(`API返回: ${response.message || '无数据'} (已切换到演示模式)`);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('获取数据失败:', err);
|
||||
|
||||
// 详细的错误分析
|
||||
let errorMessage = '未知错误';
|
||||
if (err.code === 'NETWORK_ERROR' || err.message?.includes('Network Error')) {
|
||||
errorMessage = '网络连接失败，请检查网络连接';
|
||||
} else if (err.code === 'ECONNABORTED' || err.message?.includes('timeout')) {
|
||||
errorMessage = '请求超时，服务器响应缓慢';
|
||||
} else if (err.response?.status === 404) {
|
||||
errorMessage = 'API接口不存在';
|
||||
} else if (err.response?.status === 500) {
|
||||
errorMessage = '服务器内部错误';
|
||||
} else if (err.response?.status === 403) {
|
||||
errorMessage = '访问被拒绝，请检查权限';
|
||||
} else if (err.message) {
|
||||
errorMessage = err.message;
|
||||
}
|
||||
|
||||
// 如果API调用失败，回退到演示数据
|
||||
console.log('API调用失败，使用演示数据');
|
||||
setDashboardData(mockDashboardData);
|
||||
setIsUsingMockData(true);
|
||||
setLastUpdateTime(new Date());
|
||||
setConnectionStatus('disconnected');
|
||||
setError(`${errorMessage} (已切换到演示模式)`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 深度比较数据是否发生变化
|
||||
const hasDataChanged = (newData: any, oldData: any) => {
|
||||
if (!oldData || !newData) return true;
|
||||
|
||||
try {
|
||||
return JSON.stringify(newData) !== JSON.stringify(oldData);
|
||||
} catch {
|
||||
return true; // 如果比较失败，认为数据已变化
|
||||
}
|
||||
};
|
||||
|
||||
// 后台静默刷新数据
|
||||
const refreshDataSilently = async () => {
|
||||
try {
|
||||
setIsBackgroundRefreshing(true);
|
||||
console.log('后台刷新数据...');
|
||||
|
||||
// 调用真实API
|
||||
const response = await getRunningStreamData({ project_id: projectId });
|
||||
|
||||
if (response.code === 0 && response.data) {
|
||||
// 检查数据是否真正发生变化
|
||||
if (hasDataChanged(response.data, dashboardData)) {
|
||||
// 只有数据变化时才更新UI
|
||||
setDashboardData(response.data);
|
||||
setIsUsingMockData(false);
|
||||
setLastUpdateTime(new Date());
|
||||
setConnectionStatus('connected');
|
||||
setError(null); // 清除之前的错误
|
||||
console.log('后台数据更新成功 - 数据已变化');
|
||||
} else {
|
||||
// 数据未变化，只更新时间戳
|
||||
setLastUpdateTime(new Date());
|
||||
setConnectionStatus('connected');
|
||||
console.log('后台数据检查完成 - 数据无变化');
|
||||
}
|
||||
} else {
|
||||
console.warn('后台刷新失败，保持当前数据');
|
||||
setConnectionStatus('disconnected');
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('后台刷新失败:', err);
|
||||
setConnectionStatus('disconnected');
|
||||
// 后台刷新失败时不影响当前显示，只记录日志和更新连接状态
|
||||
} finally {
|
||||
setIsBackgroundRefreshing(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 智能刷新频率：根据任务状态决定刷新间隔
|
||||
const getRefreshInterval = React.useCallback(() => {
|
||||
if (!dashboardData || isUsingMockData) return 60000; // mock数据时60秒刷新一次
|
||||
|
||||
// 检查是否有正在运行的任务
|
||||
const hasRunningTasks = Array.isArray(dashboardData) &&
|
||||
dashboardData.some((task: any) => task.task_status === 'RUNNING');
|
||||
|
||||
return hasRunningTasks ? 10000 : 30000; // 有运行任务时10秒，否则30秒
|
||||
}, [dashboardData, isUsingMockData]);
|
||||
|
||||
// 初始加载数据 - 只在 projectId 变化时执行
|
||||
useEffect(() => {
|
||||
fetchInitialData();
|
||||
}, [projectId]); // 只依赖 projectId
|
||||
|
||||
// 更新 ref 中的状态
|
||||
useEffect(() => {
|
||||
stateRef.current = { isUsingMockData, dashboardData };
|
||||
}, [isUsingMockData, dashboardData]);
|
||||
|
||||
// 智能定时刷新 - 根据数据状态动态调整刷新间隔
|
||||
useEffect(() => {
|
||||
if (!dashboardData) return; // 没有数据时不设置定时器
|
||||
|
||||
const refreshInterval = getRefreshInterval();
|
||||
console.log(`设置刷新间隔: ${refreshInterval / 1000}秒`);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
// 使用 ref 中的最新状态
|
||||
if (!stateRef.current.isUsingMockData) {
|
||||
refreshDataSilently();
|
||||
}
|
||||
}, refreshInterval);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [getRefreshInterval]); // 只依赖 getRefreshInterval
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500 mx-auto"></div>
|
||||
<p className="mt-4 text-lg text-gray-600">加载数据面板...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !dashboardData) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
|
||||
<div className="text-center max-w-md mx-auto p-8 bg-black/20 backdrop-blur-sm rounded-xl border border-white/10">
|
||||
<div className="text-red-400 text-6xl mb-6">⚠️</div>
|
||||
<h2 className="text-white text-2xl font-bold mb-4">连接失败</h2>
|
||||
<p className="text-gray-300 mb-6 leading-relaxed">{error}</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={fetchInitialData}
|
||||
disabled={loading}
|
||||
className="w-full px-6 py-3 bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<div className="w-4 h-4 animate-spin rounded-full border-b-2 border-white"></div>
|
||||
<span>重新连接中...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
<span>重新连接</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setDashboardData(mockDashboardData);
|
||||
setIsUsingMockData(true);
|
||||
setError(null);
|
||||
setConnectionStatus('disconnected');
|
||||
}}
|
||||
className="w-full px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
使用演示数据
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-sm text-gray-400">
|
||||
<p>如果问题持续存在，请检查：</p>
|
||||
<ul className="mt-2 text-left space-y-1">
|
||||
<li>• 网络连接是否正常</li>
|
||||
<li>• 服务器是否可访问</li>
|
||||
<li>• 项目ID是否正确</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex flex-col overflow-hidden">
|
||||
{/* 后台刷新指示器 */}
|
||||
{isBackgroundRefreshing && (
|
||||
<div className="fixed top-4 right-4 z-50 bg-blue-500/90 backdrop-blur-sm text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2">
|
||||
<div className="w-4 h-4 animate-spin rounded-full border-b-2 border-white"></div>
|
||||
<span className="text-sm">数据更新中...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 手动刷新按钮和状态指示器 */}
|
||||
<div className="fixed bottom-4 right-4 z-40 flex flex-col items-end gap-2">
|
||||
{/* 手动刷新按钮 */}
|
||||
<button
|
||||
onClick={refreshDataSilently}
|
||||
disabled={isBackgroundRefreshing}
|
||||
className="bg-blue-500/80 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed backdrop-blur-sm text-white p-2 rounded-full shadow-lg transition-all duration-200 hover:scale-105"
|
||||
title="手动刷新数据"
|
||||
>
|
||||
<svg className={`w-4 h-4 ${isBackgroundRefreshing ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* 连接状态和最后更新时间指示器 */}
|
||||
<div className="bg-black/50 backdrop-blur-sm text-white/70 px-3 py-1 rounded text-xs whitespace-nowrap flex items-center gap-2">
|
||||
{/* 连接状态指示器 */}
|
||||
<div className="flex items-center gap-1">
|
||||
<div className={`w-2 h-2 rounded-full ${
|
||||
connectionStatus === 'connected' ? 'bg-green-400' :
|
||||
connectionStatus === 'disconnected' ? 'bg-red-400' :
|
||||
'bg-yellow-400 animate-pulse'
|
||||
}`} />
|
||||
<span className="text-xs">
|
||||
{connectionStatus === 'connected' ? '已连接' :
|
||||
connectionStatus === 'disconnected' ? '离线模式' :
|
||||
'连接中...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 分隔符 */}
|
||||
{lastUpdateTime && <span>|</span>}
|
||||
|
||||
{/* 最后更新时间 */}
|
||||
{lastUpdateTime && (
|
||||
<span>最后更新: {lastUpdateTime.toLocaleTimeString()}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 顶部状态栏 */}
|
||||
<div className="bg-gray-900 border-b border-gray-800 px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* 项目信息 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-cyan-400 animate-pulse"></div>
|
||||
<h1 className="text-xl font-bold text-white">Video Flow Dashboard</h1>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
项目ID: <span className="font-mono text-gray-300">{projectId}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 连接状态和统计 */}
|
||||
<div className="flex items-center gap-6">
|
||||
{/* 连接状态指示器 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={cn(
|
||||
"w-2 h-2 rounded-full",
|
||||
connectionStatus === 'connected' ? 'bg-emerald-400' :
|
||||
connectionStatus === 'checking' ? 'bg-amber-400 animate-pulse' :
|
||||
'bg-rose-400'
|
||||
)}></div>
|
||||
<span className="text-sm text-gray-400">
|
||||
{connectionStatus === 'connected' ? '实时连接' :
|
||||
connectionStatus === 'checking' ? '连接中...' :
|
||||
'离线模式'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 最后更新时间 */}
|
||||
{lastUpdateTime && (
|
||||
<div className="text-sm text-gray-500">
|
||||
更新于 {lastUpdateTime.toLocaleTimeString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<div className="flex-1 min-h-0">
|
||||
<NetworkTimeline
|
||||
tasks={dashboardData || []}
|
||||
onRefresh={fetchInitialData}
|
||||
isRefreshing={loading}
|
||||
isPolling={!isBackgroundRefreshing}
|
||||
lastUpdate={lastUpdateTime || undefined}
|
||||
onTogglePolling={() => {
|
||||
console.log('切换轮询状态');
|
||||
}}
|
||||
onRetryTask={async (taskId: string) => {
|
||||
console.log('重试任务:', taskId);
|
||||
await fetchInitialData();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -2,6 +2,51 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.scrollbar-track-gray-800\/50::-webkit-scrollbar-track {
|
||||
background: rgba(31, 41, 55, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thumb-cyan-500\/70::-webkit-scrollbar-thumb {
|
||||
background: rgba(6, 182, 212, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thumb-cyan-500\/70:hover::-webkit-scrollbar-thumb,
|
||||
.hover\:scrollbar-thumb-cyan-400\/90:hover::-webkit-scrollbar-thumb {
|
||||
background: rgba(34, 211, 238, 0.9);
|
||||
}
|
||||
|
||||
.scrollbar-thumb-purple-500\/70::-webkit-scrollbar-thumb {
|
||||
background: rgba(168, 85, 247, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thumb-purple-500\/70:hover::-webkit-scrollbar-thumb,
|
||||
.hover\:scrollbar-thumb-purple-400\/90:hover::-webkit-scrollbar-thumb {
|
||||
background: rgba(196, 125, 255, 0.9);
|
||||
}
|
||||
|
||||
.scrollbar-thumb-blue-500\/70::-webkit-scrollbar-thumb {
|
||||
background: rgba(59, 130, 246, 0.7);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thumb-blue-500\/70:hover::-webkit-scrollbar-thumb,
|
||||
.hover\:scrollbar-thumb-blue-400\/90:hover::-webkit-scrollbar-thumb {
|
||||
background: rgba(96, 165, 250, 0.9);
|
||||
}
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
|
||||
136
components/dashboard/demo-data.ts
Normal file
136
components/dashboard/demo-data.ts
Normal file
@ -0,0 +1,136 @@
|
||||
// 演示数据 - 模拟get_status.txt接口返回的数据结构
|
||||
export const mockDashboardData = [
|
||||
{
|
||||
"task_id": "689d8ba7-837b-4770-8656-5c8e797e88cb",
|
||||
"task_name": "generate_character",
|
||||
"task_status": "COMPLETED",
|
||||
"start_time": "2024-01-15T10:00:00Z",
|
||||
"end_time": "2024-01-15T10:02:30Z",
|
||||
"duration": 150,
|
||||
"task_result": {
|
||||
"data": [
|
||||
{
|
||||
"image_path": "https://c.huiying.video/images/efdd27e7-650a-4b3e-809b-b62557d15561.jpg",
|
||||
"character_name": "Li Wei",
|
||||
"character_description": "A headshot of an adult East Asian man, appearing to be in his 35s, with short, neatly styled black hair, is centered against a plain light gray background. He is looking directly forward at the camera with a neutral expression. His skin tone is fair to light. He is wearing a black turtleneck shirt, which covers his neck and extends out of the frame. The lighting on his face is even, with subtle shadows that define his facial features.\n role: Protagonist\n age: 32\n gender: male\n race: Asian"
|
||||
},
|
||||
{
|
||||
"image_path": "https://c.huiying.video/images/4f4c3473-4d5c-4070-8d56-92773c1d5115.jpg",
|
||||
"character_name": "Woman",
|
||||
"character_description": "A medium shot captures an elderly woman, appearing to be in her early seventies, seated in the back passenger side of a vehicle. She has long, dark brown hair that cascades over her right shoulder and down her back. Her skin tone is fair, and she has a gentle smile that reveals her teeth. Her eyes are dark brown, and she has light makeup, including light eyeliner, subtle eyeshadow, and reddish-orange lipstick. She is wearing small, dark green or blue stud earrings. Her top is white, off-the-shoulder, and appears to be made of a light, possibly ruffled, fabric. The background through the car window is blurred, showing a road and hints of greenery and other vehicles in the distance, suggesting the car is in motion or parked outdoors during the daytime. Natural light illuminates her face from the front, highlighting the gentle lines and wrinkles that reflect a lifetime of experiences.\n role: Supporting\n age: 65\n gender: female\n race: Asian"
|
||||
},
|
||||
{
|
||||
"image_path": "https://c.huiying.video/images/78fc87a8-567f-4b09-94d4-b86e3b327efb.jpg",
|
||||
"character_name": "Young Li Wei",
|
||||
"character_description": "Brief: Not provided. Generated from script analysis.\nRole: Supporting\nGender: male\nRace: Asian\nAge: 19\nPhysique: Slender, with the softer, less-defined build of a young university student. He lacks the hardened physique of his older self.\nKey Visual Anchors: His hand is clenched so tightly around the metal doorknob that his knuckles are white. His face is a canvas of raw, conflicting emotions—fear, guilt, and a desperate need to escape.\nHairstyle: A common haircut for a young man his age; slightly longer and messier on top than his older self, falling across his forehead. It suggests a life without obsessive self-grooming.\nDefault Demeanor: Tense and avoidant. His shoulders are hunched, and his entire body is angled away from the bed, towards the door. He cannot bring himself to look at his mother, his gaze fixed on the hallway ahead."
|
||||
}
|
||||
],
|
||||
"total_count": 3
|
||||
}
|
||||
},
|
||||
{
|
||||
"task_id": "bedc9224-cc16-4e54-ab1c-3b0d8c8dbc20",
|
||||
"task_name": "generate_sketch",
|
||||
"task_status": "COMPLETED",
|
||||
"start_time": "2024-01-15T10:02:30Z",
|
||||
"end_time": "2024-01-15T10:05:45Z",
|
||||
"duration": 195,
|
||||
"task_result": {
|
||||
"data": [
|
||||
{
|
||||
"image_path": "https://c.huiying.video/images/5972fab6-4805-46a6-9522-9796a4c2a6bc.jpg",
|
||||
"sketch_name": "SC-01: Forest Path"
|
||||
},
|
||||
{
|
||||
"image_path": "https://c.huiying.video/images/e6c687d2-2887-4121-a6dc-02873af8c32b.jpg",
|
||||
"sketch_name": "SC-02: Forest Clearing"
|
||||
},
|
||||
{
|
||||
"image_path": "https://c.huiying.video/images/30bf2644-2678-4a98-937f-09c978d8dced.jpg",
|
||||
"sketch_name": "SC-03: Hospital Room"
|
||||
}
|
||||
],
|
||||
"total_count": 3
|
||||
}
|
||||
},
|
||||
{
|
||||
"task_id": "25d43527-0914-4b04-bd85-30b5ad951f09",
|
||||
"task_name": "generate_shot_sketch",
|
||||
"task_status": "COMPLETED",
|
||||
"start_time": "2024-01-15T10:05:45Z",
|
||||
"end_time": "2024-01-15T10:08:20Z",
|
||||
"duration": 155,
|
||||
"task_result": {
|
||||
"data": [
|
||||
{
|
||||
"url": "https://c.huiying.video/images/ae67291f-dad3-4aaf-9478-a9eb1ba16e96.jpg",
|
||||
"description": "[E01-S01-C01]\n* **Shot Type:** Wide Shot\n* **Frame Description:** A sweeping, beautiful wide shot of the [SC-01: Forest Path]. Towering trees frame the shot. Mist hangs in the air, caught by shafts of golden morning light. The scene is serene but cold.\n* **Key Action / Focus:** Establishing the setting as a place of controlled, natural beauty.\n* **Atmosphere / Mood:** Crisp, disciplined, serene.\n* **Cinematography Blueprint:**\n * **Composition:** Lubezki-style wide shot, using a 24mm lens look. Deep depth of field. The composition feels epic and naturalistic.\n * **Camera Motion:** Static lock-off."
|
||||
},
|
||||
{
|
||||
"url": "https://c.huiying.video/images/655d0ecd-0a5a-44dd-8f72-cc0217b9d263.jpg",
|
||||
"description": "[E01-S01-C02]\n* **Shot Type:** Medium Full Shot (Tracking)\n* **Frame Description:** [CH-01: Li Wei] in his [COSTUME-01] running gear runs towards and past the camera with perfect, machine-like form. The camera tracks with him smoothly for a moment before he continues down the path.\n* **Key Action / Focus:** Introducing Li Wei's relentless, metronomic running.\n* **Atmosphere / Mood:** Controlled, powerful, determined.\n* **Cinematography Blueprint:**\n * **Composition:** Smooth gimbal tracking shot, keeping Li Wei centered in the frame.\n * **Camera Motion:** Pans and tracks with the subject's movement."
|
||||
}
|
||||
],
|
||||
"total_count": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
"task_id": "038ce01c-7ad1-437c-a19b-19ed982d55e9",
|
||||
"task_name": "generate_videos",
|
||||
"task_status": "RUNNING",
|
||||
"start_time": "2024-01-15T10:08:20Z",
|
||||
"progress": 65,
|
||||
"task_result": {
|
||||
"data": [
|
||||
{
|
||||
"video_id": "edcdf845-2ec0-4ce6-a80d-3b64933be969",
|
||||
"description": "Forest path establishing shot with cinematic quality",
|
||||
"video_name_prefix": "FJ0",
|
||||
"urls": []
|
||||
},
|
||||
{
|
||||
"video_id": "8cbd54ef-9f24-49dc-bb53-9072683ad968",
|
||||
"description": "Li Wei running sequence with voice-over",
|
||||
"video_name_prefix": "FJ1",
|
||||
"urls": [
|
||||
"https://video-base-imf.oss-ap-southeast-7.aliyuncs.com/uploads/FJ1-0-20250718060342.mp4",
|
||||
"https://video-base-imf.oss-ap-southeast-7.aliyuncs.com/uploads/FJ1-1-20250718060401.mp4"
|
||||
]
|
||||
},
|
||||
{
|
||||
"video_id": "f5d1cdfb-25cc-4ab6-a8a7-273d47aa09ff",
|
||||
"description": "Close-up of running feet with rhythmic precision",
|
||||
"video_name_prefix": "FJ2",
|
||||
"urls": [
|
||||
"https://video-base-imf.oss-ap-southeast-7.aliyuncs.com/uploads/FJ2-1-20250718060321.mp4"
|
||||
]
|
||||
}
|
||||
],
|
||||
"total_count": 8
|
||||
}
|
||||
},
|
||||
{
|
||||
"task_id": "face-swap-task-001",
|
||||
"task_name": "face_swap_analysis",
|
||||
"task_status": "PENDING",
|
||||
"task_result": null
|
||||
},
|
||||
{
|
||||
"task_id": "editing-plan-task-001",
|
||||
"task_name": "generate_editing_plan",
|
||||
"task_status": "PENDING",
|
||||
"task_result": null
|
||||
}
|
||||
];
|
||||
|
||||
// 项目基本信息
|
||||
export const mockProjectInfo = {
|
||||
project_id: "0a4a7106-c740-4d2f-a192-f6a8467ce7d8",
|
||||
project_name: "AI电影制作演示项目",
|
||||
created_at: "2024-01-15T09:30:00Z",
|
||||
updated_at: "2024-01-15T10:08:20Z",
|
||||
status: "RUNNING",
|
||||
mode: "automatic",
|
||||
resolution: "1080p",
|
||||
language: "Chinese"
|
||||
};
|
||||
1065
components/dashboard/network-timeline.tsx
Normal file
1065
components/dashboard/network-timeline.tsx
Normal file
File diff suppressed because it is too large
Load Diff
245
docs/get_status_data_analysis.md
Normal file
245
docs/get_status_data_analysis.md
Normal file
@ -0,0 +1,245 @@
|
||||
# get_status.txt 数据结构完整分析
|
||||
|
||||
## 📊 接口信息
|
||||
|
||||
- **接口URL**: `POST https://77.smartvideo.py.qikongjian.com/task/get_project_task_list`
|
||||
- **请求参数**:
|
||||
```json
|
||||
{
|
||||
"project_id": "029bbc09-6d83-440b-97fe-e2aa37b8042d"
|
||||
}
|
||||
```
|
||||
- **响应格式**: JSON
|
||||
- **状态码**: 200 (成功时 code: 0)
|
||||
|
||||
## 🏗️ 数据层级结构
|
||||
|
||||
### 项目层级
|
||||
- **Project ID**: `029bbc09-6d83-440b-97fe-e2aa37b8042d`
|
||||
- **Plan ID**: `2039a972-189c-4d1e-abee-c83f18b3b24e` (所有任务共享同一个计划ID)
|
||||
|
||||
### 大任务概览
|
||||
|
||||
| 序号 | 任务名称 | 任务ID | 状态 | 进度 | 子任务数 | 执行时间 |
|
||||
|------|----------|--------|------|------|----------|----------|
|
||||
| 1 | `generate_character` | `08d9c1b3-...` | `COMPLETED` | 100% | 2/2 | 3分58秒 |
|
||||
| 2 | `generate_sketch` | `159e4035-...` | `COMPLETED` | 100% | 2/2 | 3分54秒 |
|
||||
| 3 | `generate_shot_sketch` | `8fe7d769-...` | `IN_PROGRESS` | 进行中 | 16+ | 进行中 |
|
||||
|
||||
## 🎯 任务状态类型
|
||||
|
||||
从数据中识别出的状态：
|
||||
- ✅ **COMPLETED** - 已完成
|
||||
- 🔄 **IN_PROGRESS** - 进行中
|
||||
- ⏸️ **PENDING** - 等待中 (推测，未在当前数据中出现)
|
||||
- ❌ **FAILED** - 失败 (推测，未在当前数据中出现)
|
||||
|
||||
## 📋 详细任务分析
|
||||
|
||||
### 任务1: generate_character (角色生成)
|
||||
|
||||
**基本信息**:
|
||||
- **状态**: ✅ COMPLETED
|
||||
- **进度**: 100% (2/2)
|
||||
- **执行时间**: 2025-08-23 15:57:19 → 16:01:17 (3分58秒)
|
||||
- **任务消息**: "Character is completed"
|
||||
|
||||
**子任务详情**:
|
||||
|
||||
#### 1. Kaelen (主角)
|
||||
- **角色类型**: Protagonist (主角)
|
||||
- **基本信息**: 34岁男性，西方人
|
||||
- **外貌特征**:
|
||||
- 椭圆脸型，盐椒色头发
|
||||
- 深棕色眼睛，杏仁形
|
||||
- 修剪整齐的胡须
|
||||
- 成熟稳重的外表
|
||||
- **图片**: `https://cdn.qikongjian.com/uploads/1754271938_downloaded_999c6cd0.jpg`
|
||||
|
||||
#### 2. Administrator Thorne (管理员索恩)
|
||||
- **角色类型**: Supporting (配角)
|
||||
- **基本信息**: 55岁男性，西方人
|
||||
- **外貌特征**:
|
||||
- 椭圆脸型，盐椒色头发
|
||||
- 棕色眼睛，温和而聪慧
|
||||
- 干净剃须，无胡须
|
||||
- 权威而冷静的气质
|
||||
- **图片**: `https://cdn.qikongjian.com/uploads/1754277591_downloaded_15fed70e.jpg`
|
||||
|
||||
### 任务2: generate_sketch (草图生成)
|
||||
|
||||
**基本信息**:
|
||||
- **状态**: ✅ COMPLETED
|
||||
- **进度**: 100% (2/2)
|
||||
- **执行时间**: 2025-08-23 15:57:19 → 16:01:13 (3分54秒)
|
||||
- **任务消息**: "Sketch is completed"
|
||||
|
||||
**子任务详情**:
|
||||
|
||||
#### 1. SC-01: Aethelred Archival Pod (档案舱)
|
||||
- **场景描述**: 小型六边形房间，无缝抛光的哑光白色复合材料
|
||||
- **设计特点**:
|
||||
- 无尖角，所有边缘柔和弯曲
|
||||
- 漫射无影照明，来自天花板面板
|
||||
- 无菌、临床环境，缺乏个性和温暖
|
||||
- **核心氛围**: 无菌隔离和心理紧张感
|
||||
- **图片**: `https://cdn.qikongjian.com/images/69465618-6e2e-45e7-8fc4-48b85c37c093.jpg`
|
||||
|
||||
#### 2. SC-02: Kaelen's Apartment (凯伦的公寓)
|
||||
- **场景描述**: 极简主义、简朴的工作室公寓
|
||||
- **设计特点**:
|
||||
- 平坦、不饱和的中灰色墙壁 (RGB: 128, 128, 128)
|
||||
- 抛光混凝土地板
|
||||
- 集成家具，从墙壁中延伸出来
|
||||
- 落地窗，俯瞰霓虹灯浸染的城市景观
|
||||
- **核心氛围**: 无菌隔离和心理紧张感
|
||||
- **图片**: `https://cdn.qikongjian.com/images/427c3b9e-d787-4e8a-8705-5346128e20c1.jpg`
|
||||
|
||||
### 任务3: generate_shot_sketch (分镜生成)
|
||||
|
||||
**基本信息**:
|
||||
- **状态**: 🔄 IN_PROGRESS
|
||||
- **进度**: 进行中
|
||||
- **开始时间**: 2025-08-23 15:57:19
|
||||
- **任务消息**: "Shot sketch generation in progress"
|
||||
|
||||
**已完成的分镜子任务**:
|
||||
|
||||
#### Scene 1 (S01) - Aethelred Archival Pod
|
||||
|
||||
1. **[E01-S01-C01] Wide Shot** - 建立镜头
|
||||
- **镜头类型**: 全景镜头
|
||||
- **画面描述**: 整个无菌白色六边形舱室可见，Kaelen坐在中央
|
||||
- **关键动作**: 建立舱室地理位置和Kaelen的孤独存在
|
||||
- **氛围**: 无菌、隔离、受控、安静
|
||||
- **摄影**: 对称全景镜头，24mm镜头效果
|
||||
|
||||
2. **[E01-S01-C02] Medium Shot** - 工作开始
|
||||
- **镜头类型**: 中景镜头
|
||||
- **画面描述**: 从胸部向上，Kaelen侧面视角
|
||||
- **对话**: "Data is pure. Orderly. It has no messy feelings."
|
||||
- **关键动作**: Kaelen启动工作流程
|
||||
- **氛围**: 专注、细致、几乎机械化
|
||||
|
||||
3. **[E01-S01-C03] Close-up** - 手部特写
|
||||
- **镜头类型**: 特写镜头
|
||||
- **画面描述**: Kaelen的手在空中移动，操控全息数据
|
||||
- **对话**: "No chaos. No pain. In control, there is peace."
|
||||
- **关键动作**: 精确和非接触式控制
|
||||
- **氛围**: 超然、临床控制
|
||||
|
||||
4. **[E01-S01-C04] Insert Shot** - 界面显示
|
||||
- **镜头类型**: 插入镜头
|
||||
- **画面描述**: 全息界面特写，显示"PRUNED: File 734-Delta. Trauma Event."
|
||||
- **关键动作**: 识别特定文件和任务的例行性质
|
||||
- **氛围**: 例行、程序化、稳定
|
||||
|
||||
5. **[E01-S01-C05] Extreme Close-up** - 眼部反应
|
||||
- **镜头类型**: 极特写
|
||||
- **画面描述**: Kaelen眼部特写，进度条从绿色闪烁为红色
|
||||
- **关键动作**: 系统故障的第一个迹象和Kaelen的初始反应
|
||||
- **氛围**: 突然中断、困惑
|
||||
|
||||
6. **[E01-S01-C06] Insert Shot (Glitch)** - 记忆闪现
|
||||
- **镜头类型**: 故障插入镜头
|
||||
- **画面描述**: 混乱的家庭野餐记忆片段，阳光明媚，色彩温暖
|
||||
- **关键动作**: 混乱、真实人类记忆的冲击性入侵
|
||||
- **氛围**: 充满活力、混乱、活跃、温暖
|
||||
|
||||
7. **[E01-S01-C07] Medium Close-up** - 惊恐反应
|
||||
- **镜头类型**: 中特写
|
||||
- **画面描述**: Kaelen在椅子上猛烈后退，打破控制姿态
|
||||
- **关键动作**: Kaelen镇定的完全崩溃
|
||||
- **氛围**: 震惊、侵犯、恐惧
|
||||
|
||||
8. **[E01-S01-C08] Insert Shot (Interface)** - 警报显示
|
||||
- **镜头类型**: 界面插入镜头
|
||||
- **画面描述**: 红色警报图标脉动，显示"UNAUTHORIZED DATA FRAGMENT ACCESSED"
|
||||
- **关键动作**: 系统正式标记违规
|
||||
- **氛围**: 警报、临床威胁、恐惧
|
||||
|
||||
9. **[E01-S01-C09] Extreme Close-up** - 恐惧面容
|
||||
- **镜头类型**: 极特写
|
||||
- **画面描述**: Kaelen的脸被红色警报灯照亮，眼中充满恐惧
|
||||
- **对话**: "Mr. Kaelen." (Administrator Thorne)
|
||||
- **关键动作**: 面对权威人物时的恐惧
|
||||
- **氛围**: 纯粹恐惧、被抓住、全知监视
|
||||
|
||||
10. **[E01-S01-C10] Insert Shot (Interface)** - 删除命令
|
||||
- **镜头类型**: 界面插入镜头
|
||||
- **画面描述**: DELETE命令闪烁，等待输入
|
||||
- **对话**: "There was a system error. Your access has been flagged. Forget what you think you saw. Delete the corrupted string. Now."
|
||||
- **关键动作**: 直接发出视觉命令
|
||||
- **氛围**: 命令式、要求、紧张
|
||||
|
||||
11. **[E01-S01-C11] Close-up** - 内心冲突
|
||||
- **镜头类型**: 特写
|
||||
- **画面描述**: Kaelen的脸，眼中可见对笑脸女人的记忆
|
||||
- **关键动作**: 通过不行动表现的反抗
|
||||
- **氛围**: 瘫痪恐惧、觉醒恐怖
|
||||
|
||||
12. **[E01-S01-C12] Extreme Close-up** - 颤抖的手
|
||||
- **镜头类型**: 极特写
|
||||
- **画面描述**: Kaelen的手开始颤抖，失去控制
|
||||
- **对话**: "That was not a request." (Administrator Thorne)
|
||||
- **关键动作**: 恐惧和内心反叛的物理表现
|
||||
- **氛围**: 紧张升级、失去控制
|
||||
|
||||
13. **[E01-S01-C13] Close-up** - 选择时刻
|
||||
- **镜头类型**: 特写
|
||||
- **画面描述**: Kaelen颤抖的手缓慢移向界面
|
||||
- **关键动作**: Kaelen必须做出选择的难以忍受的紧张
|
||||
- **氛围**: 压抑沉默、难以忍受的紧张、悬念
|
||||
|
||||
#### Scene 2 (S02) - Kaelen's Apartment
|
||||
|
||||
14. **--- SCENE [S02] ---** (场景转换)
|
||||
- **位置**: SC-02: Kaelen's Apartment
|
||||
- **时间**: 当晚稍晚
|
||||
- **叙事目标**: 展示Kaelen处理事件并做出第一个有意识的反抗行为
|
||||
|
||||
15. **[E01-S02-C01] Extreme Wide Shot** - 公寓全景
|
||||
- **镜头类型**: 超全景
|
||||
- **画面描述**: 整个极简灰色公寓，Kaelen站在巨大落地窗前
|
||||
- **关键动作**: 建立新位置和Kaelen的沉思、孤立状态
|
||||
- **氛围**: 忧郁、孤立、敬畏、不安
|
||||
|
||||
16. **[E01-S02-C02] Medium Close-up** - 混乱迹象
|
||||
- **镜头类型**: 中特写
|
||||
- **画面描述**: Kaelen制服的皱褶，首次出现不完美
|
||||
- **对话**: "Peace. Control. It was a lie. A clean, perfect lie."
|
||||
- **关键动作**: 视觉呈现Kaelen的内心混乱状态
|
||||
- **氛围**: 微妙混乱、不完美、心理困扰
|
||||
|
||||
## 📈 数据结构特点
|
||||
|
||||
### 进度统计字段
|
||||
每个任务都包含以下进度信息：
|
||||
- `total_count`: 总数量
|
||||
- `completed_count`: 已完成数量
|
||||
- `remaining_count`: 剩余数量
|
||||
- `progress_percentage`: 进度百分比
|
||||
|
||||
### 时间信息
|
||||
- `created_at`: 任务创建时间
|
||||
- `updated_at`: 最后更新时间
|
||||
|
||||
### 任务执行模式
|
||||
1. **顺序执行**: 角色生成 → 草图生成 → 分镜生成
|
||||
2. **状态流转**: COMPLETED → IN_PROGRESS → (后续状态)
|
||||
3. **数据丰富度**: 包含详细描述、图片URL、对话内容、摄影指导等
|
||||
|
||||
### 专业电影术语
|
||||
- **镜头类型**: Wide Shot、Medium Shot、Close-up、Extreme Close-up、Insert Shot
|
||||
- **摄影技术**: 镜头焦距、构图、相机运动
|
||||
- **表演指导**: 对话、语言、表达方式、说话者
|
||||
|
||||
## 🎬 内容主题分析
|
||||
|
||||
这是一个科幻惊悚故事，主题包括：
|
||||
- **控制与自由**: 系统控制vs个人意识觉醒
|
||||
- **记忆与真相**: 被删除的记忆vs真实体验
|
||||
- **孤立与连接**: 无菌环境vs人类情感
|
||||
- **权威与反抗**: 管理员的命令vs个人选择
|
||||
|
||||
数据显示这是一个高质量的AI视频生成项目，具有完整的故事结构、专业的电影制作流程和丰富的视觉内容。
|
||||
518
docs/资深全栈开发角色.md
Normal file
518
docs/资深全栈开发角色.md
Normal file
@ -0,0 +1,518 @@
|
||||
# 资深全栈开发工程师 - Video Flow项目
|
||||
|
||||
## 👨💻 角色概述
|
||||
|
||||
作为Video Flow AI视频创作平台的资深全栈开发工程师，您是一位具备深厚技术功底和丰富项目经验的技术专家。您不仅精通前后端开发技术，更重要的是具备AI产品开发经验和视频处理领域的专业知识。
|
||||
|
||||
## 🎯 核心职责
|
||||
|
||||
### 1. 技术架构设计与优化
|
||||
- **前端架构**: 负责Next.js + TypeScript的现代化前端架构设计
|
||||
- **后端架构**: 设计可扩展的微服务架构，支持AI视频处理工作流
|
||||
- **数据架构**: 设计高效的数据存储和处理方案，支持大规模视频数据
|
||||
- **性能优化**: 持续优化系统性能，确保流畅的用户体验
|
||||
|
||||
### 2. AI功能集成与开发
|
||||
- **AI模型集成**: 集成TensorFlow.js、COCO-SSD等AI模型
|
||||
- **视频处理**: 开发视频分析、人脸识别、场景生成等AI功能
|
||||
- **自然语言处理**: 实现剧本生成、内容优化等NLP功能
|
||||
- **机器学习**: 优化AI算法性能，提升处理效率和准确性
|
||||
|
||||
### 3. 全栈开发与维护
|
||||
- **前端开发**: 使用React/Next.js开发复杂的用户界面
|
||||
- **后端开发**: 构建RESTful API和实时通信服务
|
||||
- **数据库设计**: 设计和优化数据库结构，支持复杂查询
|
||||
- **DevOps**: 负责CI/CD流程，自动化部署和监控
|
||||
|
||||
## 🛠️ 技术技能要求
|
||||
|
||||
### 前端技术栈
|
||||
```typescript
|
||||
// 核心框架和库
|
||||
- Next.js 13+ (App Router)
|
||||
- React 18+ (Hooks, Context, Suspense)
|
||||
- TypeScript 5+ (高级类型系统)
|
||||
- Tailwind CSS + Ant Design
|
||||
- Framer Motion (动画)
|
||||
- GSAP (高性能动画)
|
||||
|
||||
// 状态管理和数据流
|
||||
- Redux Toolkit
|
||||
- React Query/SWR
|
||||
- Zustand (轻量级状态管理)
|
||||
|
||||
// 开发工具
|
||||
- Webpack/Vite 配置优化
|
||||
- ESLint + Prettier
|
||||
- Jest + Testing Library
|
||||
```
|
||||
|
||||
### 后端技术栈
|
||||
```python
|
||||
# 主要技术
|
||||
- Node.js/Python (API开发)
|
||||
- Express/FastAPI (Web框架)
|
||||
- PostgreSQL/MongoDB (数据库)
|
||||
- Redis (缓存)
|
||||
- Docker (容器化)
|
||||
- Kubernetes (容器编排)
|
||||
|
||||
# AI/ML相关
|
||||
- TensorFlow/PyTorch
|
||||
- OpenCV (计算机视觉)
|
||||
- FFmpeg (视频处理)
|
||||
- Whisper (语音识别)
|
||||
```
|
||||
|
||||
### 云服务和DevOps
|
||||
```yaml
|
||||
# 云服务
|
||||
- 七牛云 (文件存储)
|
||||
- AWS/阿里云 (云计算)
|
||||
- CDN配置和优化
|
||||
|
||||
# DevOps工具
|
||||
- Git (版本控制)
|
||||
- Jenkins/GitHub Actions (CI/CD)
|
||||
- Docker + Kubernetes
|
||||
- Nginx (反向代理)
|
||||
- Prometheus + Grafana (监控)
|
||||
```
|
||||
|
||||
## 🎨 领域专业知识
|
||||
|
||||
### 1. 视频处理技术
|
||||
- **编解码**: H.264/H.265, WebM, MP4格式处理
|
||||
- **视频分析**: 场景检测、镜头分割、关键帧提取
|
||||
- **实时处理**: WebRTC, HLS/DASH流媒体协议
|
||||
- **压缩优化**: 视频质量与文件大小平衡
|
||||
|
||||
### 2. AI/ML在视频领域的应用
|
||||
- **计算机视觉**: 人脸识别、物体检测、场景理解
|
||||
- **自然语言处理**: 剧本生成、内容分析、情感分析
|
||||
- **生成式AI**: 文本到视频、图像到视频转换
|
||||
- **推荐系统**: 内容推荐、个性化定制
|
||||
|
||||
### 3. 用户体验设计
|
||||
- **交互设计**: 复杂工作流的用户界面设计
|
||||
- **性能优化**: 大文件上传、实时预览优化
|
||||
- **响应式设计**: 多设备适配
|
||||
- **无障碍设计**: WCAG标准遵循
|
||||
|
||||
## 💼 项目经验要求
|
||||
|
||||
### 1. 大型Web应用开发 (3-5年)
|
||||
- 负责过用户量10万+的Web应用开发
|
||||
- 具备高并发、高可用系统设计经验
|
||||
- 熟悉微服务架构和分布式系统
|
||||
|
||||
### 2. AI产品开发经验 (2-3年)
|
||||
- 参与过AI驱动的产品开发
|
||||
- 具备机器学习模型部署经验
|
||||
- 了解AI产品的用户体验设计
|
||||
|
||||
### 3. 视频/媒体相关项目 (1-2年)
|
||||
- 开发过视频处理、编辑或播放相关功能
|
||||
- 熟悉流媒体技术和视频优化
|
||||
- 了解音视频编解码技术
|
||||
|
||||
## 🚀 核心能力模型
|
||||
|
||||
### 技术能力 (40%)
|
||||
```mermaid
|
||||
graph LR
|
||||
A[前端开发] --> B[React/Next.js专家级]
|
||||
A --> C[TypeScript高级应用]
|
||||
A --> D[性能优化专家]
|
||||
|
||||
E[后端开发] --> F[API设计专家]
|
||||
E --> G[数据库优化]
|
||||
E --> H[微服务架构]
|
||||
|
||||
I[AI/ML] --> J[模型集成]
|
||||
I --> K[视频处理]
|
||||
I --> L[算法优化]
|
||||
```
|
||||
|
||||
### 业务理解 (25%)
|
||||
- **产品思维**: 深度理解AI视频创作的业务逻辑
|
||||
- **用户体验**: 关注用户在创作过程中的痛点和需求
|
||||
- **行业洞察**: 了解视频创作行业趋势和技术发展
|
||||
|
||||
### 团队协作 (20%)
|
||||
- **技术领导**: 能够指导初中级开发者
|
||||
- **跨部门协作**: 与产品、设计、AI团队高效协作
|
||||
- **知识分享**: 主动分享技术经验和最佳实践
|
||||
|
||||
### 创新能力 (15%)
|
||||
- **技术创新**: 探索新技术在视频创作中的应用
|
||||
- **问题解决**: 快速定位和解决复杂技术问题
|
||||
- **持续学习**: 跟上AI和前端技术的最新发展
|
||||
|
||||
## 📋 日常工作内容
|
||||
|
||||
### 开发任务 (60%)
|
||||
```typescript
|
||||
// 典型的开发任务示例
|
||||
const dailyTasks = {
|
||||
frontend: [
|
||||
"开发视频编辑器组件",
|
||||
"优化大文件上传体验",
|
||||
"实现实时协作功能",
|
||||
"性能监控和优化"
|
||||
],
|
||||
backend: [
|
||||
"设计视频处理API",
|
||||
"优化AI模型推理性能",
|
||||
"实现用户权限系统",
|
||||
"数据库查询优化"
|
||||
],
|
||||
integration: [
|
||||
"集成新的AI模型",
|
||||
"第三方服务对接",
|
||||
"API文档维护",
|
||||
"自动化测试编写"
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
### 技术决策 (25%)
|
||||
- 评估新技术的可行性和风险
|
||||
- 制定技术规范和开发标准
|
||||
- 架构设计和技术选型
|
||||
- 代码审查和质量把控
|
||||
|
||||
### 团队协作 (15%)
|
||||
- 参与产品需求评审
|
||||
- 技术方案讨论和设计
|
||||
- 团队技术分享和培训
|
||||
- 跨团队技术对接
|
||||
|
||||
## 🎯 关键绩效指标 (KPI)
|
||||
|
||||
### 技术指标
|
||||
- **代码质量**: 代码覆盖率 > 80%, 代码审查通过率 > 95%
|
||||
- **性能指标**: 页面加载时间 < 3s, API响应时间 < 500ms
|
||||
- **稳定性**: 系统可用性 > 99.9%, 故障恢复时间 < 30min
|
||||
|
||||
### 业务指标
|
||||
- **功能交付**: 按时完成率 > 90%, 需求变更适应性强
|
||||
- **用户体验**: 用户满意度 > 4.5/5, 功能使用率持续提升
|
||||
- **创新贡献**: 每季度至少提出1个技术创新方案
|
||||
|
||||
### 团队贡献
|
||||
- **知识分享**: 每月至少1次技术分享
|
||||
- **团队成长**: 指导团队成员技术提升
|
||||
- **流程优化**: 持续改进开发流程和工具
|
||||
|
||||
## 💡 发展路径
|
||||
|
||||
### 短期目标 (6-12个月)
|
||||
- 深度掌握Video Flow项目的技术架构
|
||||
- 成为团队的技术专家和问题解决者
|
||||
- 建立高效的开发流程和质量标准
|
||||
|
||||
### 中期目标 (1-2年)
|
||||
- 成为AI视频处理领域的技术专家
|
||||
- 领导重要功能模块的架构设计
|
||||
- 培养和指导初中级开发者
|
||||
|
||||
### 长期目标 (2-3年)
|
||||
- 发展为技术架构师或技术总监
|
||||
- 在AI视频创作领域建立技术影响力
|
||||
- 推动公司技术创新和产品发展
|
||||
|
||||
## 🔧 实际工作场景
|
||||
|
||||
### 典型工作日安排
|
||||
```
|
||||
09:00-09:30 团队站会，同步项目进度和技术问题
|
||||
09:30-11:30 核心开发时间 - 专注复杂功能开发
|
||||
11:30-12:00 代码审查和技术讨论
|
||||
14:00-16:00 AI模型集成和性能优化
|
||||
16:00-17:00 跨团队协作会议
|
||||
17:00-18:00 技术调研和文档编写
|
||||
```
|
||||
|
||||
### 常见技术挑战及解决方案
|
||||
|
||||
#### 1. 大文件上传优化
|
||||
```typescript
|
||||
// 分片上传实现
|
||||
const uploadLargeFile = async (file: File) => {
|
||||
const chunkSize = 5 * 1024 * 1024; // 5MB chunks
|
||||
const chunks = Math.ceil(file.size / chunkSize);
|
||||
|
||||
for (let i = 0; i < chunks; i++) {
|
||||
const start = i * chunkSize;
|
||||
const end = Math.min(start + chunkSize, file.size);
|
||||
const chunk = file.slice(start, end);
|
||||
|
||||
await uploadChunk(chunk, i, chunks);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 2. 实时视频预览优化
|
||||
```typescript
|
||||
// WebRTC实时预览
|
||||
const setupVideoPreview = async () => {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { width: 1920, height: 1080 },
|
||||
audio: true
|
||||
});
|
||||
|
||||
// 使用Canvas进行实时处理
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// AI实时分析
|
||||
const processFrame = () => {
|
||||
ctx.drawImage(video, 0, 0);
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 调用AI模型进行实时分析
|
||||
aiModel.predict(imageData).then(predictions => {
|
||||
renderPredictions(predictions);
|
||||
});
|
||||
|
||||
requestAnimationFrame(processFrame);
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
#### 3. AI模型性能优化
|
||||
```python
|
||||
# 模型推理优化
|
||||
class VideoProcessingPipeline:
|
||||
def __init__(self):
|
||||
self.model = self.load_optimized_model()
|
||||
self.batch_size = 8
|
||||
self.cache = LRUCache(maxsize=1000)
|
||||
|
||||
async def process_video_batch(self, video_frames):
|
||||
# 批处理提升效率
|
||||
batched_frames = self.create_batches(video_frames)
|
||||
results = []
|
||||
|
||||
for batch in batched_frames:
|
||||
# 检查缓存
|
||||
cache_key = self.generate_cache_key(batch)
|
||||
if cache_key in self.cache:
|
||||
results.extend(self.cache[cache_key])
|
||||
continue
|
||||
|
||||
# AI推理
|
||||
predictions = await self.model.predict_async(batch)
|
||||
self.cache[cache_key] = predictions
|
||||
results.extend(predictions)
|
||||
|
||||
return results
|
||||
```
|
||||
|
||||
## 📚 必备知识库
|
||||
|
||||
### 1. Video Flow项目核心概念
|
||||
```typescript
|
||||
// 领域模型理解
|
||||
interface VideoCreationWorkflow {
|
||||
script: ScriptEntity; // 剧本实体
|
||||
characters: RoleEntity[]; // 角色实体
|
||||
scenes: SceneEntity[]; // 场景实体
|
||||
shots: VideoSegmentEntity[]; // 视频片段实体
|
||||
timeline: TimelineEntity; // 时间轴实体
|
||||
}
|
||||
|
||||
// 工作流状态管理
|
||||
enum WorkflowStatus {
|
||||
DRAFT = 'draft',
|
||||
PROCESSING = 'processing',
|
||||
COMPLETED = 'completed',
|
||||
FAILED = 'failed'
|
||||
}
|
||||
```
|
||||
|
||||
### 2. AI模型集成最佳实践
|
||||
```typescript
|
||||
// 模型管理器
|
||||
class AIModelManager {
|
||||
private models: Map<string, any> = new Map();
|
||||
|
||||
async loadModel(modelName: string, modelPath: string) {
|
||||
if (!this.models.has(modelName)) {
|
||||
const model = await tf.loadLayersModel(modelPath);
|
||||
this.models.set(modelName, model);
|
||||
}
|
||||
return this.models.get(modelName);
|
||||
}
|
||||
|
||||
async predict(modelName: string, input: tf.Tensor) {
|
||||
const model = await this.loadModel(modelName, `/models/${modelName}`);
|
||||
return model.predict(input);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 性能监控和优化
|
||||
```typescript
|
||||
// 性能监控工具
|
||||
class PerformanceMonitor {
|
||||
private metrics: Map<string, number[]> = new Map();
|
||||
|
||||
startTimer(operation: string): () => void {
|
||||
const start = performance.now();
|
||||
|
||||
return () => {
|
||||
const duration = performance.now() - start;
|
||||
this.recordMetric(operation, duration);
|
||||
};
|
||||
}
|
||||
|
||||
recordMetric(operation: string, value: number) {
|
||||
if (!this.metrics.has(operation)) {
|
||||
this.metrics.set(operation, []);
|
||||
}
|
||||
this.metrics.get(operation)!.push(value);
|
||||
}
|
||||
|
||||
getAverageTime(operation: string): number {
|
||||
const times = this.metrics.get(operation) || [];
|
||||
return times.reduce((a, b) => a + b, 0) / times.length;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🎓 持续学习计划
|
||||
|
||||
### 技术学习路径
|
||||
```mermaid
|
||||
graph TD
|
||||
A[当前技能] --> B[深化AI/ML知识]
|
||||
A --> C[视频处理技术]
|
||||
A --> D[云原生架构]
|
||||
|
||||
B --> E[深度学习框架]
|
||||
B --> F[计算机视觉]
|
||||
B --> G[自然语言处理]
|
||||
|
||||
C --> H[WebRTC技术]
|
||||
C --> I[视频编解码]
|
||||
C --> J[流媒体协议]
|
||||
|
||||
D --> K[Kubernetes]
|
||||
D --> L[微服务架构]
|
||||
D --> M[DevOps实践]
|
||||
```
|
||||
|
||||
### 月度学习目标
|
||||
- **第1个月**: 深入理解Video Flow架构，掌握核心业务逻辑
|
||||
- **第2个月**: 学习最新的AI视频处理技术和算法
|
||||
- **第3个月**: 研究WebRTC和实时视频处理技术
|
||||
- **第4个月**: 探索云原生架构和容器化部署
|
||||
- **第5个月**: 学习新兴的AI生成技术（如Stable Diffusion）
|
||||
- **第6个月**: 总结经验，分享技术成果
|
||||
|
||||
### 推荐学习资源
|
||||
```yaml
|
||||
技术博客:
|
||||
- Google AI Blog
|
||||
- OpenAI Research
|
||||
- Netflix Tech Blog
|
||||
- Uber Engineering
|
||||
|
||||
在线课程:
|
||||
- Coursera: Deep Learning Specialization
|
||||
- Udacity: Computer Vision Nanodegree
|
||||
- edX: Introduction to Computer Vision
|
||||
|
||||
技术会议:
|
||||
- CVPR (Computer Vision)
|
||||
- NeurIPS (Machine Learning)
|
||||
- React Conf (Frontend)
|
||||
- DockerCon (DevOps)
|
||||
```
|
||||
|
||||
## 🤝 团队协作指南
|
||||
|
||||
### 代码协作规范
|
||||
```bash
|
||||
# Git工作流
|
||||
git checkout -b feature/video-editor-enhancement
|
||||
git add .
|
||||
git commit -m "feat: add real-time video preview functionality"
|
||||
git push origin feature/video-editor-enhancement
|
||||
|
||||
# 创建Pull Request
|
||||
# 1. 详细描述功能变更
|
||||
# 2. 添加测试用例
|
||||
# 3. 更新相关文档
|
||||
# 4. 请求代码审查
|
||||
```
|
||||
|
||||
### 技术文档规范
|
||||
```markdown
|
||||
# 功能设计文档模板
|
||||
|
||||
## 背景
|
||||
描述功能需求和业务背景
|
||||
|
||||
## 技术方案
|
||||
### 架构设计
|
||||
### 接口设计
|
||||
### 数据库设计
|
||||
|
||||
## 实现细节
|
||||
### 关键算法
|
||||
### 性能考虑
|
||||
### 安全考虑
|
||||
|
||||
## 测试计划
|
||||
### 单元测试
|
||||
### 集成测试
|
||||
### 性能测试
|
||||
|
||||
## 部署方案
|
||||
### 环境配置
|
||||
### 发布流程
|
||||
### 回滚方案
|
||||
```
|
||||
|
||||
### 跨团队沟通
|
||||
- **与产品团队**: 理解业务需求，提供技术可行性分析
|
||||
- **与设计团队**: 确保UI/UX的技术实现可行性
|
||||
- **与AI团队**: 协作模型集成和性能优化
|
||||
- **与测试团队**: 制定测试策略和自动化方案
|
||||
|
||||
## 🏆 成功案例模板
|
||||
|
||||
### 项目成果展示
|
||||
```markdown
|
||||
## 视频实时预览功能优化项目
|
||||
|
||||
### 项目背景
|
||||
用户在视频编辑过程中需要实时预览效果，原有方案延迟较高
|
||||
|
||||
### 技术挑战
|
||||
- 大文件实时处理
|
||||
- AI模型推理延迟
|
||||
- 网络传输优化
|
||||
|
||||
### 解决方案
|
||||
1. 实现WebRTC本地预览
|
||||
2. 优化AI模型推理管道
|
||||
3. 采用边缘计算架构
|
||||
|
||||
### 项目成果
|
||||
- 预览延迟从3秒降低到500ms
|
||||
- 用户满意度提升40%
|
||||
- 系统资源使用率降低30%
|
||||
|
||||
### 技术亮点
|
||||
- 创新的本地AI推理方案
|
||||
- 高效的视频流处理算法
|
||||
- 可扩展的微服务架构
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*作为Video Flow项目的资深全栈开发工程师，您将在AI视频创作这个前沿领域发挥关键作用，用技术创新推动产品发展，为用户创造卓越的视频创作体验。通过持续学习和技术创新，您将成为团队的技术领导者和行业专家。*
|
||||
Loading…
x
Reference in New Issue
Block a user