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'); // Dispatch custom event for app to handle const ratio = e.target.getAttribute('data-ratio'); this.dispatchEvent(new CustomEvent('ratio-change', { detail: { ratio }, bubbles: true, composed: true })); }); }); // Handle generate button click const generateBtn = this.shadowRoot.getElementById('generate-btn'); if (generateBtn) { generateBtn.addEventListener('click', () => { this.dispatchEvent(new CustomEvent('generate-image', { bubbles: true, composed: true })); }); } // Handle enhance button click const enhanceBtn = this.shadowRoot.querySelector('.enhance-btn'); if (enhanceBtn) { enhanceBtn.addEventListener('click', () => { this.dispatchEvent(new CustomEvent('enhance-prompt', { bubbles: true, composed: true })); }); } } getPrompt() { return this.shadowRoot.getElementById('prompt-input')?.value || ''; } getNegativePrompt() { return this.shadowRoot.getElementById('negative-prompt')?.value || ''; } setPrompt(value) { const input = this.shadowRoot.getElementById('prompt-input'); if (input) input.value = value; } } 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)

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

Preview

1024 × 1024

Enter a prompt and click generate

Your creation will appear here

Motion Strength

Duration (seconds)

`; // Restore content if exists if (this._content) { this.setContent(this._content); } // Bind video generate button const videoBtn = this.shadowRoot.getElementById('generate-video-btn'); if (videoBtn) { videoBtn.addEventListener('click', () => { this.dispatchEvent(new CustomEvent('generate-video', { bubbles: true, composed: true })); }); } } setLoading(isLoading, text = 'Generating...') { const content = this.shadowRoot.getElementById('preview-content'); if (!content) return; if (isLoading) { content.innerHTML = `

${text}

`; } else { this.render(); } } setContent(html) { this._content = html; const content = this.shadowRoot.getElementById('preview-content'); if (content) { content.innerHTML = html; } } showVideoControls(show) { const controls = this.shadowRoot.getElementById('video-controls'); if (controls) { controls.classList.toggle('active', show); } } } customElements.define('generator-controls', GeneratorControls); customElements.define('generator-preview', GeneratorPreview);