-
-
-
-
-
视频复刻
-
- 上传参考视频,拆解镜头、动作、运镜和节奏,生成可编辑提示词
- [ /remix ]
-
-
-
-
-
-
-
-
-
上传参考视频
- // 视频提炼
-
- 建议使用主体清晰、镜头完整的电商短视频。拆解稿会落在右侧,先逐镜改完再去生成。
-
-
- 参考视频
- MP4 / MOV · 最长 3 分钟 · 200MB
-
-
-
-
-
- {digestModels.length > 0 ? (
-
-
-
- {digestModels.map((model) => (
-
{ setModelId(model.id); setModelMenuOpen(false); }}
- onKeyDown={(event) => {
- if (event.key === "Enter" || event.key === " ") {
- event.preventDefault();
- setModelId(model.id);
- setModelMenuOpen(false);
- }
- }}
- >
- {publicModelDisplayName(model)}
-
-
- ))}
-
-
- ) : null}
-
{estimatedPoints > 0 ? `视频解析预计消耗 ${estimatedPoints} 积分` : "视频解析按一次文本模型计费"}
-
-
+
);
diff --git a/core/frontend/src/trash-page.css b/core/frontend/src/trash-page.css
index 806773d..41f282f 100644
--- a/core/frontend/src/trash-page.css
+++ b/core/frontend/src/trash-page.css
@@ -4,7 +4,15 @@
margin: 0 auto;
}
-.trash-empty { min-height: 220px; flex-direction: column; gap: 10px; }
+.trash-empty {
+ min-height: 220px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ text-align: center;
+}
/* 分区(商品 / 资产):mono 小标题 + 各自列表 */
.trash-section { margin-bottom: 22px; }
diff --git a/core/frontend/src/video-remix-page.css b/core/frontend/src/video-remix-page.css
index ddea01a..a977289 100644
--- a/core/frontend/src/video-remix-page.css
+++ b/core/frontend/src/video-remix-page.css
@@ -1,119 +1,465 @@
-/* 视频复刻页 · 两栏工作台。不重写共享 .btn/.pill/.input/.chip/.textarea。 */
-
+/* 提炼提示词 · 对照影擎 remix-page。不重写共享 .btn/.pill/.input/.chip/.textarea。 */
.vr-page {
+ --klein: #002fa7;
+ --klein-hover: #002680;
+ --muted: #6f747c;
+ --text: #17181a;
+ --shadow-card: 0 8px 20px rgba(20, 27, 38, 0.09);
width: 100%;
max-width: none;
box-sizing: border-box;
+ margin: -24px -28px -60px;
+ padding: 52px clamp(40px, 3.2vw, 68px) 48px;
+}
+
+@media (max-width: 1100px) {
+ .vr-page { margin: -28px -24px -48px; }
}
.vr-page .vr-inner {
- width: min(1320px, 100%);
+ width: min(1560px, 100%);
margin: 0 auto;
}
-.vr-page .vr-title-row {
+.vr-page .video-tool-page {
+ min-height: calc(100vh - 116px - 100px);
+}
+
+.vr-page .page-header {
+ position: relative;
+ min-height: 76px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 30px;
+ margin-bottom: 34px;
+}
+
+.vr-page .image-title-row {
+ display: flex;
+ align-items: flex-start;
+ gap: 13px;
+}
+
+.vr-page .image-back-button {
+ width: 38px;
+ height: 38px;
+ display: grid;
+ place-items: center;
+ flex: 0 0 auto;
+ margin-top: 2px;
+ border: 1px solid rgba(0, 47, 167, 0.46);
+ border-radius: 12px;
+ color: var(--klein);
+ background: rgba(255, 255, 255, 0.82);
+ cursor: pointer;
+ box-shadow: 0 5px 14px rgba(0, 47, 167, 0.07);
+ transition: background-color 180ms ease, transform 180ms ease;
+}
+.vr-page .image-back-button:hover {
+ transform: translateX(-2px);
+ border-color: var(--klein);
+ background: rgba(0, 47, 167, 0.055);
+}
+.vr-page .image-back-button svg { width: 19px; height: 19px; }
+
+.vr-page .page-heading h1 {
+ margin: 0 0 10px;
+ font-size: 32px;
+ line-height: 1.2;
+ font-weight: 600;
+ letter-spacing: -.02em;
+ color: var(--text);
+}
+.vr-page .page-heading p {
+ margin: 0;
+ color: var(--muted);
+ font-size: 15px;
+}
+
+.vr-page .video-flow-grid {
+ display: grid;
+ grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
+ gap: 22px;
+ margin-top: 26px;
+}
+
+.vr-page .remix-flow-grid {
+ grid-template-columns: minmax(0, 1.42fr) minmax(310px, 0.58fr);
+}
+
+.vr-page .video-flow-panel,
+.vr-page .video-result-panel {
+ padding: 24px;
+ border: 1px solid rgba(34, 42, 54, 0.1);
+ border-radius: 16px;
+ background: rgba(255, 255, 255, 0.92);
+ box-shadow: var(--shadow-card);
+}
+
+.vr-page .video-remix-upload-panel,
+.vr-page .remix-information-panel,
+.vr-page .remix-prompt-panel {
+ position: relative;
+ overflow: hidden;
+ border-color: rgba(0, 47, 167, 0.13);
+ background-color: rgba(251, 253, 255, 0.96);
+ box-shadow: 0 16px 38px rgba(22, 45, 92, 0.07), 0 2px 8px rgba(34, 42, 54, 0.035);
+}
+
+.vr-page .video-remix-upload-panel {
+ display: flex;
+ flex-direction: column;
+}
+
+.vr-page .video-remix-upload-panel::before,
+.vr-page .remix-prompt-panel::before {
+ content: "";
+ position: absolute;
+ inset: 0 auto auto 0;
+ width: 100%;
+ height: 3px;
+ background: var(--klein);
+}
+
+.vr-page .remix-information-panel {
+ isolation: isolate;
+ background-color: rgba(249, 252, 255, 0.96);
+}
+
+.vr-page .remix-information-panel::before {
+ content: "";
+ position: absolute;
+ inset: 0 0 auto;
+ z-index: -1;
+ height: 3px;
+ background: var(--klein);
+ transition: height 220ms ease;
+}
+
+.vr-page .remix-information-panel.has-result::before {
+ height: 86px;
+ background: var(--klein);
+}
+
+.vr-page .remix-information-panel > * {
+ position: relative;
+ z-index: 1;
+}
+
+.vr-page .remix-information-panel .video-result-placeholder,
+.vr-page .remix-information-panel .video-analysis-result {
+ min-height: 286px;
+}
+
+.vr-page .remix-information-panel .video-result-placeholder {
+ color: var(--muted);
+}
+
+.vr-page .remix-information-panel .video-result-placeholder strong {
+ color: var(--text);
+ font-size: 16px;
+}
+
+.vr-page .remix-information-panel .video-result-placeholder svg {
+ color: var(--klein);
+}
+
+.vr-page .remix-placeholder-icon {
+ width: 54px;
+ height: 54px;
+ display: grid;
+ place-items: center;
+ margin-bottom: 4px;
+ border: 1px solid rgba(0, 47, 167, 0.13);
+ border-radius: 16px;
+ background: rgba(0, 47, 167, 0.055);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+.vr-page .remix-info-heading {
+ min-height: 62px;
display: flex;
align-items: flex-start;
gap: 12px;
- min-width: 0;
+ color: #fff;
}
-.vr-page .vr-back {
- width: 36px;
- height: 36px;
- padding: 0;
+.vr-page .remix-status-icon {
+ width: 38px;
+ height: 38px;
flex: 0 0 auto;
- margin-top: 2px;
-}
-
-.vr-page .vr-grid {
display: grid;
- grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
- gap: 16px;
+ place-items: center;
+ border: 1px solid rgba(255, 255, 255, 0.22);
+ border-radius: 12px;
+ background: rgba(255, 255, 255, 0.12);
}
-.vr-page .vr-panel,
-.vr-page .vr-result {
- position: relative;
- padding: 22px 24px;
- border-radius: var(--r-md);
- background: var(--surface);
+.vr-page .remix-status-icon svg { width: 19px; height: 19px; }
+
+.vr-page .remix-eyebrow {
+ display: block;
+ margin-bottom: 3px;
+ color: rgba(255, 255, 255, 0.66);
+ font-size: 10px;
+ font-weight: 600;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
}
-.vr-page .vr-panel::before,
-.vr-page .vr-result::before {
- content: "";
- position: absolute;
- inset: 0;
- border: 1px solid var(--border-faint);
- border-radius: inherit;
- pointer-events: none;
+.vr-page .remix-info-heading h2 {
+ margin: 0;
+ color: #fff;
+ font-size: 18px;
+ font-weight: 600;
}
-.vr-page .vr-lead {
- margin: 0 0 18px;
- color: var(--black-alpha-56);
+.vr-page .remix-info-heading p {
+ margin: 5px 0 0;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 11px;
+}
+
+.vr-page .remix-info-list {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ grid-template-rows: repeat(2, minmax(0, 1fr));
+ gap: 9px;
+ margin-top: 16px;
+}
+
+.vr-page .remix-info-item {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 11px 12px;
+ border: 1px solid rgba(0, 47, 167, 0.09);
+ border-radius: 11px;
+ background: rgba(255, 255, 255, 0.76);
+}
+
+.vr-page .remix-info-item span,
+.vr-page .remix-info-file span {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ color: #72809a;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.vr-page .remix-info-item span svg,
+.vr-page .remix-info-file span svg {
+ width: 15px;
+ height: 15px;
+ color: var(--klein);
+}
+
+.vr-page .remix-info-item strong {
+ display: block;
+ margin-top: 9px;
+ color: #1f2b42;
+ font-size: 16px;
+ line-height: 1.3;
+ font-weight: 600;
+}
+
+.vr-page .remix-info-list .remix-info-file {
+ margin-top: 0;
+ padding: 11px 12px;
+}
+
+.vr-page .remix-info-list .remix-info-file strong { font-size: 14px; }
+.vr-page .remix-info-list .remix-info-file small { font-size: 11px; }
+
+.vr-page .remix-info-file strong,
+.vr-page .remix-info-file small {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.vr-page .remix-info-file strong {
+ margin-top: 6px;
+ color: #1f2b42;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+.vr-page .remix-info-file small {
+ margin-top: 3px;
+ color: #8a95a9;
+ font-size: 10px;
+}
+
+.vr-page .remix-prompt-panel {
+ min-height: 188px;
+ margin-top: 22px;
+ padding: 24px;
+ border: 1px solid rgba(0, 47, 167, 0.13);
+ border-radius: 16px;
+}
+
+.vr-page .remix-prompt-placeholder {
+ min-height: 138px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ color: var(--muted);
+ text-align: left;
+}
+
+.vr-page .remix-prompt-placeholder > span {
+ width: 48px;
+ height: 48px;
+ flex: 0 0 auto;
+ display: grid;
+ place-items: center;
+ border: 1px solid rgba(0, 47, 167, 0.13);
+ border-radius: 14px;
+ color: var(--klein);
+ background: rgba(0, 47, 167, 0.055);
+}
+
+.vr-page .remix-prompt-placeholder svg { width: 22px; height: 22px; }
+.vr-page .remix-prompt-placeholder strong {
+ display: block;
+ color: var(--text);
+ font-size: 15px;
+ font-weight: 600;
+}
+
+.vr-page .remix-prompt-result { display: none; }
+.vr-page .remix-prompt-panel.has-result .remix-prompt-placeholder { display: none; }
+.vr-page .remix-prompt-panel.has-result .remix-prompt-result { display: block; }
+
+.vr-page .remix-prompt-head {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ margin-bottom: 15px;
+}
+
+.vr-page .remix-prompt-title {
+ display: flex;
+ align-items: flex-start;
+}
+
+.vr-page .remix-prompt-title h2 {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--text);
+}
+
+.vr-page .remix-prompt-panel .analysis-prompt {
+ width: 100%;
+ min-height: 132px;
+ overflow-y: hidden;
+ resize: none;
+ padding: 15px;
+ border: 1px solid rgba(0, 47, 167, 0.14);
+ border-radius: 11px;
+ outline: none;
+ color: var(--text);
+ background: rgba(255, 255, 255, 0.82);
+ box-shadow: inset 0 1px 2px rgba(27, 45, 83, 0.025);
+ font: inherit;
font-size: 13px;
line-height: 1.65;
+ box-sizing: border-box;
}
-.vr-page .vr-step { margin-top: 4px; }
+.vr-page .remix-prompt-panel .analysis-prompt:focus {
+ border-color: var(--klein);
+ box-shadow: 0 0 0 3px rgba(0, 47, 167, 0.08);
+}
-.vr-page .vr-step-h {
+.vr-page .video-flow-actions.remix-prompt-actions {
+ justify-content: flex-end;
+ gap: 12px;
+}
+
+.vr-page .video-flow-actions.remix-analyze-actions {
+ justify-content: flex-end;
+ margin-top: auto;
+ padding-top: 22px;
+}
+
+.vr-page .video-flow-panel h2,
+.vr-page .video-result-panel h2 {
+ margin: 0;
+ font-size: 20px;
+ font-weight: 600;
+ color: var(--text);
+}
+
+.vr-page .remix-information-panel.has-result .remix-info-heading h2 {
+ color: #fff;
+ font-size: 18px;
+}
+
+.vr-page .video-flow-step { margin-top: 22px; }
+
+.vr-page .video-flow-step-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
- margin-bottom: 8px;
+ margin-bottom: 9px;
}
-.vr-page .vr-step-h strong {
- font-size: 13px;
- font-weight: 500;
- color: var(--accent-black);
+.vr-page .video-flow-step-head strong {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text);
}
-.vr-page .vr-step-h span {
- color: var(--black-alpha-48);
- font-family: var(--font-mono);
+.vr-page .video-flow-step-head span {
+ color: var(--muted);
font-size: 11px;
- letter-spacing: .04em;
}
-.vr-page .vr-upload {
+.vr-page .video-upload-field {
min-height: 148px;
display: grid;
place-items: center;
padding: 22px;
- border: 1px dashed var(--border-muted);
- border-radius: var(--r-md);
- color: var(--black-alpha-56);
- background: var(--background-lighter);
+ border: 1px dashed rgba(0, 47, 167, 0.3);
+ border-radius: 13px;
+ color: #42506a;
+ background: rgba(0, 47, 167, 0.04);
text-align: center;
cursor: pointer;
+ transition: border-color 160ms ease, background 160ms ease;
}
-.vr-page .vr-upload:hover,
-.vr-page .vr-upload.has-file {
- border-color: var(--heat-40);
- background: var(--heat-12);
- color: var(--heat);
+.vr-page .video-upload-field:hover,
+.vr-page .video-upload-field.has-file {
+ border-color: var(--klein);
+ background: rgba(0, 47, 167, 0.075);
}
-.vr-page .vr-upload > span {
+.vr-page .video-upload-field > span {
display: grid;
place-items: center;
gap: 8px;
min-width: 0;
}
-.vr-page .vr-upload svg {
- width: 22px;
- height: 22px;
+.vr-page .video-upload-field svg {
+ width: 28px;
+ height: 28px;
+ color: var(--klein);
}
-.vr-page .vr-upload strong {
- color: var(--accent-black);
+.vr-page .video-upload-field strong {
+ color: var(--text);
font-size: 14px;
font-weight: 500;
overflow: hidden;
@@ -122,12 +468,12 @@
max-width: 100%;
}
-.vr-page .vr-upload small {
- color: var(--black-alpha-48);
+.vr-page .video-upload-field small {
+ color: var(--muted);
font-size: 12px;
}
-.vr-page .vr-actions {
+.vr-page .video-flow-actions {
display: flex;
align-items: center;
justify-content: space-between;
@@ -135,93 +481,88 @@
margin-top: 22px;
}
-.vr-page .vr-meta {
- display: flex;
+.vr-page .primary-action,
+.vr-page .secondary-action {
+ display: inline-flex;
align-items: center;
- gap: 12px;
- min-width: 0;
+ justify-content: center;
+ gap: 9px;
+ border-radius: 11px;
+ cursor: pointer;
+ font: inherit;
+ transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
-.vr-page .vr-meta > span {
- color: var(--black-alpha-48);
- font-size: 12px;
+.vr-page .primary-action {
+ min-width: 158px;
+ height: 50px;
+ padding: 0 22px;
+ color: #fff;
+ background: var(--klein);
+ border: 0;
+ box-shadow: 0 9px 18px rgba(0, 47, 167, 0.18);
}
-.vr-page .vr-placeholder,
-.vr-page .vr-analysis { min-height: 360px; }
+.vr-page .primary-action:hover:not(:disabled) {
+ transform: translateY(-2px);
+ background: var(--klein-hover);
+}
-.vr-page .vr-placeholder {
+.vr-page .primary-action:disabled {
+ opacity: 0.38;
+ transform: none;
+ box-shadow: none;
+ cursor: not-allowed;
+}
+
+.vr-page .secondary-action {
+ min-width: 132px;
+ height: 46px;
+ padding: 0 18px;
+ color: var(--text);
+ border: 1px solid rgba(28, 34, 43, 0.12);
+ background: rgba(34, 42, 54, 0.05);
+}
+
+.vr-page .secondary-action:hover:not(:disabled) {
+ background: rgba(34, 42, 54, 0.10);
+}
+
+.vr-page .primary-action svg,
+.vr-page .secondary-action svg {
+ width: 19px;
+ height: 19px;
+}
+
+.vr-page .video-result-placeholder,
+.vr-page .video-analysis-result {
+ min-height: 360px;
+}
+
+.vr-page .video-result-placeholder {
display: grid;
place-items: center;
- color: var(--black-alpha-48);
- text-align: left;
+ color: var(--muted);
+ text-align: center;
}
-.vr-page .vr-placeholder > div {
+.vr-page .video-result-placeholder > div {
display: grid;
- justify-items: start;
- gap: 8px;
- max-width: 260px;
+ place-items: center;
+ gap: 10px;
}
-.vr-page .vr-placeholder svg {
- width: 22px;
- height: 22px;
- color: var(--black-alpha-32);
+.vr-page .video-analysis-result { display: none; }
+.vr-page .video-result-panel.has-result .video-result-placeholder { display: none; }
+.vr-page .video-result-panel.has-result .video-analysis-result { display: block; }
+.vr-page .remix-information-panel.has-result .video-analysis-result {
+ display: flex;
+ flex-direction: column;
}
-.vr-page .vr-placeholder strong {
- font-size: 14px;
- font-weight: 500;
- color: var(--accent-black);
-}
-
-.vr-page .vr-placeholder span {
- font-size: 13px;
- line-height: 1.65;
- color: var(--black-alpha-56);
-}
-
-.vr-page .vr-summary {
- display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 0;
- margin: 0 0 16px;
- border: 1px solid var(--border-faint);
- border-radius: var(--r-md);
- overflow: hidden;
-}
-
-.vr-page .vr-summary span {
- padding: 12px 14px;
- color: var(--black-alpha-48);
- background: var(--background-lighter);
- font-size: 11px;
-}
-
-.vr-page .vr-summary span + span {
- border-left: 1px solid var(--border-faint);
-}
-
-.vr-page .vr-summary strong {
- display: block;
- margin-top: 4px;
- color: var(--accent-black);
- font-size: 14px;
- font-weight: 500;
-}
-
-.vr-page .vr-prompt {
- min-height: 174px;
-}
-
-.vr-page .vr-analysis .vr-actions {
- justify-content: flex-end;
-}
-
-@media (max-width: 1100px) {
- .vr-page .vr-grid { grid-template-columns: 1fr; }
- .vr-page .vr-summary { grid-template-columns: 1fr; }
- .vr-page .vr-summary span + span { border-left: 0; border-top: 1px solid var(--border-faint); }
- .vr-page .vr-actions { flex-wrap: wrap; }
+@media (max-width: 1120px) {
+ .vr-page .video-flow-grid,
+ .vr-page .remix-flow-grid { grid-template-columns: 1fr; }
+ .vr-page .remix-prompt-head { flex-direction: column; }
+ .vr-page .video-flow-actions { flex-wrap: wrap; }
}
diff --git a/core/frontend/vite.config.ts b/core/frontend/vite.config.ts
index 22d823d..190ae46 100644
--- a/core/frontend/vite.config.ts
+++ b/core/frontend/vite.config.ts
@@ -10,7 +10,10 @@ export default defineConfig({
proxy: {
"/api": {
target: process.env.VITE_API_TARGET || "http://127.0.0.1:8010",
- changeOrigin: true
+ changeOrigin: true,
+ // 视频提炼抽帧更密,模型写全片分镜稿可达 1–2 分钟;默认代理超时会先断
+ timeout: 300_000,
+ proxyTimeout: 300_000,
}
}
}