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>
|
||||
|
||||
|
||||
@@ -54,22 +54,9 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
|
||||
|
||||
try {
|
||||
const apiKey = localStorage.getItem("together_api_key")
|
||||
|
||||
const characterUploads = await Promise.all(characterFiles.map((file) => uploadToS3(file).then(({ url }) => url)))
|
||||
|
||||
if (!apiKey) {
|
||||
const comicData = {
|
||||
prompt,
|
||||
style,
|
||||
characterUploads,
|
||||
}
|
||||
sessionStorage.setItem("firstPageData", JSON.stringify(comicData))
|
||||
setTimeout(() => {
|
||||
router.push("/editor")
|
||||
}, 7500)
|
||||
return
|
||||
}
|
||||
|
||||
// Use API to create story and generate first page
|
||||
const response = await fetch("/api/generate-comic", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
@@ -79,41 +66,20 @@ export function CreateButton({ prompt, style, characterFiles }: CreateButtonProp
|
||||
prompt,
|
||||
apiKey,
|
||||
style,
|
||||
characterImages: characterUploads, // Send S3 URLs to API
|
||||
characterImages: characterUploads,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
|
||||
if (response.status === 402 || errorData.errorType === "credit_limit") {
|
||||
toast({
|
||||
title: "API credits required",
|
||||
description: "Your Together.ai API key needs credits. Please add credits or use a different API key.",
|
||||
variant: "destructive",
|
||||
duration: 6000,
|
||||
})
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
throw new Error(errorData.error || "Failed to generate comic")
|
||||
throw new Error(errorData.error || "Failed to create story")
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
const comicData = {
|
||||
prompt,
|
||||
style,
|
||||
imageUrl: result.imageUrl,
|
||||
characterUploads,
|
||||
}
|
||||
// Redirect to the story editor using slug
|
||||
router.push(`/editor/${result.storySlug}`)
|
||||
|
||||
sessionStorage.setItem("firstPageData", JSON.stringify(comicData))
|
||||
|
||||
setTimeout(() => {
|
||||
router.push("/editor")
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error("Error creating comic:", error)
|
||||
toast({
|
||||
|
||||
Reference in New Issue
Block a user