forked from 77media/video-flow
处理编译
This commit is contained in:
Xin Wang
parent
f6018e7f46
commit
3f61f0ef7e
@ -1,12 +1,9 @@
|
|||||||
import './globals.css';
|
import './globals.css';
|
||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
import { Inter } from 'next/font/google';
|
|
||||||
import { ThemeProvider } from '@/components/theme-provider';
|
import { ThemeProvider } from '@/components/theme-provider';
|
||||||
import { Toaster } from '@/components/ui/sonner';
|
import { Toaster } from '@/components/ui/sonner';
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin'] });
|
|
||||||
|
|
||||||
// Import the OAuthCallbackHandler dynamically to ensure it only runs on the client
|
// Import the OAuthCallbackHandler dynamically to ensure it only runs on the client
|
||||||
const OAuthCallbackHandler = dynamic(
|
const OAuthCallbackHandler = dynamic(
|
||||||
() => import('@/components/ui/oauth-callback-handler'),
|
() => import('@/components/ui/oauth-callback-handler'),
|
||||||
@ -25,7 +22,7 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<body className={inter.className}>
|
<body className="font-sans antialiased">
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
attribute="class"
|
attribute="class"
|
||||||
defaultTheme="dark"
|
defaultTheme="dark"
|
||||||
|
|||||||
224
components/pages/history-page.tsx
Normal file
224
components/pages/history-page.tsx
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
Video,
|
||||||
|
Calendar,
|
||||||
|
Eye,
|
||||||
|
Edit,
|
||||||
|
Trash2,
|
||||||
|
MoreHorizontal,
|
||||||
|
Play
|
||||||
|
} from 'lucide-react';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger
|
||||||
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
|
||||||
|
interface HistoryItem {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
type: 'script-to-video' | 'video-to-video';
|
||||||
|
status: 'completed' | 'processing' | 'failed';
|
||||||
|
createdAt: string;
|
||||||
|
duration?: string;
|
||||||
|
thumbnail?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HistoryPage() {
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
|
||||||
|
const [filteredItems, setFilteredItems] = useState<HistoryItem[]>([]);
|
||||||
|
|
||||||
|
// Mock data - replace with actual API call
|
||||||
|
useEffect(() => {
|
||||||
|
const mockData: HistoryItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Sample Script Video",
|
||||||
|
type: "script-to-video",
|
||||||
|
status: "completed",
|
||||||
|
createdAt: "2024-01-15",
|
||||||
|
duration: "2:30",
|
||||||
|
thumbnail: "/assets/empty_video.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Video Enhancement Project",
|
||||||
|
type: "video-to-video",
|
||||||
|
status: "processing",
|
||||||
|
createdAt: "2024-01-14",
|
||||||
|
duration: "1:45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "Marketing Video",
|
||||||
|
type: "script-to-video",
|
||||||
|
status: "completed",
|
||||||
|
createdAt: "2024-01-13",
|
||||||
|
duration: "3:15",
|
||||||
|
thumbnail: "/assets/empty_video.png"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
setHistoryItems(mockData);
|
||||||
|
setFilteredItems(mockData);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Filter items based on search term
|
||||||
|
useEffect(() => {
|
||||||
|
const filtered = historyItems.filter(item =>
|
||||||
|
item.title.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
setFilteredItems(filtered);
|
||||||
|
}, [searchTerm, historyItems]);
|
||||||
|
|
||||||
|
const getStatusBadgeVariant = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'completed':
|
||||||
|
return 'default';
|
||||||
|
case 'processing':
|
||||||
|
return 'secondary';
|
||||||
|
case 'failed':
|
||||||
|
return 'destructive';
|
||||||
|
default:
|
||||||
|
return 'default';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTypeIcon = (type: string) => {
|
||||||
|
return type === 'script-to-video' ? '📝' : '🎥';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-white">Project History</h1>
|
||||||
|
<p className="text-white/70">View and manage your video projects</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search and Filter */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
|
||||||
|
<Input
|
||||||
|
placeholder="Search projects..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="pl-10 bg-white/5 border-white/20 text-white placeholder:text-white/40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
|
||||||
|
<Filter className="h-4 w-4 mr-2" />
|
||||||
|
Filter
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project Grid */}
|
||||||
|
{filteredItems.length === 0 ? (
|
||||||
|
<Card className="p-12 text-center bg-white/5 border-white/10">
|
||||||
|
<Video className="h-12 w-12 text-white/40 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-white/70 mb-2">
|
||||||
|
{searchTerm ? 'No projects found' : 'No projects yet'}
|
||||||
|
</h3>
|
||||||
|
<p className="text-white/50">
|
||||||
|
{searchTerm
|
||||||
|
? 'Try adjusting your search terms'
|
||||||
|
: 'Create your first video project to see it here'
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{filteredItems.map((item) => (
|
||||||
|
<Card key={item.id} className="bg-white/5 border-white/10 overflow-hidden hover:bg-white/10 transition-colors">
|
||||||
|
{/* Thumbnail */}
|
||||||
|
<div className="aspect-video bg-gradient-to-br from-purple-900/20 to-blue-900/20 relative">
|
||||||
|
{item.thumbnail ? (
|
||||||
|
<img
|
||||||
|
src={item.thumbnail}
|
||||||
|
alt={item.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center h-full">
|
||||||
|
<Video className="h-12 w-12 text-white/40" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Play overlay */}
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/50">
|
||||||
|
<Button size="sm" className="bg-white/20 hover:bg-white/30">
|
||||||
|
<Play className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Type indicator */}
|
||||||
|
<div className="absolute top-2 left-2">
|
||||||
|
<span className="text-lg">{getTypeIcon(item.type)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Duration */}
|
||||||
|
{item.duration && (
|
||||||
|
<div className="absolute bottom-2 right-2 bg-black/70 px-2 py-1 rounded text-xs text-white">
|
||||||
|
{item.duration}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex items-start justify-between mb-2">
|
||||||
|
<h3 className="font-medium text-white truncate flex-1" title={item.title}>
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-white/60 hover:text-white">
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Eye className="h-4 w-4 mr-2" />
|
||||||
|
View
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>
|
||||||
|
<Edit className="h-4 w-4 mr-2" />
|
||||||
|
Edit
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem className="text-red-500">
|
||||||
|
<Trash2 className="h-4 w-4 mr-2" />
|
||||||
|
Delete
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-white/60">
|
||||||
|
<Calendar className="h-3 w-3" />
|
||||||
|
{item.createdAt}
|
||||||
|
</div>
|
||||||
|
<Badge variant={getStatusBadgeVariant(item.status)}>
|
||||||
|
{item.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
168
components/pages/script-to-video.tsx
Normal file
168
components/pages/script-to-video.tsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { ArrowLeft, Loader2 } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { ModeEnum, ResolutionEnum } from "@/api/enums";
|
||||||
|
import { createScriptEpisode, CreateScriptEpisodeRequest, updateScriptEpisode, UpdateScriptEpisodeRequest } from "@/api/script_episode";
|
||||||
|
import { convertScriptToScene } from "@/api/video_flow";
|
||||||
|
|
||||||
|
export function ScriptToVideo() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [script, setScript] = useState('');
|
||||||
|
const [selectedMode, setSelectedMode] = useState<ModeEnum>(ModeEnum.AUTOMATIC);
|
||||||
|
const [selectedResolution, setSelectedResolution] = useState<ResolutionEnum>(ResolutionEnum.HD_720P);
|
||||||
|
const [isCreating, setIsCreating] = useState(false);
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
router.push('/create');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreate = async () => {
|
||||||
|
if (!script.trim()) {
|
||||||
|
alert('请输入剧本内容');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsCreating(true);
|
||||||
|
|
||||||
|
// Create episode
|
||||||
|
const episodeData: CreateScriptEpisodeRequest = {
|
||||||
|
title: "Script Episode",
|
||||||
|
script_id: 0, // This should come from a project
|
||||||
|
status: 1,
|
||||||
|
summary: script
|
||||||
|
};
|
||||||
|
|
||||||
|
const episodeResponse = await createScriptEpisode(episodeData);
|
||||||
|
if (episodeResponse.code !== 0) {
|
||||||
|
alert(`创建剧集失败: ${episodeResponse.message}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const episodeId = episodeResponse.data.id;
|
||||||
|
|
||||||
|
// Convert script to scenes
|
||||||
|
const convertResponse = await convertScriptToScene(script, episodeId, 0);
|
||||||
|
|
||||||
|
if (convertResponse.code === 0) {
|
||||||
|
// Update episode with generated data
|
||||||
|
const updateEpisodeData: UpdateScriptEpisodeRequest = {
|
||||||
|
id: episodeId,
|
||||||
|
atmosphere: convertResponse.data.atmosphere,
|
||||||
|
summary: convertResponse.data.summary,
|
||||||
|
scene: convertResponse.data.scene,
|
||||||
|
characters: convertResponse.data.characters,
|
||||||
|
};
|
||||||
|
|
||||||
|
await updateScriptEpisode(updateEpisodeData);
|
||||||
|
|
||||||
|
// Navigate to workflow
|
||||||
|
router.push(`/create/work-flow?episodeId=${episodeId}`);
|
||||||
|
} else {
|
||||||
|
alert(`转换失败: ${convertResponse.message}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('创建过程出错:', error);
|
||||||
|
alert("创建项目时发生错误，请稍后重试");
|
||||||
|
} finally {
|
||||||
|
setIsCreating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center gap-4 mb-8">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleBack}
|
||||||
|
className="text-white/70 hover:text-white"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<h1 className="text-2xl font-bold text-white">Script to Video</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<Card className="p-6 bg-white/5 border-white/10">
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Script Input */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||||
|
Script Content
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
value={script}
|
||||||
|
onChange={(e) => setScript(e.target.value)}
|
||||||
|
placeholder="Enter your script here..."
|
||||||
|
className="min-h-[200px] bg-white/5 border-white/20 text-white placeholder:text-white/50"
|
||||||
|
rows={10}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Settings */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||||
|
Mode
|
||||||
|
</label>
|
||||||
|
<Select value={selectedMode.toString()} onValueChange={(value) => setSelectedMode(Number(value) as ModeEnum)}>
|
||||||
|
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={ModeEnum.AUTOMATIC.toString()}>Automatic</SelectItem>
|
||||||
|
<SelectItem value={ModeEnum.MANUAL.toString()}>Manual</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||||
|
Resolution
|
||||||
|
</label>
|
||||||
|
<Select value={selectedResolution.toString()} onValueChange={(value) => setSelectedResolution(Number(value) as ResolutionEnum)}>
|
||||||
|
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={ResolutionEnum.HD_720P.toString()}>720P HD</SelectItem>
|
||||||
|
<SelectItem value={ResolutionEnum.FULL_HD_1080P.toString()}>1080P Full HD</SelectItem>
|
||||||
|
<SelectItem value={ResolutionEnum.UHD_2K.toString()}>2K UHD</SelectItem>
|
||||||
|
<SelectItem value={ResolutionEnum.UHD_4K.toString()}>4K UHD</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Create Button */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
onClick={handleCreate}
|
||||||
|
disabled={isCreating || !script.trim()}
|
||||||
|
className="bg-purple-600 hover:bg-purple-700"
|
||||||
|
>
|
||||||
|
{isCreating ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||||
|
Creating...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Create Video'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
233
components/pages/video-to-video.tsx
Normal file
233
components/pages/video-to-video.tsx
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { ArrowLeft, Upload, Loader2 } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { ModeEnum, ResolutionEnum } from "@/api/enums";
|
||||||
|
import { createScriptEpisode, CreateScriptEpisodeRequest, updateScriptEpisode, UpdateScriptEpisodeRequest } from "@/api/script_episode";
|
||||||
|
import { convertVideoToScene } from "@/api/video_flow";
|
||||||
|
import { getUploadTokenWithDomain, uploadToQiniu } from "@/api/common";
|
||||||
|
|
||||||
|
export function VideoToVideo() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [videoUrl, setVideoUrl] = useState('');
|
||||||
|
const [selectedMode, setSelectedMode] = useState<ModeEnum>(ModeEnum.AUTOMATIC);
|
||||||
|
const [selectedResolution, setSelectedResolution] = useState<ResolutionEnum>(ResolutionEnum.HD_720P);
|
||||||
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
|
const [isCreating, setIsCreating] = useState(false);
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
router.push('/create');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUploadVideo = async () => {
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = 'file';
|
||||||
|
input.accept = 'video/*';
|
||||||
|
input.onchange = async (e) => {
|
||||||
|
const file = (e.target as HTMLInputElement).files?.[0];
|
||||||
|
if (file) {
|
||||||
|
try {
|
||||||
|
setIsUploading(true);
|
||||||
|
|
||||||
|
// Get upload token
|
||||||
|
const { token } = await getUploadTokenWithDomain();
|
||||||
|
|
||||||
|
// Upload to Qiniu
|
||||||
|
const uploadedVideoUrl = await uploadToQiniu(file, token);
|
||||||
|
|
||||||
|
setVideoUrl(uploadedVideoUrl);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Upload error:', error);
|
||||||
|
alert('Upload failed, please try again');
|
||||||
|
} finally {
|
||||||
|
setIsUploading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
input.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreate = async () => {
|
||||||
|
if (!videoUrl) {
|
||||||
|
alert('请先上传视频');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsCreating(true);
|
||||||
|
|
||||||
|
// Create episode
|
||||||
|
const episodeData: CreateScriptEpisodeRequest = {
|
||||||
|
title: "Video Episode",
|
||||||
|
script_id: 0, // This should come from a project
|
||||||
|
status: 1,
|
||||||
|
summary: "Video conversion"
|
||||||
|
};
|
||||||
|
|
||||||
|
const episodeResponse = await createScriptEpisode(episodeData);
|
||||||
|
if (episodeResponse.code !== 0) {
|
||||||
|
alert(`创建剧集失败: ${episodeResponse.message}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const episodeId = episodeResponse.data.id;
|
||||||
|
|
||||||
|
// Convert video to scenes
|
||||||
|
const convertResponse = await convertVideoToScene(videoUrl, episodeId, 0);
|
||||||
|
|
||||||
|
if (convertResponse.code === 0) {
|
||||||
|
// Update episode with generated data
|
||||||
|
const updateEpisodeData: UpdateScriptEpisodeRequest = {
|
||||||
|
id: episodeId,
|
||||||
|
atmosphere: convertResponse.data.atmosphere,
|
||||||
|
summary: convertResponse.data.summary,
|
||||||
|
scene: convertResponse.data.scene,
|
||||||
|
characters: convertResponse.data.characters,
|
||||||
|
};
|
||||||
|
|
||||||
|
await updateScriptEpisode(updateEpisodeData);
|
||||||
|
|
||||||
|
// Navigate to workflow
|
||||||
|
router.push(`/create/work-flow?episodeId=${episodeId}`);
|
||||||
|
} else {
|
||||||
|
alert(`转换失败: ${convertResponse.message}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('创建过程出错:', error);
|
||||||
|
alert("创建项目时发生错误，请稍后重试");
|
||||||
|
} finally {
|
||||||
|
setIsCreating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center gap-4 mb-8">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleBack}
|
||||||
|
className="text-white/70 hover:text-white"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<h1 className="text-2xl font-bold text-white">Video to Video</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<Card className="p-6 bg-white/5 border-white/10">
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Video Upload */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||||
|
Upload Video
|
||||||
|
</label>
|
||||||
|
<div className="border-2 border-dashed border-white/20 rounded-lg p-8 text-center">
|
||||||
|
{videoUrl ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<video
|
||||||
|
src={videoUrl}
|
||||||
|
controls
|
||||||
|
className="max-w-full h-64 mx-auto rounded-lg"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={handleUploadVideo}
|
||||||
|
disabled={isUploading}
|
||||||
|
className="border-white/20 text-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
Replace Video
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Upload className="h-12 w-12 text-white/40 mx-auto" />
|
||||||
|
<div>
|
||||||
|
<p className="text-white/70 mb-2">Click to upload a video file</p>
|
||||||
|
<Button
|
||||||
|
onClick={handleUploadVideo}
|
||||||
|
disabled={isUploading}
|
||||||
|
className="bg-purple-600 hover:bg-purple-700"
|
||||||
|
>
|
||||||
|
{isUploading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||||
|
Uploading...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Upload className="h-4 w-4 mr-2" />
|
||||||
|
Choose Video
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Settings */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||||
|
Mode
|
||||||
|
</label>
|
||||||
|
<Select value={selectedMode.toString()} onValueChange={(value) => setSelectedMode(Number(value) as ModeEnum)}>
|
||||||
|
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={ModeEnum.AUTOMATIC.toString()}>Automatic</SelectItem>
|
||||||
|
<SelectItem value={ModeEnum.MANUAL.toString()}>Manual</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||||
|
Resolution
|
||||||
|
</label>
|
||||||
|
<Select value={selectedResolution.toString()} onValueChange={(value) => setSelectedResolution(Number(value) as ResolutionEnum)}>
|
||||||
|
<SelectTrigger className="bg-white/5 border-white/20 text-white">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={ResolutionEnum.HD_720P.toString()}>720P HD</SelectItem>
|
||||||
|
<SelectItem value={ResolutionEnum.FULL_HD_1080P.toString()}>1080P Full HD</SelectItem>
|
||||||
|
<SelectItem value={ResolutionEnum.UHD_2K.toString()}>2K UHD</SelectItem>
|
||||||
|
<SelectItem value={ResolutionEnum.UHD_4K.toString()}>4K UHD</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Create Button */}
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
onClick={handleCreate}
|
||||||
|
disabled={isCreating || !videoUrl}
|
||||||
|
className="bg-purple-600 hover:bg-purple-700"
|
||||||
|
>
|
||||||
|
{isCreating ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||||
|
Creating...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Create Video'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -77,7 +77,6 @@ export function AudioVisualizer({
|
|||||||
cursorColor: '#ffffff',
|
cursorColor: '#ffffff',
|
||||||
barWidth: 2,
|
barWidth: 2,
|
||||||
barRadius: 3,
|
barRadius: 3,
|
||||||
responsive: true,
|
|
||||||
height: 50,
|
height: 50,
|
||||||
normalize: true,
|
normalize: true,
|
||||||
backend: 'WebAudio',
|
backend: 'WebAudio',
|
||||||
@ -92,20 +91,7 @@ export function AudioVisualizer({
|
|||||||
console.warn('音频文件加载失败，使用模拟数据');
|
console.warn('音频文件加载失败，使用模拟数据');
|
||||||
setHasError(true);
|
setHasError(true);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
setDuration(120); // Set a default duration for demo mode
|
||||||
// 如果加载失败，创建空的音频上下文用于演示
|
|
||||||
if (wavesurfer.current) {
|
|
||||||
wavesurfer.current.empty();
|
|
||||||
// 创建模拟的峰值数据
|
|
||||||
const peaks = Array.from({ length: 1000 }, () => Math.random() * 2 - 1);
|
|
||||||
wavesurfer.current.loadDecodedBuffer({
|
|
||||||
getChannelData: () => new Float32Array(peaks),
|
|
||||||
length: peaks.length,
|
|
||||||
sampleRate: 44100,
|
|
||||||
numberOfChannels: 1,
|
|
||||||
duration: 120
|
|
||||||
} as any);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 事件监听
|
// 事件监听
|
||||||
@ -117,11 +103,7 @@ export function AudioVisualizer({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
wavesurfer.current.on('audioprocess', () => {
|
wavesurfer.current.on('timeupdate', () => {
|
||||||
setCurrentTime(wavesurfer.current?.getCurrentTime() || 0);
|
|
||||||
});
|
|
||||||
|
|
||||||
wavesurfer.current.on('seek', () => {
|
|
||||||
setCurrentTime(wavesurfer.current?.getCurrentTime() || 0);
|
setCurrentTime(wavesurfer.current?.getCurrentTime() || 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -152,14 +134,8 @@ export function AudioVisualizer({
|
|||||||
}, [audioUrl]);
|
}, [audioUrl]);
|
||||||
|
|
||||||
// 更新波形颜色当 isActive 改变时
|
// 更新波形颜色当 isActive 改变时
|
||||||
useEffect(() => {
|
// Note: setOptions method might not be available in all WaveSurfer versions
|
||||||
if (wavesurfer.current && !hasError) {
|
// Colors are already set during initialization
|
||||||
wavesurfer.current.setOptions({
|
|
||||||
waveColor: isActive ? '#3b82f6' : '#6b7280',
|
|
||||||
progressColor: isActive ? '#1d4ed8' : '#374151',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [isActive, hasError]);
|
|
||||||
|
|
||||||
// 更新音量
|
// 更新音量
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user