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
app/editor/[storySlug]/page.tsx
+1
View File
@@ -217,6 +217,7 @@ export default function StoryEditorPage() {
<EditorToolbar <EditorToolbar
title={story.title} title={story.title}
onInfoClick={() => setShowInfoSheet(true)} onInfoClick={() => setShowInfoSheet(true)}
onContinueStory={handleAddPage}
/> />
<div className="flex-1 flex overflow-hidden"> <div className="flex-1 flex overflow-hidden">
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 { ArrowLeft, RefreshCw, Download, Plus, Info } from "lucide-react";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation";
interface EditorToolbarProps { interface EditorToolbarProps {
title: string title: string;
onInfoClick: () => void onInfoClick: () => void;
onContinueStory?: () => void;
} }
export function EditorToolbar({ title, onInfoClick }: EditorToolbarProps) { export function EditorToolbar({
const router = useRouter() title,
onInfoClick,
onContinueStory,
}: EditorToolbarProps) {
const router = useRouter();
return ( 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"> <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" /> <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
</Button> </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>
<div className="flex items-center gap-1 sm:gap-2 flex-shrink-0"> <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" /> <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span>Download PDF</span> <span>Download PDF</span>
</Button> </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> </div>
</header> </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 { useState, useRef, useEffect, useMemo } from "react";
import { Upload, X, Loader2 } from "lucide-react" import { Upload, X, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import {
import { useToast } from "@/hooks/use-toast" Dialog,
import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils" DialogContent,
import { COMIC_STYLES } from "@/lib/constants" 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 { interface PageReference {
pageNumber: number pageNumber: number;
characterImages: string[] characterImages: string[];
prompt: string prompt: string;
imageUrl?: string imageUrl?: string;
style: string style: string;
} }
interface GeneratePageModalProps { interface GeneratePageModalProps {
isOpen: boolean isOpen: boolean;
onClose: () => void onClose: () => void;
onGenerate: (data: { onGenerate: (data: {
prompt: string prompt: string;
style: string style: string;
characterFiles?: File[] characterFiles?: File[];
characterUrls?: string[] characterUrls?: string[];
isContinuation?: boolean isContinuation?: boolean;
}) => void }) => void;
pageNumber: number pageNumber: number;
allPages: PageReference[] allPages: PageReference[];
} }
export function GeneratePageModal({ export function GeneratePageModal({
@@ -37,40 +42,46 @@ export function GeneratePageModal({
pageNumber, pageNumber,
allPages, allPages,
}: GeneratePageModalProps) { }: GeneratePageModalProps) {
const [prompt, setPrompt] = useState("") const [prompt, setPrompt] = useState("");
const [uploadedFiles, setUploadedFiles] = useState<File[]>([]) const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
const [selectedExistingCharacters, setSelectedExistingCharacters] = useState<string[]>([]) const [selectedExistingCharacters, setSelectedExistingCharacters] = useState<
const [referencePageNumber, setReferencePageNumber] = useState<number>(allPages.length > 0 ? allPages.length : 1) string[]
const [pageImage, setPageImage] = useState<string | null>(null) >([]);
const [previews, setPreviews] = useState<string[]>([]) const [referencePageNumber, setReferencePageNumber] = useState<number>(
const [showPreview, setShowPreview] = useState<number | null>(null) allPages.length > 0 ? allPages.length : 1
const [isGenerating, setIsGenerating] = useState(false) );
const fileInputRef = useRef<HTMLInputElement>(null) const [pageImage, setPageImage] = useState<string | null>(null);
const { toast } = useToast() 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 referencePage =
const referenceStyleId = referencePage?.style || "noir" allPages.find((p) => p.pageNumber === referencePageNumber) || null;
const selectedStyleName = COMIC_STYLES.find((s) => s.id === referenceStyleId)?.name || "Noir" const referenceStyleId = referencePage?.style || "noir";
const selectedStyle = useMemo(() => selectedStyleName, [referenceStyleId]) const selectedStyleName =
COMIC_STYLES.find((s) => s.id === referenceStyleId)?.name || "Noir";
const selectedStyle = useMemo(() => selectedStyleName, [referenceStyleId]);
useEffect(() => { useEffect(() => {
if (isOpen && referencePage) { if (isOpen && referencePage) {
setSelectedExistingCharacters(referencePage.characterImages) setSelectedExistingCharacters(referencePage.characterImages);
setPageImage(referencePage.imageUrl || null) setPageImage(referencePage.imageUrl || null);
} else if (isOpen && !referencePage) { } else if (isOpen && !referencePage) {
setPageImage(null) setPageImage(null);
} }
}, [isOpen, referencePage]) }, [isOpen, referencePage]);
const handleFiles = async (newFiles: FileList | null) => { 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, file,
validation: validateFileForUpload(file, true) validation: validateFileForUpload(file, true),
})) }));
validationResults.forEach(({ validation }) => { validationResults.forEach(({ validation }) => {
if (!validation.valid && validation.error) { if (!validation.valid && validation.error) {
@@ -79,72 +90,74 @@ export function GeneratePageModal({
description: validation.error, description: validation.error,
variant: "destructive", variant: "destructive",
duration: 4000, duration: 4000,
}) });
} }
}) });
const validFiles = validationResults const validFiles = validationResults
.filter(({ validation }) => validation.valid) .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) const totalFiles = [...uploadedFiles, ...validFiles].slice(0, 2);
setUploadedFiles(totalFiles) setUploadedFiles(totalFiles);
const newPreviews = await Promise.all( const newPreviews = await Promise.all(
totalFiles.map((file) => generateFilePreview(file)) totalFiles.map((file) => generateFilePreview(file))
) );
setPreviews(newPreviews) setPreviews(newPreviews);
} };
const removeFile = (index: number) => { const removeFile = (index: number) => {
const newFiles = uploadedFiles.filter((_, i) => i !== index) const newFiles = uploadedFiles.filter((_, i) => i !== index);
const newPreviews = previews.filter((_, i) => i !== index) const newPreviews = previews.filter((_, i) => i !== index);
setUploadedFiles(newFiles) setUploadedFiles(newFiles);
setPreviews(newPreviews) setPreviews(newPreviews);
setShowPreview(null) setShowPreview(null);
if (fileInputRef.current) { if (fileInputRef.current) {
fileInputRef.current.value = "" fileInputRef.current.value = "";
} }
} };
const toggleExistingCharacter = (characterUrl: string) => { const toggleExistingCharacter = (characterUrl: string) => {
setSelectedExistingCharacters(prev => setSelectedExistingCharacters((prev) =>
prev.includes(characterUrl) prev.includes(characterUrl)
? prev.filter(url => url !== characterUrl) ? prev.filter((url) => url !== characterUrl)
: [...prev, characterUrl] : [...prev, characterUrl]
) );
} };
const togglePageImage = () => { const togglePageImage = () => {
setPageImage(prev => prev === null && referencePage?.imageUrl ? referencePage.imageUrl : null) setPageImage((prev) =>
} prev === null && referencePage?.imageUrl ? referencePage.imageUrl : null
);
};
const handleGenerate = async () => { const handleGenerate = async () => {
if (!prompt.trim()) return if (!prompt.trim()) return;
setIsGenerating(true) setIsGenerating(true);
const fileDataUrls = await Promise.all( const fileDataUrls = await Promise.all(
uploadedFiles.map((file, index) => { uploadedFiles.map((file, index) => {
return new Promise<string>((resolve) => { return new Promise<string>((resolve) => {
const reader = new FileReader() const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
const base64 = e.target?.result as string const base64 = e.target?.result as string;
const [header, base64Data] = base64.split(",") const [header, base64Data] = base64.split(",");
const base64String = base64Data.replace(/_/g, "/") // Send just the base64 data without the data URL prefix
resolve(`data:image/jpeg;base64,${base64String}`) resolve(base64Data);
} };
reader.readAsDataURL(file) reader.readAsDataURL(file);
}) });
}) })
) );
const allCharacterUrls: string[] = [ const allCharacterUrls: string[] = [
...selectedExistingCharacters, ...selectedExistingCharacters,
...fileDataUrls, ...fileDataUrls,
...(pageImage ? [pageImage] : []), ...(pageImage ? [pageImage] : []),
] ];
onGenerate({ onGenerate({
prompt, prompt,
@@ -152,28 +165,30 @@ export function GeneratePageModal({
characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined, characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
characterUrls: allCharacterUrls, characterUrls: allCharacterUrls,
isContinuation: false, isContinuation: false,
}) });
} };
useEffect(() => { useEffect(() => {
if (!isOpen) { if (!isOpen) {
setIsGenerating(false) setIsGenerating(false);
setPrompt("") setPrompt("");
setUploadedFiles([]) setUploadedFiles([]);
setSelectedExistingCharacters([]) setSelectedExistingCharacters([]);
setPageImage(null) setPageImage(null);
if (allPages.length > 0) { if (allPages.length > 0) {
setReferencePageNumber(allPages.length) setReferencePageNumber(allPages.length);
} }
} }
}, [isOpen]) }, [isOpen]);
return ( return (
<> <>
<Dialog open={isOpen} onOpenChange={onClose}> <Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="border border-border/50 rounded-lg bg-background max-w-lg"> <DialogContent className="border border-border/50 rounded-lg bg-background max-w-lg">
<DialogHeader> <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> </DialogHeader>
<div className="space-y-4 mt-4"> <div className="space-y-4 mt-4">
@@ -185,7 +200,9 @@ export function GeneratePageModal({
</label> </label>
<select <select
value={referencePageNumber} 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" 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) => ( {allPages.map((page) => (
@@ -216,72 +233,47 @@ export function GeneratePageModal({
/> />
<div className="mt-3 pt-3 border-t border-border/30 space-y-3"> <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 */} {/* Existing Characters */}
{referencePage && referencePage.characterImages.length > 0 && ( {referencePage &&
<div className="space-y-2"> referencePage.characterImages.length > 0 && (
<div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium"> <div className="space-y-2">
Reuse Characters <div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
</div> Reuse Characters
<div className="flex items-center gap-2 flex-wrap"> </div>
{referencePage.characterImages.map((characterUrl) => { <div className="flex items-center gap-2 flex-wrap">
const isSelected = selectedExistingCharacters.includes(characterUrl) {referencePage.characterImages.map((characterUrl) => {
return ( const isSelected =
<button selectedExistingCharacters.includes(characterUrl);
key={characterUrl} return (
onClick={() => toggleExistingCharacter(characterUrl)} <button
className={`relative w-8 h-8 rounded-md overflow-hidden border-2 transition-all ${ key={characterUrl}
isSelected onClick={() =>
? "border-indigo shadow-sm shadow-indigo/20" toggleExistingCharacter(characterUrl)
: "border-border/50 hover:border-indigo/50" }
}`} className={`relative w-8 h-8 rounded-md overflow-hidden border-2 transition-all ${
> isSelected
<img ? "border-indigo shadow-sm shadow-indigo/20"
src={characterUrl} : "border-border/50 hover:border-indigo/50"
alt="Existing character" }`}
className="w-full h-full object-cover" >
/> <img
{isSelected && ( src={characterUrl}
<div className="absolute inset-0 bg-indigo/20 flex items-center justify-center"> alt="Existing character"
<div className="w-3 h-3 bg-indigo rounded-full flex items-center justify-center"> className="w-full h-full object-cover"
<div className="w-1 h-1 bg-white rounded-full" /> />
{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>
</div> )}
)} </button>
</button> );
) })}
})} </div>
</div> </div>
</div> )}
)}
{/* New Character Uploads */} {/* New Character Uploads */}
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
@@ -302,8 +294,8 @@ export function GeneratePageModal({
</button> </button>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
removeFile(index) 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" 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" /> <Upload className="w-3.5 h-3.5" />
<span>Upload New Characters</span> <span>Upload New Characters</span>
<span className="text-muted-foreground/50">(Max 2)</span> <span className="text-muted-foreground/50">
(Max 2)
</span>
</button> </button>
)} )}
</div> </div>
@@ -386,5 +380,5 @@ export function GeneratePageModal({
</div> </div>
)} )}
</> </>
) );
} }