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

Add redraw page functionality with pageId support and UI updates

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-26 19:43:28 +01:00
parent 5d18fad18a
commit 89048bae15
6 changed files with 151 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/api/add-page/route.ts
+49 -12
View File
@@ -1,6 +1,9 @@
import { type NextRequest, NextResponse } from "next/server";
import { auth } from "@clerk/nextjs/server";
import Together from "together-ai";
import { db } from "@/lib/db";
import { pages } from "@/lib/schema";
import { eq } from "drizzle-orm";
import {
updatePage,
createPage,
@@ -34,7 +37,7 @@ export async function POST(request: NextRequest) {
);
}
const { storyId, prompt, characterImages = [] } = await request.json();
const { storyId, pageId, prompt, characterImages = [] } = await request.json();
if (!storyId || !prompt) {
return NextResponse.json(
@@ -76,13 +79,35 @@ export async function POST(request: NextRequest) {
}
}
const nextPageNumber = await getNextPageNumber(story.id);
const page = await createPage({
storyId: story.id,
pageNumber: nextPageNumber,
prompt,
characterImageUrls: characterImages,
});
let page;
let pageNumber;
let isRedraw = false;
if (pageId) {
// Redraw mode: update existing page
isRedraw = true;
const storyData = await getStoryWithPagesBySlug(storyId);
if (!storyData) {
return NextResponse.json({ error: "Story not found" }, { status: 404 });
}
const existingPage = storyData.pages.find(p => p.id === pageId);
if (!existingPage) {
return NextResponse.json({ error: "Page not found" }, { status: 404 });
}
page = existingPage;
pageNumber = existingPage.pageNumber;
} else {
// Add new page mode
pageNumber = await getNextPageNumber(story.id);
page = await createPage({
storyId: story.id,
pageNumber,
prompt,
characterImageUrls: characterImages,
});
}
const dimensions = FIXED_DIMENSIONS;
@@ -90,10 +115,22 @@ export async function POST(request: NextRequest) {
let referenceImages: string[] = [];
// Get previous page image for style consistency (unless it's page 1)
if (nextPageNumber > 1) {
const lastPageImage = await getLastPageImage(story.id);
if (lastPageImage) {
referenceImages.push(lastPageImage);
if (pageNumber > 1) {
if (isRedraw) {
// For redraw, get all pages and find the previous page's image
const storyData = await getStoryWithPagesBySlug(storyId);
if (storyData) {
const previousPage = storyData.pages.find(p => p.pageNumber === pageNumber - 1);
if (previousPage?.generatedImageUrl) {
referenceImages.push(previousPage.generatedImageUrl);
}
}
} else {
// For new page, use the last page image
const lastPageImage = await getLastPageImage(story.id);
if (lastPageImage) {
referenceImages.push(lastPageImage);
}
}
}
app/editor/[storySlug]/page.tsx
+79 -10
View File
@@ -9,6 +9,7 @@ import { ComicCanvas } from "@/components/editor/comic-canvas";
import { ApiKeyModal } from "@/components/api-key-modal";
import { PageInfoSheet } from "@/components/editor/page-info-sheet";
import { GeneratePageModal } from "@/components/editor/generate-page-modal";
import { StoryLoader } from "@/components/ui/story-loader";
interface PageData {
id: number; // pageNumber for component compatibility
@@ -119,6 +120,67 @@ export default function StoryEditorPage() {
setShowGenerateModal(true);
};
const handleRedrawPage = async () => {
const storedKey = localStorage.getItem("together_api_key");
if (!storedKey) {
setShowApiModal(true);
return;
}
const currentPageData = pages[currentPage];
if (!currentPageData) return;
setLoadingPageId(currentPage);
try {
const response = await fetch("/api/add-page", {
method: "POST",
headers: {
"Content-Type": "application/json",
"x-api-key": storedKey,
},
body: JSON.stringify({
storyId: story?.slug,
pageId: currentPageData.dbId, // Add pageId to override existing page
prompt: currentPageData.prompt,
characterImages: currentPageData.characterUploads || [],
}),
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || "Failed to redraw page");
}
const result = await response.json();
// Update the current page with the new image
setPages((prevPages) =>
prevPages.map((page, index) =>
index === currentPage
? { ...page, image: result.imageUrl }
: page
)
);
toast({
title: "Page redrawn successfully",
description: "The page has been regenerated with a fresh image.",
duration: 3000,
});
} catch (error) {
console.error("Error redrawing page:", error);
toast({
title: "Failed to redraw page",
description: error instanceof Error ? error.message : "Failed to redraw page",
variant: "destructive",
duration: 4000,
});
} finally {
setLoadingPageId(null);
}
};
const handleApiKeyClick = () => {
setShowApiModal(true);
};
@@ -132,8 +194,6 @@ export default function StoryEditorPage() {
}
};
const handleGeneratePage = async (data: {
prompt: string;
characterFiles?: File[];
@@ -146,6 +206,7 @@ export default function StoryEditorPage() {
return;
}
// Add new page mode
const response = await fetch("/api/add-page", {
method: "POST",
headers: {
@@ -175,16 +236,20 @@ export default function StoryEditorPage() {
prompt: data.prompt,
characterUploads: data.characterUrls || [],
style: story?.style || "noir",
dbId: result.pageId,
},
]);
setCurrentPage(pages.length);
setShowGenerateModal(false);
} catch (error) {
console.error("Error generating page:", error);
toast({
title: "Failed to generate page",
description:
error instanceof Error ? error.message : "Failed to generate page",
error instanceof Error
? error.message
: "Failed to generate page",
variant: "destructive",
duration: 4000,
});
@@ -194,7 +259,7 @@ export default function StoryEditorPage() {
if (isLoading) {
return (
<div className="h-screen flex items-center justify-center bg-background">
<div className="text-white">Loading story...</div>
<StoryLoader />
</div>
);
}
@@ -209,10 +274,7 @@ export default function StoryEditorPage() {
return (
<div className="h-screen flex flex-col bg-background">
<EditorToolbar
title={story.title}
onContinueStory={handleAddPage}
/>
<EditorToolbar title={story.title} onContinueStory={handleAddPage} />
<div className="flex-1 flex overflow-hidden">
<PageSidebar
@@ -226,8 +288,15 @@ export default function StoryEditorPage() {
<ComicCanvas
page={pages[currentPage]}
onInfoClick={() => setShowInfoSheet(true)}
onNextPage={() => setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev))}
onPrevPage={() => setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev))}
onRedrawClick={handleRedrawPage}
onNextPage={() =>
setCurrentPage((prev) =>
prev < pages.length - 1 ? prev + 1 : prev
)
}
onPrevPage={() =>
setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev))
}
/>
</div>
app/stories/page.tsx
+2 -4
View File
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Plus, Loader2 } from "lucide-react";
import { Navbar } from "@/components/landing/navbar";
import { StoryLoader } from "@/components/ui/story-loader";
interface Story {
id: string;
@@ -51,10 +52,7 @@ export default function StoriesPage() {
<Navbar />
<main className="flex-1 flex items-center justify-center">
<div className="text-center">
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4" />
<p className="text-muted-foreground">Loading your comic library...</p>
</div>
<StoryLoader text="Loading your comic library..." />
</main>
</div>
);
components/editor/comic-canvas.tsx
+4 -1
View File
@@ -15,11 +15,12 @@ interface PageData {
interface ComicCanvasProps {
page: PageData;
onInfoClick?: () => void;
onRedrawClick?: () => void;
onNextPage?: () => void;
onPrevPage?: () => void;
}
export function ComicCanvas({ page, onInfoClick, onNextPage, onPrevPage }: ComicCanvasProps) {
export function ComicCanvas({ page, onInfoClick, onRedrawClick, onNextPage, onPrevPage }: ComicCanvasProps) {
return (
<main className="flex-1 overflow-auto p-4 md:p-8 flex items-start justify-center relative">
{/* Dot grid background */}
@@ -76,6 +77,7 @@ export function ComicCanvas({ page, onInfoClick, onNextPage, onPrevPage }: Comic
<Button
variant="ghost"
className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
onClick={onRedrawClick}
>
<RefreshCw className="w-4 h-4" />
<span>Redraw</span>
@@ -90,6 +92,7 @@ export function ComicCanvas({ page, onInfoClick, onNextPage, onPrevPage }: Comic
<Button
variant="ghost"
className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
onClick={onRedrawClick}
>
<RefreshCw className="w-4 h-4" />
<span>Redraw</span>
components/editor/generate-page-modal.tsx
+14 -8
View File
@@ -12,7 +12,6 @@ import {
import { useToast } from "@/hooks/use-toast";
import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils";
import { COMIC_STYLES } from "@/lib/constants";
interface GeneratePageModalProps {
isOpen: boolean;
@@ -23,6 +22,8 @@ interface GeneratePageModalProps {
characterUrls?: string[];
}) => void;
pageNumber: number;
isRedrawMode?: boolean;
existingPrompt?: string;
}
export function GeneratePageModal({
@@ -30,6 +31,8 @@ export function GeneratePageModal({
onClose,
onGenerate,
pageNumber,
isRedrawMode = false,
existingPrompt = "",
}: GeneratePageModalProps) {
const [prompt, setPrompt] = useState("");
const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
@@ -42,13 +45,13 @@ export function GeneratePageModal({
// Reset form when modal opens
useEffect(() => {
if (isOpen) {
setPrompt("");
setPrompt(isRedrawMode ? existingPrompt : "");
setUploadedFiles([]);
setPreviews([]);
setShowPreview(null);
setIsGenerating(false);
}
}, [isOpen]);
}, [isOpen, isRedrawMode, existingPrompt]);
// Keyboard shortcut for form submission
useKeyboardShortcut(() => {
@@ -138,7 +141,7 @@ export function GeneratePageModal({
<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}
{isRedrawMode ? `Redraw Page ${pageNumber}` : `Generate Page ${pageNumber}`}
</DialogTitle>
</DialogHeader>
@@ -155,7 +158,7 @@ export function GeneratePageModal({
<textarea
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Continue the story... Describe what happens next."
placeholder={isRedrawMode ? "Tweak the prompt to improve this page..." : "Continue the story... Describe what happens next."}
disabled={isGenerating}
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"
/>
@@ -226,7 +229,10 @@ export function GeneratePageModal({
</div>
<div className="text-xs text-muted-foreground/70">
Automatically references previous pages and existing characters from your story.
{isRedrawMode
? "This will replace the current page with a new version. Previous pages and characters are automatically referenced."
: "Automatically references previous pages and existing characters from your story."
}
</div>
<Button
@@ -237,10 +243,10 @@ export function GeneratePageModal({
{isGenerating ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<span>Generating page...</span>
<span>{isRedrawMode ? "Redrawing page..." : "Generating page..."}</span>
</>
) : (
`Generate Page ${pageNumber}`
`${isRedrawMode ? "Redraw" : "Generate"} Page ${pageNumber}`
)}
</Button>
</div>
components/editor/page-sidebar.tsx
+3 -3
View File
@@ -38,7 +38,7 @@ export function PageSidebar({
<button
key={page.id}
onClick={() => onPageSelect(index)}
disabled={loadingPageId === page.id}
disabled={loadingPageId === index}
className={`
w-16 h-16 rounded-lg transition-all relative overflow-hidden
${
@@ -46,10 +46,10 @@ export function PageSidebar({
? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
: "glass-panel glass-panel-hover hover:ring-1 hover:ring-white/20"
}
${loadingPageId === page.id ? "opacity-50" : ""}
${loadingPageId === index ? "opacity-50" : ""}
`}
>
{loadingPageId === page.id ? (
{loadingPageId === index ? (
<div className="w-full h-full flex items-center justify-center">
<Loader2 className="w-6 h-6 animate-spin text-white" />
</div>