Image editor: Seedance2.0 refs and audio changes
Adds Seedance 2.0 reference-media constraints and forbids video data URLs; updates docs/decision-log and pitfalls to record the new rules. Introduces typed audio params (type: one-shot|loop, tempo: number|null), generator-specific placeholder styles/avoidance and UI changes for generation panels. Implements related front-end changes (new crop/ raster edit components, many image-editor models, tests and workflow hooks) and server-side contract/handler updates across api-server, shared-contracts, platform-audio, platform-image and vector_engine_audio_generation to support the new submission/asset flow and validations.
This commit is contained in:
+185
-133
@@ -3965,6 +3965,31 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
border-radius: 0.45rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__bottom-tool-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__bottom-toolbar-divider,
|
||||
.image-canvas-editor__floating-toolbar-divider {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 0.5rem;
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
border-radius: 999px;
|
||||
background: #d9dee8;
|
||||
}
|
||||
|
||||
.image-canvas-editor__floating-toolbar-divider {
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__bottom-toolbar-option-wrap {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.image-canvas-editor__viewport {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
@@ -4120,6 +4145,62 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
color: #c7c7c7;
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--character {
|
||||
background: radial-gradient(
|
||||
circle at 50% 34%,
|
||||
rgba(250, 245, 255, 0.94),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(135deg, rgba(250, 245, 255, 0.84), rgba(243, 232, 255, 0.72));
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--character.image-canvas-editor__generation-frame--focused {
|
||||
border-color: rgba(147, 51, 234, 0.72);
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--character
|
||||
.image-canvas-editor__generation-frame-icon {
|
||||
color: #9333ea;
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--video {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(15, 23, 42, 0.12) 10%, transparent 10% 90%, rgba(15, 23, 42, 0.12) 90%),
|
||||
linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(219, 234, 254, 0.82));
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--video.image-canvas-editor__generation-frame--focused {
|
||||
border-color: rgba(37, 99, 235, 0.72);
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--video
|
||||
.image-canvas-editor__generation-frame-icon {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--audio-sound-effect,
|
||||
.image-canvas-editor__generation-frame--audio-background-music {
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(79, 70, 229, 0.14) 0 0.22rem,
|
||||
transparent 0.22rem 0.58rem
|
||||
),
|
||||
linear-gradient(135deg, rgba(238, 242, 255, 0.92), rgba(224, 231, 255, 0.8));
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--audio-sound-effect.image-canvas-editor__generation-frame--focused,
|
||||
.image-canvas-editor__generation-frame--audio-background-music.image-canvas-editor__generation-frame--focused {
|
||||
border-color: rgba(79, 70, 229, 0.72);
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--audio-sound-effect
|
||||
.image-canvas-editor__generation-frame-icon,
|
||||
.image-canvas-editor__generation-frame--audio-background-music
|
||||
.image-canvas-editor__generation-frame-icon {
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.image-canvas-editor__generation-frame--generating {
|
||||
overflow: hidden;
|
||||
background: radial-gradient(
|
||||
@@ -4385,6 +4466,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
|
||||
}
|
||||
|
||||
.image-canvas-editor__kind-badge--video {
|
||||
background: rgba(37, 99, 235, 0.92);
|
||||
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
|
||||
}
|
||||
|
||||
.image-canvas-editor__kind-badge--sound-effect,
|
||||
.image-canvas-editor__kind-badge--background-music {
|
||||
background: rgba(79, 70, 229, 0.92);
|
||||
@@ -4408,6 +4494,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
border: 1px solid #d9dee8;
|
||||
border-radius: 0.5rem;
|
||||
@@ -4417,6 +4504,16 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.image-canvas-editor__floating-toolbar button.image-canvas-editor__floating-toolbar-text-button {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
gap: 0.35rem;
|
||||
padding: 0 0.62rem;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-canvas-editor__reset-button {
|
||||
position: absolute;
|
||||
right: 0.85rem;
|
||||
@@ -5319,6 +5416,47 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
box-shadow: inset 0 0 0 1px #202124;
|
||||
}
|
||||
|
||||
.image-canvas-editor__option-popover--audio-options {
|
||||
display: grid;
|
||||
min-width: 16.4rem;
|
||||
gap: 0.72rem;
|
||||
padding: 0.88rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__audio-type-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.image-canvas-editor__audio-bpm-control {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(7rem, 1fr) 4.7rem;
|
||||
align-items: center;
|
||||
gap: 0.56rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__audio-bpm-control input[type='range'] {
|
||||
width: 100%;
|
||||
accent-color: #4f46e5;
|
||||
}
|
||||
|
||||
.image-canvas-editor__audio-bpm-control input[type='number'] {
|
||||
min-width: 0;
|
||||
border: 1px solid rgba(15, 23, 42, 0.1);
|
||||
border-radius: 999px;
|
||||
background: #f8fafc;
|
||||
padding: 0.46rem 0.62rem;
|
||||
color: #0f172a;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 760;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.image-canvas-editor__audio-bpm-control input[type='number']:focus {
|
||||
border-color: rgba(79, 70, 229, 0.42);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.image-canvas-editor__option-popover-choice--model {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
@@ -5514,41 +5652,22 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
z-index: 13;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
min-width: 28rem;
|
||||
max-width: none;
|
||||
gap: 0.55rem;
|
||||
overflow: visible;
|
||||
border: 1px solid rgba(134, 146, 166, 0.24);
|
||||
border-radius: 1.45rem;
|
||||
background: radial-gradient(
|
||||
circle at 10% 0%,
|
||||
rgba(240, 253, 250, 0.95),
|
||||
transparent 36%
|
||||
),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.98),
|
||||
rgba(248, 250, 252, 0.96)
|
||||
);
|
||||
padding: 0.72rem 0.78rem 0.76rem;
|
||||
grid-template-rows: auto minmax(5.8rem, auto) auto auto;
|
||||
width: min(34rem, calc(100% - 1.5rem));
|
||||
min-height: 11.2rem;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid #cfd6df;
|
||||
border-radius: 1.35rem;
|
||||
background: #ffffff;
|
||||
padding: 0.62rem 0.7rem 0.68rem;
|
||||
color: #1f2937;
|
||||
box-shadow:
|
||||
0 20px 54px rgba(15, 23, 42, 0.17),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-spec-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(15.5rem, 1fr) auto;
|
||||
min-width: 0;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-spec-row .image-canvas-editor__character-spec-wrap {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
.image-canvas-editor__icon-composer .image-canvas-editor__generation-prompt {
|
||||
min-height: 5.8rem;
|
||||
padding-top: 0.42rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-spec-card:disabled {
|
||||
@@ -5556,47 +5675,6 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-spec-actions {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: stretch;
|
||||
gap: 0.32rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-spec-actions button {
|
||||
min-width: 3rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
border-radius: 0.9rem;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
padding: 0 0.42rem;
|
||||
color: #475569;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-spec-actions button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(16, 185, 129, 0.35);
|
||||
background: #ffffff;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-spec-actions button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.56;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-description-list {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 8.4rem;
|
||||
align-items: stretch;
|
||||
gap: 0.46rem;
|
||||
overflow: visible;
|
||||
padding: 0.02rem 0;
|
||||
}
|
||||
|
||||
.image-canvas-editor__field-block {
|
||||
display: grid;
|
||||
gap: 0.42rem;
|
||||
@@ -5636,61 +5714,6 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-description-card {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.32rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 1.05rem;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.96),
|
||||
rgba(248, 250, 252, 0.92)
|
||||
),
|
||||
#ffffff;
|
||||
padding: 0.45rem;
|
||||
box-shadow:
|
||||
0 10px 24px rgba(15, 23, 42, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-description-index {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
background: #111827;
|
||||
padding: 0.1rem 0.36rem;
|
||||
color: #ffffff;
|
||||
font-size: 0.64rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-description-title {
|
||||
color: #475569;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-description-input {
|
||||
min-height: 2.25rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-footer {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: 0.48rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-footer
|
||||
.image-canvas-editor__character-reference-add {
|
||||
min-width: 6.2rem;
|
||||
height: 2.55rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__character-reference-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
@@ -6004,7 +6027,8 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
color: #991b1b !important;
|
||||
}
|
||||
|
||||
.image-canvas-editor__quick-edit-panel {
|
||||
.image-canvas-editor__quick-edit-panel,
|
||||
.image-canvas-editor__crop-expand-panel {
|
||||
position: absolute;
|
||||
z-index: 14;
|
||||
display: grid;
|
||||
@@ -6021,6 +6045,10 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.image-canvas-editor__crop-expand-panel {
|
||||
width: min(19rem, calc(100vw - 1.5rem));
|
||||
}
|
||||
|
||||
.image-canvas-editor__quick-edit-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -6068,6 +6096,30 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
min-width: 6.8rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__crop-expand-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__crop-expand-field {
|
||||
display: grid;
|
||||
gap: 0.26rem;
|
||||
color: #475569;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.image-canvas-editor__crop-expand-error {
|
||||
margin: 0;
|
||||
border-radius: 0.72rem;
|
||||
background: #fff1f2;
|
||||
padding: 0.48rem 0.62rem;
|
||||
color: #be123c;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.image-canvas-editor__character-animation-panel {
|
||||
position: absolute;
|
||||
z-index: 14;
|
||||
@@ -6402,15 +6454,11 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
right: auto;
|
||||
top: auto !important;
|
||||
bottom: 3.85rem;
|
||||
width: calc(100% - 1.5rem) !important;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-spec-row {
|
||||
grid-template-columns: minmax(14rem, 1fr) auto;
|
||||
}
|
||||
|
||||
.image-canvas-editor__canvas-pick-hint {
|
||||
position: fixed;
|
||||
top: 4.35rem;
|
||||
@@ -6438,6 +6486,10 @@ button.image-canvas-editor__reference-chip:disabled {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__floating-toolbar button.image-canvas-editor__floating-toolbar-text-button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.image-canvas-editor__floating-toolbar {
|
||||
max-width: calc(100% - 1.5rem);
|
||||
overflow-x: auto;
|
||||
|
||||
Reference in New Issue
Block a user