class GeneratorControls extends HTMLElement { constructor() { super(); } connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Prompt 0 chars

+ 8k + cinematic + UE5 + detailed

Negative Prompt

Aspect Ratio

CFG Scale 7.5

Steps 30

Seed (-1 for random)

Model

`; // Handle ratio button clicks this.shadowRoot.querySelectorAll('.ratio-btn').forEach(btn => { btn.addEventListener('click', (e) => { this.shadowRoot.querySelectorAll('.ratio-btn').forEach(b => b.classList.remove('active')); e.target.classList.add('active'); }); }); } } class GeneratorPreview extends HTMLElement { constructor() { super(); } connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Preview

1024 × 1024

Enter a prompt and click generate

Your creation will appear here

Motion Strength

Duration (seconds)

`; } } customElements.define('generator-controls', GeneratorControls); customElements.define('generator-preview', GeneratorPreview);