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

Enforce MAX_USER_PROMPT limit in generate-page-modal and comic-creation-form

Browse Source
This commit is contained in:
Riccardo Giorato
2026-02-11 11:37:28 +01:00
parent a05fdea297
commit 9cf3e31af2
3 changed files with 58 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/generate-page-modal.tsx
+13 -7
View File
@@ -15,6 +15,7 @@ import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils";
import { useS3Upload } from "next-s3-upload";
import { isContentPolicyViolation } from "@/lib/utils";
import { MAX_SYSTEM_LENGTH, MAX_USER_PROMPT } from "@/lib/prompt";
interface CharacterItem {
url: string;
@@ -330,13 +331,19 @@ export function GeneratePageModal({
<textarea
autoFocus
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
onChange={(e) => setPrompt(e.target.value.slice(
// Only allow users to type up to MAX_SYSTEM_LENGTH characters in the prompt.
// Ensure users cannot paste or otherwise enter more text than the max.
0, MAX_USER_PROMPT))
}
placeholder={
isRedrawMode
? "Tweak the prompt to improve this page..."
: "Continue the story... Describe what happens next."
}
disabled={isGenerating}
maxLength={MAX_USER_PROMPT}
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"
/>
@@ -358,11 +365,10 @@ export function GeneratePageModal({
onClick={() => toggleCharacterSelection(index)}
onDoubleClick={() => setShowPreview(imageUrl)}
disabled={isGenerating}
className={`w-10 h-10 rounded-md overflow-hidden transition-all disabled:opacity-50 disabled:cursor-not-allowed relative ${
isSelected
? "border-2 border-indigo-500"
: "border-2 border-transparent hover:border-indigo/50"
}`}
className={`w-10 h-10 rounded-md overflow-hidden transition-all disabled:opacity-50 disabled:cursor-not-allowed relative ${isSelected
? "border-2 border-indigo-500"
: "border-2 border-transparent hover:border-indigo/50"
}`}
title="Click to select/deselect, double-click to preview"
>
<img
@@ -432,7 +438,7 @@ export function GeneratePageModal({
{isRedrawMode
? "Previous pages and characters automatically referenced."
: "Previous page automatically referenced. " +
`${selectedCharacterIndices.size} selected characters.`}
`${selectedCharacterIndices.size} selected characters.`}
</div>
<Button
components/landing/comic-creation-form.tsx
+7 -3
View File
@@ -12,6 +12,7 @@ import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
import { useApiKey } from "@/hooks/use-api-key";
import { isContentPolicyViolation } from "@/lib/utils";
import { ApiKeyModal } from "@/components/api-key-modal";
import { MAX_SYSTEM_LENGTH, MAX_USER_PROMPT } from "@/lib/prompt";
interface ComicCreationFormProps {
prompt: string;
@@ -328,9 +329,12 @@ export function ComicCreationForm({
<textarea
ref={textareaRef}
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
onChange={(e) => setPrompt(e.target.value.slice(
0, MAX_USER_PROMPT))
}
placeholder="A cyberpunk detective standing in neon rain, holding a glowing datapad, moody lighting, noir style..."
disabled={isLoading}
maxLength={MAX_USER_PROMPT}
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"
/>
@@ -424,8 +428,8 @@ export function ComicCreationForm({
setShowStyleDropdown(false);
}}
className={`w-full text-left px-3 py-2 rounded text-xs transition-colors flex items-center justify-between ${style === styleOption.id
? "bg-indigo/10 text-indigo"
: "text-muted-foreground hover:bg-white/5 hover:text-white"
? "bg-indigo/10 text-indigo"
: "text-muted-foreground hover:bg-white/5 hover:text-white"
}`}
>
<span>{styleOption.name}</span>