xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

接口bug

Browse Source
This commit is contained in:
海龙 2025-08-05 20:45:02 +08:00
parent 12932a9f67
commit 77f82537a9
4 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
api/constants.ts
View File

@ -1 +1,2 @@
export const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL export const BASE_URL = "https://77.smartvideo.py.qikongjian.com"
// process.env.NEXT_PUBLIC_API_BASE_URL

7
api/resources.ts
View File

@ -1,5 +1,4 @@
import { ApiResponse } from './common'; import { ApiResponse } from './common';
import { BASE_URL } from './constants';
import { post } from './request'; import { post } from './request';
// 资源列表请求参数 // 资源列表请求参数
@ -17,9 +16,9 @@ export interface Resource {
script_id: number; script_id: number;
created_at: string; created_at: string;
} }
// 获取资源列表 - 按创建者筛选 // 获取资源列表 - 按创建者筛选
export const getResourcesList = async (data: ResourcesListRequest): Promise<ApiResponse<Resource[]>> => { export const getResourcesList = async (data: ResourcesListRequest): Promise<ApiResponse<Resource[]>> => {
return post<ApiResponse<Resource[]>>(BASE_URL+'/resources/list', data); return post<ApiResponse<Resource[]>>('/resources/list', data);
}; };

2
api/video_flow.ts
View File

@ -591,7 +591,7 @@ export const generateScriptStream = (
onData: (data: any) => void onData: (data: any) => void
): Promise<void> => { ): Promise<void> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
streamJsonPost("/text_to_script/generate_script_stream", request, (data) => { streamJsonPost("/text_to_script/stream", request, (data) => {
switch(data.status) { switch(data.status) {
case 'streaming': case 'streaming':
onData(data.content); onData(data.content);

82
components/pages/work-flow/media-viewer.tsx
View File

@ -46,11 +46,11 @@ export function MediaViewer({
}: MediaViewerProps) { }: MediaViewerProps) {
const mainVideoRef = useRef<HTMLVideoElement>(null); const mainVideoRef = useRef<HTMLVideoElement>(null);
const finalVideoRef = useRef<HTMLVideoElement>(null); const finalVideoRef = useRef<HTMLVideoElement>(null);
// 音量控制状态 // 音量控制状态
const [isMuted, setIsMuted] = useState(false); const [isMuted, setIsMuted] = useState(false);
const [volume, setVolume] = useState(0.8); const [volume, setVolume] = useState(0.8);
// 最终视频控制状态 // 最终视频控制状态
const [isFinalVideoPlaying, setIsFinalVideoPlaying] = useState(true); const [isFinalVideoPlaying, setIsFinalVideoPlaying] = useState(true);
const [isFullscreen, setIsFullscreen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);
@ -113,7 +113,7 @@ export function MediaViewer({
if (finalVideoRef.current) { if (finalVideoRef.current) {
setFinalVideoReady(true); setFinalVideoReady(true);
applyVolumeSettings(finalVideoRef.current); applyVolumeSettings(finalVideoRef.current);
// 如果当前状态是应该播放的，尝试播放 // 如果当前状态是应该播放的，尝试播放
if (isFinalVideoPlaying) { if (isFinalVideoPlaying) {
finalVideoRef.current.play().catch(error => { finalVideoRef.current.play().catch(error => {
@ -237,7 +237,7 @@ export function MediaViewer({
onClick={toggleMute} onClick={toggleMute}
size="sm" size="sm"
/> />
{/* 音量滑块 - 一直显示 */} {/* 音量滑块 - 一直显示 */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="relative"> <div className="relative">
@ -249,11 +249,11 @@ export function MediaViewer({
value={volume} value={volume}
onChange={(e) => handleVolumeChange(parseFloat(e.target.value))} onChange={(e) => handleVolumeChange(parseFloat(e.target.value))}
className="w-16 h-1 bg-white/20 rounded-lg appearance-none cursor-pointer className="w-16 h-1 bg-white/20 rounded-lg appearance-none cursor-pointer
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-lg [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-lg
[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full
[&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:cursor-pointer
[&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:shadow-lg" [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:shadow-lg"
style={{ style={{
background: `linear-gradient(to right, white 0%, white ${volume * 100}%, rgba(255,255,255,0.2) ${volume * 100}%, rgba(255,255,255,0.2) 100%)` background: `linear-gradient(to right, white 0%, white ${volume * 100}%, rgba(255,255,255,0.2) ${volume * 100}%, rgba(255,255,255,0.2) 100%)`
@ -273,9 +273,9 @@ export function MediaViewer({
const finalVideo = final || { const finalVideo = final || {
url: 'https://cdn.qikongjian.com/videos/1750389908_37d4fffa-8516-43a3-a423-fc0274f40e8a_text_to_video_0.mp4' url: 'https://cdn.qikongjian.com/videos/1750389908_37d4fffa-8516-43a3-a423-fc0274f40e8a_text_to_video_0.mp4'
}; };
return ( return (
<div <div
className="relative w-full h-full rounded-lg overflow-hidden" className="relative w-full h-full rounded-lg overflow-hidden"
key={`render-video-${currentStep}`} key={`render-video-${currentStep}`}
onMouseEnter={() => onControlsChange(true)} onMouseEnter={() => onControlsChange(true)}
@ -297,12 +297,12 @@ export function MediaViewer({
muted muted
/> />
</motion.div> </motion.div>
{/* 最终成片视频 */} {/* 最终成片视频 */}
<motion.div <motion.div
initial={{ clipPath: "inset(0 50% 0 50%)", filter: "blur(10px)" }} initial={{ clipPath: "inset(0 50% 0 50%)", filter: "blur(10px)" }}
animate={{ clipPath: "inset(0 0% 0 0%)", filter: "blur(0px)" }} animate={{ clipPath: "inset(0 0% 0 0%)", filter: "blur(0px)" }}
transition={{ transition={{
clipPath: { duration: 1.2, ease: [0.43, 0.13, 0.23, 0.96] }, clipPath: { duration: 1.2, ease: [0.43, 0.13, 0.23, 0.96] },
filter: { duration: 0.6, delay: 0.3 } filter: { duration: 0.6, delay: 0.3 }
}} }}
@ -342,9 +342,9 @@ export function MediaViewer({
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
{/* 视频信息浮层 */} {/* 视频信息浮层 */}
<motion.div <motion.div
className="absolute bottom-0 left-0 right-0 z-10 p-4 bg-gradient-to-t from-black/80 via-black/40 to-transparent" className="absolute bottom-0 left-0 right-0 z-10 p-4 bg-gradient-to-t from-black/80 via-black/40 to-transparent"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
@ -354,7 +354,7 @@ export function MediaViewer({
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<motion.div <motion.div
className="w-2 h-2 rounded-full bg-emerald-500" className="w-2 h-2 rounded-full bg-emerald-500"
animate={{ animate={{
scale: [1, 1.2, 1], scale: [1, 1.2, 1],
opacity: [1, 0.6, 1] opacity: [1, 0.6, 1]
}} }}
@ -386,7 +386,7 @@ export function MediaViewer({
{isFinalVideoPlaying && ( {isFinalVideoPlaying && (
<motion.div <motion.div
className="absolute inset-0 rounded-full blur-md" className="absolute inset-0 rounded-full blur-md"
animate={{ animate={{
scale: [1, 1.2, 1], scale: [1, 1.2, 1],
opacity: [0.5, 0.8, 0.5] opacity: [0.5, 0.8, 0.5]
}} }}
@ -404,10 +404,10 @@ export function MediaViewer({
size="sm" size="sm"
/> />
</motion.div> </motion.div>
{/* 音量控制 */} {/* 音量控制 */}
{renderVolumeControls()} {renderVolumeControls()}
{/* 全屏按钮 */} {/* 全屏按钮 */}
<GlassIconButton <GlassIconButton
icon={isFullscreen ? Minimize : Maximize} icon={isFullscreen ? Minimize : Maximize}
@ -437,9 +437,9 @@ export function MediaViewer({
const currentSketch = taskSketch[currentSketchIndex]; const currentSketch = taskSketch[currentSketchIndex];
const defaultBgColors = ['RGB(45, 50, 70)', 'RGB(75, 80, 100)', 'RGB(105, 110, 130)']; const defaultBgColors = ['RGB(45, 50, 70)', 'RGB(75, 80, 100)', 'RGB(105, 110, 130)'];
const bgColors = currentSketch?.bg_rgb || defaultBgColors; const bgColors = currentSketch?.bg_rgb || defaultBgColors;
return ( return (
<div <div
className="relative w-full h-full rounded-lg" className="relative w-full h-full rounded-lg"
onMouseEnter={() => onControlsChange(true)} onMouseEnter={() => onControlsChange(true)}
onMouseLeave={() => onControlsChange(false)} onMouseLeave={() => onControlsChange(false)}
@ -447,20 +447,20 @@ export function MediaViewer({
{/* 只在生成过程中或没有视频时使用ProgressiveReveal */} {/* 只在生成过程中或没有视频时使用ProgressiveReveal */}
{(isGeneratingVideo || !taskVideos[currentSketchIndex]) ? ( {(isGeneratingVideo || !taskVideos[currentSketchIndex]) ? (
taskVideos[currentSketchIndex] ? ( taskVideos[currentSketchIndex] ? (
<ProgressiveReveal <ProgressiveReveal
key={`generte-video-${currentSketchIndex}`} key={`generte-video-${currentSketchIndex}`}
className="w-full h-full rounded-lg" className="w-full h-full rounded-lg"
revealDuration={0.8} revealDuration={0.8}
blurDuration={0.3} blurDuration={0.3}
initialBlur={10} initialBlur={10}
customVariants={{ customVariants={{
hidden: { hidden: {
opacity: 0, opacity: 0,
scale: 0.9, scale: 0.9,
filter: "blur(30px)", filter: "blur(30px)",
clipPath: "inset(0 100% 0 0)" clipPath: "inset(0 100% 0 0)"
}, },
visible: { visible: {
opacity: 1, opacity: 1,
scale: 1, scale: 1,
filter: "blur(0px)", filter: "blur(0px)",
@ -492,7 +492,7 @@ export function MediaViewer({
alt="background" alt="background"
/> />
</div> </div>
{/* 视频 */} {/* 视频 */}
<motion.div <motion.div
initial={{ clipPath: "inset(0 100% 0 0)" }} initial={{ clipPath: "inset(0 100% 0 0)" }}
@ -530,7 +530,7 @@ export function MediaViewer({
) : ( ) : (
/* 生成完成后直接显示视频，不使用ProgressiveReveal */ /* 生成完成后直接显示视频，不使用ProgressiveReveal */
<div className="relative w-full h-full"> <div className="relative w-full h-full">
{/* 视频 修复播放没有声音 */} {/* 视频 修复播放没有声音 */}
<video <video
ref={mainVideoRef} ref={mainVideoRef}
@ -589,7 +589,7 @@ export function MediaViewer({
{isVideoPlaying && ( {isVideoPlaying && (
<motion.div <motion.div
className="absolute inset-0 rounded-full blur-md" className="absolute inset-0 rounded-full blur-md"
animate={{ animate={{
scale: [1, 1.2, 1], scale: [1, 1.2, 1],
opacity: [0.5, 0.8, 0.5] opacity: [0.5, 0.8, 0.5]
}} }}
@ -607,7 +607,7 @@ export function MediaViewer({
size="sm" size="sm"
/> />
</motion.div> </motion.div>
{/* 音量控制 */} {/* 音量控制 */}
{renderVolumeControls()} {renderVolumeControls()}
</motion.div> </motion.div>
@ -622,9 +622,9 @@ export function MediaViewer({
const currentSketch = taskSketch[currentSketchIndex]; const currentSketch = taskSketch[currentSketchIndex];
const defaultBgColors = ['RGB(45, 50, 70)', 'RGB(75, 80, 100)', 'RGB(105, 110, 130)']; const defaultBgColors = ['RGB(45, 50, 70)', 'RGB(75, 80, 100)', 'RGB(105, 110, 130)'];
const bgColors = currentSketch?.bg_rgb || defaultBgColors; const bgColors = currentSketch?.bg_rgb || defaultBgColors;
return ( return (
<div <div
className="relative w-full h-full rounded-lg" className="relative w-full h-full rounded-lg"
onMouseEnter={() => onControlsChange(true)} onMouseEnter={() => onControlsChange(true)}
onMouseLeave={() => onControlsChange(false)} onMouseLeave={() => onControlsChange(false)}
@ -634,17 +634,17 @@ export function MediaViewer({
currentSketch ? ( currentSketch ? (
<ProgressiveReveal <ProgressiveReveal
key={`sketch-generating-${currentSketchIndex}`} key={`sketch-generating-${currentSketchIndex}`}
className="w-full h-full rounded-lg" className="w-full h-full rounded-lg"
revealDuration={0.8} revealDuration={0.8}
blurDuration={0.3} blurDuration={0.3}
initialBlur={10} initialBlur={10}
customVariants={{ customVariants={{
hidden: { hidden: {
opacity: 0, opacity: 0,
scale: 0.9, scale: 0.9,
filter: "blur(30px)" filter: "blur(30px)"
}, },
visible: { visible: {
opacity: 1, opacity: 1,
scale: 1, scale: 1,
filter: "blur(0px)", filter: "blur(0px)",
@ -675,7 +675,7 @@ export function MediaViewer({
) : ( ) : (
<div className="w-full h-full flex items-center justify-center rounded-lg overflow-hidden relative"> <div className="w-full h-full flex items-center justify-center rounded-lg overflow-hidden relative">
{/* 动态渐变背景 */} {/* 动态渐变背景 */}
<motion.div <motion.div
className={`absolute inset-0 bg-gradient-to-r from-[${bgColors[0]}] via-[${bgColors[1]}] to-[${bgColors[2]}]`} className={`absolute inset-0 bg-gradient-to-r from-[${bgColors[0]}] via-[${bgColors[1]}] to-[${bgColors[2]}]`}
animate={{ animate={{
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"], backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
@ -690,7 +690,7 @@ export function MediaViewer({
}} }}
/> />
{/* 动态光效 */} {/* 动态光效 */}
<motion.div <motion.div
className="absolute inset-0 opacity-50" className="absolute inset-0 opacity-50"
style={{ style={{
background: "radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, transparent 50%)", background: "radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, transparent 50%)",
@ -704,7 +704,7 @@ export function MediaViewer({
ease: "easeInOut" ease: "easeInOut"
}} }}
/> />
<motion.div <motion.div
className="flex flex-col items-center gap-4 relative z-10" className="flex flex-col items-center gap-4 relative z-10"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
@ -713,11 +713,11 @@ export function MediaViewer({
<div className="relative"> <div className="relative">
<motion.div <motion.div
className="absolute -inset-4 bg-gradient-to-r from-white via-sky-200 to-cyan-200 rounded-full opacity-60 blur-xl" className="absolute -inset-4 bg-gradient-to-r from-white via-sky-200 to-cyan-200 rounded-full opacity-60 blur-xl"
animate={{ animate={{
scale: [1, 1.2, 1], scale: [1, 1.2, 1],
rotate: [0, 180, 360], rotate: [0, 180, 360],
}} }}
transition={{ transition={{
duration: 4, duration: 4,
repeat: Infinity, repeat: Infinity,
ease: "linear" ease: "linear"
@ -727,7 +727,7 @@ export function MediaViewer({
</motion.div> </motion.div>
</div> </div>
) )
) : ( ) : (
/* 生成完成后直接显示图片，不使用ProgressiveReveal */ /* 生成完成后直接显示图片，不使用ProgressiveReveal */
<img <img
@ -775,7 +775,7 @@ export function MediaViewer({
{isPlaying && ( {isPlaying && (
<motion.div <motion.div
className="absolute inset-0 rounded-full bg-blue-500/30 blur-md" className="absolute inset-0 rounded-full bg-blue-500/30 blur-md"
animate={{ animate={{
scale: [1, 1.2, 1], scale: [1, 1.2, 1],
opacity: [0.5, 0.8, 0.5] opacity: [0.5, 0.8, 0.5]
}} }}
@ -805,7 +805,7 @@ export function MediaViewer({
return ( return (
<div className="relative w-full h-full bg-white/10 rounded-lg overflow-hidden p-2"> <div className="relative w-full h-full bg-white/10 rounded-lg overflow-hidden p-2">
{ {
scriptData ? ( mockScriptData ? (
<ScriptRenderer data={mockScriptData} /> <ScriptRenderer data={mockScriptData} />
) : ( ) : (
<div className="flex gap-2 w-full h-full"> <div className="flex gap-2 w-full h-full">
@ -838,4 +838,4 @@ export function MediaViewer({
} }
return renderSketchContent(); return renderSketchContent();
} }