| <!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> |
|
|
