diff --git a/app/api/add-page/route.ts b/app/api/add-page/route.ts index 738ef6c..029fc2f 100644 --- a/app/api/add-page/route.ts +++ b/app/api/add-page/route.ts @@ -6,6 +6,8 @@ import { createPage, getNextPageNumber, getStoryWithPagesBySlug, + getLastPageImage, + getStoryCharacterImages, } from "@/lib/db-actions"; import { freeTierRateLimit } from "@/lib/rate-limit"; import { uploadImageToS3 } from "@/lib/s3-upload"; @@ -84,6 +86,24 @@ export async function POST(request: NextRequest) { const dimensions = FIXED_DIMENSIONS; + // Collect reference images: previous page + story characters + current characters + 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); + } + } + + // Get story character images (up to 2 most recent) + const storyCharacterImages = await getStoryCharacterImages(story.id); + referenceImages.push(...storyCharacterImages.slice(-2)); // Take last 2 + + // Add current character images to references + referenceImages.push(...characterImages); + // Build the prompt with continuation context const previousPages = pages.map(p => ({ prompt: p.prompt, @@ -108,7 +128,7 @@ export async function POST(request: NextRequest) { width: dimensions.width, height: dimensions.height, temperature: 0.1, - reference_images: characterImages.length > 0 ? characterImages : undefined, + reference_images: referenceImages.length > 0 ? referenceImages : undefined, }); } catch (error) { console.error("Together AI API error:", error); diff --git a/app/api/generate-comic/route.ts b/app/api/generate-comic/route.ts index 50e24fe..d3ad1f1 100644 --- a/app/api/generate-comic/route.ts +++ b/app/api/generate-comic/route.ts @@ -7,6 +7,8 @@ import { createPage, getNextPageNumber, getStoryById, + getLastPageImage, + getStoryCharacterImages, } from "@/lib/db-actions"; import { freeTierRateLimit } from "@/lib/rate-limit"; import { COMIC_STYLES } from "@/lib/constants"; @@ -89,9 +91,11 @@ export async function POST(request: NextRequest) { let page; let story; + let referenceImages: string[] = []; if (storyId) { - const story = await getStoryById(storyId); + // Continuation: get previous page image and story character images + story = await getStoryById(storyId); if (!story) { return NextResponse.json({ error: "Story not found" }, { status: 404 }); } @@ -103,7 +107,20 @@ export async function POST(request: NextRequest) { prompt, characterImageUrls: characterImages, }); + + // Get previous page image for style consistency (unless it's page 1) + if (nextPageNumber > 1) { + const lastPageImage = await getLastPageImage(storyId); + if (lastPageImage) { + referenceImages.push(lastPageImage); + } + } + + // Get story character images (up to 2 most recent) + const storyCharacterImages = await getStoryCharacterImages(storyId); + referenceImages.push(...storyCharacterImages.slice(-2)); // Take last 2 } else { + // New story: no previous page reference story = await createStory({ title: prompt.length > 50 ? prompt.substring(0, 50) + "..." : prompt, description: undefined, @@ -119,6 +136,9 @@ export async function POST(request: NextRequest) { }); } + // Add current character images to references + referenceImages.push(...characterImages); + const dimensions = FIXED_DIMENSIONS; const fullPrompt = buildComicPrompt({ @@ -139,8 +159,7 @@ export async function POST(request: NextRequest) { width: dimensions.width, height: dimensions.height, temperature: 0.1, // Lower temperature for more consistent face matching - reference_images: - characterImages.length > 0 ? characterImages : undefined, + reference_images: referenceImages.length > 0 ? referenceImages : undefined, }); } catch (error) { console.error("Together AI API error:", error); diff --git a/app/page.tsx b/app/page.tsx index bc5add9..6710445 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,8 +3,7 @@ import { Navbar } from "@/components/landing/navbar" import { Footer } from "@/components/landing/footer" import { LandingHero } from "@/components/landing/hero-section" -import { StoryInput } from "@/components/landing/story-input" -import { CreateButton } from "@/components/landing/create-button" +import { ComicCreationForm } from "@/components/landing/comic-creation-form" import { useState, useEffect } from "react" export default function Home() { @@ -43,28 +42,20 @@ export default function Home() {
-
-
- -
-
- -
-
+
+
+ +
+
diff --git a/components/landing/story-input.tsx b/components/landing/comic-creation-form.tsx similarity index 63% rename from components/landing/story-input.tsx rename to components/landing/comic-creation-form.tsx index 70c0d3b..77abcd6 100644 --- a/components/landing/story-input.tsx +++ b/components/landing/comic-creation-form.tsx @@ -1,13 +1,15 @@ "use client"; -import { useState } from "react"; - -import { useRef, useEffect } from "react"; -import { Upload, X, Check } from "lucide-react"; +import { useState, useRef, useEffect } from "react"; +import { useRouter } from "next/navigation"; +import { Upload, X, Check, ArrowRight, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; +import { useToast } from "@/hooks/use-toast"; +import { useS3Upload } from "next-s3-upload"; +import { useAuth, SignInButton } from "@clerk/nextjs"; import { COMIC_STYLES } from "@/lib/constants"; -interface StoryInputProps { +interface ComicCreationFormProps { prompt: string; setPrompt: (prompt: string) => void; style: string; @@ -15,9 +17,10 @@ interface StoryInputProps { characterFiles: File[]; setCharacterFiles: (files: File[]) => void; isLoading: boolean; + setIsLoading: (loading: boolean) => void; } -export function StoryInput({ +export function ComicCreationForm({ prompt, setPrompt, style, @@ -25,11 +28,32 @@ export function StoryInput({ characterFiles, setCharacterFiles, isLoading, -}: StoryInputProps) { + setIsLoading, +}: ComicCreationFormProps) { + const router = useRouter(); + const [loadingStep, setLoadingStep] = useState(0); + const { toast } = useToast(); + const { uploadToS3 } = useS3Upload(); + const { isSignedIn, isLoaded } = useAuth(); + const [hasApiKey, setHasApiKey] = useState(false); const [previews, setPreviews] = useState([]); const [showPreview, setShowPreview] = useState(null); const [showStyleDropdown, setShowStyleDropdown] = useState(false); const fileInputRef = useRef(null); + const textareaRef = useRef(null); + + // Check if user has their own API key set + useEffect(() => { + const checkApiKey = () => { + const apiKey = localStorage.getItem("together_api_key"); + setHasApiKey(!!apiKey); + }; + + checkApiKey(); + // Listen for storage changes + window.addEventListener("storage", checkApiKey); + return () => window.removeEventListener("storage", checkApiKey); + }, []); useEffect(() => { if (isLoading) { @@ -37,6 +61,35 @@ export function StoryInput({ } }, [isLoading]); + useEffect(() => { + // Auto-focus the textarea when component mounts + if (textareaRef.current) { + textareaRef.current.focus(); + } + }, []); + + useEffect(() => { + if (!isLoading) return; + + const steps = [ + "Enhancing prompt...", + "Generating scenes...", + "Creating your comic...", + ]; + let currentStep = 0; + + const interval = setInterval(() => { + currentStep += 1; + if (currentStep < steps.length) { + setLoadingStep(currentStep); + } else { + clearInterval(interval); + } + }, 2500); + + return () => clearInterval(interval); + }, [isLoading]); + const handleFiles = (newFiles: FileList | null) => { if (!newFiles) return; @@ -84,6 +137,83 @@ export function StoryInput({ return () => document.removeEventListener("mousedown", handleClickOutside); }, []); + const handleCreate = async () => { + if (!prompt.trim()) { + toast({ + title: "Prompt required", + description: "Please enter a prompt to generate your comic", + variant: "destructive", + duration: 3000, + }); + return; + } + + setIsLoading(true); + setLoadingStep(0); + + try { + const apiKey = localStorage.getItem("together_api_key"); + const characterUploads = await Promise.all( + characterFiles.map((file) => uploadToS3(file).then(({ url }) => url)) + ); + + // Use API to create story and generate first page + const response = await fetch("/api/generate-comic", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + prompt, + apiKey, + style, + characterImages: characterUploads, + }), + }); + + if (!response.ok) { + const errorData = await response.json(); + if (response.status === 429 && errorData.isRateLimited) { + throw new Error(errorData.error); + } + throw new Error(errorData.error || "Failed to create story"); + } + + const result = await response.json(); + + // Redirect to the story editor using slug + router.push(`/editor/${result.storySlug}`); + } catch (error) { + console.error("Error creating comic:", error); + toast({ + title: "Creation failed", + description: + error instanceof Error + ? error.message + : "Failed to create comic. Please try again.", + variant: "destructive", + duration: 4000, + }); + setIsLoading(false); + } + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + const isEnter = e.key === "Enter" || e.key === "\n" || e.keyCode === 13; + const isModifierPressed = e.shiftKey || e.ctrlKey || e.metaKey; // metaKey for Cmd on Mac + + if (isEnter && isModifierPressed) { + e.preventDefault(); + handleCreate(); + } + }; + + const loadingSteps = [ + "Enhancing prompt...", + "Generating scenes...", + "Creating your comic...", + ]; + return ( <>
@@ -95,8 +225,10 @@ export function StoryInput({