3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-26 17:30:08 +01:00
parent 4e4ce9ed35
commit 9895200db6
3 changed files with 179 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/editor-toolbar.tsx
+26 -10
View File
@@ -1,16 +1,21 @@
"use client"
"use client";
import { ArrowLeft, RefreshCw, Download, Plus, Info } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useRouter } from "next/navigation"
import { ArrowLeft, RefreshCw, Download, Plus, Info } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
interface EditorToolbarProps {
title: string
onInfoClick: () => void
title: string;
onInfoClick: () => void;
onContinueStory?: () => void;
}
export function EditorToolbar({ title, onInfoClick }: EditorToolbarProps) {
const router = useRouter()
export function EditorToolbar({
title,
onInfoClick,
onContinueStory,
}: EditorToolbarProps) {
const router = useRouter();
return (
<header className="h-14 border-b border-border/50 bg-background/80 backdrop-blur-md flex items-center justify-between px-3 sm:px-4">
@@ -24,7 +29,9 @@ export function EditorToolbar({ title, onInfoClick }: EditorToolbarProps) {
<ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
</Button>
<h1 className="text-sm sm:text-base text-white font-normal tracking-[-0.02em] truncate">{title}</h1>
<h1 className="text-sm sm:text-base text-white font-normal tracking-[-0.02em] truncate">
{title}
</h1>
</div>
<div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
@@ -52,7 +59,16 @@ export function EditorToolbar({ title, onInfoClick }: EditorToolbarProps) {
<Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span>Download PDF</span>
</Button>
<Button
onClick={onContinueStory}
className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
>
<Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">Continue story</span>
<span className="sm:hidden">Add</span>
</Button>
</div>
</header>
)
);
}
components/editor/generate-page-modal.tsx
+152 -158
View File
@@ -1,33 +1,38 @@
"use client"
"use client";
import { useState, useRef, useEffect, useMemo } from "react"
import { Upload, X, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"
import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils"
import { COMIC_STYLES } from "@/lib/constants"
import { useState, useRef, useEffect, useMemo } from "react";
import { Upload, X, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { useToast } from "@/hooks/use-toast";
import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils";
import { COMIC_STYLES } from "@/lib/constants";
interface PageReference {
pageNumber: number
characterImages: string[]
prompt: string
imageUrl?: string
style: string
pageNumber: number;
characterImages: string[];
prompt: string;
imageUrl?: string;
style: string;
}
interface GeneratePageModalProps {
isOpen: boolean
onClose: () => void
isOpen: boolean;
onClose: () => void;
onGenerate: (data: {
prompt: string
style: string
characterFiles?: File[]
characterUrls?: string[]
isContinuation?: boolean
}) => void
pageNumber: number
allPages: PageReference[]
prompt: string;
style: string;
characterFiles?: File[];
characterUrls?: string[];
isContinuation?: boolean;
}) => void;
pageNumber: number;
allPages: PageReference[];
}
export function GeneratePageModal({
@@ -37,40 +42,46 @@ export function GeneratePageModal({
pageNumber,
allPages,
}: GeneratePageModalProps) {
const [prompt, setPrompt] = useState("")
const [uploadedFiles, setUploadedFiles] = useState<File[]>([])
const [selectedExistingCharacters, setSelectedExistingCharacters] = useState<string[]>([])
const [referencePageNumber, setReferencePageNumber] = useState<number>(allPages.length > 0 ? allPages.length : 1)
const [pageImage, setPageImage] = useState<string | null>(null)
const [previews, setPreviews] = useState<string[]>([])
const [showPreview, setShowPreview] = useState<number | null>(null)
const [isGenerating, setIsGenerating] = useState(false)
const fileInputRef = useRef<HTMLInputElement>(null)
const { toast } = useToast()
const [prompt, setPrompt] = useState("");
const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
const [selectedExistingCharacters, setSelectedExistingCharacters] = useState<
string[]
>([]);
const [referencePageNumber, setReferencePageNumber] = useState<number>(
allPages.length > 0 ? allPages.length : 1
);
const [pageImage, setPageImage] = useState<string | null>(null);
const [previews, setPreviews] = useState<string[]>([]);
const [showPreview, setShowPreview] = useState<number | null>(null);
const [isGenerating, setIsGenerating] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const { toast } = useToast();
const referencePage = allPages.find((p) => p.pageNumber === referencePageNumber) || null
const referenceStyleId = referencePage?.style || "noir"
const selectedStyleName = COMIC_STYLES.find((s) => s.id === referenceStyleId)?.name || "Noir"
const selectedStyle = useMemo(() => selectedStyleName, [referenceStyleId])
const referencePage =
allPages.find((p) => p.pageNumber === referencePageNumber) || null;
const referenceStyleId = referencePage?.style || "noir";
const selectedStyleName =
COMIC_STYLES.find((s) => s.id === referenceStyleId)?.name || "Noir";
const selectedStyle = useMemo(() => selectedStyleName, [referenceStyleId]);
useEffect(() => {
if (isOpen && referencePage) {
setSelectedExistingCharacters(referencePage.characterImages)
setPageImage(referencePage.imageUrl || null)
setSelectedExistingCharacters(referencePage.characterImages);
setPageImage(referencePage.imageUrl || null);
} else if (isOpen && !referencePage) {
setPageImage(null)
setPageImage(null);
}
}, [isOpen, referencePage])
}, [isOpen, referencePage]);
const handleFiles = async (newFiles: FileList | null) => {
if (!newFiles) return
if (!newFiles) return;
const filesArray = Array.from(newFiles)
const filesArray = Array.from(newFiles);
const validationResults = filesArray.map(file => ({
const validationResults = filesArray.map((file) => ({
file,
validation: validateFileForUpload(file, true)
}))
validation: validateFileForUpload(file, true),
}));
validationResults.forEach(({ validation }) => {
if (!validation.valid && validation.error) {
@@ -79,72 +90,74 @@ export function GeneratePageModal({
description: validation.error,
variant: "destructive",
duration: 4000,
})
});
}
})
});
const validFiles = validationResults
.filter(({ validation }) => validation.valid)
.map(({ file }) => file)
.map(({ file }) => file);
if (validFiles.length === 0) return
if (validFiles.length === 0) return;
const totalFiles = [...uploadedFiles, ...validFiles].slice(0, 2)
setUploadedFiles(totalFiles)
const totalFiles = [...uploadedFiles, ...validFiles].slice(0, 2);
setUploadedFiles(totalFiles);
const newPreviews = await Promise.all(
totalFiles.map((file) => generateFilePreview(file))
)
setPreviews(newPreviews)
}
);
setPreviews(newPreviews);
};
const removeFile = (index: number) => {
const newFiles = uploadedFiles.filter((_, i) => i !== index)
const newPreviews = previews.filter((_, i) => i !== index)
setUploadedFiles(newFiles)
setPreviews(newPreviews)
setShowPreview(null)
const newFiles = uploadedFiles.filter((_, i) => i !== index);
const newPreviews = previews.filter((_, i) => i !== index);
setUploadedFiles(newFiles);
setPreviews(newPreviews);
setShowPreview(null);
if (fileInputRef.current) {
fileInputRef.current.value = ""
fileInputRef.current.value = "";
}
}
};
const toggleExistingCharacter = (characterUrl: string) => {
setSelectedExistingCharacters(prev =>
setSelectedExistingCharacters((prev) =>
prev.includes(characterUrl)
? prev.filter(url => url !== characterUrl)
? prev.filter((url) => url !== characterUrl)
: [...prev, characterUrl]
)
}
);
};
const togglePageImage = () => {
setPageImage(prev => prev === null && referencePage?.imageUrl ? referencePage.imageUrl : null)
}
setPageImage((prev) =>
prev === null && referencePage?.imageUrl ? referencePage.imageUrl : null
);
};
const handleGenerate = async () => {
if (!prompt.trim()) return
setIsGenerating(true)
if (!prompt.trim()) return;
setIsGenerating(true);
const fileDataUrls = await Promise.all(
uploadedFiles.map((file, index) => {
return new Promise<string>((resolve) => {
const reader = new FileReader()
const reader = new FileReader();
reader.onload = (e) => {
const base64 = e.target?.result as string
const [header, base64Data] = base64.split(",")
const base64String = base64Data.replace(/_/g, "/")
resolve(`data:image/jpeg;base64,${base64String}`)
}
reader.readAsDataURL(file)
})
const base64 = e.target?.result as string;
const [header, base64Data] = base64.split(",");
// Send just the base64 data without the data URL prefix
resolve(base64Data);
};
reader.readAsDataURL(file);
});
})
)
);
const allCharacterUrls: string[] = [
...selectedExistingCharacters,
...fileDataUrls,
...(pageImage ? [pageImage] : []),
]
];
onGenerate({
prompt,
@@ -152,28 +165,30 @@ export function GeneratePageModal({
characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
characterUrls: allCharacterUrls,
isContinuation: false,
})
}
});
};
useEffect(() => {
if (!isOpen) {
setIsGenerating(false)
setPrompt("")
setUploadedFiles([])
setSelectedExistingCharacters([])
setPageImage(null)
setIsGenerating(false);
setPrompt("");
setUploadedFiles([]);
setSelectedExistingCharacters([]);
setPageImage(null);
if (allPages.length > 0) {
setReferencePageNumber(allPages.length)
setReferencePageNumber(allPages.length);
}
}
}, [isOpen])
}, [isOpen]);
return (
<>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="border border-border/50 rounded-lg bg-background max-w-lg">
<DialogHeader>
<DialogTitle className="text-xl text-white font-heading">Generate Page {pageNumber}</DialogTitle>
<DialogTitle className="text-xl text-white font-heading">
Generate Page {pageNumber}
</DialogTitle>
</DialogHeader>
<div className="space-y-4 mt-4">
@@ -185,7 +200,9 @@ export function GeneratePageModal({
</label>
<select
value={referencePageNumber}
onChange={(e) => setReferencePageNumber(Number(e.target.value))}
onChange={(e) =>
setReferencePageNumber(Number(e.target.value))
}
className="w-full bg-background/80 border border-border/50 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo/50"
>
{allPages.map((page) => (
@@ -216,72 +233,47 @@ export function GeneratePageModal({
/>
<div className="mt-3 pt-3 border-t border-border/30 space-y-3">
{/* Reference Page Image Toggle */}
{referencePage && referencePage.imageUrl && (
<div className="space-y-2">
<div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
Include Page Image
</div>
<button
onClick={togglePageImage}
className={`w-8 h-8 rounded-md overflow-hidden border-2 transition-all ${
pageImage
? "border-indigo shadow-sm shadow-indigo/20"
: "border-border/50 hover:border-indigo/50"
}`}
>
{pageImage ? (
<img
src={pageImage}
alt="Page image"
className="w-full h-full object-cover"
/>
) : (
<span className="text-xs text-muted-foreground flex items-center justify-center h-full">
Page
</span>
)}
</button>
</div>
)}
{/* Existing Characters */}
{referencePage && referencePage.characterImages.length > 0 && (
<div className="space-y-2">
<div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
Reuse Characters
</div>
<div className="flex items-center gap-2 flex-wrap">
{referencePage.characterImages.map((characterUrl) => {
const isSelected = selectedExistingCharacters.includes(characterUrl)
return (
<button
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={characterUrl}
alt="Existing character"
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" />
{referencePage &&
referencePage.characterImages.length > 0 && (
<div className="space-y-2">
<div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
Reuse Characters
</div>
<div className="flex items-center gap-2 flex-wrap">
{referencePage.characterImages.map((characterUrl) => {
const isSelected =
selectedExistingCharacters.includes(characterUrl);
return (
<button
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={characterUrl}
alt="Existing character"
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>
</div>
)}
</button>
)
})}
)}
</button>
);
})}
</div>
</div>
</div>
)}
)}
{/* New Character Uploads */}
<div className="flex items-center justify-between gap-2">
@@ -302,8 +294,8 @@ export function GeneratePageModal({
</button>
<button
onClick={(e) => {
e.stopPropagation()
removeFile(index)
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"
>
@@ -327,7 +319,9 @@ export function GeneratePageModal({
>
<Upload className="w-3.5 h-3.5" />
<span>Upload New Characters</span>
<span className="text-muted-foreground/50">(Max 2)</span>
<span className="text-muted-foreground/50">
(Max 2)
</span>
</button>
)}
</div>
@@ -386,5 +380,5 @@ export function GeneratePageModal({
</div>
)}
</>
)
);
}