refactor(ui): focus the product on image generation only

Drop the disabled video/3D model tabs from the composer and home model
picker, reword storyboard/campaign copy away from motion/video toward
static campaign frames, ease the home prompt editor font sizing, and
update the deterministic fallback message to describe image generation
and editing instead of "video not yet supported".

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-08 10:56:14 +08:00
parent d5c5470c3c
commit 222e5a0219
4 changed files with 16 additions and 35 deletions
@@ -14,7 +14,6 @@ import {
Plus,
Sparkles,
Square,
Video,
X
} from "lucide-react";
import { forwardRef, type ReactNode, useMemo, useRef, useState } from "react";
@@ -264,10 +263,6 @@ export const CanvasAgentComposer = forwardRef<PromptComposerHandle, CanvasAgentC
<span>{t("imageMode")}</span>
{mode === "image" && <Check size={16} />}
</DropdownMenuItem>
<DropdownMenuItem disabled>
<Video size={18} />
<span>{t("modelVideoTab")}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
+13 -27
View File
@@ -65,7 +65,7 @@ type HomeInspirationCard = {
height: number;
};
type HomeModelTab = "image" | "video" | "3d";
type HomeModelTab = "image";
type HomeImageModel = {
id: string;
@@ -267,10 +267,10 @@ const promptModeBlueprints = [
},
{
id: "cosmetic-motion",
label: { "zh-CN": "化妆品动态广告图", "en-US": "Cosmetic motion frames" },
label: { "zh-CN": "化妆品系列广告图", "en-US": "Cosmetic campaign frames" },
prompt: {
"zh-CN": "为化妆品新品生成动态广告关键帧,包含产品旋转、液体质感、成分浮层、促销信息和落地页首屏,画面干净有高级感。",
"en-US": "Generate key frames for a cosmetic product motion ad with product rotation, liquid texture, ingredient overlays, promotion copy, and landing-page hero visuals."
"zh-CN": "为化妆品新品生成系列广告图,包含产品角度、液体质感、成分浮层、促销信息和落地页首屏,画面干净有高级感。",
"en-US": "Generate campaign frames for a cosmetic product with product angles, liquid texture, ingredient overlays, promotion copy, and landing-page hero visuals."
}
},
{
@@ -286,7 +286,7 @@ const promptModeBlueprints = [
{
id: "storyboard",
icon: "frame",
label: { "zh-CN": "影片与分镜", "en-US": "Film Storyboard" },
label: { "zh-CN": "视觉分镜", "en-US": "Visual Storyboard" },
seed: {
"zh-CN": "让 Moteva 生成日系梦幻写真分镜脚本",
"en-US": "Ask Moteva to generate a dreamy Japanese-style photo storyboard"
@@ -296,8 +296,8 @@ const promptModeBlueprints = [
id: "comic-storyboard",
label: { "zh-CN": "美漫风格分镜", "en-US": "Comics storyboard" },
prompt: {
"zh-CN": "生成一组美漫风格分镜,包含强对比光影、夸张透视、动作节奏、对白气泡位置和关键镜头说明,适合后续继续做视频。",
"en-US": "Generate a comics-style storyboard with high-contrast lighting, exaggerated perspective, action rhythm, speech-bubble placement, and key shot notes for later video production."
"zh-CN": "生成一组美漫风格分镜,包含强对比光影、夸张透视、动作节奏、对白气泡位置和关键画面说明,适合延展为静态系列广告。",
"en-US": "Generate a comics-style storyboard with high-contrast lighting, exaggerated perspective, action rhythm, speech-bubble placement, and key frame notes for a static campaign sequence."
}
},
{
@@ -312,8 +312,8 @@ const promptModeBlueprints = [
id: "paris-walk",
label: { "zh-CN": "漫步巴黎模特分镜", "en-US": "Paris walk storyboard" },
prompt: {
"zh-CN": "生成漫步巴黎主题模特分镜,包含街边咖啡、橱窗、过街、转身和落日镜头,适合服装品牌短片前期设计。",
"en-US": "Generate a Paris walk model storyboard with street cafe, storefront, crossing, turn-back shot, and sunset frames for a fashion brand short film concept."
"zh-CN": "生成漫步巴黎主题模特分镜,包含街边咖啡、橱窗、过街、转身和落日画面,适合服装品牌系列广告前期设计。",
"en-US": "Generate a Paris walk model storyboard with street cafe, storefront, crossing, turn-back shot, and sunset frames for a fashion brand campaign sequence."
}
},
{
@@ -461,14 +461,14 @@ const imageModelBlueprints = [
const inspirationBlueprints = [
["graffiti-brand", "brand", "brand", "粗线条涂鸦手绘品牌海报", "Bold hand-drawn brand poster", "用粗线条涂鸦、手写字、贴纸和高对比版式,扩展成品牌海报、包装贴纸和社媒封面。", "Use bold doodle lines, handwritten type, stickers, and high-contrast layout across brand posters, package stickers, and social covers.", "153****6220", 75354, 154, "#20242c", "ink", 460],
["watercolor-board", "storyboard", "storyboard", "水彩插画分镜", "Watercolor illustration storyboard", "把旅行短片拆成水彩分镜,包含远景、环境细节、人物动作和情绪转场。", "Break a travel short film into watercolor frames with wide shots, environmental details, character actions, and emotional transitions.", "Design大辉", 24656, 123, "#6f9db2", "water", 342],
["watercolor-board", "storyboard", "storyboard", "水彩插画分镜", "Watercolor illustration storyboard", "把旅行叙事拆成水彩分镜,包含远景、环境细节、人物动作和情绪转场。", "Break a travel narrative into watercolor frames with wide shots, environmental details, character actions, and emotional transitions.", "Design大辉", 24656, 123, "#6f9db2", "water", 342],
["line-city", "poster", "poster", "线条城市建筑海报", "Linear city architecture poster", "以细线城市轮廓、留白和冷灰蓝配色生成一组建筑宣传海报。", "Generate architecture campaign posters with fine city outlines, open spacing, and cool gray-blue tones.", "153****6220", 147844, 224, "#34495e", "blueprint", 344],
["new-chinese", "poster", "poster", "中式美学|新中式海报", "New Chinese aesthetic poster", "用新中式构图、宣纸肌理、留白和现代字体做文化活动主视觉。", "Create a cultural event key visual with new Chinese composition, paper texture, open spacing, and modern typography.", "DAODAO", 115983, 259, "#8f5136", "paper", 344],
["future-vector", "illustration", "illustration", "复古未来主义矢量插画", "Retro-futurist vector illustration", "结合复古未来主义、矢量几何、颗粒质感和强烈透视,输出插画主视觉。", "Combine retro futurism, vector geometry, grain texture, and strong perspective for an illustration key visual.", "这就葡", 9748, 68, "#3056d3", "electric", 376],
["skincare-illustration", "commerce", "product", "面霜清新自然风插画宣传设计", "Fresh skincare illustration campaign", "为面霜产品制作清新自然插画宣传图,包含成分、质地和详情页首屏。", "Create fresh natural illustration campaign visuals for a skincare cream, including ingredients, texture, and detail-page hero.", "五星好评送可乐", 882, 48, "#77a982", "natural", 376],
["protein-commerce", "commerce", "product", "草莓口味蛋白粉电商宣传图", "Strawberry protein commerce visual", "突出高蛋白、粉末质感、草莓风味和组合装促销,生成电商主图与广告图。", "Highlight high protein, powder texture, strawberry flavor, and bundle promotion across e-commerce hero and ad visuals.", "五星好评送可乐", 2376, 44, "#e86f85", "sweet", 289],
["ui-flower", "brand", "ui", "花隅集", "Floral collection UI", "为花艺集合产品设计清爽UI首页,包含分类、推荐、筛选和会员入口。", "Design a clean home UI for a floral collection product with categories, recommendations, filters, and member entry.", "微信用户43b29f", 30, 0, "#8eac68", "natural", 257],
["shopping-ui", "commerce", "ui", "3D购物网站设计", "3D shopping website design", "设计带3D商品展示的购物网站首页,包含商品卡、促销区、购物车入口和移动端适配。", "Design a shopping homepage with 3D product display, product cards, promotion area, cart entry, and mobile adaptation.", "侑子", 661, 12, "#6c63ff", "electric", 376],
["shopping-ui", "commerce", "ui", "立体商品网站设计", "Dimensional shopping website design", "设计带立体商品展示的购物网站首页,包含商品卡、促销区、购物车入口和移动端适配。", "Design a shopping homepage with dimensional product presentation, product cards, promotion area, cart entry, and mobile adaptation.", "侑子", 661, 12, "#6c63ff", "electric", 376],
["logo-course", "brand", "brand", "AI logo 课程教学案例", "AI logo course case", "把自律主题课程延展成logo、课程封面、学习卡片和社群海报。", "Extend a self-discipline course into logo, course cover, learning cards, and community posters.", "empact", 83, 0, "#161a22", "ink", 289],
["transparent-shell", "commerce", "product", "产品设计 透明外壳", "Transparent shell product design", "展示透明外壳、内部结构、材质反射和电商详情页卖点模块。", "Show transparent shell, inner structure, material reflections, and e-commerce detail-page selling point modules.", "不不", 6543, 61, "#94a3b8", "blueprint", 492],
["camp-entry", "illustration", "architecture", "飞行营地入口设计", "Flight camp entrance design", "为营地入口做建筑概念提案,包含指示系统、夜间灯光和游客动线。", "Create an entrance concept for a camp with wayfinding, night lighting, and visitor flow.", "得界智绘", 27, 0, "#7c6f56", "paper", 289],
@@ -1032,8 +1032,7 @@ function ModelPicker({
selectedModelId,
onSelectTab,
onSetModel,
onSelectModel,
imageOnly = false
onSelectModel
}: {
activeTab: HomeModelTab;
models: HomeImageModel[];
@@ -1041,17 +1040,10 @@ function ModelPicker({
onSelectTab: (tab: HomeModelTab) => void;
onSetModel: (modelId: string) => void;
onSelectModel: (modelId: string) => void;
imageOnly?: boolean;
}) {
const { t } = useI18n();
const selectedIsAuto = selectedModelId === "gpt-image-2-auto";
const tabs: Array<{ id: HomeModelTab; label: string; disabled?: boolean }> = imageOnly
? [{ id: "image", label: t("modelImageTab") }]
: [
{ id: "image", label: t("modelImageTab") },
{ id: "video", label: t("modelVideoTab"), disabled: true },
{ id: "3d", label: t("model3dTab"), disabled: true }
];
const tabs: Array<{ id: HomeModelTab; label: string; disabled?: boolean }> = [{ id: "image", label: t("modelImageTab") }];
return (
<>
@@ -1085,12 +1077,6 @@ function ModelPicker({
))}
</ScrollArea>
</TabsContent>
<TabsContent value="video">
<div className="model-empty">{t("modelComingSoon")}</div>
</TabsContent>
<TabsContent value="3d">
<div className="model-empty">{t("modelComingSoon")}</div>
</TabsContent>
</Tabs>
</>
);
+2 -2
View File
@@ -139,8 +139,8 @@ button:disabled {
.prompt-rich-editor.home-prompt-editor {
color: #1f2937;
font-size: 24px;
line-height: 1.45;
font-size: 20px;
line-height: 1.55;
font-weight: 600;
}
@@ -48,5 +48,5 @@ func synthesizeResponse(prompt string, mode string) string {
if mode == "" {
mode = "design"
}
return fmt.Sprintf("已按「%s」生成一组 %s 画布:官网首页、色彩卡片、移动端页面和详情页已放到无限画布中,可继续微调、扩展或上传参考图。视频生成暂未接入,当前聚焦图片、页面与品牌视觉。", prompt, mode)
return fmt.Sprintf("已按「%s」生成一组 %s 画布:官网首页、色彩卡片、移动端页面和详情页已放到无限画布中,可继续微调、扩展或上传参考图。当前聚焦图片生成、图片编辑、页面与品牌视觉。", prompt, mode)
}