File size: 10,744 Bytes
d5cb160 3429714 d5cb160 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="A browser-side ComfyUI client for the PinkFluffyBunny MiniMax H3 LoRA collection."
/>
<title>PinkFluffyBunny · MiniMax H3</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main class="shell">
<header class="hero">
<div class="hero-copy">
<p class="eyebrow">Browser-to-ComfyUI workspace</p>
<h1>PinkFluffyBunny <span>· MiniMax H3</span></h1>
<p class="lede">
A lightweight Space for parameterizing and submitting an API-format
ComfyUI workflow with the
<a
href="https://huggingface.co/SexGod1979/PinkFluffyBunny-MiniMax-H3"
target="_blank"
rel="noreferrer"
>PinkFluffyBunny H3 LoRAs</a
>.
</p>
</div>
<div class="rabbit-mark" aria-hidden="true">
<span class="ear left-ear"></span>
<span class="ear right-ear"></span>
<span class="face">✦</span>
</div>
</header>
<section class="boundary" aria-labelledby="boundary-title">
<div class="boundary-icon">↗</div>
<div>
<h2 id="boundary-title">No model weights or tokens are hosted here</h2>
<p>
Your browser talks directly to the ComfyUI URL you enter. The API
token stays in this tab and is not stored by this Space. The backend
must allow this page through CORS and must be operated under the
applicable MiniMax H3 license or separate written authorization.
</p>
</div>
</section>
<section class="workspace">
<div class="controls">
<section class="panel setup-panel" aria-labelledby="setup-title">
<div class="panel-heading">
<div>
<p class="step">01 · Connection</p>
<h2 id="setup-title">Authorized ComfyUI backend</h2>
</div>
<span id="connection-badge" class="badge idle">Not tested</span>
</div>
<label for="backend-url">ComfyUI API URL</label>
<input
id="backend-url"
type="url"
autocomplete="off"
placeholder="https://your-comfyui.example.com"
/>
<p class="field-note">
HTTPS is required when this Space is opened over HTTPS. Do not add
a trailing slash.
</p>
<label for="backend-token">Bearer token <span>optional</span></label>
<input
id="backend-token"
type="password"
autocomplete="off"
placeholder="Kept only in this browser tab"
/>
<label for="workflow-json">API-format workflow JSON</label>
<textarea
id="workflow-json"
class="code-input"
rows="9"
spellcheck="false"
placeholder='{"1":{"class_type":"...","inputs":{"text":"{{PROMPT}}"}}}'
></textarea>
<div class="inline-actions">
<label class="file-button" for="workflow-file">Load JSON file</label>
<input id="workflow-file" type="file" accept=".json,application/json" hidden />
<button id="test-backend" type="button" class="button secondary">
Test backend
</button>
</div>
<details class="token-reference">
<summary>Workflow placeholder reference</summary>
<div class="token-grid">
<code>{{PROMPT}}</code><span>Prompt text</span>
<code>{{NEGATIVE_PROMPT}}</code><span>Negative prompt</span>
<code>{{LORA_NAME}}</code><span>LoRA filename</span>
<code>{{LORA_STRENGTH}}</code><span>LoRA weight</span>
<code>{{WIDTH}}</code><span>Canvas width</span>
<code>{{HEIGHT}}</code><span>Canvas height</span>
<code>{{DURATION}}</code><span>Seconds</span>
<code>{{LENGTH}}</code><span>H3 frame count</span>
<code>{{FPS}}</code><span>24</span>
<code>{{STEPS}}</code><span>Sampling steps</span>
<code>{{CFG}}</code><span>CFG value</span>
<code>{{SEED}}</code><span>Seed</span>
</div>
</details>
</section>
<section class="panel generate-panel" aria-labelledby="generate-title">
<div class="panel-heading">
<div>
<p class="step">02 · Generation</p>
<h2 id="generate-title">Compose the video</h2>
</div>
</div>
<label for="prompt">Prompt</label>
<textarea
id="prompt"
rows="7"
placeholder="Describe subject, action, camera, lighting, dialogue, sound and music..."
>A fluffy pink rabbit explores a miniature moonlit garden. Slow tracking shot, soft cinematic lighting, delicate footsteps and quiet nighttime ambience.</textarea>
<label for="negative-prompt">Negative prompt <span>optional</span></label>
<textarea id="negative-prompt" rows="2">oversaturated, flicker, deformed anatomy, unreadable text</textarea>
<div class="field-grid two">
<div>
<label for="lora-file">LoRA</label>
<select id="lora-file">
<option value="PinkFluffyBunny-pruned-v1-rank128.safetensors">
Pruned v1 · rank 128
</option>
<option value="PinkFluffyBunny-unpruned-v2-rank128.safetensors">
Unpruned v2 · rank 128
</option>
<option value="PinkFluffyBunny-unpruned-v2-rank256.safetensors">
Unpruned v2 · rank 256
</option>
<option value="PinkFluffyBunny-unpruned-v2-rank512.safetensors">
Unpruned v2 · rank 512
</option>
</select>
</div>
<div>
<label for="resolution">Resolution</label>
<select id="resolution">
<option value="1344x768">Landscape 16:9 · 1344 × 768</option>
<option value="768x1344">Portrait 9:16 · 768 × 1344</option>
<option value="768x768">Square 1:1 · 768 × 768</option>
<option value="1024x768">Landscape 4:3 · 1024 × 768</option>
<option value="768x1024">Portrait 3:4 · 768 × 1024</option>
</select>
</div>
</div>
<div class="field-grid four">
<div>
<label for="lora-strength">LoRA strength</label>
<input id="lora-strength" type="number" min="0" max="1.5" step="0.05" value="0.5" />
</div>
<div>
<label for="duration">Seconds</label>
<input id="duration" type="number" min="4" max="15" step="1" value="5" />
</div>
<div>
<label for="steps">Steps</label>
<input id="steps" type="number" min="4" max="30" step="1" value="6" />
</div>
<div>
<label for="cfg">CFG</label>
<input id="cfg" type="number" min="1" max="8" step="0.1" value="1" />
</div>
</div>
<div class="seed-row">
<div>
<label for="seed">Seed</label>
<input id="seed" type="number" min="0" step="1" value="42" />
</div>
<label class="checkbox-row" for="randomize-seed">
<input id="randomize-seed" type="checkbox" checked />
Randomize
</label>
</div>
<label class="authorization" for="authorization-confirmed">
<input id="authorization-confirmed" type="checkbox" />
<span>
I confirm that this backend and its users are within the license's
Applicable Territory, or that separate MiniMax authorization covers
this use.
</span>
</label>
<div class="generate-actions">
<button id="generate" type="button" class="button primary">
Generate video
</button>
<button id="stop" type="button" class="button ghost" disabled>
Stop polling
</button>
</div>
</section>
</div>
<aside class="output-panel" aria-labelledby="output-title">
<div class="output-heading">
<div>
<p class="step">03 · Result</p>
<h2 id="output-title">Generated video</h2>
</div>
<span id="output-state" class="badge idle">Waiting</span>
</div>
<div class="video-stage">
<video id="output-video" controls playsinline loop hidden></video>
<div id="empty-state" class="empty-state">
<div class="empty-orbit"><span>✦</span></div>
<p>Your ComfyUI result will appear here.</p>
</div>
</div>
<div class="progress-track" aria-hidden="true">
<span id="progress-bar"></span>
</div>
<p id="status" class="status" role="status" aria-live="polite">
Load an API workflow and test your backend to begin.
</p>
<a id="download" class="download-link" href="#" download hidden>Download video</a>
<details class="history-details">
<summary>ComfyUI history response</summary>
<pre id="history-output">No task submitted.</pre>
</details>
</aside>
</section>
<footer>
<p>
Review the current
<a href="https://huggingface.co/MiniMaxAI/MiniMax-H3/blob/main/LICENSE" target="_blank" rel="noreferrer">MiniMax H3 license</a>
and
<a href="https://huggingface.co/MiniMaxAI/MiniMax-H3/blob/main/docs/QA-about-License.md" target="_blank" rel="noreferrer">license Q&A</a>
before operating a backend. The target LoRA repository currently declares Apache-2.0 metadata but does not contain a LICENSE file.
</p>
</footer>
</main>
<script type="module" src="./app.js"></script>
</body>
</html>
|