Hugging Face's logo

Spaces:
Nuzwa
/
Imagegen
Running

App Files
Nuzwa commited on
Commit
aa25ce6
·
verified ·
1 Parent(s): c69ffa5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +156 -74
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1" />
6
  <title>imagegen</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
8
  <style>
@@ -21,10 +21,12 @@
21
  .generate-btn { background: linear-gradient(90deg,#ff93e9,#9b7cff); border:none; border-radius:12px; padding:12px 18px; font-size:14px; cursor:pointer; color:#fff; min-height:56px; display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s; }
22
  .generate-btn[disabled]{ opacity:0.6; cursor:default; }
23
 
 
24
  .controls { display:flex; flex-wrap:wrap; gap:10px; padding:10px; border:1px solid rgba(255,255,255,0.06); background:#0f0f0f; border-radius:12px; }
25
  .controls label { font-size:13px; color:#eaeaea; display:flex; align-items:center; gap:6px; }
26
- .controls select, .controls input[type="number"] { background:#0c0c0c; border:1px solid rgba(255,255,255,0.04); color:#fff; padding:6px 8px; border-radius:8px; font-size:13px; min-width:90px; }
27
 
 
28
  .styles-wrap { margin-top:6px; }
29
  .styles-grid { display:grid; grid-template-columns:repeat(2, minmax(140px,1fr)); gap:8px; }
30
  @media (min-width:760px){ .styles-grid { grid-template-columns:repeat(5, minmax(120px,1fr)); } }
@@ -44,9 +46,13 @@
44
  </style>
45
  </head>
46
  <body>
 
47
  <div class="topbar" role="banner">
48
  <div class="btn-small" onclick="window.open('https://manus.im/invitation/XHHHQTMBM0ZCTX')">Manus</div>
49
- <a class="btn-small" aria-disabled="true"><span>Buy me a coffee</span></a>
 
 
 
50
  </div>
51
 
52
  <div class="container" role="main">
@@ -55,6 +61,7 @@
55
  <button id="generateBtn" class="generate-btn" aria-label="Generate">Generate</button>
56
  </div>
57
 
 
58
  <div class="controls" id="controls">
59
  <label>Model
60
  <select id="model">
@@ -67,8 +74,8 @@
67
  <select id="aspect">
68
  <option value="1:1">1:1</option>
69
  <option value="16:9">16:9</option>
70
- <option value="19:6">19:6</option>
71
- <option value="3:2" selected>3:2</option>
72
  <option value="2:3">2:3</option>
73
  <option value="4:5">4:5</option>
74
  <option value="9:16">9:16</option>
@@ -84,11 +91,16 @@
84
  </select>
85
  </label>
86
 
 
 
 
87
  <label>Enhance <input id="enhance" type="checkbox" /></label>
 
88
  <label>Seed <input id="seed" type="number" value="42" /></label>
89
  <label><input id="randomSeed" type="checkbox" checked /> Random</label>
90
  </div>
91
 
 
92
  <div class="styles-wrap">
93
  <div class="note">Choose a style (optional):</div>
94
  <div class="styles-grid" id="stylesGrid">
@@ -104,53 +116,12 @@
104
  <div id="images" aria-live="polite"></div>
105
  </div>
106
 
107
- <script>
108
- (function initDefaultsFromURL() {
109
- if (document.readyState === 'loading') {
110
- document.addEventListener('DOMContentLoaded', applyDefaultsFromURLSafe);
111
- } else {
112
- applyDefaultsFromURLSafe();
113
- }
114
-
115
- function applyDefaultsFromURLSafe() {
116
- try {
117
- const params = new URLSearchParams(window.location.search);
118
- const aspectParam = params.get('default_aspect');
119
- const framingParam = params.get('default_framing');
120
- const framingMap = { 'full-body': 'full', 'close-up': 'close' };
121
-
122
- const aspectEl = document.getElementById('aspect');
123
- const framingEl = document.getElementById('framing');
124
-
125
- if (aspectEl) {
126
- const defaultAspect = aspectParam || '3:2';
127
- const hasOption = Array.from(aspectEl.options).some(o => o.value === defaultAspect);
128
- if (hasOption) {
129
- aspectEl.value = defaultAspect;
130
- }
131
- }
132
-
133
- if (framingEl && (framingParam || framingMap[framingParam])) {
134
- const normalized = framingMap[framingParam] || framingParam;
135
- const hasOption = Array.from(framingEl.options).some(o => o.value === normalized);
136
- if (hasOption) framingEl.value = normalized;
137
- }
138
-
139
- if (typeof saveSettings === 'function') {
140
- saveSettings();
141
- }
142
- } catch (e) {
143
- console.error('applyDefaultsFromURL failed:', e);
144
- }
145
- }
146
- })();
147
- </script>
148
-
149
  <script>
150
  const baseUrl = 'https://image.pollinations.ai';
151
  let selectedStyle = null;
152
  let isGenerating = false;
153
 
 
154
  const styleTemplates = {
155
  cinema: " cinematic lighting, rich color grading",
156
  realistic: " realistic stock photo",
@@ -158,6 +129,7 @@
158
  fantasy: " epic fantasy, vibrant colors, surreal composition"
159
  };
160
 
 
161
  const framingTemplates = {
162
  auto: "",
163
  close: "tight framing, close-up portrait, 85mm lens, shallow depth of field, face filling the frame",
@@ -165,45 +137,56 @@
165
  full: "full body, head-to-toe, wide shot, 35mm lens, subject fully in frame, feet visible"
166
  };
167
 
168
- function saveSettings() {
 
 
 
169
  const s = {
170
  model: document.getElementById('model').value,
171
  aspect: document.getElementById('aspect').value,
172
  framing: document.getElementById('framing').value,
 
 
173
  seed: Number(document.getElementById('seed').value || 42),
174
  randomSeed: document.getElementById('randomSeed').checked,
175
  enhance: document.getElementById('enhance').checked
176
  };
177
- try { localStorage.setItem('ai_img_settings', JSON.stringify(s)); } catch(e) {}
178
  }
179
- function loadSettings() {
180
  try {
181
  const s = JSON.parse(localStorage.getItem('ai_img_settings') || '{}');
182
  if (s.model) document.getElementById('model').value = s.model;
183
  if (s.aspect) document.getElementById('aspect').value = s.aspect;
184
  if (s.framing) document.getElementById('framing').value = s.framing;
 
 
185
  if (s.seed || s.seed === 0) document.getElementById('seed').value = s.seed;
186
  document.getElementById('randomSeed').checked = s.randomSeed !== undefined ? s.randomSeed : true;
187
  document.getElementById('enhance').checked = (s.enhance !== undefined) ? s.enhance : true;
188
- } catch(e) {}
189
  }
190
 
 
191
  function parseAspect(aspectStr){ const [w,h]=aspectStr.split(':').map(Number); return (!w||!h)?1:(w/h); }
192
  function sizeForAspect(aspectStr, maxDim=2048){
193
  const r = parseAspect(aspectStr);
194
- if (r >= 1){
195
- const width = maxDim;
196
- const height = Math.max(64, Math.round(width / r));
197
- return {width, height};
198
- } else {
199
- const height = maxDim;
200
- const width = Math.max(64, Math.round(height * r));
201
- return {width, height};
202
- }
203
  }
204
 
205
- loadSettings();
 
 
 
 
206
 
 
207
  document.querySelectorAll('.style-card').forEach(card=>{
208
  card.addEventListener('click',()=>{
209
  document.querySelectorAll('.style-card').forEach(c=>c.classList.remove('selected'));
@@ -212,38 +195,137 @@
212
  });
213
  });
214
 
 
 
 
 
215
  const randomSeedEl = document.getElementById('randomSeed');
216
  const seedEl = document.getElementById('seed');
217
- randomSeedEl.addEventListener('change', ()=>{ seedEl.disabled = randomSeedEl.checked; saveSettings(); });
218
  seedEl.disabled = randomSeedEl.checked;
219
 
 
220
  const promptEl = document.getElementById('prompt');
221
- function autoResizeTextarea(){ promptEl.style.height='auto'; promptEl.style.height=Math.min(250, promptEl.scrollHeight)+'px'; }
222
  promptEl.addEventListener('input', autoResizeTextarea); setTimeout(autoResizeTextarea,0);
223
 
224
  const imagesContainer = document.getElementById('images');
225
  const generateBtn = document.getElementById('generateBtn');
 
226
  function randomInt(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
227
 
228
  async function enhancePrompt(userPrompt){
229
  try{
230
- const chatHistory=[{role:'system',content:'Enhance prompt for Flux. Output only the improved prompt.'},{role:'user',content:`"${userPrompt}"`}];
231
- const res=await fetch('https://text.pollinations.ai/openai',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:'openai',messages:chatHistory})});
232
- if(!res.ok) throw new Error('HTTP '+res.status);
233
- const data=await res.json();
234
  return (data.choices?.[0]?.message?.content || userPrompt).trim();
235
- }catch(e){ return userPrompt; }
236
  }
237
 
238
  function makeActionsBar(imgUrl, filename, finalPrompt, seed, width, height){
239
- const bar=document.createElement('div'); bar.className='img-actions';
240
- const dl=document.createElement('button'); dl.textContent='Download'; dl.addEventListener('click',()=>{ const a=document.createElement('a'); a.href=imgUrl; a.download=filename; document.body.appendChild(a); a.click(); a.remove(); });
241
- const openBtn=document.createElement('button'); openBtn.textContent='Open'; openBtn.addEventListener('click',()=>window.open(imgUrl,'_blank'));
242
- const cp=document.createElement('button'); cp.textContent='Copy prompt'; cp.addEventListener('click',async()=>{ try{ await navigator.clipboard.writeText(finalPrompt); cp.textContent='Copied!'; setTimeout(()=>cp.textContent='Copy prompt',900);}catch(e){} });
243
- const rerun=document.createElement('button'); rerun.textContent='Re‑generate'; rerun.addEventListener('click',()=>{ document.getElementById('randomSeed').checked=false; seedEl.disabled=false; seedEl.value=seed; saveSettings(); generateImage(); });
244
- bar.append(dl,openBtn,cp,rerun); return bar;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
  }
246
 
247
  async function generateImage(){
248
  if (isGenerating) return;
249
  const rawPrompt = promptEl.value.trim();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
6
  <title>imagegen</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
8
  <style>
 
21
  .generate-btn { background: linear-gradient(90deg,#ff93e9,#9b7cff); border:none; border-radius:12px; padding:12px 18px; font-size:14px; cursor:pointer; color:#fff; min-height:56px; display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s; }
22
  .generate-btn[disabled]{ opacity:0.6; cursor:default; }
23
 
24
+ /* New: always-visible controls panel */
25
  .controls { display:flex; flex-wrap:wrap; gap:10px; padding:10px; border:1px solid rgba(255,255,255,0.06); background:#0f0f0f; border-radius:12px; }
26
  .controls label { font-size:13px; color:#eaeaea; display:flex; align-items:center; gap:6px; }
27
+ .controls input[type="number"], .controls select { background:#0c0c0c; border:1px solid rgba(255,255,255,0.04); color:#fff; padding:6px 8px; border-radius:8px; font-size:13px; min-width:90px; }
28
 
29
+ /* Styles grid visible inline */
30
  .styles-wrap { margin-top:6px; }
31
  .styles-grid { display:grid; grid-template-columns:repeat(2, minmax(140px,1fr)); gap:8px; }
32
  @media (min-width:760px){ .styles-grid { grid-template-columns:repeat(5, minmax(120px,1fr)); } }
 
46
  </style>
47
  </head>
48
  <body>
49
+
50
  <div class="topbar" role="banner">
51
  <div class="btn-small" onclick="window.open('https://manus.im/invitation/XHHHQTMBM0ZCTX')">Manus</div>
52
+ <a class="btn-small" aria-disabled="true">
53
+ <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="coffee">
54
+ <span>Buy me a coffee</span>
55
+ </a>
56
  </div>
57
 
58
  <div class="container" role="main">
 
61
  <button id="generateBtn" class="generate-btn" aria-label="Generate">Generate</button>
62
  </div>
63
 
64
+ <!-- Always-visible controls -->
65
  <div class="controls" id="controls">
66
  <label>Model
67
  <select id="model">
 
74
  <select id="aspect">
75
  <option value="1:1">1:1</option>
76
  <option value="16:9">16:9</option>
77
+ <option value="19:6" selected>19:6</option>
78
+ <option value="3:2">3:2</option>
79
  <option value="2:3">2:3</option>
80
  <option value="4:5">4:5</option>
81
  <option value="9:16">9:16</option>
 
91
  </select>
92
  </label>
93
 
94
+ <label>Width <input id="width" type="number" min="64" max="2048" value="2048" /></label>
95
+ <label>Height <input id="height" type="number" min="64" max="2048" value="646" /></label>
96
+
97
  <label>Enhance <input id="enhance" type="checkbox" /></label>
98
+
99
  <label>Seed <input id="seed" type="number" value="42" /></label>
100
  <label><input id="randomSeed" type="checkbox" checked /> Random</label>
101
  </div>
102
 
103
+ <!-- Styles inline -->
104
  <div class="styles-wrap">
105
  <div class="note">Choose a style (optional):</div>
106
  <div class="styles-grid" id="stylesGrid">
 
116
  <div id="images" aria-live="polite"></div>
117
  </div>
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  <script>
120
  const baseUrl = 'https://image.pollinations.ai';
121
  let selectedStyle = null;
122
  let isGenerating = false;
123
 
124
+ // Tweaked presets (removed letterbox; photography uses wider lens)
125
  const styleTemplates = {
126
  cinema: " cinematic lighting, rich color grading",
127
  realistic: " realistic stock photo",
 
129
  fantasy: " epic fantasy, vibrant colors, surreal composition"
130
  };
131
 
132
+ // Framing presets
133
  const framingTemplates = {
134
  auto: "",
135
  close: "tight framing, close-up portrait, 85mm lens, shallow depth of field, face filling the frame",
 
137
  full: "full body, head-to-toe, wide shot, 35mm lens, subject fully in frame, feet visible"
138
  };
139
 
140
+ const SYSTEM_PROMPT = `You are ai machine which enhances users prompt for generating high quality the most amazing images from flux model...`;
141
+
142
+ // ---------- Settings persistence ----------
143
+ function saveSettingsToStorage() {
144
  const s = {
145
  model: document.getElementById('model').value,
146
  aspect: document.getElementById('aspect').value,
147
  framing: document.getElementById('framing').value,
148
+ width: Number(document.getElementById('width').value || 1024),
149
+ height: Number(document.getElementById('height').value || 1024),
150
  seed: Number(document.getElementById('seed').value || 42),
151
  randomSeed: document.getElementById('randomSeed').checked,
152
  enhance: document.getElementById('enhance').checked
153
  };
154
+ try { localStorage.setItem('ai_img_settings', JSON.stringify(s)); } catch(e){}
155
  }
156
+ function loadSettingsFromStorage() {
157
  try {
158
  const s = JSON.parse(localStorage.getItem('ai_img_settings') || '{}');
159
  if (s.model) document.getElementById('model').value = s.model;
160
  if (s.aspect) document.getElementById('aspect').value = s.aspect;
161
  if (s.framing) document.getElementById('framing').value = s.framing;
162
+ if (s.width) document.getElementById('width').value = s.width;
163
+ if (s.height) document.getElementById('height').value = s.height;
164
  if (s.seed || s.seed === 0) document.getElementById('seed').value = s.seed;
165
  document.getElementById('randomSeed').checked = s.randomSeed !== undefined ? s.randomSeed : true;
166
  document.getElementById('enhance').checked = (s.enhance !== undefined) ? s.enhance : true;
167
+ } catch(e){}
168
  }
169
 
170
+ // Helpers
171
  function parseAspect(aspectStr){ const [w,h]=aspectStr.split(':').map(Number); return (!w||!h)?1:(w/h); }
172
  function sizeForAspect(aspectStr, maxDim=2048){
173
  const r = parseAspect(aspectStr);
174
+ if (r >= 1){ const width=maxDim; const height=Math.max(64, Math.round(width/r)); return {width,height}; }
175
+ else { const height=maxDim; const width=Math.max(64, Math.round(height*r)); return {width,height}; }
176
+ }
177
+ function applyAspectToFields(){
178
+ const {width, height} = sizeForAspect(document.getElementById('aspect').value, 2048);
179
+ document.getElementById('width').value = width;
180
+ document.getElementById('height').value = height;
 
 
181
  }
182
 
183
+ loadSettingsFromStorage();
184
+ // Default sync with selected aspect if first time
185
+ (function(){
186
+ if (!localStorage.getItem('ai_img_settings')) applyAspectToFields();
187
+ })();
188
 
189
+ // Style selection
190
  document.querySelectorAll('.style-card').forEach(card=>{
191
  card.addEventListener('click',()=>{
192
  document.querySelectorAll('.style-card').forEach(c=>c.classList.remove('selected'));
 
195
  });
196
  });
197
 
198
+ // Aspect change → auto size
199
+ document.getElementById('aspect').addEventListener('change', applyAspectToFields);
200
+
201
+ // Random seed toggle disables seed input
202
  const randomSeedEl = document.getElementById('randomSeed');
203
  const seedEl = document.getElementById('seed');
204
+ randomSeedEl.addEventListener('change', ()=>{ seedEl.disabled = randomSeedEl.checked; });
205
  seedEl.disabled = randomSeedEl.checked;
206
 
207
+ // UI niceties
208
  const promptEl = document.getElementById('prompt');
209
+ function autoResizeTextarea(){ promptEl.style.height='auto'; promptEl.style.height=Math.min(250, promptEl.scrollHeight) + 'px'; }
210
  promptEl.addEventListener('input', autoResizeTextarea); setTimeout(autoResizeTextarea,0);
211
 
212
  const imagesContainer = document.getElementById('images');
213
  const generateBtn = document.getElementById('generateBtn');
214
+
215
  function randomInt(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }
216
 
217
  async function enhancePrompt(userPrompt){
218
  try{
219
+ const chatHistory = [{role:'system',content:SYSTEM_PROMPT},{role:'user',content:`"${userPrompt}"`}];
220
+ const response = await fetch('https://text.pollinations.ai/openai',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:'openai',messages:chatHistory})});
221
+ if(!response.ok) throw new Error('HTTP '+response.status);
222
+ const data = await response.json();
223
  return (data.choices?.[0]?.message?.content || userPrompt).trim();
224
+ }catch(e){ console.warn('Enhance fail:',e); return userPrompt; }
225
  }
226
 
227
  function makeActionsBar(imgUrl, filename, finalPrompt, seed, width, height){
228
+ const bar = document.createElement('div');
229
+ bar.className = 'img-actions';
230
+
231
+ // Download
232
+ const dl = document.createElement('button');
233
+ dl.textContent = 'Download';
234
+ dl.addEventListener('click', ()=>{
235
+ const a = document.createElement('a');
236
+ a.href = imgUrl;
237
+ a.download = filename;
238
+ document.body.appendChild(a);
239
+ a.click();
240
+ a.remove();
241
+ });
242
+
243
+ // Open
244
+ const openBtn = document.createElement('button');
245
+ openBtn.textContent = 'Open';
246
+ openBtn.addEventListener('click', ()=> window.open(imgUrl,'_blank'));
247
+
248
+ // Copy prompt
249
+ const cp = document.createElement('button');
250
+ cp.textContent = 'Copy prompt';
251
+ cp.addEventListener('click', async ()=>{
252
+ try{ await navigator.clipboard.writeText(finalPrompt); cp.textContent='Copied!'; setTimeout(()=>cp.textContent='Copy prompt',900);}catch(e){}
253
+ });
254
+
255
+ // Re-run same seed
256
+ const rerun = document.createElement('button');
257
+ rerun.textContent = 'Re‑generate';
258
+ rerun.addEventListener('click', ()=>{
259
+ document.getElementById('randomSeed').checked = false;
260
+ document.getElementById('seed').disabled = false;
261
+ document.getElementById('seed').value = seed;
262
+ document.getElementById('width').value = width;
263
+ document.getElementById('height').value = height;
264
+ document.getElementById('prompt').value = finalPrompt;
265
+ autoResizeTextarea();
266
+ saveSettingsToStorage();
267
+ generateImage();
268
+ });
269
+
270
+ bar.append(dl, openBtn, cp, rerun);
271
+ return bar;
272
  }
273
 
274
  async function generateImage(){
275
  if (isGenerating) return;
276
  const rawPrompt = promptEl.value.trim();
277
+ if (!rawPrompt){
278
+ const temp=document.createElement('div'); temp.className='image-card';
279
+ temp.innerHTML='<div class="muted">Please enter a prompt</div>'; imagesContainer.prepend(temp);
280
+ setTimeout(()=>temp.remove(),1200); return;
281
+ }
282
+
283
+ isGenerating = true; generateBtn.disabled=true;
284
+
285
+ const card = document.createElement('div');
286
+ card.className='image-card';
287
+ card.innerHTML = `<div style="display:flex;align-items:center;"><div class="loader"></div><div class="muted">Generating...</div></div>`;
288
+ imagesContainer.prepend(card);
289
+
290
+ // Build prompt (style + framing first)
291
+ const enhanceOn = document.getElementById('enhance').checked;
292
+ const framingChoice = document.getElementById('framing').value;
293
+
294
+ let promptWithStyle = rawPrompt;
295
+ if (selectedStyle && styleTemplates[selectedStyle]) promptWithStyle += ' ' + styleTemplates[selectedStyle];
296
+ if (framingTemplates[framingChoice]) promptWithStyle += ' ' + framingTemplates[framingChoice];
297
+
298
+ let finalPrompt = enhanceOn ? await enhancePrompt(promptWithStyle) : promptWithStyle;
299
+
300
+ // Params
301
+ const model = encodeURIComponent(document.getElementById('model').value || 'flux');
302
+ const width = Math.max(64, Math.min(2048, Number(document.getElementById('width').value) || 1024));
303
+ const height = Math.max(64, Math.min(2048, Number(document.getElementById('height').value) || 1024));
304
+ const seed = document.getElementById('randomSeed').checked ? randomInt(0, 4294967295) : (Number(document.getElementById('seed').value) || 42);
305
+
306
+ try{
307
+ const encodedPrompt = encodeURIComponent(finalPrompt);
308
+ const url = `${baseUrl}/prompt/${encodedPrompt}?model=${model}&width=${width}&height=${height}&seed=${seed}&nologo=true&safe=false`;
309
+ const res = await fetch(url);
310
+ if(!res.ok) throw new Error('Network '+res.status);
311
+ const blob = await res.blob();
312
+ const imgUrl = URL.createObjectURL(blob);
313
+
314
+ const filename = `image_${width}x${height}_seed${seed}.png`;
315
+ card.innerHTML = `<img src="${imgUrl}" alt="generated image">`;
316
+ card.appendChild(makeActionsBar(imgUrl, filename, finalPrompt, seed, width, height));
317
+ }catch(err){
318
+ console.error(err);
319
+ card.innerHTML = `<div class="muted" style="color:#ff6b6b;">Error generating image</div>`;
320
+ }finally{
321
+ isGenerating=false; generateBtn.disabled=false;
322
+ saveSettingsToStorage();
323
+ }
324
+ }
325
+
326
+ document.getElementById('generateBtn').addEventListener('click', generateImage);
327
+ promptEl.addEventListener('keydown', (e)=>{ if(e.key==='Enter'&&(e.ctrlKey||e.metaKey)) generateImage(); });
328
+ window.addEventListener('beforeunload', saveSettingsToStorage);
329
+ </script>
330
+ </body>
331
+ </html>