class GeneratorControls extends HTMLElement { constructor() { super(); } connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `
+ 8k + cinematic + UE5 + detailed
CFG Scale 7.5
Steps 30
`; // 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

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