Skip to content

Commit b57ec0c

Browse files
deepbeepmeepdeepbeepmeep
committed
missing html file
1 parent ea83838 commit b57ec0c

File tree

1 file changed

+247
-0
lines changed

1 file changed

+247
-0
lines changed

‎plugins/wan2gp-motion-designer/assets/motion_designer_iframe_template.html‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Motion Designer</title>
7+
<!-- MOTION_DESIGNER_STYLE_INLINE -->
8+
</head>
9+
<body>
10+
<div class="app-shell">
11+
<header class="app-header">
12+
<div>
13+
<p class="subtitle">
14+
Define Object Trajectories, Preview the animation and Export a Motion Mask Video.
15+
</p>
16+
</div>
17+
<div class="header-actions">
18+
<div id="modeSwitcher" class="mode-switcher">
19+
<div class="mode-switcher-buttons" role="group" aria-label="Editor mode selection">
20+
<button id="modeClassicBtn" type="button" class="mode-option" data-mode="classic">
21+
Vace
22+
</button>
23+
<button id="modeCutDragBtn" type="button" class="mode-option active" data-mode="cut_drag">
24+
i2v TTM
25+
</button>
26+
</div>
27+
</div>
28+
<div class="header-status">
29+
<span id="statusBadge" class="badge muted">Drop a scene to get started</span>
30+
</div>
31+
</div>
32+
</header>
33+
34+
<div class="workspace">
35+
<section class="controls-column">
36+
<div class="panel collapsible expanded" data-panel="scene" data-fixed="true">
37+
<div class="panel-header">
38+
<span>Scene Settings</span>
39+
</div>
40+
<div class="panel-body">
41+
<div class="hidden-upload">
42+
<label class="field-label">Image / video frame</label>
43+
<input id="sourceChooser" type="file" accept="image/*,video/*" />
44+
</div>
45+
<div class="multi-field dimensions">
46+
<label>
47+
Width
48+
<input id="targetWidthInput" type="number" min="128" max="4096" value="832" />
49+
</label>
50+
<label>
51+
Height
52+
<input id="targetHeightInput" type="number" min="128" max="4096" value="480" />
53+
</label>
54+
<button id="applyResolutionBtn" class="primary">Update</button>
55+
</div>
56+
<label class="field-label">Fit mode</label>
57+
<select id="fitModeSelect">
58+
<option value="cover">Scale &amp; Crop (cover)</option>
59+
<option value="contain">Fit &amp; Pad (contain)</option>
60+
</select>
61+
<div class="multi-field compact">
62+
<label>
63+
FPS
64+
<input id="sceneFpsInput" type="number" min="1" max="120" value="16" />
65+
</label>
66+
<label>
67+
Total frames
68+
<input id="sceneFrameCountInput" type="number" min="1" max="2000" value="81" />
69+
</label>
70+
</div>
71+
<div id="classicOutlineControl" class="classic-outline-control is-hidden">
72+
<label class="field-label">Contour Width</label>
73+
<div class="range-field">
74+
<input id="classicOutlineSlider" type="range" min="0.5" max="10" step="0.5" value="1" />
75+
<span id="classicOutlineValue" class="range-value">1px</span>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<div class="panel collapsible expanded" data-panel="object" data-fixed="true">
82+
<div class="panel-header">
83+
<span>Object Animation</span>
84+
</div>
85+
<div class="panel-body">
86+
<div class="multi-field compact">
87+
<label>
88+
Start frame
89+
<input id="startFrameInput" type="number" min="0" value="0" />
90+
</label>
91+
<label>
92+
End frame
93+
<input id="endFrameInput" type="number" min="0" value="81" />
94+
</label>
95+
</div>
96+
<label class="checkbox inline">
97+
<input type="checkbox" id="hideOutsideRangeToggle" checked />
98+
<span>Hide object outside this frame range</span>
99+
</label>
100+
<div class="multi-field compact">
101+
<label>
102+
Scale start
103+
<input id="scaleStartInput" type="number" min="0.1" max="3" step="0.05" value="1" />
104+
</label>
105+
<label>
106+
Scale end
107+
<input id="scaleEndInput" type="number" min="0.1" max="3" step="0.05" value="1" />
108+
</label>
109+
</div>
110+
<div class="multi-field compact">
111+
<label>
112+
Rotation start (deg)
113+
<input id="rotationStartInput" type="number" min="-360" max="360" step="1" value="0" />
114+
</label>
115+
<label>
116+
Rotation end (deg)
117+
<input id="rotationEndInput" type="number" min="-360" max="360" step="1" value="0" />
118+
</label>
119+
</div>
120+
<label class="field-label">Trajectory tension</label>
121+
<div class="range-field">
122+
<input id="tensionInput" type="range" min="0" max="1" step="0.05" value="0" />
123+
<span id="tensionValue" class="range-value">0</span>
124+
</div>
125+
<p class="fine-print">Increase the tension to bend the path smoothly between nodes.</p>
126+
<label class="field-label">Trajectory speed profile</label>
127+
<select id="speedModeSelect">
128+
<option value="none" selected>None</option>
129+
<option value="accelerate">Accelerate</option>
130+
<option value="decelerate">Decelerate</option>
131+
<option value="accelerate-decelerate">Accelerate → Decelerate</option>
132+
<option value="decelerate-accelerate">Decelerate → Accelerate</option>
133+
</select>
134+
<label id="speedRatioLabel" class="field-label">Acceleration factor</label>
135+
<div id="speedRatioRow" class="range-field">
136+
<input id="speedRatioInput" type="range" min="1" max="100" step="1" value="1" />
137+
<span id="speedRatioValue" class="range-value">1x</span>
138+
</div>
139+
</div>
140+
</div>
141+
142+
</section>
143+
144+
<section class="canvas-column">
145+
<div class="canvas-card">
146+
<div class="canvas-toolbar">
147+
<table class="toolbar-table">
148+
<tr>
149+
<td class="timeline-cell">
150+
<span class="label">Timeline</span>
151+
<input id="timelineSlider" type="range" min="0" max="1" step="0.001" value="0" />
152+
</td>
153+
<td class="hint-cell">
154+
<p class="toolbar-hint">
155+
Left Click to Draw Shapes and Trajectories. Right Click Exits the Current Mode.
156+
</p>
157+
</td>
158+
<td class="buttons-cell">
159+
<div class="toolbar-buttons">
160+
<button id="previewModeBtn" class="ghost">Preview Mask</button>
161+
<button id="playPauseBtn" class="ghost">Play</button>
162+
<label class="checkbox inline">
163+
<input type="checkbox" id="loopToggle" checked />
164+
<span>Loop</span>
165+
</label>
166+
</div>
167+
</td>
168+
</tr>
169+
</table>
170+
</div>
171+
<div class="canvas-wrapper">
172+
<canvas id="editorCanvas" width="960" height="540"></canvas>
173+
<div id="canvasPlaceholder" class="canvas-placeholder">
174+
<a id="canvasUploadBtn" class="upload-link" href="#">Upload an Image</a>
175+
</div>
176+
</div>
177+
<div id="canvasFooter" class="canvas-footer">
178+
<div class="footer-row footer-row-primary">
179+
<div class="active-object-chip">
180+
<div class="active-object-label">
181+
<span>Active Object No:</span>
182+
<strong id="activeObjectLabel">None</strong>
183+
</div>
184+
<label class="shape-selector">
185+
Shape
186+
<select id="shapeModeSelect">
187+
<option value="rectangle">Rectangle</option>
188+
<option value="polygon">Polygon</option>
189+
<option value="circle">Circle</option>
190+
</select>
191+
</label>
192+
</div>
193+
<div class="footer-context">
194+
<div id="contextButtonGroup">
195+
<button id="contextDeleteBtn" class="ghost danger" disabled>Delete</button>
196+
<button id="contextResetBtn" class="ghost" disabled>Reset</button>
197+
<button id="contextUndoBtn" class="ghost" disabled>Undo</button>
198+
</div>
199+
</div>
200+
<div class="footer-unload">
201+
<button id="unloadSceneBtn" class="ghost danger">Unload</button>
202+
</div>
203+
</div>
204+
<div class="footer-row footer-row-secondary">
205+
<div class="export-inline-buttons">
206+
<button id="sendToWangpBtn" class="primary">Send to Video Generator</button>
207+
<button id="backgroundToggleBtn" class="ghost">Set Default Background</button>
208+
<input id="backgroundFileInput" type="file" accept="image/*" style="display:none" />
209+
<button id="saveDefinitionBtn" class="ghost">Save Definition</button>
210+
<button id="loadDefinitionBtn" class="ghost">Load Definition</button>
211+
<input id="definitionFileInput" type="file" accept="application/json" style="display:none" />
212+
<button id="downloadMaskBtn" style="display:none" class="ghost">Download mask video</button>
213+
<button id="downloadBackgroundBtn" style="display:none" class="ghost">Download background image</button>
214+
<button id="themeToggleBtn" class="ghost">Dark Mode</button>
215+
</div>
216+
</div>
217+
</div>
218+
</div>
219+
</section>
220+
</div>
221+
</div>
222+
223+
<div id="exportOverlay" class="export-overlay hidden">
224+
<div class="modal">
225+
<h3>Rendering Video Motion Mask...</h3>
226+
<div class="progress">
227+
<div id="exportProgressBar"></div>
228+
</div>
229+
<p id="exportLabel">Preparing...</p>
230+
<button id="cancelExportBtn" class="ghost">Cancel</button>
231+
</div>
232+
</div>
233+
234+
<div id="unloadOverlay" class="confirm-overlay hidden">
235+
<div class="modal">
236+
<h3>Unload current scene?</h3>
237+
<p class="fine-print">This will reset all polygons and trajectories. You can load another image afterwards.</p>
238+
<div class="button-row">
239+
<button id="confirmUnloadBtn" class="ghost danger">Unload</button>
240+
<button id="cancelUnloadBtn" class="ghost">Cancel</button>
241+
</div>
242+
</div>
243+
</div>
244+
245+
<!-- MOTION_DESIGNER_SCRIPT_INLINE -->
246+
</body>
247+
</html>

0 commit comments

Comments
 (0)