diff --git a/电商AI平台/asset-factory.html b/电商AI平台/asset-factory.html new file mode 100644 index 0000000..17f3730 --- /dev/null +++ b/电商AI平台/asset-factory.html @@ -0,0 +1,900 @@ + + + + +图片生成 · 流·Studio + + + + + +
+ +
+
+

图片生成

+
+ // 一键生成 + · + 电商视觉素材,提升内容制作效率 +
+
+
+ + +
+ + +
+ + + +
+
+ [ MODEL · TRY-ON ] +
模特上身图
+
选择模特,AI 生成商品模特上身效果图
+ +
    +
  • + + + + 支持多模特选择 +
  • +
  • + + + + 一次生成 4 张 +
  • +
  • + + + + 支持多商品并行 +
  • +
+ +
+ + 开始生成 + + + [ ≈ ¥0.30 / 张 ] +
+
+ +
+
Ava · 9:16
+
+
变体 01
+
变体 02
+
变体 03
+
+
+
+
+ + +
+ + + +
+
+ [ PLATFORM · KIT ] +
平台套图
+
选择平台模板,AI 生成电商平台套图
+ +
    +
  • + + + + 覆盖主流电商平台 +
  • +
  • + + + + 一键生成 4 张套图 +
  • +
  • + + + + 智能排版设计 +
  • +
+ +
+
DY抖音
+
TB淘宝
+
XHS小红书
+
PDD拼多多
+
AMZ亚马逊
+
+ +
+ + 开始生成 + + + [ ≈ ¥0.50 / 张 ] +
+
+ +
+
套图 / TB
+
套图 / DY
+
套图 / XHS
+
套图 / PDD
+
+
+
+ + +
+ + + +
+
+ [ TRI-VIEW · OPTIMIZE ] +
图片优化
+
为人物 / 商品生成三视图,保证多镜头一致性
+ +
    +
  • + + + + 人物 · 商品 全支持 +
  • +
  • + + + + 正面 / 侧面 / 背面 一次输出 +
  • +
  • + + + + 多镜头一致性保证 +
  • +
+ +
+ + 开始生成 + + + [ ≈ ¥0.40 / 组 ] +
+
+ +
+
正面
+
侧面
+
背面
+
+
+
+ +
+ + +
+

任务中心

+ // 0 个 · 0 生成中 · 0 已完成 · 0 失败 +
+ + +
+
全部 0
+
生成中 0
+
已完成 0
+
失败 0
+
+ + +
+
+ + +
+
+ +
+
+ + +
+ + +
+
+ +
// 显示 0 / 0 个任务
+ + +
+ + + + + + + + + + + + +
任务类型进度状态创建于
+
+ + + + +
+ + + + + + + + + diff --git a/电商AI平台/assets/new-product-drawer.js b/电商AI平台/assets/new-product-drawer.js new file mode 100644 index 0000000..f62dd03 --- /dev/null +++ b/电商AI平台/assets/new-product-drawer.js @@ -0,0 +1,578 @@ +/* ============================================================ + 新建商品 · 共享 Drawer 模块 + ---------------------------------------------------------- + 在任意页面只需 + diff --git a/电商AI平台/library.html b/电商AI平台/library.html index 96dff81..5d45c6d 100644 --- a/电商AI平台/library.html +++ b/电商AI平台/library.html @@ -7,13 +7,238 @@ @@ -22,99 +247,1559 @@

资产库

-
// 跨项目复用 · 人 8 · 景 14 · 商 12 · 片 8
+
// 跨项目复用 · 0 人 · 0 景 · 0 商 · 0
- +
-
-
人物 8
-
场景 14
-
商品图 12
-
成片 8
-
我的上传 3
+
+
人物 0
+
场景 0
+
商品图 0
+
成片 0
+
我的上传 0
- +
- - - - - + + +
+ +
+
+
+ +
+
+
+ +
+
+ + +
+ +
+
+ + +
+ +
+
+ + +
+ +
+
+
+ +
+
+ + +
+ +
+
+ + +
+ +
+
+ + - + + +
+ +
+
-
-
+
// 显示 0 / 0 个资产
+ + +
+
+ +
林夕 · 都市白领
林夕
-
女 · 25-30 · 用过 4 次
+
女 · 青年 · 都市白领 · 用过 4 次
-
+
+ +
阿楠 · 同事女
阿楠
-
女 · 25-30 · 用过 2 次
+
女 · 青年 · 都市白领 · 用过 2 次
-
+
+ +
小七 · 学生女
小七
-
女 · 18-22 · 用过 3 次
+
女 · 青年 · 学生 · 用过 3 次
-
+
+ +
阿杰 · 通勤男
阿杰
-
男 · 28-35 · 用过 2 次
+
男 · 青年 · 都市白领 · 用过 2 次
-
+
+ +
妈妈 · 居家
妈妈 · 王姐
-
女 · 38-45 · 用过 1 次
+
女 · 中年 · 居家 · 用过 1 次
-
+
+ +
阿强 · 健身男
阿强
-
男 · 22-28 · 用过 2 次
+
男 · 青年 · 健身 · 用过 2 次
-
-
研究生 · 文艺女
+
+ + +
小苏 · 文艺女
小苏
-
女 · 22-26 · 用过 1 次
+
女 · 青年 · 文艺 · 用过 1 次
-
+
+ +
闺蜜组合 · 双人
闺蜜组合
-
双人 · 25-30 · 用过 1 次
+
女 · 青年 · 都市白领 · 用过 1 次
+
+
+
+ + +
豆豆 · 幼儿
+
+
豆豆
+
女 · 幼年 · 居家 · 用过 2 次
+
+
+
+ + +
小宇 · 中学生
+
+
小宇
+
男 · 少年 · 学生 · 用过 1 次
+
+
+
+ + +
李爷爷 · 居家
+
+
李爷爷
+
男 · 老年 · 居家 · 用过 1 次
+
+
+
+ + + + + + + + + + + + + +
+
+ +
+

没有匹配的资产

+

// 试试切换 tab 或修改搜索词

+
+ + + + + +
+ + + + + +
+ 已选 0 + + + + +
+ - + diff --git a/电商AI平台/model-photo.html b/电商AI平台/model-photo.html new file mode 100644 index 0000000..795dbe8 --- /dev/null +++ b/电商AI平台/model-photo.html @@ -0,0 +1,1961 @@ + + + + +模特上身图 · 流·Studio + + + + + +
+ +
+
+

模特上身图

+
// 选商品 + 选模特 → 生成 AI 上身效果图 · 失败不扣费,采纳入库才计费
+
+ +
+ +
+ + +
+
+ 历史任务 + 0 + +
+
+
+ + +
+ + +
+
+ 1 + 选择商品 +
+
+ +
+ +
+ + +
+
+ 2 + 选择模特 + 全部模特 → +
+
+
+
+
Ava
+
Ava
+
亚洲·25岁·清新
+
+
+
+
Luna
+
Luna
+
亚洲·22岁·学生
+
+
+
+
Mia
+
Mia
+
混血·28岁·OL
+
+
+
+
Zoe
+
Zoe
+
亚洲·30岁·健身
+
+
+ + 上传我的模特 +
+
+
+ + +
+
+ 3 + 生成设置 +
+
+
// 生成数量 (每模特)
+
+ + + +
+
+
+
// 图片比例
+
+ + + +
+
+
+ + +
+ +
// 满意后点 [入资产库] 才扣费 · 失败不扣
+
+ +
+ + +
+
+
+ 已选商品 + 补水保湿精华液 +
+
+ 已选模特 + Ava (亚洲·25岁·清新) + 更换模特 +
+
+ 生成 + 4 张 · 1:1 +
+
+ +
+ +
待生成 · 1:1
+
待生成 · 1:1
+
待生成 · 1:1
+
待生成 · 1:1
+
+ +
+ // 生成结果默认不入资产库,每张图采纳后点 [入资产库] 才扣费并保存 +
// 任务进度可在 任务中心 → 查看 +
+
+ +
+
+ + +
+
+
+

商品库

+ // 共 7 个商品 +
+ +
+
+
+ +
+
+ + +
+
+
+ +
+
+
+
+
+
// 已选 0 个商品
+ + +
+
+
+ + +
+ + + +
+
+
+

模特库

+ +
+
+ +
+
+
+ 性别 + + + +
+
+ 年龄 + + + +
+ +
+
+
+ +
+
+
+
+
+
+ + +
+
+
+

模特详情

+ +
+
+
+
+
+
立绘 · 3:4
+
+
+
角色属性
+
+ // 文化区域 + // 气质 + // 性别 + // 体格 + // 年龄段 + // 身高 + // 肤色 + // 发长 + // 发色 + // 来源 +
+
+
+
全身三视图
+
+
正面
+
侧面
+
背面
+
+
+
+ + +
+
+
+ + + + + + diff --git a/电商AI平台/pipeline.html b/电商AI平台/pipeline.html index 3b0b26a..d96758e 100644 --- a/电商AI平台/pipeline.html +++ b/电商AI平台/pipeline.html @@ -23,10 +23,12 @@ .stage-step.done .num { background: var(--accent-black); border-color: var(--accent-black); color: var(--accent-white); } .stage-step.active .num { background: var(--heat); border-color: var(--heat); color: var(--accent-white); } .stage-step.locked { opacity: .5; cursor: not-allowed; } - .stage-step .lbl { font-size: 13px; font-weight: 500; color: var(--black-alpha-56); } + .stage-step .lbl { font-size: 13px; font-weight: 500; color: var(--accent-black); } .stage-step.active .lbl { color: var(--accent-black); font-weight: 600; } - .stage-step .st { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-left: 4px; padding: 1px 6px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-sm); letter-spacing: .04em; } + .stage-step .st { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); margin-left: 4px; padding: 1px 6px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-sm); letter-spacing: .04em; } .stage-step.active .st { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); } + .stage-step:hover .num { border-color: var(--heat-40); } + .stage-step:hover .lbl { color: var(--heat); } .stage-line { flex: 1; height: 1px; background: var(--border-faint); margin: 0 14px; min-width: 30px; } .stage-line.done { background: var(--accent-black); } @@ -44,8 +46,8 @@ .stage-foot .info { font-size: 12.5px; color: var(--black-alpha-56); } .stage-foot .info .mono { font-family: var(--font-mono); color: var(--black-alpha-48); font-size: 11.5px; letter-spacing: .02em; } - /* === STAGE 1 · 脚本 === */ - .stage-script { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; min-height: 560px; } + /* === STAGE 1 · 脚本(镜头脚本 : 脚本助手 = 7 : 3,助手在 3:2 基础上再缩 1/4) === */ + .stage-script { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; min-height: 560px; } .chat-pane { display: flex; flex-direction: column; } .chat-body { padding: 16px 18px; flex: 1; overflow-y: auto; max-height: 460px; display: flex; flex-direction: column; gap: 14px; } @@ -61,20 +63,66 @@ .chat-input { padding: 14px 18px; border-top: 1px solid var(--border-faint); } .shot-list { display: flex; flex-direction: column; } - .shots-body { padding: 12px 16px; flex: 1; overflow-y: auto; max-height: 540px; display: flex; flex-direction: column; gap: 10px; } - .shot-card { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; } + .shots-body { padding: 12px 16px; flex: 1; overflow-y: auto; max-height: 540px; display: flex; flex-direction: column; gap: 0; } + .shot-card { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; transition: border-color var(--t-base), background var(--t-base); } .shot-card.highlight { border-color: var(--heat); background: var(--heat-12); } .shot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .shot-num { width: 22px; height: 22px; background: var(--accent-black); color: var(--accent-white); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; border-radius: var(--r-sm); } .shot-time { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); padding: 2px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); } .shot-row { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 4px 0; } .shot-k { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); padding-top: 2px; letter-spacing: .04em; } - .shot-v { font-size: 12.5px; color: var(--accent-black); line-height: 1.55; } + .shot-v { font-size: 12.5px; color: var(--accent-black); line-height: 1.55; outline: none; border-radius: var(--r-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--t-base); } + .shot-v[contenteditable="true"]:hover { background: var(--heat-12); cursor: text; } + .shot-v[contenteditable="true"]:focus { background: var(--surface); box-shadow: inset 0 0 0 1px var(--heat); } + .shot-v[data-empty="true"]::before { content: attr(data-placeholder); color: var(--black-alpha-32); font-style: italic; } .icon-mini-btn { width: 24px; height: 24px; display: grid; place-items: center; color: var(--black-alpha-48); background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); cursor: pointer; font-size: 14px; } .icon-mini-btn:hover { color: var(--heat); border-color: var(--heat); } + /* 镜头卡片间 hover 加分镜插槽 */ + .shot-insert-gap { height: 14px; position: relative; display: flex; align-items: center; justify-content: center; } + .shot-insert-gap .add-shot-btn { opacity: 0; height: 22px; padding: 0 12px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: 999px; font-size: 11.5px; font-family: var(--font-mono); cursor: pointer; box-shadow: var(--shadow-cta); transition: opacity var(--t-base); display: inline-flex; align-items: center; gap: 5px; pointer-events: none; } + .shot-insert-gap .add-shot-btn svg { width: 11px; height: 11px; } + .shot-insert-gap:hover .add-shot-btn { opacity: 1; pointer-events: auto; } + .shot-insert-gap::before { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: transparent; transition: background var(--t-base); } + .shot-insert-gap:hover::before { background: var(--heat-20); } + + /* 镜头脚本空缺省态 */ + .shots-empty { padding: 36px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--black-alpha-48); } + .shots-empty .empty-ico { width: 56px; height: 56px; border: 1px dashed var(--border-faint); border-radius: var(--r-md); display: grid; place-items: center; color: var(--black-alpha-32); } + .shots-empty .empty-title { font-size: 14px; font-weight: 500; color: var(--accent-black); } + .shots-empty .empty-hint { font-size: 12px; color: var(--black-alpha-56); line-height: 1.55; max-width: 280px; font-family: var(--font-mono); letter-spacing: .02em; } + + /* 对话空态三胶囊 */ + .chat-empty { padding: 28px 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; } + .chat-empty .ce-title { font-size: 13.5px; color: var(--accent-black); font-weight: 500; } + .chat-empty .ce-hint { font-size: 11.5px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; } + .chat-modes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } + .chat-mode { height: 30px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 999px; font-size: 12.5px; color: var(--accent-black); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); } + .chat-mode:hover { background: var(--heat-12); border-color: var(--heat); color: var(--heat); } + .chat-mode.primary { background: var(--heat-12); border-color: var(--heat); color: var(--heat); } + .chat-mode svg { width: 13px; height: 13px; } + + /* AI 思考态 typing indicator */ + .ai-thinking .dots { display: inline-flex; gap: 3px; } + .ai-thinking .dots span { width: 6px; height: 6px; background: var(--black-alpha-32); border-radius: 50%; animation: thinking 1.2s ease-in-out infinite; } + .ai-thinking .dots span:nth-child(2) { animation-delay: .2s; } + .ai-thinking .dots span:nth-child(3) { animation-delay: .4s; } + @keyframes thinking { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } + + /* 视口锁定 · 只让主内容区滚动 (sidebar + topbar 固定,不随页面滚) */ + html, body { height: 100%; overflow: hidden; max-width: 100vw; } + .app { height: 100vh; max-height: 100vh; overflow: hidden; } + .app > .sidebar { height: 100vh; overflow-y: auto; } + .app > main { height: 100vh; max-height: 100vh; overflow: hidden; display: flex; flex-direction: column; min-width: 0; } + .app > main > .topbar { flex-shrink: 0; } + .app > main > .content { flex: 1 1 0; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; } + /* === STAGE 2 · 基础资产 === */ - .stage-assets { display: grid; grid-template-columns: 200px 1fr; gap: 24px; } + .stage-assets { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } + .stage-assets > div { min-width: 0; } + .asset-side { position: sticky; top: 16px; align-self: start; } + .asset-sec { min-width: 0; } + .asset-strip-wrap { min-width: 0; } .asset-side .ttab { padding: 10px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-md); } .asset-side .ttab:hover { background: var(--background-lighter); } .asset-side .ttab.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; } @@ -84,28 +132,171 @@ .asset-side .info strong { color: var(--black-alpha-56); display: block; } .asset-side .info .mono { font-family: var(--font-mono); } + .asset-sec { scroll-margin-top: 16px; } + .asset-sec + .asset-sec { margin-top: 32px; } + .asset-sec .sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } + .asset-sec .sec-h h3 { font-size: 15px; font-weight: 600; } + /* .pill-tip 主样式定义在下方 (heat 主色) */ + + /* 预设库横滑行(卡片尺寸与主区 .asset-card-2 一致) */ + .asset-strip-wrap { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-faint); } + .asset-strip-wrap .strip-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; } + .asset-strip { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 14px; scrollbar-width: thin; } + .asset-strip::-webkit-scrollbar { height: 8px; } + .asset-strip::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 4px; } + .asset-strip .asset-card-2 { flex: 0 0 240px; min-width: 240px; max-width: 240px; } + + /* 「去 XX 库」CTA 胶囊 · 主操作色,更显眼 */ + .asset-sec .sec-h .pill-tip, + .asset-strip-wrap .strip-h .pill-tip { + display: inline-flex; align-items: center; gap: 6px; + height: 28px; padding: 0 14px; + background: var(--heat-12); + border: 1px solid var(--heat-20); + border-radius: 999px; + font-size: 12px; color: var(--heat); font-weight: 500; + cursor: pointer; font-family: inherit; + transition: background var(--t-base), color var(--t-base), border-color var(--t-base); + } + .asset-sec .sec-h .pill-tip:hover, + .asset-strip-wrap .strip-h .pill-tip:hover { + background: var(--heat); color: var(--accent-white); border-color: var(--heat); + box-shadow: var(--shadow-cta); + } + .asset-sec .sec-h .pill-tip svg, + .asset-strip-wrap .strip-h .pill-tip svg { width: 12px; height: 12px; } + .asset-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } - .asset-card-2 { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); } + /* 商品行:左侧商品卡 + 右侧三视图预览(三视图是单张 16:9 图,不是 3 张) */ + .prod-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } + .prod-row > .asset-card-2 { flex: 0 0 240px; max-width: 240px; } + .prod-preview { flex: 0 0 360px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px; display: none; flex-direction: column; gap: 10px; } + .prod-preview.show { display: flex; } + .prod-preview-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; } + .prod-preview-img { aspect-ratio: 16/9; } + .prod-preview-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; } + .asset-card-2 { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base); } + .asset-card-2:hover { border-color: var(--heat-40); box-shadow: 0 1px 3px rgba(0,0,0,.04); } .asset-card-2 .thumb-2 { aspect-ratio: 1; } .asset-card-2 .body-2 { padding: 12px 14px; } - .prompt-box { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; color: var(--black-alpha-56); margin-top: 8px; line-height: 1.55; font-family: var(--font-mono); letter-spacing: .01em; } + .asset-card-2 .body-2 .btn-apply { background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); } + .asset-card-2 .body-2 .btn-apply:hover { box-shadow: var(--shadow-cta-hover); } + + /* 通用资产详情 modal */ + .asset-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 40px; } + .asset-modal-bg.show { display: flex; } + .asset-modal { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); width: min(960px, 100%); max-height: calc(100vh - 80px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,.18); } + .asset-modal-h { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border-faint); } + .asset-modal-h h2 { font-size: 15px; font-weight: 600; } + .asset-modal-h .x { width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--black-alpha-56); border-radius: var(--r-sm); margin-left: auto; } + .asset-modal-h .x:hover { background: var(--black-alpha-8); color: var(--accent-black); } + .asset-modal-body { padding: 22px 24px; overflow-y: auto; flex: 1; } + .asset-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } + .asset-detail-lead .placeholder { aspect-ratio: 3/4; } + /* 三视图 · 单张 16:9 图 */ + .asset-detail-tri-row { margin-top: 10px; } + .asset-detail-tri-row .placeholder { aspect-ratio: 16 / 9; } + .asset-detail-tri-row .placeholder.missing { display: grid; place-items: center; border: 1px dashed var(--border-faint); background: var(--background-lighter); color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 12px; padding: 12px; text-align: center; cursor: pointer; transition: border-color var(--t-base), color var(--t-base); gap: 8px; } + .asset-detail-tri-row .placeholder.missing:hover { border-color: var(--heat); color: var(--heat); } + .asset-detail-section-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; } + .asset-detail-info .row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border-faint); font-size: 12.5px; } + .asset-detail-info .row:last-child { border-bottom: 0; } + .asset-detail-info .row .k { color: var(--black-alpha-56); font-family: var(--font-mono); font-size: 11px; } + .asset-detail-info .row .v { color: var(--accent-black); } + .asset-detail-tip { margin-top: 10px; padding: 10px 12px; background: var(--heat-12); border: 1px solid var(--heat-20); border-radius: var(--r-sm); font-size: 12px; color: var(--accent-black); display: flex; align-items: center; gap: 8px; line-height: 1.5; } + .asset-detail-tip svg { width: 14px; height: 14px; color: var(--heat); flex-shrink: 0; } + .asset-detail-tip .ai-gen-btn { margin-left: auto; height: 26px; padding: 0 10px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: var(--r-sm); font-size: 11.5px; cursor: pointer; font-family: inherit; flex-shrink: 0; } + .asset-modal-f { padding: 14px 20px; border-top: 1px solid var(--border-faint); display: flex; justify-content: flex-end; gap: 8px; } + + /* 模特库 / 场景库 全屏弹窗(沿用 model-photo .ml-modal 结构) */ + .ml-modal-bg { position: fixed; inset: 0; background: var(--surface); z-index: 1000; display: none; } + .ml-modal-bg.show { display: flex; } + .ml-modal { margin: 0; flex: 1; background: var(--surface); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; } + .ml-modal-h { display: flex; align-items: center; padding: 14px 28px; border-bottom: 1px solid var(--border-faint); flex-shrink: 0; } + .ml-modal-h h2 { font-size: 16px; font-weight: 600; } + .ml-modal-h .ct { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; } + .ml-modal-h .x { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--black-alpha-56); transition: background var(--t-base), color var(--t-base); } + .ml-modal-h .x:hover { background: var(--black-alpha-8); color: var(--accent-black); } + .ml-modal-h .x svg { width: 16px; height: 16px; } + .ml-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr; } + .ml-side { border-right: 1px solid var(--border-faint); padding: 18px 0; overflow-y: auto; } + .ml-side .ml-side-h { padding: 0 20px 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; } + .ml-side .ml-side-item { display: flex; align-items: center; gap: 8px; padding: 9px 20px; cursor: pointer; color: var(--black-alpha-72); font-size: 13px; border-left: 3px solid transparent; transition: background var(--t-base), color var(--t-base); } + .ml-side .ml-side-item:hover { background: var(--black-alpha-4); } + .ml-side .ml-side-item.active { background: var(--heat-12); color: var(--accent-black); border-left-color: var(--heat); font-weight: 600; } + .ml-side .ml-side-item .ct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); } + .ml-main { overflow-y: auto; padding: 0; display: flex; flex-direction: column; min-width: 0; } + .ml-toolbar { padding: 14px 28px; border-bottom: 1px solid var(--border-faint); display: flex; align-items: center; gap: 18px; flex-shrink: 0; flex-wrap: wrap; } + .ml-toolbar .btn-up { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--black-alpha-12); border-radius: var(--r-sm); color: var(--accent-black); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: background var(--t-base), border-color var(--t-base); } + .ml-toolbar .btn-up:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); } + .ml-toolbar .btn-up svg { width: 14px; height: 14px; } + .ml-toolbar .chip-group { display: inline-flex; align-items: center; gap: 6px; } + .ml-toolbar .chip-group .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; margin-right: 4px; } + .ml-toolbar .chip { height: 26px; padding: 0 12px; border-radius: 999px; background: transparent; border: 1px solid var(--black-alpha-12); color: var(--black-alpha-72); font-size: 12px; cursor: pointer; font-family: inherit; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); } + .ml-toolbar .chip:hover { color: var(--accent-black); } + .ml-toolbar .chip.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-40); font-weight: 600; } + .ml-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px 28px; } + .ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } + .ml-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 10px; cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base); display: flex; flex-direction: column; gap: 8px; } + .ml-card:hover { border-color: var(--heat-40); box-shadow: 0 1px 3px rgba(0,0,0,.04); } + .ml-card .placeholder { aspect-ratio: 3/4; } + .ml-card .ml-card-nm { font-size: 13px; font-weight: 500; color: var(--accent-black); } + .ml-card .ml-card-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); } + .ml-card .ml-card-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; } + .ml-card .ml-card-foot .pill { font-size: 10.5px; padding: 1px 7px; } + .ml-card .ml-card-foot .btn-apply { margin-left: auto; height: 26px; padding: 0 12px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: var(--r-sm); font-size: 11.5px; cursor: pointer; font-family: inherit; } + .ml-card .ml-card-foot .btn-apply:hover { box-shadow: var(--shadow-cta-hover); } + + /* 新增人物 modal · 立绘 + 三视图 上传区 */ + .upload-zone { aspect-ratio: 3/4; background: var(--background-lighter); border: 1px dashed var(--border-faint); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: border-color var(--t-base), background var(--t-base); padding: 16px; text-align: center; color: var(--black-alpha-56); font-size: 12px; } + .upload-zone:hover { border-color: var(--heat); background: var(--heat-12); color: var(--heat); } + .upload-zone.lead { aspect-ratio: 3/4; } + .upload-zone svg { width: 20px; height: 20px; } + .upload-zone-tri { aspect-ratio: 1; padding: 8px; font-size: 10.5px; } + .prompt-box { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; color: var(--black-alpha-56); margin-top: 8px; line-height: 1.55; font-family: var(--font-mono); letter-spacing: .01em; transition: border-color var(--t-base), background var(--t-base); } + .prompt-box[contenteditable="true"] { cursor: text; outline: none; } + .prompt-box[contenteditable="true"]:hover { border-color: var(--heat-20); } + .prompt-box[contenteditable="true"]:focus { border-color: var(--heat); background: var(--surface); color: var(--accent-black); box-shadow: 0 0 0 3px var(--heat-12); } .fail-icon { width: 28px; height: 28px; background: var(--accent-crimson); color: var(--accent-white); display: grid; place-items: center; font-weight: 700; font-size: 16px; border-radius: 50%; } - /* === STAGE 3 · 故事板 === */ - .stage-storyboard { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; } - .sb-canvas { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); } - .sb-row { display: grid; grid-template-columns: 60px 1fr 1fr; gap: 0; border-bottom: 1px solid var(--border-faint); } - .sb-row:last-child { border-bottom: 0; } - .sb-row.head { background: var(--background-lighter); font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } - .sb-row.head > div { padding: 10px 14px; } - .sb-num { padding: 14px; font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--accent-black); border-right: 1px solid var(--border-faint); } - .sb-num .t { display: block; font-size: 10.5px; color: var(--black-alpha-48); font-weight: 400; margin-top: 4px; letter-spacing: .02em; } - .sb-img { padding: 10px; border-right: 1px solid var(--border-faint); } - .sb-img .placeholder { aspect-ratio: 16/9; } - .sb-text { padding: 14px; display: flex; flex-direction: column; gap: 6px; } - .sb-text .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; } - .sb-text .dialog { font-size: 12.5px; color: var(--accent-black); line-height: 1.55; } - .sb-text .sfx { font-size: 11.5px; color: var(--black-alpha-48); } + /* === STAGE 3 · 故事板(略缩图竖向侧栏 + 主图区)=== */ + .stage-storyboard { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: stretch; } + .sb-canvas { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 14px; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; } + .sb-scenes-col { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; max-height: 560px; padding-right: 6px; scrollbar-width: thin; } + .sb-scenes-col::-webkit-scrollbar { width: 6px; } + .sb-scenes-col::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 4px; } + .sb-scene-thumb { flex: 0 0 auto; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-base), background var(--t-base); } + .sb-scene-thumb:hover { background: var(--background-lighter); } + .sb-scene-thumb.selected { border-color: var(--heat); background: var(--heat-12); } + .sb-scene-thumb .placeholder { aspect-ratio: 1; } + .sb-scene-thumb .nm { font-size: 11.5px; font-weight: 500; color: var(--accent-black); } + .sb-scene-thumb .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); } + .sb-main-img { aspect-ratio: 16/9; min-height: 0; } + + .sb-stage-actions { display: flex; gap: 8px; margin-bottom: 12px; } + + /* 故事板历史版本 */ + .sb-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-faint); } + .sb-history-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } + .sb-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } + .sb-history-row::-webkit-scrollbar { height: 6px; } + .sb-history-row::-webkit-scrollbar-thumb { background: var(--border-faint); } + .sb-history-thumb { flex: 0 0 80px; min-width: 80px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); } + .sb-history-thumb:hover { border-color: var(--heat); } + .sb-history-thumb.current { border-color: var(--heat); background: var(--heat-12); } + .sb-history-thumb .placeholder { aspect-ratio: 1; } + .sb-history-thumb .ts { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); text-align: center; } + .sb-history-thumb.current .ts { color: var(--heat); font-weight: 600; } + + .pill-cta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); } + .pill-cta.heat { background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); } + .pill-cta.heat:hover { box-shadow: var(--shadow-cta-hover); } + .pill-cta.ghost { background: var(--surface); color: var(--accent-black); border: 1px solid var(--border-faint); } + .pill-cta.ghost:hover { background: var(--background-lighter); border-color: var(--heat-20); color: var(--heat); } + .pill-cta svg { width: 13px; height: 13px; } + + /* === STAGE 3 / 4 跳过条 === */ + .skip-row { display: flex; justify-content: flex-end; margin-bottom: 12px; } .sb-side .pane { padding: 18px; } .prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--black-alpha-56); white-space: pre-wrap; min-height: 200px; outline: none; letter-spacing: .01em; } @@ -118,14 +309,30 @@ .queue-bar .bar-wrap { flex: 1; height: 6px; background: var(--background-lighter); overflow: hidden; } .queue-bar .bar-wrap > span { display: block; height: 100%; background: var(--heat); } - .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } - .video-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); } + .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } + .video-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-base); } + .video-card:hover { border-color: var(--heat-40); } .video-thumb { aspect-ratio: 9/16; max-height: 320px; position: relative; border-radius: var(--r-md) var(--r-md) 0 0; } .video-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.05); cursor: pointer; opacity: 0; transition: opacity .15s; } .video-thumb:hover .play { opacity: 1; } .video-thumb .btn-play { width: 36px; height: 36px; background: rgba(0,0,0,.7); color: var(--accent-white); border-radius: 50%; display: grid; place-items: center; } .video-card .body { padding: 10px 12px; } + /* 视频详情 modal 大视频 + 历史版本 */ + .vd-main-wrap { display: flex; gap: 18px; align-items: flex-start; } + .vd-main { flex: 0 0 280px; aspect-ratio: 9/16; max-height: 460px; } + .vd-main .placeholder { aspect-ratio: 9/16; height: 100%; } + .vd-info { flex: 1; min-width: 0; } + .vd-history { margin-top: 16px; } + .vd-history-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } + .vd-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } + .vd-history-thumb { flex: 0 0 64px; min-width: 64px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); position: relative; } + .vd-history-thumb:hover { border-color: var(--heat); } + .vd-history-thumb.current { border-color: var(--heat); background: var(--heat-12); } + .vd-history-thumb.adopted::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; background: var(--heat); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 9px 9px; } + .vd-history-thumb .placeholder { aspect-ratio: 9/16; } + .vd-history-thumb .ts { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); text-align: center; } + /* === STAGE 5 · 编辑器 === */ .editor { display: grid; grid-template-columns: 1fr 280px; grid-template-rows: 1fr auto; gap: 0; height: 580px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); } .editor-preview { padding: 16px; border-right: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); display: flex; flex-direction: column; gap: 12px; } @@ -191,7 +398,7 @@

补水面膜 · 痛点种草 · v3

进行中
-
// 透真补水面膜 · AI 全生 · 6 镜 · 0-15s · 9:16
+
// 透真补水面膜 · AI 全生 · 待生成镜头脚本 · 9:16
@@ -204,101 +411,47 @@ -
+
+
+
+ 镜头脚本 + · 空 · 待生成 +
+
+ +
+
+
AI
脚本助手 · GPT-4o - +
-
-
-
-
AI
-
根据 透真补水面膜 和"痛点种草"风格,我先生成了一版 6 镜的脚本,主线是"加班党的深夜急救"。你可以直接编辑右侧的镜头,或者让我重写某一镜。
-
-
14:02
-
-
-
第 4 镜对白太硬了,能不能更口语化?
-
14:05
-
-
-
-
AI
-
-
把 "补水力极强,锁水持久" 改成 "真的,敷完第二天起来脸是软的,不是绷着的",更像真实分享。已替换右侧第 4 镜,确认要的话点 [接受]。
-
- - -
-
-
-
14:05
-
+
+
- +
- + - -
-
-
- -
-
- 镜头脚本 - · 6 镜 · 0-15s - - -
-
-
-
1
0-2s
-
画面
深夜的办公桌,电脑屏幕亮着,女主对着镜子叹气,皮肤干燥起皮特写。
-
对白
(叹气)"加班三天,脸已经不能看了……"
-
-
-
2
2-5s
-
画面
女主从抽屉拿出补水面膜,包装特写,光线柔和。
-
对白
"还好我有这个 —— 透真玻尿酸面膜。"
-
-
-
3
5-8s
-
画面
面膜布展开,30g 精华液从布上滴落特写,慢镜头。
-
对白
"30g 精华液,一片顶三片的量。"
-
-
-
4
8-11s
刚改
-
画面
女主敷面膜,闭眼平躺,灯光暖。床头闹钟显示 23:41。
-
对白
"真的,敷完第二天起来脸是软的,不是绷着的。"
-
-
-
5
11-13s
-
画面
第二天早上,女主对镜化妆,皮肤透亮,状态饱满。
-
对白
"早上化妆都能看出来,不假吹。"
-
-
-
6
13-15s
-
画面
面膜产品大图,价格标签 "5 片装 ¥39.9",购物车浮动按钮。
-
对白
"618 五片才 39.9,囤起来。"
+
@@ -317,11 +470,11 @@
-
人物2/2
-
场景3/3
-
商品3 张
+
商品3 张
+
人物2/2
+
场景3/3
- 基础资产是后续故事板的素材。生成后可以单独修改提示词重跑,或上传你已有的图替换。 + 基础资产是后续故事板的素材。所有卡片同时展示,点左侧分类直接定位。

// 人物 +¥0.20/张 // 场景 +¥0.15/张 @@ -330,88 +483,126 @@
-
-

人物 · 2 个

- - - -
+ +
+
+

商品 · 透真补水面膜

+ +
+
+
+
透真补水面膜 · 主图
+
+
透真补水面膜缺三视图
+
+ + +
+
+
+
+
// 三视图预览 · 生成中
+
+
+
+
+
-
-
-
林夕 · 都市白领
-
-
主角 · 林夕已确认
-
25-30 岁都市白领,长发,穿宽松米色家居服,温柔但带点疲倦感,肤色偏黄/略干。
-
- - - - + +
+
+

人物 · 2 个

+ + +
+ +
+
+
林夕 · 都市白领
+
+
主角 · 林夕
+
25-30 岁都市白领,长发,穿宽松米色家居服,温柔但带点疲倦感。
+
+ + + +
+
+
+
+
+
+
+ 生成中 · 约 8s +
+
+
+
朋友/同事 · 阿楠
+
25-30 岁同龄女性,短发,穿白色衬衫,妆容精致皮肤好,作为对比。
+
+ + + +
-
-
-
-
- 生成中 · 约 8s -
-
-
-
朋友/同事 · 阿楠生成中
-
25-30 岁同龄女性,短发,穿白色衬衫,妆容精致皮肤好,作为对比。
-
- - - - -
-
-
-
+
-
-

场景 · 3 个

- - - -
+ +
+
+

场景 · 3 个

+ + +
-
-
-
深夜办公桌
-
-
深夜办公桌已确认
-
深夜居家办公环境,木质书桌,台灯暖光,电脑屏幕亮着,背景虚化。
-
-
-
-
床头特写
-
-
卧室床头已确认
-
米白色床品,木质床头柜,闹钟显示晚间时间,氛围温柔安静。
-
-
-
-
-
-
!
- 生成失败 +
+
+
深夜办公桌
+
+
深夜办公桌
+
深夜居家办公环境,木质书桌,台灯暖光,电脑屏幕亮着。
+
+ + + +
-
-
通勤地铁失败
-
早高峰地铁车厢,光线偏冷,年轻通勤族,氛围紧张。
-
提示词被安全审核拦截,请调整后重试(不扣费)
-
- - +
+
床头特写
+
+
卧室床头
+
米白色床品,木质床头柜,闹钟显示晚间时间。
+
+ + + +
+
+
+
+
+
+
!
+ 生成失败 +
+
+
+
通勤地铁失败
+
早高峰地铁车厢,光线偏冷,年轻通勤族,氛围紧张。
+
+ + + +
-
+ +
@@ -419,78 +610,28 @@
[ 已确认 ¥0.85 · 待生成 ¥0.20 · 失败 ¥0(不扣) ]
- +
- -
+ +
+
+ +
-
-
镜号
画面
机位 / 对白 / 音效
-
-
-
10-2s
-
深夜办公桌 · 女主对镜叹气 · 暖光
-
-
中景 / 固定机位
-
"加班三天,脸已经不能看了……"
-
SFX:键盘声 + 远处空调嗡鸣
-
-
-
-
22-5s
-
面膜包装特写 · 抽屉光线柔和
-
-
特写 / 缓推
-
"还好我有这个 —— 透真玻尿酸面膜。"
-
SFX:抽屉滑动声
-
-
-
-
35-8s
-
面膜布展开 · 30g 精华滴落 · 慢动作
-
-
微距 / 慢镜头
-
"30g 精华液,一片顶三片的量。"
-
SFX:水滴慢速回弹
-
-
-
-
48-11s
-
女主敷面膜平躺 · 闹钟 23:41
-
-
中近景 / 固定
-
"敷完第二天起来脸是软的,不是绷着的。"
-
SFX:呼吸声 + 窗外风声
-
-
-
-
511-13s
-
早晨化妆台 · 女主对镜上妆 · 透亮
-
-
中景 / 固定
-
"早上化妆都能看出来,不假吹。"
-
SFX:化妆刷轻扫声
-
-
-
-
613-15s
-
产品大图 · 价格 5片¥39.9 · 购物车
-
-
产品定格 / 静止
-
"618 五片才 39.9,囤起来。"
-
SFX:清脆叮咚音效
-
+
+
+
未选择
-
+
- 故事板 + 故事板 · 场 1 已生成
@@ -498,150 +639,147 @@ 整张故事板由 image-2 一次性输出,包含画面 + 镜头说明。如需修改请编辑下方提示词整张重跑(不能局部改)。
-
// 视觉提示词
-
风格:日系小清新短视频,暖色调,午夜→清晨光线变化。 -镜头列表(6 镜,0-15s): -1. 中景 · 深夜办公桌女主对镜叹气 -2. 特写 · 面膜包装从抽屉拿出 -3. 微距 · 面膜布展开 + 精华液滴落慢镜 -4. 中近景 · 女主敷面膜平躺,床头闹钟 23:41 -5. 中景 · 早晨化妆台 + 女主透亮上妆 -6. 产品定格 · 面膜盒 + 价格标签 ¥39.9 -人物:林夕(参考 R1) -场景:深夜办公桌(S1) + 卧室床头(S2) -要求:表格化布局,每镜含画面 + 文字说明
+
// 本场提示词
+
-
- +
+ + - ~¥0.45 + ~¥0.45/场
-
+
+
// 历史版本(0)
+
+
// 暂无历史版本
+
+
+ +
// 绑定的资产
-
+
林夕(人物) 深夜办公桌(场景) - 卧室床头(场景) - 面膜盒(商品)
-
[ image-2 一次 ¥0.45 · 累计 ¥1.50 ]
+
[ image-2 单场 ¥0.45 · 累计 ¥1.35 ]
- +
- +
-
视频生成中 · 4 / 6 完成
-
// 每镜 Seedance 调用 ~30s · 预计还需 1 分钟
+
视频生成 · 3 / 3 完成
+
// 每场 Seedance 约 15 秒 · 已完成所有场次
-
- 67% +
+ 100%
-
-
+
+
- 镜 1 · 0-2s + 场 1 · 0-15s
-
镜 1 · 深夜办公桌完成
-
2.0s · 1080×1920 · ¥0.18
+
场 1 · 深夜办公桌完成
+
15s · 1080×1920 · ¥0.45
- - + +
-
+
- 镜 2 · 2-5s + 场 2 · 15-27s
-
镜 2 · 面膜包装完成
-
3.0s · 1080×1920 · ¥0.22
+
场 2 · 面膜包装/特写完成
+
12s · 1080×1920 · ¥0.45
- - + +
-
+
- 镜 3 · 5-8s + 场 3 · 27-40s
-
镜 3 · 精华液微距完成
-
3.0s · 1080×1920 · ¥0.22
+
场 3 · 化妆台/产品定格完成
+
13s · 1080×1920 · ¥0.45
- - + +
-
-
- 镜 4 · 8-11s -
-
-
-
镜 4 · 敷面膜平躺完成
-
3.0s · 1080×1920 · ¥0.22
-
- - -
-
-
-
-
-
-
- 镜 5 · 生成中 18s -
-
-
-
镜 5 · 化妆台生成中
-
2.0s · 排队中 · ~¥0.18
-
- - -
-
-
-
-
镜 6 · 排队
-
-
镜 6 · 产品定格排队中
-
2.0s · 等待中 · ~¥0.18
-
-
-
[ 已确认 ¥0.84 · 待生成 ¥0.36 · 累计 ¥2.34 ]
+
[ 已完成 3 场 · 累计 ¥1.35 · 总时长 40s ]
- +
+ +
+
+
+

视频详情

+ // 场 1 · 15s + +
+
+
+
+
大视频预览
+
+
+
// 基础信息
+
+
+
// 历史版本 · 3
+
+
+
// 点击历史略缩切换 · 「采用此版」标记当前展示版为最终采用
+
+
+
+
+ + + +
+
+
+
@@ -751,6 +889,115 @@
+ +
+
+
+

资产详情

+ // kind + +
+
+
+
+
立绘
+
// 三视图
+
+
正面
+
侧面
+
背面
+
+
+
+
// 基础信息
+
+ +
+
+
+
+ + +
+
+
+ + +
+
+
+

新增人物

+ // 立绘必填 + 三视图(可 AI 生成) + +
+
+
+ + +
+
+
+
// 立绘*
+
+ + 点击上传立绘 + PNG / JPG · ≤10MB +
+
+
+
// 三视图(可选)
+
+
正面
+
侧面
+
背面
+
+
+ + 没有三视图?上传立绘后用 AI 自动生成 + +
+
+
+
+
+ + +
+
+
+ + +
+
+
+

模特库

+ // 共 0 个 + +
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+
diff --git a/电商AI平台/platform-cover.html b/电商AI平台/platform-cover.html new file mode 100644 index 0000000..f52a04b --- /dev/null +++ b/电商AI平台/platform-cover.html @@ -0,0 +1,1360 @@ + + + + +平台套图 · 流·Studio + + + + + +
+ +
+
+

平台套图

+
// 选商品 + 选平台 → 生成 AI 套图 · 失败不扣费,采纳入库才计费
+
+ +
+ +
+ + +
+
+ 历史任务 + 0 + +
+
+
+ + +
+ + +
+
+ 1 + 选择商品 +
+
+ +
+ +
+ + +
+
+ 2 + 选择平台 +
+
+
+
+ +
抖音电商
+
+
+
+ +
淘宝
+
+
+
+ +
天猫
+
+
+
+ +
京东
+
+
+
+ +
拼多多
+
+
+
+ +
小红书
+
+
+
+ +
快手
+
+
+
+ +
视频号
+
+
+
+ +
亚马逊
+
+
+
+ +
1688
+
+
+
+ + +
+
+ 3 + 生成设置 +
+
+
// 生成数量
+
+ + + +
+
+
+ + +
+ +
// 满意后点 [入资产库] 才扣费 · 失败不扣
+
+ +
+ + +
+
+
已选商品补水保湿精华液
+
已选平台抖音电商 / 淘宝
+
生成4
+
+
+ +
+
+ // 生成结果默认不入资产库,满意后点 [入资产库] 才扣费并保存 +
// 任务进度可在 任务中心 → 查看 +
+
+ +
+
+ + +
+ + + +
+
+
+

商品库

+ // 共 7 个商品 +
+ +
+
+
+ +
+
+ + +
+
+
+
+
+
+
+
// 已选 0 个商品
+ + +
+
+
+ + + + + + + diff --git a/电商AI平台/product-create-upload.html b/电商AI平台/product-create-upload.html new file mode 100644 index 0000000..8b79fae --- /dev/null +++ b/电商AI平台/product-create-upload.html @@ -0,0 +1,14 @@ + + + + +新建商品 · 跳转中... + + + + diff --git a/电商AI平台/product-create-v2.html b/电商AI平台/product-create-v2.html new file mode 100644 index 0000000..c923e81 --- /dev/null +++ b/电商AI平台/product-create-v2.html @@ -0,0 +1,413 @@ + + + + +新建商品 · 流·Studio + + + + + +
+ +
+
+

新建商品

+
// 上传原图 + 填写基本信息 · 保存后可在工作台逐步丰富素材
+
+
+ + +
+ + +
+
+

商品原图

+ 必填 +
+
// 1-5 张 · 这是后续所有 AI 生成的源材料
+ +
+
+ + 建议上传 正面 / 侧面 / 细节 / 包装 4 张,后续在工作台生成的白底三视图更准确。 +
+
+ + +
+
+

基本信息

+ 必填 +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+
+

卖点 & 人群

+ 选填 · 推荐 +
+
+ + 填上这两项,后续 AI 生脚本(痛点种草 / 剧情带货 等模板)质量明显更高 —— 系统会用卖点构造钩子,用人群定语气。现在不填也可以,做视频项目时仍可补。 +
+ +
+ +
3-5 条要点,回车添加
+
    +
  • +
  • +
+
+
+ + +
+
+ + +
+ // 必填检查:商品名 / 品类 / ≥1 张图 未完成 +
+ 取消 + +
+
+ +
+ + + + diff --git a/电商AI平台/product-create.html b/电商AI平台/product-create.html index 54fad20..293ea22 100644 --- a/电商AI平台/product-create.html +++ b/电商AI平台/product-create.html @@ -3,1592 +3,52 @@ 新建商品 · 流·Studio - - + + + + + - -
- - -
- - - 返回商品库 - -
- - [ AI 生成模式 ] -
-
- -
- -
-
-
- - -
- // 创建模式 -
- - -
-
- // AI 模式 · 上传 1 张原图,AI 生成头图 + 模特上身图 -
-
- - -
- - - - - -
- - -
- - -
-
- - 挑选模特 -
- -
- - 生成上身图 -
- // SUB-STEP 1 / 2 · 已选模特 2 -
- -
- - -
-
-
-

商品信息 · 上传原图

-

上传一张你拍的商品图(任何角度都行,AI 会优化),并填写商品基本信息。

-
- // STEP 1 / 4 · INFO + UPLOAD -
-
-
-
-
补水面膜.jpg
1200×1500
-
// 已上传 · 点击重新选择
-
-
-
- - -
-
-
- - -
-
- - -
-
-
- -
    -
  • 1 透明质酸 + B5,敷完不黏不闷
  • -
  • 2 30g 大容量精华液
  • -
  • +
  • -
-
-
- - -
-
-
-
-
- - -
-
-
-

选一张你最满意的头图

-

AI 已基于你上传的原图生成 4 张候选,点击你想要的那张。可重新生成。

-
- // STEP 2 / 4 · HEAD IMAGES -
-
-
候选 A · 白底简约
[ A · 1920×1920 · WHITE-BG ]
-
候选 B · 木纹背景
[ B · 1920×1920 · WOOD ]
-
候选 C · 浅米石材
[ C · 1920×1920 · STONE ]
-
候选 D · 暖光氛围
[ D · 1920×1920 · AMBIENT ]
-
-
- - // ~¥0.20 / 4 张 · 不满意不扣费 -
-
- - -
- - -
-
-
-

挑选模特 · 子步骤 ①

-

从 AI 模特库选 1 个或多个,统一白 T + 白短裤立绘。悬浮看详情和三视图。选好后点右下「下一步」自动跳到 ②。

-
- // STEP 3 / 4 · SUB 1 · MODEL -
- -
-
- - -
- - - - - - - - - // 12 / 52 · 已选 2 -
- -
-
- [ 立绘 · 肩上 ] -
林夕 · 都市女
-
林夕
女 · 25-30 · 都市白领
-
-
- [ 立绘 · 肩上 ] -
阿楠
-
阿楠
女 · 25-30 · 同事
-
-
- [ 立绘 · 肩上 ] -
小七 · 学生
-
小七
女 · 18-22 · 学生
-
-
- [ 立绘 · 肩上 ] -
王姐 · 居家
-
王姐
女 · 38-45 · 妈妈
-
-
- [ 立绘 · 肩上 ] -
阿杰 · 通勤男
-
阿杰
男 · 28-35 · 通勤
-
-
- [ 立绘 · 肩上 ] -
阿强 · 健身男
-
阿强
男 · 22-28 · 健身
-
-
- [ 立绘 · 肩上 ] -
小苏 · 文艺女
-
小苏
女 · 22-26 · 文艺
-
-
- [ 立绘 · 肩上 ] -
文文 · 母亲
-
文文
女 · 30-38 · 母亲
-
-
- [ 立绘 · 肩上 ] -
老王 · 大叔
-
老王
男 · 45-55 · 大叔
-
-
- [ 立绘 · 肩上 ] -
萌萌 · Z世代
-
萌萌
女 · 18-22 · Z 世代
-
-
- [ 立绘 · 肩上 ] -
Leo · 教练
-
Leo
男 · 30-38 · 教练
-
-
- [ 立绘 · 双人 ] -
闺蜜双人
-
闺蜜组合
双人 · 25-30
-
-
- -
- // 还有 40 个模特 · 滚动加载 / 用上方筛选缩小范围 -
-
- - -
-
-
-

生成上身图 · 子步骤 ②

-

已为你选的每个模特生成 4 张上身图,可多选保留。点 ← 回到「① 挑选模特」改人。

-
- // STEP 3 / 4 · SUB 2 · WEAR -
- -
- // 当前模特: - - - // 切换模特看不同上身效果 -
- -
-
上身 A · 持物半身
[ A · 持物半身 ]
-
上身 B · 敷面膜中
[ B · 敷面膜中 ]
-
上身 C · 镜前自拍
[ C · 镜前自拍 ]
-
上身 D · 床边特写
[ D · 床边特写 ]
-
- -
- - // ~¥0.40 / 4 张 · 已选 2 / 4 张 -
-
- -
- - -
-
-
-

预览 · 创建

-

检查下面的素材和信息无误后,点击右下「✓ 创建商品」。

-
- // STEP 4 / 4 · CONFIRM -
-
-

透真玻尿酸补水面膜

-
// 美妆个护 · ¥39.9 · AI 生成 · 模特: 林夕 + 小七
-
-
原图
-
头图 A
-
上身 A
-
上身 C
-
-
-
-
核心卖点
透明质酸 + B5 · 30g 大容量精华
-
目标人群
22-32 岁女性、熬夜党、敏感肌
-
原图
1 张(已上传)
-
头图
1 张(候选 A · 白底简约)
-
上身图
2 张(A + C · 模特林夕 / 小七)
-
-
-
-
- -
-
- - -
-
-
-
-

填写商品信息 · 上传图册

-

已有现成商品图册(主图 + 细节图)的快速通道。一次性填完,直接创建商品。

-
- // UPLOAD MODE · ALL-IN-ONE -
-
-
- - -
-
-
- - -
-
- - -
-
-
- -
- 将图片拖到此处,或 点击上传
- // 建议 3-6 张 · 1200×1200+ · JPG / PNG -
-
-
主图
-
细节
-
使用
-
+
-
-
-
- -
    -
  • 1 透明质酸 + B5,敷完不黏不闷
  • -
  • 2 30g 大容量精华液
  • -
  • 3 0 香精 0 酒精,敏感肌可用
  • -
  • +
  • -
-
-
- - -
-
-
-
- -
- - - - -
+
+
正在打开「新建商品」…
+
如未自动跳转,点击这里
- - - diff --git a/电商AI平台/product-create.legacy.html b/电商AI平台/product-create.legacy.html new file mode 100644 index 0000000..f3f92b3 --- /dev/null +++ b/电商AI平台/product-create.legacy.html @@ -0,0 +1,3883 @@ + + + + +新建商品 · 流·Studio + + + + + + + +
+ + +
+ + + + + + + + diff --git a/电商AI平台/product-detail.html b/电商AI平台/product-detail.html new file mode 100644 index 0000000..afbf1d8 --- /dev/null +++ b/电商AI平台/product-detail.html @@ -0,0 +1,1671 @@ + + + + + + + +商品详情 · 流·Studio + + + + + +
+ + +
+

补水保湿精华液

+
+ + +
+ +
+
+ 商品信息 + + + +
+ + + +
+
+ +
+ +
+
+
商品名称
+
+ 补水保湿精华液 + +
+
+
+
品类
+
+ 美妆个护 / 精华液 + +
+
+
+
目标人群
+
+ 22-32 岁女性、敏感肌、办公室通勤 + +
+
+
+
核心卖点
+
+
+ 透明质酸 + B5,敷完不黏不闷 + 30g 大容量精华液 + 0 香精 0 酒精,敏感肌可用 +
+
    + +
+
+
+
+ +
+
+ 商品图片 + (6) +
+
+
1:1
+
1:1
+
1:1
+
1:1
+
1:1
+
1:1
+
+ +
+
+
+ +
+
+ +
+
快速操作
+
+
// 图片生成
+
+
+ + 模特上身图 +
+
+ + 平台套图 +
+
+ + 图片优化 +
+
+
+
+
// 视频生成
+
+
+ + 生成视频 +
+
+
+
+ +
+ + +
+ + + +
+ + +
+ +
+
全部 AI 素材 (32)
+ + +
+
+ + +
+ +
+
+ +
+
模特上身图3:4
通过2026-05-19 15:30
+
模特上身图3:4
通过2026-05-19 15:30
+
模特上身图3:4
不通过2026-05-19 15:30
+
模特上身图3:4
通过2026-05-19 15:30
+
模特上身图3:4
归档2026-05-19 15:30
+
平台套图3:4
通过2026-05-19 15:30
+
平台套图3:4
通过2026-05-19 15:30
+
平台套图3:4
不通过2026-05-19 15:30
+
平台套图3:4
归档2026-05-19 15:30
+
平台套图3:4
通过2026-05-19 15:30
+
三视图3:4
通过2026-05-19 15:30
+
三视图3:4
归档2026-05-19 15:30
+
+ +
+
+ + +
+
+
该商品视频项目 (4)
+ +
+ +
+
+ +
+
视频 · 9:16补水面膜 · v3
通过2026-05-20 12:08
+
视频 · 9:16补水面膜 · v2
通过2026-05-19 10:24
+
视频 · 9:16熬夜急救 · v1
归档2026-05-18 21:42
+
视频 · 9:16补水面膜 · v1
不通过2026-05-17 16:00
+
+ +
+
+ + +
+ + +
+
+
// TOTAL
+
12 个任务
+
+
+
// SUCCESS
+
9
+
+
+
// RUNNING
+
2
+
+
+
// FAILED
+
1
+
+
+ + +
+
任务记录 (12)
+ + + +
+ +
+
+ + +
+
+ + 任务 / 编号 + 数量 + 状态 + 提交时间 + 完成时间 + 耗时 + 操作 +
+ +
+
+
视频素材 // T-2026-0519-0007
+
1 个
+
+ 生成中 60% + +
+
2026-05-19 16:00
+
+
+
+ + +
+
+ +
+
+
模特上身图 // T-2026-0519-0006
+
3 张
+
+ 排队中 +
+
2026-05-19 15:58
+
+
+
+ + +
+
+ +
+
+
模特上身图 // T-2026-0519-0005
+
5 张
+
+ 已完成 +
+
2026-05-19 15:30
+
2026-05-19 15:32
+
2m 14s
+
+ +
+
+ +
+
+
平台套图 // T-2026-0519-0004
+
4 张
+
+ 已完成 +
+
2026-05-19 14:20
+
2026-05-19 14:23
+
3m 02s
+
+ +
+
+ +
+
+
模特上身图 // T-2026-0519-0003
+
4 张
+
+ 已完成 +
+
2026-05-19 13:10
+
2026-05-19 13:13
+
2m 50s
+
+ +
+
+ +
+
+
三视图 // T-2026-0519-0002
+
3 张
+
+ 失败 +
+
2026-05-19 12:00
+
2026-05-19 12:01
+
30s
+
+ + +
+
+ +
+
+
平台套图 // T-2026-0518-0001
+
6 张
+
+ 已完成 +
+
2026-05-18 18:42
+
2026-05-18 18:46
+
4m 10s
+
+ +
+
+ +
+ +
+
+ +
+ + + + + diff --git a/电商AI平台/product-studio.html b/电商AI平台/product-studio.html new file mode 100644 index 0000000..6404f70 --- /dev/null +++ b/电商AI平台/product-studio.html @@ -0,0 +1,1082 @@ + + + + +商品工作台 · 流·Studio + + + + + +
+ +
+
+

透真补水面膜

+
// 商品工作台 · 已生成 11 张资产 · 创建于 5/19
+
+ +
+ + + + + +
+
+
+
+ +
+
+
透真玻尿酸补水面膜
+
[ 美妆个护 ] · ¥39.9 · 22-32 岁女性
+
+ +
+
+ 熬夜党 + 敏感肌 + 补水 + 玻尿酸 + 通勤 +
+
+ // 卖点 + 玻尿酸双效保湿 · 4 小时持久水润 · 敏感肌可用 · 通勤补水 · 平价代替 +
+
+ +
+
+ 原图册 · 3 / 5 + JPG / PNG · ≤ 5MB +
+
+
+ MAIN +
+
+
+
+ +
+
+
+
+ + +
+

AI 工具箱

+ // 按需调用 · 生成结果自动入资产库 · 失败不扣费 +
+
+ + + +
+
+ +
+
+
AI 模特上身图
+
8 模特库可选 · 每次 4 张
+
+
+ ~35 秒 · ¥3.2 + +
+
+ +
+
+ +
+
+
平台套图
+
6 平台规格 · 每平台 4 张
+
+
+ ~28 秒 · ¥2.4 + +
+
+ +
+
+ +
+
+
更多工具
+
卖点海报 / 详情页插画
+
+
+ 即将上线 +
+
+ +
+ + +
+
+

已生成资产

+ // 自动入「资产库 / 跨项目共享 / 商品图」 +
+
+ + + + +
+
+
+ +
+ + +
+
+ +
+
+
选择模特
// 系统已有 8 位模特 · 每次生成 4 张上身图
+ +
+
+
+
+
+ +
+ 室内自拍 + 梳妆台 + 户外清晨 + 纯色背景 +
+
+
+ +
+ 半身 + 特写 + 全身 +
+
+
+ + 4 张 · 不满意可原地重跑 +
+
+
+
+ // 预计耗时 35 秒 · ¥3.2 · 失败不扣费 + + +
+
+
+ + +
+
+ +
+
+
选择平台
// 按平台调性 + 比例生成 · 每平台 4 张
+ +
+
+
+
+
+ +
+ 主图(1:1) + 详情页头图(750×1000) + 活动横幅(750×260) +
+
+
+ +
+ 干净电商 + 种草风 + 节日热闹 +
+
+
+ + 4 张 · 不满意可原地重跑 +
+
+
+
+ // 预计耗时 28 秒 · ¥2.4 · 失败不扣费 + + +
+
+
+ + +
+
+ +
+
+
生成白底三视图
// 一次出 3 张 · 正面 / 侧面 / 背面
+ +
+
+
+ AI 会以「主图」为基准,自动去白底 + 重打光 + 推算另外两个视角。商品形态尽量保持稳定。 +
+
+
+ +
+ 正面 + 侧面 + 背面 +
+
+
+ +
+ 纯白 + 浅灰 + 柔和渐变 +
+
+
+
+
+ // 预计 18 秒 · ¥1.6 + + +
+
+
+ + + + + diff --git a/电商AI平台/products.html b/电商AI平台/products.html index 4d98e7b..fb963e2 100644 --- a/电商AI平台/products.html +++ b/电商AI平台/products.html @@ -6,25 +6,609 @@ @@ -33,96 +617,1171 @@

商品库

-
// 12 SKU · 商品信息会作为脚本和资产生成的素材
+
// 0 SKU · 商品信息会作为脚本和资产生成的素材
-
-
- - + +
+ + +
+
+ + +
+
+ +
+
+
+ +
+
+ +
+ +
+ // 显示 7 / 7 个商品 +
+ + +
+
+ + +
+
+
+ + +
补水面膜 · 1200×800
+
+
透真玻尿酸补水面膜
+
美妆个护
+
2026-05-15 创建
+
+ +
+ +
+ + +
蓝牙耳机 · 1200×800
+
+
南卡 Lite Pro 蓝牙耳机
+
数码 3C
+
2026-05-12 创建
+
+ +
+ +
+ + +
速食牛肉面 · 1200×800
+
+
滋啦速食牛肉面 · 6 桶装
+
食品饮料
+
2026-05-10 创建
+
+ +
+ +
+ + +
防晒霜 · 1200×800
+
+
透真清透物理防晒霜
+
美妆个护
+
2026-05-08 创建
+
+ +
+ +
+ + +
咖啡冻干粉 · 1200×800
+
+
三顿半同款冻干咖啡粉
+
食品饮料
+
2026-05-05 创建
+
+ +
+ +
+ + +
空气炸锅 · 1200×800
+
+
小熊 4L 可视空气炸锅
+
家居家电
+
2026-05-03 创建
+
+ +
+ +
+ + +
瑜伽裤 · 1200×800
+
+
露露同款裸感瑜伽裤
+
运动户外
+
2026-04-30 创建
+
+ +
+
+ +
+
+ +
+

没有匹配的商品

+

// 试试切换分类或修改搜索词

+
+
+ + + + +
+ +
+ + +
+ + + + -
-
-
补水面膜 · 1200×800
-
-
透真玻尿酸补水面膜
-
美妆个护 · 3 张图
-
熬夜党敏感肌¥39.9
+ + + +
+ 已选 0 + + + +
- + diff --git a/电商AI平台/projects-new.html b/电商AI平台/projects-new.html index b5c99fd..6d16bf6 100644 --- a/电商AI平台/projects-new.html +++ b/电商AI平台/projects-new.html @@ -6,9 +6,45 @@ @@ -101,7 +323,7 @@

新建项目

-
// 商品 → 脚本来源 → 配置 → 确认 · 4 步开始生成
+
// 商品 → 配置 · 2 步开始生成
退出 @@ -109,60 +331,546 @@
- + +
+ +
-
-