forked from 77media/video-flow
119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { ArrowRight, Sparkles, Users, FileText } from 'lucide-react';
|
|
|
|
interface InputScriptStepProps {
|
|
onNext: () => void;
|
|
}
|
|
|
|
const aiModels = [
|
|
{ id: 'gpt-4', name: 'GPT-4 Turbo', description: 'Most advanced model with superior creativity' },
|
|
{ id: 'gpt-3.5', name: 'GPT-3.5 Turbo', description: 'Fast and efficient for most tasks' },
|
|
{ id: 'claude-3', name: 'Claude 3 Opus', description: 'Excellent for narrative and storytelling' },
|
|
];
|
|
|
|
export function InputScriptStep({ onNext }: InputScriptStepProps) {
|
|
const [script, setScript] = useState('');
|
|
const [chapters, setChapters] = useState('4');
|
|
const [showActorsPanel, setShowActorsPanel] = useState(false);
|
|
|
|
const handleSubmit = () => {
|
|
if (script.trim() && chapters) {
|
|
onNext();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<FileText className="h-5 w-5" />
|
|
<span>Script Input & Configuration</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<Separator />
|
|
|
|
{/* Script Input */}
|
|
<div className="space-y-3">
|
|
<Label htmlFor="script" className="text-base font-medium">
|
|
Your Script
|
|
</Label>
|
|
<Textarea
|
|
id="script"
|
|
placeholder="Paste your script here... The AI will analyze it and break it into chapters with suggested actors and scenes."
|
|
value={script}
|
|
onChange={(e) => setScript(e.target.value)}
|
|
className="min-h-[200px] resize-none"
|
|
/>
|
|
<div className="flex justify-between text-sm text-muted-foreground">
|
|
<span>{script.length} characters</span>
|
|
<span>Estimated reading time: {Math.ceil(script.split(' ').length / 200)} min</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Chapters Configuration */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-3">
|
|
<Label htmlFor="chapters" className="text-base font-medium">
|
|
Number of Chapters
|
|
</Label>
|
|
<Input
|
|
id="chapters"
|
|
type="number"
|
|
min="1"
|
|
max="10"
|
|
value={chapters}
|
|
onChange={(e) => setChapters(e.target.value)}
|
|
placeholder="4"
|
|
/>
|
|
<p className="text-sm text-muted-foreground">
|
|
AI will automatically split your script into this many chapters
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Label className="text-base font-medium">AI Twins Reference</Label>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowActorsPanel(true)}
|
|
className="w-full justify-start"
|
|
>
|
|
<Users className="mr-2 h-4 w-4" />
|
|
Select Reference Actors
|
|
</Button>
|
|
<p className="text-sm text-muted-foreground">
|
|
Choose existing actors or create new ones for character reference
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={!script.trim() || !chapters}
|
|
size="lg"
|
|
>
|
|
<Sparkles className="mr-2 h-4 w-4" />
|
|
Generate Chapters
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |