j d dl Z d dlZd dlZd dlZd dlZd dlmZ d dlZd dlZ d dl
Z d dl m
Z
mZ d dlmZ G d de ZdS ) N)Path)ImageImageOps) WAN2GPPluginc : e Zd Z fdZd Zd ZdedefdZdedz d edz d
edz d edz d edz f
d
Z dedz d edz dedz fdZ
dedz fdZ de de
ez dz de fdZde dee
dz edz f fdZdede deeef dz fdZdefdZdefd Z xZS ) MotionDesignerPluginc t d| _ d| _ d| _ d | _ d | _ d S )NMotion Designerz1.0.0zeCut objects, design their motion paths, preview the animation, and send the mask directly into WanGP.)super__init__nameversion description_iframe_html_cache_iframe_cache_signature)self __class__s FC:\Users\johnn\OneDrive\Documents\AI\plugins\motion_designer\plugin.pyr z MotionDesignerPlugin.__init__ sJ
% s
/3 DH$$$ c | d | d | d | d | d | d | | | dd| j d S )
Nupdate_video_prompt_type
get_model_defstate main_tabsrefresh_form_triggerget_current_model_settingsmotion_designerr
)tab_idlabelcomponent_constructor)request_globalrequest_component
add_custom_js
_js_bridgeadd_tab _build_uir s r setup_uiz MotionDesignerPlugin.setup_ui s 6777 O,,, w''' {+++ 5666 8999 4??,,--- $#"&.
r c Z | }d}t j d 5 t j ||z dd t j ddd }t j d
dd }t j d dd
}t j ddd }t j ddd }t j dddd }t j ddd } t j ddd }
t j ddd } t j d dd } t j d dd }
d d d n # 1 swxY w Y |
| j | j | |
| g| j gd!"
| j | j g| j g# | | j
| j |||||g| j gd!"
| j | j g| j g# | d$ |gg d!dd%& |g| _ d S )'NaO
motion_designer_plugin)elem_id motion_designer_iframe_container)valuer+
min_heightz Mask PayloadF motion_designer_mask_payload)r visibler+ z
Mask Metadata motion_designer_meta_payloadzBackground Payload"motion_designer_background_payloadz
Guide Payload motion_designer_guide_payloadzGuide Metadata"motion_designer_guide_meta_payloadz Mode Synccut_dragmotion_designer_mode_sync)r r- r0 r+ zTrajectory Payload"motion_designer_trajectory_payloadzTrajectory Metadata motion_designer_trajectory_metazTrajectory Background%motion_designer_trajectory_backgroundzApply Motion Designer data motion_designer_apply_trigger)r0 r+ zApply Trajectory data"motion_designer_trajectory_triggerhidden)fninputsoutputs
show_progress)r= r> r? c d S )N )_s r z0MotionDesignerPlugin._build_ui.. s r a
(mode) => {
const raw = (mode || "").toString();
const normalized = raw.split("|", 1)[0]?.trim().toLowerCase();
if (!normalized) {
return;
}
if (window.motionDesignerSetRenderMode) {
window.motionDesignerSetRenderMode(normalized);
} else {
console.warn("[MotionDesignerPlugin] motionDesignerSetRenderMode not ready yet.");
}
}
)r= r> r? r@ queuejs)_get_iframe_markupgrColumnHTMLTextboxButtonclick_apply_trajectoryr r thengoto_media_tabr _apply_maskchangeon_tab_outputs)r iframe_htmliframe_wrapper_style mask_payloadmetadata_payloadbackground_payload
guide_payloadguide_metadata_payload mode_synctrajectory_payloadtrajectory_metadatatrajectory_backgroundtriggertrajectory_triggers r r& z MotionDesignerPlugin._build_ui* sS --// Y 7
8
8
8 = = G*[8:
:$ 6 L
"z% 6
"$* <" " "
J% 7 M
&(Z& <& & & "
! 3 I "$* <" " "
#%*+ 9# # #
%'J- ?% % % !
i, 7 G
"$' <" " " s= = = = = = = = = = = = = = = ~ %
"#% ./" !
$"J<^$
" &
./"
$"J<^$
~ ;"
* )ks DEEEr returnc * | |d }d}| dd rd}nE| dd rd}n,| dd rd}nt j S | d t j d
S ) N
model_typer5 i2v_v2vF
vace_classclassici2v_trajectory
trajectory|z.6f)r getrH updatetime)r r model_defmodes r
on_tab_selectz"MotionDesignerPlugin.on_tab_select s &&u\':;; ==E * * DD
]]<
/
/ DD
]]+U
3
3 DD9;; ******r
encoded_videoN
metadata_jsonbackground_image_dataguide_video_dataguide_metadata_jsonc |st j d | } t j | }n'# t
$ r}t j d |d }~ww xY wi } |rD t
j | } t | t si } n# t j
$ r i } Y nw xY wi }
|rD t
j | }
t |
t si }
n# t j
$ r i }
Y nw xY w| | } t d } |
dd t j d }
| d|
dz }| | d }|rq t j | }| d |
dz }| | n+# t
$ r }t# d
| d }Y d }~nd }~ww xY wd }d }t | t rK| d }t' | d
pd }|*t |
t r|
d }|dvrKt |
t r6t' |
d
pd }|dvrd}| || }|r| || nd }| d|| |r| d||
p| | | }|dk r]t' | |d< | dd | dd | r| |d< n| dd nlt' | |d< | r| |d< n| dd |p|}t' | |d< |
r|
|d< n | r| |d< n| dd | Y|dk rM| d }t |t2 r |rt3 | }| |d< ||d< n
| g|d< n| g|d< |dk r| |ddd n| |ddd t j d t j S ) Nz,No mask video received from Motion Designer.z(Unable to decode the mask video payload. mask_outputsTparentsexist_ok
%Y%m%d_%H%M%Smotion_designer_mask_z.webmmotion_designer_guide_z=[MotionDesignerPlugin] Failed to decode guide video payload: fps
renderMode)rf r5 r5 maskguiderf video_guide
video_maskvideo_mask_metavideo_guide_meta
image_refsr image_start)any_video_guideany_background_image_ref process_typeG)r any_video_maskdefault_updatez8Motion Designer data transferred to the Media Generator.) rH Errorstripbase64 b64decode Exceptionjsonloads
isinstancedictJSONDecodeError_decode_background_imager mkdirrl strftime write_bytesprintrj strlower_transcode_video_log_frame_checkr poplistr Info)r r rp rq rr rs rt video_bytesexcmetadataguide_metadatabackground_image
output_dir timestamp file_path
guide_path guide_bytesfps_hint render_modesanitized_mask_pathsanitized_guide_path ui_settingsguide_video_path
existing_refsnew_refss r rQ z MotionDesignerPlugin._apply_mask s K(IJJ J%++--
P *=99KK P P P(EFFC O P ')
:m44!(D11 " !H'
-/ $
$!%,?!@!@!.$77 (%'N'
$
$
$!#
$ 889NOO.))
555M/22 !I!I!I!II k***"&
"
" $ ./?/E/E/G/G H H '*S9*S*S*S S
&&{3333
"
"
"[VY[[\\\ !
" h % % H ||E**H hll< 8 8 >B??EEGGK
>4 @ @ %))%00H 5 5 5*^UY:Z:Z 5 n 0 0 > > D"EEKKMMK 5 5 5$K " 3 3Ix H HNX bt 4 4Z J J J^b f&98DDD ] ! !'+? A[S[ \ \ \
55e<< ) # #),-@)A)AK
& OOL$ / / / OO -t 4 4 4
:2: .// 2D9999(+,?(@(@K %
919 -.. 14888 3 J7J ),-=)>)>K
&
:2@ .//
:2: .// 2D999 'i'' + = =
mT22 C} C #M 2 2H"2HQK08K --1A0BK --.>-? M* ) # # ) )%4dhy{ ) | | | | ) )%4Z^or ) s s s
JKKKy{{sT A
A% A A%-+B B-,B-5+C! !C54C5*AF/ /
G9GGtrajectory_jsonbackground_data_urlc |st j d t j | }t |t
rt
| dk rt j d n,# t j $ r}t j d |d }~ww xY wi }|rD t j | }t |t si }n# t j $ r i }Y nw xY wt j
|t j }t
|j dk s|j d dk r t j d|j t d } | d
d
t j d }
| d
|
dz } t j | | t% d| d|j d | | } t) | | d< | | }
|
|
g| d< t j d|j d d|j d d t j S )Nz1No trajectory data received from Motion Designer.r z2Invalid trajectory data: expected non-empty array.z Unable to parse trajectory data.)dtype z2Invalid trajectory shape: expected [T, N, 2], got rv Trw rz motion_designer_trajectory_z.npyz)[MotionDesignerPlugin] Trajectory saved: z (shape: ) custom_guider zTrajectory data saved (z frames, z trajectories).)rH r r r r r lenr r nparrayfloat32shaper r rl r saver r r absoluter r )r r r rq r trajectoriesr r trajectory_arrayr r r r r s r rN z&MotionDesignerPlugin._apply_trajectory4 s P(NOO O H :o66L lD11
US 5F5F!5K5Kh STTT 6L# H H H(=>>C G H ')
:m44!(D11 " !H'
8L
CCC % & &! + +/?/Ea/HA/M/M(hP`Pfhhii i .))
555M/22 !Ny!N!N!NN
+,,,
g)ggN^Ndggghhh 55e<< &))*<*<*>*>&?&? N# 889LMM '*:);K
&
x*:*@*CxxN^NdefNgxxxyyyy{{s* AA) )B8B
B+C CCdata_urlc |sd S |}t |t r d|v r| dd \ }} t j | }t j t j | 5 }t j
| d cd d d S # 1 swxY w Y d S # t $ r }t d| Y d }~d S d }~ww xY w)N,r RGBz:[MotionDesignerPlugin] Failed to decode background image: )r r splitr r r openioBytesIOr exif_transposeconvertr r )r r payloadrC image_bytesimgr s r r z-MotionDesignerPlugin._decode_background_imagek sE 4 gs # # /w sA..JAw *733KBJ{ 3 344
C .s{{5/A/ABB
C
C
C
C
C
C
C
C
C
C
C
C
C
C
C
C
C
C TsTT U U U44444 s; :B5 4'B( B5 (B,,B5 /B,0B5 5
C ?CC source_pathr~ c f t |t t f r |r t t | d nd}| d } t j t | j t | fd|ddddd d
d
| r| |
| n# t
j $ r}t |d d }t |t t" f r| d
d nt | }t' d| Y d }~n,d }~wt* $ r }t' d| Y d }~nd }~ww xY w|S )Nr z .clean.webmcopy)crcfrz+genpts)vsyncfps_modefflagscopytsT)quietstderrr utf-8ignore)errorsz=[MotionDesignerPlugin] FFmpeg failed to sanitize mask video: zE[MotionDesignerPlugin] Unexpected error while sanitizing mask video: )r intfloatmax with_suffixffmpeginputr outputoverwrite_outputrunexistsunlinkreplacer getattrbytes bytearraydecoder r r ) r r r~
frame_rate temp_patherrr decodedr s r r z%MotionDesignerPlugin._transcode_videoy s )3C#u )F)FV3VSS1%%%TV
++M:: as;'') ) NN "'$)"+"&
"!##4 !!##
%""$$$ k * * * *| e e e S(C00FAKFUZ\eTfAgAgxfmmGHm===mpqwmxmxG cRYR_R_RaRacc d d d d d d d d a a a _Z]__ ` ` ` ` ` ` ` ` as& B%C: :F. A7F
F.F))F.
video_pathc
|r| sdS t d }| st d }t | dddddd d
d d t | g } t j |d
d
d }|j pd }d }d }|D ]}| r$t | } | }Ld|v r[|
d \ }
} } t |
}
t | }|dk r|
|z }# t t f$ r Y w xY w||fS # t $ r Y dS w xY w)N)NNz ffprobe.exeffprobez-verrorz-select_streamszv:0z
-count_framesz
-show_entriesz;stream=nb_read_frames,nb_frames,avg_frame_rate,r_frame_ratez-ofz"default=noprint_wrappers=1:nokey=1TF)capture_outputtextcheckr} /r )r r r
subprocessr stdoutr
splitlinesisdigitr partitionr
ValueErrorZeroDivisionErrorr )r r ffprobe_pathcmdresultr frame_countfps_vallinevalnumrC denomnds r _probe_frames_fpsz&MotionDesignerPlugin._probe_frames_fps s !2!2!4!4 <M** ""$$ + ??L I 0
OO
^C4uUUUF m)r0022==??F KG
!
!::<<'')) ! djjll++C"%KKD[[$(NN3$7$7MCE! !#JJ !%LL 66&'!eG &(9: ! ! ! ! ! ) ) << s7 3B4E. ()EE. E&#E. %E&&E. .
E<;E<r r c < d }t |t r@| d }t |t t f rt | }| | \ }}||d S ||k r t
d| d| d| d|pd d d S d S )NexpectedFramesz0[MotionDesignerPlugin] Frame count mismatch for z : expected z, got z (fps probed: zn/ar )r r rj r r r r )r r r r expected_framesexp
actual_framesr~ s r r z%MotionDesignerPlugin._log_frame_check s h % % +,, /00C#U|,,
+"%c(( ! 3 3J ? ?
s "m&; F m + + `5 ` ` +` `3@` `PSP\W\` ` `
, +r c t t j dz }|dz }|dz }|dz }d } | j | j | j f}n# t
$ r d }Y nw xY w| j r|r|| j k r| j S | d }| d }| d }| dd| d } | d
d | d } t j | d
d
}
d|
d| _ || _ | j S )Nassetsz$motion_designer_iframe_template.htmlzapp.jsz style.cssr )encodingz%zz&zasciiz)r __file__parentstat st_mtime_nsFileNotFoundErrorr r read_textr r b64encodeencoder ) r
assets_dir
template_path script_path
style_pathcache_signature
template_html script_js style_cssrT encodeds r rG z'MotionDesignerPlugin._get_iframe_markup s (^^*X5
"%KK
8+ +-
7; # ""$$0 "".!!- OO
! # # # "OOO #
# + + 4#???* *%///AA
))7);; (('(:: #++,SUr_hUrUrUrss !))*RTs_hTsTsTstt ";#5#5g#>#>??FFwOO
? +2
?
?
?
(7$&&s A
A: : B B c dS )NaS.
const MOTION_DESIGNER_EVENT_TYPE = "WAN2GP_MOTION_DESIGNER";
const MOTION_DESIGNER_CONTROL_MESSAGE_TYPE = "WAN2GP_MOTION_DESIGNER_CONTROL";
const MOTION_DESIGNER_MODE_INPUT_SELECTOR = "#motion_designer_mode_sync textarea, #motion_designer_mode_sync input";
const MOTION_DESIGNER_IFRAME_SELECTOR = "#motion-designer-iframe";
const MOTION_DESIGNER_MODAL_LOCK = "WAN2GP_MOTION_DESIGNER_MODAL_LOCK";
const MODAL_PLACEHOLDER_ID = "motion-designer-iframe-placeholder";
let modalLockState = {
locked: false,
scrollX: 0,
scrollY: 0,
placeholder: null,
prevStyles: {},
unlockTimeout: null,
};
console.log("[MotionDesignerPlugin] Bridge script injected");
function motionDesignerRoot() {
if (window.gradioApp) {
return window.gradioApp();
}
const app = document.querySelector("gradio-app");
return app ? (app.shadowRoot || app) : document;
}
function motionDesignerDispatchInput(element, value) {
if (!element) {
return;
}
element.value = value;
element.dispatchEvent(new Event("input", { bubbles: true }));
}
function motionDesignerTriggerButton(appRoot) {
return appRoot.querySelector("#motion_designer_apply_trigger button, #motion_designer_apply_trigger");
}
function motionDesignerGetIframe() {
return document.querySelector(MOTION_DESIGNER_IFRAME_SELECTOR);
}
function motionDesignerSendControlMessage(action, value) {
const iframe = motionDesignerGetIframe();
if (!iframe || !iframe.contentWindow) {
console.warn("[MotionDesignerPlugin] Unable to locate Motion Designer iframe for", action);
return;
}
console.debug("[MotionDesignerPlugin] Posting control message", action, value);
iframe.contentWindow.postMessage(
{ type: MOTION_DESIGNER_CONTROL_MESSAGE_TYPE, action, value },
"*",
);
}
function motionDesignerExtractMode(value) {
if (!value) {
return "";
}
return value.split("|", 1)[0]?.trim().toLowerCase() || "";
}
window.motionDesignerSetRenderMode = (mode) => {
const normalized = motionDesignerExtractMode(mode);
if (!normalized) {
return;
}
let target;
if (normalized === "classic") {
target = "classic";
} else if (normalized === "trajectory") {
target = "trajectory";
} else {
target = "cut_drag";
}
console.log("[MotionDesignerPlugin] Mode sync triggered:", target);
motionDesignerSendControlMessage("setMode", target);
};
window.addEventListener("message", (event) => {
if (event?.data?.type === "WAN2GP_MOTION_DESIGNER_RESIZE") {
if (typeof event.data.height === "number") {
const iframe = document.querySelector("#motion-designer-iframe");
if (iframe) {
iframe.style.height = `${Math.max(event.data.height, 400)}px`;
}
}
return;
}
if (event?.data?.type === MOTION_DESIGNER_MODAL_LOCK) {
const iframe = document.querySelector(MOTION_DESIGNER_IFRAME_SELECTOR);
if (!iframe) {
return;
}
const lock = Boolean(event.data.open);
const clearUnlockTimeout = () => {
if (modalLockState.unlockTimeout) {
clearTimeout(modalLockState.unlockTimeout);
modalLockState.unlockTimeout = null;
}
};
if (lock) {
clearUnlockTimeout();
if (modalLockState.locked) {
return;
}
modalLockState.locked = true;
modalLockState.scrollX = window.scrollX;
modalLockState.scrollY = window.scrollY;
const rect = iframe.getBoundingClientRect();
const placeholder = document.createElement("div");
placeholder.id = MODAL_PLACEHOLDER_ID;
placeholder.style.width = `${rect.width}px`;
placeholder.style.height = `${iframe.offsetHeight}px`;
placeholder.style.pointerEvents = "none";
placeholder.style.flex = iframe.style.flex || "0 0 auto";
iframe.insertAdjacentElement("afterend", placeholder);
modalLockState.placeholder = placeholder;
modalLockState.prevStyles = {
position: iframe.style.position,
top: iframe.style.top,
left: iframe.style.left,
right: iframe.style.right,
bottom: iframe.style.bottom,
width: iframe.style.width,
height: iframe.style.height,
maxHeight: iframe.style.maxHeight,
zIndex: iframe.style.zIndex,
};
iframe.style.position = "fixed";
iframe.style.top = "0";
iframe.style.left = `${rect.left}px`;
iframe.style.right = "auto";
iframe.style.bottom = "auto";
iframe.style.width = `${rect.width}px`;
iframe.style.height = "100vh";
iframe.style.maxHeight = "100vh";
iframe.style.zIndex = "2147483647";
document.documentElement.classList.add("modal-open");
document.body.classList.add("modal-open");
} else {
clearUnlockTimeout();
modalLockState.unlockTimeout = setTimeout(() => {
if (!modalLockState.locked) {
return;
}
modalLockState.locked = false;
iframe.style.position = modalLockState.prevStyles.position || "";
iframe.style.top = modalLockState.prevStyles.top || "";
iframe.style.left = modalLockState.prevStyles.left || "";
iframe.style.right = modalLockState.prevStyles.right || "";
iframe.style.bottom = modalLockState.prevStyles.bottom || "";
iframe.style.width = modalLockState.prevStyles.width || "";
iframe.style.height = modalLockState.prevStyles.height || "";
iframe.style.maxHeight = modalLockState.prevStyles.maxHeight || "";
iframe.style.zIndex = modalLockState.prevStyles.zIndex || "";
if (modalLockState.placeholder?.parentNode) {
modalLockState.placeholder.parentNode.removeChild(modalLockState.placeholder);
}
modalLockState.placeholder = null;
modalLockState.prevStyles = {};
document.documentElement.classList.remove("modal-open");
document.body.classList.remove("modal-open");
window.scrollTo(modalLockState.scrollX, modalLockState.scrollY);
}, 120);
}
return;
}
if (!event?.data || event.data.type !== MOTION_DESIGNER_EVENT_TYPE) {
return;
}
console.debug("[MotionDesignerPlugin] Received iframe payload", event.data);
const appRoot = motionDesignerRoot();
// Handle trajectory export separately
if (event.data.isTrajectoryExport) {
const trajectoryInput = appRoot.querySelector("#motion_designer_trajectory_payload textarea, #motion_designer_trajectory_payload input");
const trajectoryMetaInput = appRoot.querySelector("#motion_designer_trajectory_meta textarea, #motion_designer_trajectory_meta input");
const trajectoryBgInput = appRoot.querySelector("#motion_designer_trajectory_background textarea, #motion_designer_trajectory_background input");
const trajectoryButton = appRoot.querySelector("#motion_designer_trajectory_trigger button, #motion_designer_trajectory_trigger");
if (!trajectoryInput || !trajectoryMetaInput || !trajectoryBgInput || !trajectoryButton) {
console.warn("[MotionDesignerPlugin] Trajectory bridge components missing in Gradio DOM.");
return;
}
const trajectoryData = event.data.trajectoryData || [];
const trajectoryMetadata = event.data.metadata || {};
const backgroundImage = event.data.backgroundImage || "";
motionDesignerDispatchInput(trajectoryInput, JSON.stringify(trajectoryData));
motionDesignerDispatchInput(trajectoryMetaInput, JSON.stringify(trajectoryMetadata));
motionDesignerDispatchInput(trajectoryBgInput, backgroundImage);
trajectoryButton.click();
return;
}
const maskInput = appRoot.querySelector("#motion_designer_mask_payload textarea, #motion_designer_mask_payload input");
const metaInput = appRoot.querySelector("#motion_designer_meta_payload textarea, #motion_designer_meta_payload input");
const bgInput = appRoot.querySelector("#motion_designer_background_payload textarea, #motion_designer_background_payload input");
const guideInput = appRoot.querySelector("#motion_designer_guide_payload textarea, #motion_designer_guide_payload input");
const guideMetaInput = appRoot.querySelector("#motion_designer_guide_meta_payload textarea, #motion_designer_guide_meta_payload input");
const button = motionDesignerTriggerButton(appRoot);
if (!maskInput || !metaInput || !bgInput || !guideInput || !guideMetaInput || !button) {
console.warn("[MotionDesignerPlugin] Bridge components missing in Gradio DOM.");
return;
}
const payload = event.data.payload || "";
const metadata = event.data.metadata || {};
const backgroundImage = event.data.backgroundImage || "";
const guidePayload = event.data.guidePayload || "";
const guideMetadata = event.data.guideMetadata || {};
motionDesignerDispatchInput(maskInput, payload);
motionDesignerDispatchInput(metaInput, JSON.stringify(metadata));
motionDesignerDispatchInput(bgInput, backgroundImage);
motionDesignerDispatchInput(guideInput, guidePayload);
motionDesignerDispatchInput(guideMetaInput, JSON.stringify(guideMetadata));
button.click();
});
function motionDesignerBindModeInput() {
const appRoot = motionDesignerRoot();
if (!appRoot) {
setTimeout(motionDesignerBindModeInput, 300);
return;
}
const input = appRoot.querySelector(MOTION_DESIGNER_MODE_INPUT_SELECTOR);
if (!input) {
setTimeout(motionDesignerBindModeInput, 300);
return;
}
if (input.dataset.motionDesignerModeBound === "1") {
return;
}
input.dataset.motionDesignerModeBound = "1";
let lastValue = "";
const handleChange = () => {
const rawValue = input.value || "";
const extracted = motionDesignerExtractMode(rawValue);
if (!extracted || extracted === lastValue) {
return;
}
lastValue = extracted;
window.motionDesignerSetRenderMode(extracted);
};
const observer = new MutationObserver(handleChange);
observer.observe(input, { attributes: true, attributeFilter: ["value"] });
input.addEventListener("input", handleChange);
handleChange();
}
motionDesignerBindModeInput();
console.log("[MotionDesignerPlugin] Bridge initialization complete");
rB r' s r r$ z MotionDesignerPlugin._js_bridge s { {r )__name__
__module__ __qualname__r r( r& r r ro rQ rN r r r r r tupler objectr rG r$
__classcell__)r s @r r r s$ I I I I I
D* D* D*L +4 +C + + + +u Tzu Tz u
#Tz u *
u !4Zu u u un5 t5 Tz 5
!4Z 5 5 5 5n t D sU{T7I d B) D ) U3:ut|;S5T ) ) ) ) V
c
t
tCQWKGX[_G_
&'C &' &' &' &'P|C | | | | | | | |r r )r r r r rl pathlibr r gradiorH numpyr PILr r shared.utils.pluginsr r rB r r r; s
- - - - - -g g g g g < g g g g g r