This commit adds support for reusing existing character images from exis
This commit is contained in:
Riccardo Giorato
@@ -19,12 +19,14 @@ interface GeneratePageModalProps {
|
||||
prompt: string
|
||||
style: string
|
||||
characterFiles?: File[]
|
||||
characterUrls?: string[] // For reusing existing characters
|
||||
isContinuation?: boolean
|
||||
}) => void
|
||||
pageNumber: number
|
||||
previousCharacters?: File[]
|
||||
previousPagePrompt?: string
|
||||
previousPageStyle?: string
|
||||
existingCharacterImages?: string[] // Character images from previous pages
|
||||
}
|
||||
|
||||
export function GeneratePageModal({
|
||||
@@ -35,9 +37,11 @@ export function GeneratePageModal({
|
||||
previousCharacters,
|
||||
previousPagePrompt,
|
||||
previousPageStyle,
|
||||
existingCharacterImages = [],
|
||||
}: GeneratePageModalProps) {
|
||||
const [prompt, setPrompt] = useState("")
|
||||
const [uploadedFiles, setUploadedFiles] = useState<File[]>(previousCharacters || [])
|
||||
const [selectedExistingCharacters, setSelectedExistingCharacters] = useState<string[]>([])
|
||||
const [previews, setPreviews] = useState<string[]>([])
|
||||
const [showPreview, setShowPreview] = useState<number | null>(null)
|
||||
const [isGenerating, setIsGenerating] = useState(false)
|
||||
@@ -94,6 +98,14 @@ export function GeneratePageModal({
|
||||
}
|
||||
}
|
||||
|
||||
const toggleExistingCharacter = (characterUrl: string) => {
|
||||
setSelectedExistingCharacters(prev =>
|
||||
prev.includes(characterUrl)
|
||||
? prev.filter(url => url !== characterUrl)
|
||||
: [...prev, characterUrl]
|
||||
)
|
||||
}
|
||||
|
||||
const handleGenerate = () => {
|
||||
if (!prompt.trim()) return
|
||||
setIsGenerating(true)
|
||||
@@ -101,6 +113,7 @@ export function GeneratePageModal({
|
||||
prompt,
|
||||
style: selectedStyle,
|
||||
characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
|
||||
characterUrls: selectedExistingCharacters.length > 0 ? selectedExistingCharacters : undefined,
|
||||
isContinuation: false,
|
||||
})
|
||||
}
|
||||
@@ -111,6 +124,7 @@ export function GeneratePageModal({
|
||||
prompt: prompt.trim() || `Continue the story from where it left off. Previous context: ${previousPagePrompt}`,
|
||||
style: selectedStyle,
|
||||
characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
|
||||
characterUrls: selectedExistingCharacters.length > 0 ? selectedExistingCharacters : undefined,
|
||||
isContinuation: true,
|
||||
})
|
||||
}
|
||||
@@ -150,52 +164,93 @@ export function GeneratePageModal({
|
||||
className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-20 leading-relaxed tracking-tight"
|
||||
/>
|
||||
|
||||
<div className="mt-3 pt-3 border-t border-border/30 flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
{uploadedFiles.length > 0 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
{previews.map((preview, index) => (
|
||||
<div key={index} className="relative group/thumb">
|
||||
<div className="mt-3 pt-3 border-t border-border/30 space-y-3">
|
||||
{/* Existing Characters */}
|
||||
{existingCharacterImages.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
|
||||
Reuse Characters from Story
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{existingCharacterImages.map((characterUrl, index) => {
|
||||
const isSelected = selectedExistingCharacters.includes(characterUrl)
|
||||
return (
|
||||
<button
|
||||
onClick={() => setShowPreview(index)}
|
||||
className="w-8 h-8 rounded-md overflow-hidden border border-border/50 hover:border-indigo/50 transition-colors"
|
||||
key={characterUrl}
|
||||
onClick={() => toggleExistingCharacter(characterUrl)}
|
||||
className={`relative w-8 h-8 rounded-md overflow-hidden border-2 transition-all ${
|
||||
isSelected
|
||||
? "border-indigo shadow-sm shadow-indigo/20"
|
||||
: "border-border/50 hover:border-indigo/50"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={preview || "/placeholder.svg"}
|
||||
alt={`Character ${index + 1}`}
|
||||
src={characterUrl}
|
||||
alt={`Existing character ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{isSelected && (
|
||||
<div className="absolute inset-0 bg-indigo/20 flex items-center justify-center">
|
||||
<div className="w-3 h-3 bg-indigo rounded-full flex items-center justify-center">
|
||||
<div className="w-1 h-1 bg-white rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
removeFile(index)
|
||||
}}
|
||||
className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity"
|
||||
>
|
||||
<X className="w-2.5 h-2.5 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{uploadedFiles.length < 2 && (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-8 h-8 rounded-md border border-dashed border-border/50 hover:border-indigo/50 flex items-center justify-center text-muted-foreground hover:text-white transition-colors"
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors"
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
<span>Upload Characters</span>
|
||||
<span className="text-muted-foreground/50">(Max 2)</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New Character Uploads */}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
{uploadedFiles.length > 0 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
{previews.map((preview, index) => (
|
||||
<div key={index} className="relative group/thumb">
|
||||
<button
|
||||
onClick={() => setShowPreview(index)}
|
||||
className="w-8 h-8 rounded-md overflow-hidden border border-border/50 hover:border-indigo/50 transition-colors"
|
||||
>
|
||||
<img
|
||||
src={preview || "/placeholder.svg"}
|
||||
alt={`New character ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
removeFile(index)
|
||||
}}
|
||||
className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity"
|
||||
>
|
||||
<X className="w-2.5 h-2.5 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{uploadedFiles.length < 2 && (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-8 h-8 rounded-md border border-dashed border-border/50 hover:border-indigo/50 flex items-center justify-center text-muted-foreground hover:text-white transition-colors"
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors"
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
<span>Upload New Characters</span>
|
||||
<span className="text-muted-foreground/50">(Max 2)</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user