+
@@ -565,6 +586,8 @@ export const PromptBox = forwardRef
{hasMentionItems && mentionItems ? (
(
)}
maxPromptLength
+ ? "text-red-500"
+ : "text-base-fg/40",
+ )}
+ >
+ {prompt.length} /{" "}
+ {isFinite(maxPromptLength) ? maxPromptLength : "∞"}
+
+ )}
+
+ {promptLength} / {isFinite(maxPromptLength) ? maxPromptLength : "∞"}
+
+
+ )}
{imagePromptRow && {imagePromptRow}
}
{footerControls}
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-image/create-image.tsx b/frontend/apps/artcraft-webapp/src/pages/create-image/create-image.tsx
index 6a14e870ae..fe52b7a710 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-image/create-image.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-image/create-image.tsx
@@ -121,6 +121,9 @@ export default function CreateImage() {
return apiModels.find((m) => m.model === DEFAULT_MODEL_ID) ?? apiModels[0];
}, [apiModels, ui.selectedModelId]);
+ // Soft prompt limit from the API; undefined (no model / unset) = unlimited.
+ const maxPromptLength = selectedModel?.text_prompt_max_length ?? undefined;
+
const prompt = ui.prompt;
const setPrompt = useCallback((v: string) => setUi({ prompt: v }), [setUi]);
@@ -363,6 +366,13 @@ export default function CreateImage() {
}
if (!prompt.trim() || isGenerating || !selectedModel) return;
+ if (maxPromptLength !== undefined && prompt.length > maxPromptLength) {
+ toast.error(
+ `Prompt exceeds the ${maxPromptLength} character limit for this model`,
+ );
+ return;
+ }
+
setIsGenerating(true);
const batchId = startBatch(
prompt,
@@ -435,6 +445,7 @@ export default function CreateImage() {
prompt,
isGenerating,
selectedModel,
+ maxPromptLength,
numImages,
aspectRatio,
resolution,
@@ -618,6 +629,7 @@ export default function CreateImage() {
onSubmit={handleGenerate}
isSubmitting={isGenerating}
credits={estimatedCredits}
+ maxPromptLength={maxPromptLength}
placeholder="Describe what you want in the image..."
supportsImagePrompts={!!selectedModel?.image_refs_supported}
maxImagePromptCount={maxImageRefs}
diff --git a/frontend/apps/artcraft-webapp/src/pages/create-video/create-video.tsx b/frontend/apps/artcraft-webapp/src/pages/create-video/create-video.tsx
index 304bef076f..90dd7b6562 100644
--- a/frontend/apps/artcraft-webapp/src/pages/create-video/create-video.tsx
+++ b/frontend/apps/artcraft-webapp/src/pages/create-video/create-video.tsx
@@ -62,6 +62,7 @@ import {
OMNI_GENERATE_OUTAGE_MESSAGE,
} from "@storyteller/omni-gen";
import {
+ effectivePromptMaxLength,
getCreatorIconPathForModelId,
getModelDescription,
getModelInfo,
@@ -273,6 +274,18 @@ export default function CreateVideo() {
const requiresImageInput = selectedModel?.text_to_video_supported === false;
+ // Soft prompt limit from the API; undefined = unlimited. Seedance waives
+ // the limit (Infinity) when the prompt contains Chinese characters: the
+ // server counts CJK as more than one unit, so a client-side character
+ // count would false-positive.
+ const maxPromptLength = selectedModel
+ ? effectivePromptMaxLength(
+ selectedModel.model,
+ selectedModel.text_prompt_max_length ?? undefined,
+ ui.prompt,
+ )
+ : undefined;
+
const prompt = ui.prompt;
const setPrompt = useCallback((v: string) => setUi({ prompt: v }), [setUi]);
@@ -877,6 +890,12 @@ export default function CreateVideo() {
});
return;
}
+ if (maxPromptLength !== undefined && prompt.length > maxPromptLength) {
+ toast.error(
+ `Prompt exceeds the ${maxPromptLength} character limit for this model`,
+ );
+ return;
+ }
console.log("[generate-video] starting", {
model: selectedModel.model,
numVideos,
@@ -1036,6 +1055,7 @@ export default function CreateVideo() {
needsImage,
isReferenceMode,
selectedModel,
+ maxPromptLength,
selectedSize,
numVideos,
effectiveDuration,
@@ -1364,6 +1384,7 @@ export default function CreateVideo() {
onSubmit={handleGenerate}
isSubmitting={isGenerating}
credits={estimatedCredits}
+ maxPromptLength={maxPromptLength}
placeholder="Describe the video you want to generate..."
supportsImagePrompts={supportsImagePrompts}
maxImagePromptCount={
diff --git a/frontend/apps/artcraft-webapp/src/styles.css b/frontend/apps/artcraft-webapp/src/styles.css
index f6c12154e0..ee9813fe57 100644
--- a/frontend/apps/artcraft-webapp/src/styles.css
+++ b/frontend/apps/artcraft-webapp/src/styles.css
@@ -271,6 +271,43 @@
background-color: rgba(255, 255, 255, 0.35);
}
+/* Hide the native resize grip (Chromium draws different grips for textareas
+ vs contenteditable divs) and draw one consistent grip on the wrapper so the
+ plain and @-mention prompt editors look identical. */
+.promptbox-scrollbar::-webkit-resizer {
+ background: transparent;
+ border: none;
+}
+
+.promptbox-resize-wrap {
+ position: relative;
+}
+
+.promptbox-resize-wrap::after {
+ content: "";
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ width: 10px;
+ height: 10px;
+ pointer-events: none;
+ background: linear-gradient(
+ 135deg,
+ transparent 40%,
+ rgba(255, 255, 255, 0.5) 40%,
+ rgba(255, 255, 255, 0.5) 45%,
+ transparent 45%,
+ transparent 55%,
+ rgba(255, 255, 255, 0.5) 55%,
+ rgba(255, 255, 255, 0.5) 60%,
+ transparent 60%,
+ transparent 70%,
+ rgba(255, 255, 255, 0.5) 70%,
+ rgba(255, 255, 255, 0.5) 75%,
+ transparent 75%
+ );
+}
+
@keyframes fade-in-up {
from {
opacity: 0;
diff --git a/frontend/apps/artcraft-website/src/components/lightbox/LightboxDetails.tsx b/frontend/apps/artcraft-website/src/components/lightbox/LightboxDetails.tsx
index 40c99438d5..67f2606c23 100644
--- a/frontend/apps/artcraft-website/src/components/lightbox/LightboxDetails.tsx
+++ b/frontend/apps/artcraft-website/src/components/lightbox/LightboxDetails.tsx
@@ -25,7 +25,7 @@ import {
THUMBNAIL_SIZES,
} from "@storyteller/common";
import {
- getModelCreatorIcon,
+ getCreatorIconPathForModelId,
getModelDisplayName,
getProviderDisplayName,
getProviderIconByName,
@@ -297,7 +297,13 @@ export function LightboxDetails({
label="Model"
value={
<>
- {getModelCreatorIcon(promptData.modelType)}
+
+
diff --git a/frontend/apps/artcraft-website/src/pages/create-image/create-image.tsx b/frontend/apps/artcraft-website/src/pages/create-image/create-image.tsx
index 094bc3dcf9..167591e4e5 100644
--- a/frontend/apps/artcraft-website/src/pages/create-image/create-image.tsx
+++ b/frontend/apps/artcraft-website/src/pages/create-image/create-image.tsx
@@ -20,6 +20,7 @@ import {
} from "../../components/generation-gallery";
import { Lightbox } from "../../components/lightbox/lightbox";
import { AppDownloadCta } from "../../components/app-download-cta/AppDownloadCta";
+import { toast } from "../../components/toast/toast";
import { useCreateImageStore } from "./create-image-store";
import { enqueueImageGeneration, startPolling } from "./generate-image-api";
import { AspectRatioPicker } from "./components/AspectRatioPicker";
@@ -83,6 +84,9 @@ export default function CreateImage() {
return apiModels.find((m) => m.model === DEFAULT_MODEL_ID) ?? apiModels[0];
}, [apiModels, ui.selectedModelId]);
+ // Soft prompt limit from the API; undefined (no model / unset) = unlimited.
+ const maxPromptLength = selectedModel?.text_prompt_max_length ?? undefined;
+
const prompt = ui.prompt;
const setPrompt = useCallback((v: string) => setUi({ prompt: v }), [setUi]);
const aspectRatio = ui.aspectRatio;
@@ -278,6 +282,13 @@ export default function CreateImage() {
const handleGenerate = useCallback(async () => {
if (!prompt.trim() || isGenerating || !selectedModel) return;
+ if (maxPromptLength !== undefined && prompt.length > maxPromptLength) {
+ toast.error(
+ `Prompt exceeds the ${maxPromptLength} character limit for this model`,
+ );
+ return;
+ }
+
setIsGenerating(true);
const batchId = startBatch(
prompt,
@@ -337,6 +348,7 @@ export default function CreateImage() {
prompt,
isGenerating,
selectedModel,
+ maxPromptLength,
numImages,
aspectRatio,
resolution,
@@ -396,6 +408,7 @@ export default function CreateImage() {
onSubmit={handleGenerate}
isSubmitting={isGenerating}
credits={estimatedCredits}
+ maxPromptLength={maxPromptLength}
placeholder="Describe what you want in the image..."
supportsImagePrompts={!!selectedModel?.image_refs_supported}
maxImagePromptCount={maxImageRefs}
diff --git a/frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx b/frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx
index a8ed54c4bf..46f996f600 100644
--- a/frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx
+++ b/frontend/apps/artcraft-website/src/pages/create-video/create-video.tsx
@@ -46,7 +46,11 @@ import {
import { GenerationCountPicker } from "../create-image/components/GenerationCountPicker";
import { useVideoCostEstimate } from "../../lib/cost-estimate-api";
import { useOmniGenVideoModels } from "@storyteller/omni-gen";
-import { getCreatorIconPathForModelId } from "@storyteller/model-list";
+import {
+ effectivePromptMaxLength,
+ getCreatorIconPathForModelId,
+} from "@storyteller/model-list";
+import { toast } from "../../components/toast/toast";
// ── Constants ────────────────────────────────────────────────────────────
@@ -182,6 +186,18 @@ export default function CreateVideo() {
return apiModels.find((m) => m.model === DEFAULT_MODEL_ID) ?? apiModels[0];
}, [apiModels, ui.selectedModelId]);
+ // Soft prompt limit from the API; undefined = unlimited. Seedance waives
+ // the limit (Infinity) when the prompt contains Chinese characters: the
+ // server counts CJK as more than one unit, so a client-side character
+ // count would false-positive.
+ const maxPromptLength = selectedModel
+ ? effectivePromptMaxLength(
+ selectedModel.model,
+ selectedModel.text_prompt_max_length ?? undefined,
+ ui.prompt,
+ )
+ : undefined;
+
const prompt = ui.prompt;
const setPrompt = useCallback((v: string) => setUi({ prompt: v }), [setUi]);
const selectedSize = ui.selectedSize;
@@ -717,6 +733,12 @@ export default function CreateVideo() {
});
return;
}
+ if (maxPromptLength !== undefined && prompt.length > maxPromptLength) {
+ toast.error(
+ `Prompt exceeds the ${maxPromptLength} character limit for this model`,
+ );
+ return;
+ }
console.log("[generate-video] starting", {
model: selectedModel.model,
numVideos,
@@ -852,6 +874,7 @@ export default function CreateVideo() {
needsImage,
isReferenceMode,
selectedModel,
+ maxPromptLength,
selectedSize,
numVideos,
duration,
@@ -935,6 +958,7 @@ export default function CreateVideo() {
onSubmit={handleGenerate}
isSubmitting={isGenerating || needsImage}
credits={estimatedCredits}
+ maxPromptLength={maxPromptLength}
placeholder="Describe the video you want to generate..."
supportsImagePrompts={supportsImagePrompts}
maxImagePromptCount={
diff --git a/frontend/apps/artcraft-website/src/styles.css b/frontend/apps/artcraft-website/src/styles.css
index 39f3d4ea17..c5ffa988af 100644
--- a/frontend/apps/artcraft-website/src/styles.css
+++ b/frontend/apps/artcraft-website/src/styles.css
@@ -120,6 +120,43 @@
background-color: rgba(255, 255, 255, 0.35);
}
+/* Hide the native resize grip (Chromium draws different grips for textareas
+ vs contenteditable divs) and draw one consistent grip on the wrapper so the
+ plain and @-mention prompt editors look identical. */
+.promptbox-scrollbar::-webkit-resizer {
+ background: transparent;
+ border: none;
+}
+
+.promptbox-resize-wrap {
+ position: relative;
+}
+
+.promptbox-resize-wrap::after {
+ content: "";
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ width: 10px;
+ height: 10px;
+ pointer-events: none;
+ background: linear-gradient(
+ 135deg,
+ transparent 40%,
+ rgba(255, 255, 255, 0.5) 40%,
+ rgba(255, 255, 255, 0.5) 45%,
+ transparent 45%,
+ transparent 55%,
+ rgba(255, 255, 255, 0.5) 55%,
+ rgba(255, 255, 255, 0.5) 60%,
+ transparent 60%,
+ transparent 70%,
+ rgba(255, 255, 255, 0.5) 70%,
+ rgba(255, 255, 255, 0.5) 75%,
+ transparent 75%
+ );
+}
+
@keyframes fade-in-up {
from {
opacity: 0;
diff --git a/frontend/libs/api/src/lib/OmniGenApi.ts b/frontend/libs/api/src/lib/OmniGenApi.ts
index 491201f83f..caf9b2fa6a 100644
--- a/frontend/libs/api/src/lib/OmniGenApi.ts
+++ b/frontend/libs/api/src/lib/OmniGenApi.ts
@@ -77,6 +77,8 @@ export interface OmniGenVideoGenerateResponse {
export interface OmniGenImageModelInfo {
model: string;
+ // ModelCreator enum as a snake_case string, e.g. "bytedance", "google".
+ model_creator?: string | null;
is_disabled: boolean | null;
full_name: string | null;
extra_info_short?: string | null;
@@ -111,6 +113,8 @@ export interface OmniGenImageModelsResponse {
export interface OmniGenVideoModelInfo {
model: string;
+ // ModelCreator enum as a snake_case string, e.g. "bytedance", "open_ai".
+ model_creator?: string | null;
is_disabled: boolean | null;
full_name: string | null;
extra_info_short?: string | null;
diff --git a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
index 7753c7f921..b5cf53e1c2 100644
--- a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
+++ b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
@@ -43,7 +43,7 @@ import {
isActionReminderOpen,
} from "@storyteller/ui-action-reminder-modal";
import {
- getModelCreatorIcon,
+ getCreatorIconPathForModelId,
getModelDisplayName,
getProviderDisplayName,
getProviderIconByName,
@@ -1327,7 +1327,11 @@ function InfoSection({
label="Model"
value={
<>
- {getModelCreatorIcon(modelType)}
+
{hasMentionItems && mentionItems ? (
(
)}
)}
+
+ {maxPromptLength !== undefined && (
+
maxPromptLength
+ ? "text-red-500"
+ : "text-base-fg/40",
+ )}
+ >
+ {prompt.length} /{" "}
+ {isFinite(maxPromptLength) ? maxPromptLength : "∞"}
+
+ )}