Add reference images from previous page and story characters for consist

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);

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:
+        reference_images: referenceImages.length > 0 ? referenceImages : undefined,
-          characterImages.length > 0 ? characterImages : undefined,
       });
     } catch (error) {
       console.error("Together AI API error:", error);

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 { ComicCreationForm } from "@/components/landing/comic-creation-form"
-import { CreateButton } from "@/components/landing/create-button"
 import { useState, useEffect } from "react"
 
 export default function Home() {
@@ -43,28 +42,20 @@ export default function Home() {
           <div className="max-w-xl mx-auto lg:mx-0 w-full z-10">
             <LandingHero />
 
-            <div className="space-y-4 sm:space-y-5 mt-4 sm:mt-5">
+             <div className="space-y-4 sm:space-y-5 mt-4 sm:mt-5">
-              <div className="opacity-0 animate-fade-in-up animation-delay-100">
+               <div className="opacity-0 animate-fade-in-up animation-delay-100">
-                <StoryInput
+                 <ComicCreationForm
-                  prompt={prompt}
+                   prompt={prompt}
-                  setPrompt={setPrompt}
+                   setPrompt={setPrompt}
-                  style={style}
+                   style={style}
-                  setStyle={setStyle}
+                   setStyle={setStyle}
-                  characterFiles={characterFiles}
+                   characterFiles={characterFiles}
-                  setCharacterFiles={setCharacterFiles}
+                   setCharacterFiles={setCharacterFiles}
-                  isLoading={isLoading}
+                   isLoading={isLoading}
-                />
+                   setIsLoading={setIsLoading}
-              </div>
+                 />
-              <div className="opacity-0 animate-fade-in-up animation-delay-200">
+               </div>
-                <CreateButton
+             </div>
-                  prompt={prompt}
-                  style={style}
-                  characterFiles={characterFiles}
-                  isLoading={isLoading}
-                  setIsLoading={setIsLoading}
-                />
-              </div>
-            </div>
           </div>
         </div>
 

components/landing/comic-creation-form.tsx

@@ -1,13 +1,15 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
-
+import { useRouter } from "next/navigation";
-import { useRef, useEffect } from "react";
+import { Upload, X, Check, ArrowRight, Loader2 } from "lucide-react";
-import { Upload, X, Check } 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<string[]>([]);
   const [showPreview, setShowPreview] = useState<number | null>(null);
   const [showStyleDropdown, setShowStyleDropdown] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(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<HTMLTextAreaElement>) => {
+    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 (
     <>
       <div className="relative glass-panel p-0.5 sm:p-1 rounded-xl group focus-within:border-indigo/30 transition-colors">
@@ -95,8 +225,10 @@ export function StoryInput({
           </div>
 
           <textarea
+            ref={textareaRef}
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={handleKeyDown}
             placeholder="A cyberpunk detective standing in neon rain, holding a glowing datapad, moody lighting, noir style..."
             disabled={isLoading}
             className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-16 leading-relaxed disabled:opacity-50 disabled:cursor-not-allowed"
@@ -242,6 +374,48 @@ export function StoryInput({
           </div>
         </div>
       )}
+
+      <div className="pt-2">
+        {!isLoaded ? (
+          <div className="h-10" />
+        ) : isSignedIn ? (
+          <div className="flex items-center justify-between gap-3 w-full">
+            <Button
+              onClick={handleCreate}
+              disabled={isLoading || !prompt.trim()}
+              className="bg-white hover:bg-neutral-200 text-black px-8 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-3 tracking-tight"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <span className="text-sm font-medium tracking-tight">
+                    {loadingSteps[loadingStep]}
+                  </span>
+                </>
+              ) : (
+                <>
+                  Generate
+                  <ArrowRight className="w-4 h-4" />
+                </>
+              )}
+            </Button>
+            <div className="text-xs text-muted-foreground whitespace-nowrap">
+              {hasApiKey ? (
+                <>Using your API key (~$0.01 per comic)</>
+              ) : (
+                <>1 credit weekly</>
+              )}
+            </div>
+          </div>
+        ) : (
+          <SignInButton mode="modal">
+            <Button className="w-full sm:w-auto sm:min-w-40 bg-white hover:bg-neutral-200 text-black px-8 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-3 tracking-tight">
+              Login to create your comic
+              <ArrowRight className="w-4 h-4" />
+            </Button>
+          </SignInButton>
+        )}
+      </div>
     </>
   );
-}
+}

components/landing/create-button.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { 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";
-
-interface CreateButtonProps {
-  prompt: string;
-  style: string;
-  characterFiles: File[];
-  isLoading: boolean;
-  setIsLoading: (loading: boolean) => void;
-}
-
-export function CreateButton({
-  prompt,
-  style,
-  characterFiles,
-  isLoading,
-  setIsLoading,
-}: CreateButtonProps) {
-  const router = useRouter();
-  const [loadingStep, setLoadingStep] = useState(0);
-  const { toast } = useToast();
-  const { uploadToS3 } = useS3Upload();
-  const { isSignedIn, isLoaded } = useAuth();
-  const [hasApiKey, setHasApiKey] = useState(false);
-
-  // 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) 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 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 loadingSteps = [
-    "Enhancing prompt...",
-    "Generating scenes...",
-    "Creating your comic...",
-  ];
-
-  return (
-    <div className="pt-2">
-      {!isLoaded ? (
-        <div className="h-10" />
-      ) : isSignedIn ? (
-        <div className="flex items-center justify-between gap-3 w-full">
-          <Button
-            onClick={handleCreate}
-            disabled={isLoading || !prompt.trim()}
-            className="bg-white hover:bg-neutral-200 text-black px-8 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-3 tracking-tight"
-          >
-            {isLoading ? (
-              <>
-                <Loader2 className="w-4 h-4 animate-spin" />
-                <span className="text-sm font-medium tracking-tight">
-                  {loadingSteps[loadingStep]}
-                </span>
-              </>
-            ) : (
-              <>
-                Generate
-                <ArrowRight className="w-4 h-4" />
-              </>
-            )}
-          </Button>
-          <div className="text-xs text-muted-foreground whitespace-nowrap">
-            {hasApiKey ? (
-              <>Using your API key (~$0.01 per comic)</>
-            ) : (
-              <>1 credit weekly</>
-            )}
-          </div>
-        </div>
-      ) : (
-        <SignInButton mode="modal">
-          <Button className="w-full sm:w-auto sm:min-w-40 bg-white hover:bg-neutral-200 text-black px-8 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-3 tracking-tight">
-            Login to create your comic
-            <ArrowRight className="w-4 h-4" />
-          </Button>
-        </SignInButton>
-      )}
-    </div>
-  );
-}

lib/db-actions.ts

@@ -82,13 +82,46 @@ export async function getStoryWithPagesBySlug(slug: string): Promise<{ story: St
 }
 
 export async function getStoryCharacterImages(storyId: string): Promise<string[]> {
-  const storyPages = await db.select({ characterImageUrls: pages.characterImageUrls })
+  const storyPages = await db.select({
+    characterImageUrls: pages.characterImageUrls,
+    pageNumber: pages.pageNumber
+  })
     .from(pages)
-    .where(eq(pages.storyId, storyId));
+    .where(eq(pages.storyId, storyId))
+    .orderBy(pages.pageNumber);
 
-  // Flatten all character URLs from all pages and remove duplicates
+  // Flatten all character URLs from all pages, keeping order by page number
-  const allUrls = storyPages.flatMap(page => page.characterImageUrls);
+  const allUrls: string[] = [];
-  return [...new Set(allUrls)]; // Remove duplicates
+  const seenUrls = new Set<string>();
+
+  for (const page of storyPages) {
+    for (const url of page.characterImageUrls) {
+      if (!seenUrls.has(url)) {
+        seenUrls.add(url);
+        allUrls.push(url);
+      }
+    }
+  }
+
+  return allUrls;
+}
+
+export async function getLastPageImage(storyId: string): Promise<string | null> {
+  const allPages = await db.select({ generatedImageUrl: pages.generatedImageUrl, pageNumber: pages.pageNumber })
+    .from(pages)
+    .where(eq(pages.storyId, storyId))
+    .orderBy(pages.pageNumber);
+
+  if (allPages.length === 0) return null;
+
+  // Find the last page that has a generated image
+  for (let i = allPages.length - 1; i >= 0; i--) {
+    if (allPages[i].generatedImageUrl) {
+      return allPages[i].generatedImageUrl;
+    }
+  }
+
+  return null;
 }
 
 export async function getNextPageNumber(storyId: string): Promise<number> {