dmad-video-studio / index.html
sofia442's picture
Create DMAD example and hosted-inference demo
d526f06 verified
Raw History Blame Contribute Delete
8.68 kB
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#11111f"><title>DMAD Video Studio</title><style>
:root{--bg:#10101c;--panel:#191929;--line:#303042;--muted:#9d9aad;--ink:#f8f7fc;--purple:#ae9bff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,sans-serif}a{color:#cbbdff}button,input,select,textarea{font:inherit}header{display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:auto;padding:22px 24px;gap:12px}.logo{font-weight:800;letter-spacing:-.04em;font-size:19px}.logo span{display:inline-grid;place-items:center;border-radius:10px;background:#a594fb;color:#16112d;width:31px;height:31px;margin-right:9px}.headerlink{font-size:13px;text-decoration:none;color:#b6b2c9}main{max-width:1180px;margin:auto;padding:24px 24px 60px}.kicker{font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b09aff;font-size:11px}.hero{padding:36px 0 30px}.hero h1{font-size:clamp(35px,5vw,58px);line-height:1.05;letter-spacing:-.06em;margin:12px 0 16px}.hero p{color:#aaa6bb;max-width:690px;font-size:16px}.chip{display:inline-block;background:#272439;color:#cec3ff;font-size:12px;border:1px solid #3d355b;border-radius:40px;padding:6px 12px;margin-right:6px}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:22px}.card h2{margin:0 0 5px;font-size:19px;letter-spacing:-.03em}.sub{color:var(--muted);font-size:13px;margin:4px 0 20px}label{display:block;margin:17px 0 6px;color:#d9d7e4;font-size:13px;font-weight:650}textarea,input,select{width:100%;background:#11111f;border:1px solid #38374b;border-radius:9px;color:#faf8ff;padding:11px;outline:none}textarea{resize:vertical;min-height:110px}textarea:focus,input:focus,select:focus{border-color:#a18df9}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}.info{background:#29213d;border:1px solid #4c3d6a;padding:12px 14px;border-radius:10px;color:#d2c7f0;font-size:12px;margin:15px 0}.check{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#bcb9c9;font-weight:400}.check input{width:auto;margin-top:4px;flex:none}.button{background:#a996ff;color:#171022;padding:12px 18px;border:0;border-radius:9px;font-weight:750;cursor:pointer;width:100%;margin-top:14px}.button:hover{background:#c1b3ff}.button:disabled{opacity:.45;cursor:not-allowed}.status{font-size:12px;color:#bdb8cc;white-space:pre-wrap;overflow-wrap:anywhere}.secondary{background:none;border:1px solid #4b465e;color:#c4bbdb;padding:8px 12px;border-radius:8px;cursor:pointer;margin-top:10px}video{display:block;width:100%;background:#090910;border-radius:11px;aspect-ratio:16/9;object-fit:contain}select{cursor:pointer}.links{display:flex;flex-wrap:wrap;gap:8px}.pill{border:1px solid #3a394c;border-radius:9px;padding:8px 11px;font-size:12px;text-decoration:none}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:18px 0}.fact{background:#151522;padding:12px;color:#a9a6b6;font-size:11px}.fact b{display:block;color:#f1effa;font-size:15px}footer{padding-top:28px;font-size:12px;color:#797689}.hide{display:none}.result{margin-top:15px}.small{font-size:12px;color:#9996a9}.samples{margin-top:16px}.samplehead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.samplehead select{max-width:240px}.badge{font-size:11px;background:#343045;padding:5px 9px;border-radius:99px;color:#cec5e9;white-space:nowrap}@media(max-width:760px){.grid{grid-template-columns:1fr}header,main{padding-left:16px;padding-right:16px}.hero{padding:20px 0}.samplehead{flex-direction:column;align-items:stretch}.samplehead select{max-width:none}.facts{grid-template-columns:1fr 1fr 1fr}}
</style></head><body><header><div class="logo"><span>✦</span> DMAD <span style="font-weight:400;background:none;color:#aaa;width:auto">/ studio</span></div><a class="headerlink" href="https://huggingface.co/ZhengmingYu/DMAD" target="_blank" rel="noopener">Original model ↗</a></header><main><div class="hero"><div class="kicker">VIDEO + SOUND · MINIMAX-H3</div><h1>Ideas in motion.</h1><p>Explore the DMAD project’s example videos, or try a short text-to-video generation via a hosted inference provider.</p><span class="chip">4-step adapter</span><span class="chip">Native audio</span><span class="chip">Hosted inference</span></div><div class="grid"><section class="card"><h2>Create a clip <span class="badge">Experimental</span></h2><p class="sub">Uses WaveSpeed through Hugging Face. The Space does not host model weights. A provider-enabled token and available credits are required.</p><label for="prompt">Describe your scene</label><textarea id="prompt" maxlength="2500" placeholder="A quiet rainy night in Kerala, a young man looks at his phone. Soft camera push-in. Audio: rain outside, gentle room ambience. No subtitles."></textarea><div class="twocol"><div><label for="resolution">Resolution</label><select id="resolution"><option value="480p">480p</option><option value="768p">768p</option><option value="1080p">1080p</option></select></div><div><label for="ratio">Aspect ratio</label><select id="ratio"><option>16:9</option><option>9:16</option><option>1:1</option></select></div></div><label for="token">Hugging Face inference token</label><input id="token" type="password" autocomplete="off" spellcheck="false" placeholder="hf_…"><p class="small">Use an <a target="_blank" rel="noopener" href="https://huggingface.co/settings/tokens/new?ownUserPermissions=inference.serverless.write&tokenType=fineGrained">Inference Providers token ↗</a>. The token stays in this page’s memory and is sent to Hugging Face's router; the prompt goes to WaveSpeed.</p><div class="info">A single request asks for <b>5 seconds</b>. Provider charges may apply to your account. <a href="https://wavespeed.ai/models/wavespeed-ai/minimax-h3/text-to-video-lora" target="_blank" rel="noopener">Check current pricing ↗</a> and account limits before submitting. Failures or retries may be billed.</div><label class="check"><input type="checkbox" id="consent"><span>I approve one potentially paid request and sending my prompt to the provider.</span></label><button class="button" id="generate">Generate 5-second clip →</button><p class="status" id="status" aria-live="polite">No request submitted.</p><button class="secondary hide" id="reset">Enable another attempt</button><div class="result hide" id="result"><video id="generated" controls playsinline></video><p><a id="download" target="_blank" rel="noopener">Open generated video ↗</a></p></div><p class="small">The DMAD adapter is specified, but this provider integration and its sampler have not been verified with a live generation. Output and language accuracy are not guaranteed.</p></section><section class="card"><h2>Explore the examples</h2><p class="sub">Original samples from the DMAD authors—not clips generated by this Space.</p><div class="samples"><div class="samplehead"><span class="badge">AUTHOR'S SAMPLE</span><select id="sample" aria-label="Select sample"><option value="guitar">5 seconds · 4-step guitar</option><option value="podcast">15 seconds · 4-step podcast</option><option value="wok">15 seconds · 8-step wok</option></select></div><video id="example" controls playsinline preload="none"></video><p class="small" id="sampletext"></p><a id="exampleLink" target="_blank" rel="noopener">Open sample directly ↗</a></div><div class="facts"><div class="fact"><b>4 / 8</b>denoising steps</div><div class="fact"><b>5–15s</b>example clips</div><div class="fact"><b>Audio</b>joint generation</div></div><div class="links"><a class="pill" target="_blank" rel="noopener" href="https://huggingface.co/ZhengmingYu/DMAD/tree/main/minimax_h3/workflows">ComfyUI workflows ↗</a><a class="pill" target="_blank" rel="noopener" href="https://github.com/Yzmblog/DMAD">Project code ↗</a><a class="pill" target="_blank" rel="noopener" href="https://arxiv.org/abs/2610.02188">Read the paper ↗</a></div><p class="small">The reference workflow's 8 GB GPU mode still recommends 64 GB system RAM. Your 2 GB GPU does not meet that demonstrated setup.</p></section></div><footer>Unofficial demo. DMAD and sample credits belong to the original authors. Check <a href="https://huggingface.co/ZhengmingYu/DMAD/blob/main/LICENSE" target="_blank" rel="noopener">model license</a> and provider terms before use.</footer></main><script src="app.js"></script></body></html>