Add reference images from previous page and story characters for consist

2025-12-26 18:08:21 +01:00
parent 7fd5367577
commit 85f18f0ed1
6 changed files with 278 additions and 219 deletions
@@ -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<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>
    </>
  );
-}
+}
@@ -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>
-  );
-}