Update index.html

index.html

@@ -21,12 +21,10 @@
     .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; }
     .generate-btn[disabled]{ opacity:0.6; cursor:default; }
 
-    /* Always-visible control panel (no width/height fields) */
     .controls { display:flex; flex-wrap:wrap; gap:10px; padding:10px; border:1px solid rgba(255,255,255,0.06); background:#0f0f0f; border-radius:12px; }
     .controls label { font-size:13px; color:#eaeaea; display:flex; align-items:center; gap:6px; }
     .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; }
 
-    /* Styles grid */
     .styles-wrap { margin-top:6px; }
     .styles-grid { display:grid; grid-template-columns:repeat(2, minmax(140px,1fr)); gap:8px; }
     @media (min-width:760px){ .styles-grid { grid-template-columns:repeat(5, minmax(120px,1fr)); } }
@@ -57,7 +55,6 @@
       <button id="generateBtn" class="generate-btn" aria-label="Generate">Generate</button>
     </div>
 
-    <!-- Always-visible controls (no width/height) -->
     <div class="controls" id="controls">
       <label>Model
         <select id="model">
@@ -70,8 +67,8 @@
         <select id="aspect">
           <option value="1:1">1:1</option>
           <option value="16:9">16:9</option>
-          <option value="19:6" selected>19:6</option>
-          <option value="3:2">3:2</option>
+          <option value="19:6">19:6</option>
+          <option value="3:2" selected>3:2</option>
           <option value="2:3">2:3</option>
           <option value="4:5">4:5</option>
           <option value="9:16">9:16</option>
@@ -92,7 +89,6 @@
       <label><input id="randomSeed" type="checkbox" checked /> Random</label>
     </div>
 
-    <!-- Styles inline -->
     <div class="styles-wrap">
       <div class="note">Choose a style (optional):</div>
       <div class="styles-grid" id="stylesGrid">
@@ -109,41 +105,52 @@
   </div>
 
 <script>
-
-  function applyDefaultsFromURL() {
-  const params = new URLSearchParams(window.location.search);
-
-  const aspect = params.get('default_aspect');
-  const framing = params.get('default_framing');
-
-  if (aspect) {
-    const aspectDropdown = document.getElementById('aspectRatio');
-    if (aspectDropdown) {
-      aspectDropdown.value = aspect;
-      aspectDropdown.dispatchEvent(new Event('change'));
-    }
+(function initDefaultsFromURL() {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', applyDefaultsFromURLSafe);
+  } else {
+    applyDefaultsFromURLSafe();
   }
 
-  if (framing) {
-    const framingDropdown = document.getElementById('framing');
-    if (framingDropdown) {
-      framingDropdown.value = framing;
+  function applyDefaultsFromURLSafe() {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      const aspectParam  = params.get('default_aspect');
+      const framingParam = params.get('default_framing');
+      const framingMap = { 'full-body': 'full', 'close-up': 'close' };
+
+      const aspectEl  = document.getElementById('aspect');
+      const framingEl = document.getElementById('framing');
+
+      if (aspectEl) {
+        const defaultAspect = aspectParam || '3:2';
+        const hasOption = Array.from(aspectEl.options).some(o => o.value === defaultAspect);
+        if (hasOption) {
+          aspectEl.value = defaultAspect;
+        }
+      }
+
+      if (framingEl && (framingParam || framingMap[framingParam])) {
+        const normalized = framingMap[framingParam] || framingParam;
+        const hasOption = Array.from(framingEl.options).some(o => o.value === normalized);
+        if (hasOption) framingEl.value = normalized;
+      }
+
+      if (typeof saveSettings === 'function') {
+        saveSettings();
+      }
+    } catch (e) {
+      console.error('applyDefaultsFromURL failed:', e);
     }
   }
+})();
+</script>
 
-  // Save these defaults to local storage so they persist
-  saveSettingsToStorage();
-}
-
-// Apply defaults right after settings load
-loadSettingsFromStorage();
-applyDefaultsFromURL();
-
+<script>
   const baseUrl = 'https://image.pollinations.ai';
   let selectedStyle = null;
   let isGenerating = false;
 
-  // Presets (cinema without letterbox; photo wider lens)
   const styleTemplates = {
     cinema: " cinematic lighting, rich color grading",
     realistic: " realistic stock photo",
@@ -158,7 +165,6 @@ applyDefaultsFromURL();
     full: "full body, head-to-toe, wide shot, 35mm lens, subject fully in frame, feet visible"
   };
 
-  // Persist minimal settings (no width/height in storage)
   function saveSettings() {
     const s = {
       model: document.getElementById('model').value,
@@ -182,15 +188,14 @@ applyDefaultsFromURL();
     } catch(e) {}
   }
 
-  // Aspect helpers → always compute high-res size within 2048
   function parseAspect(aspectStr){ const [w,h]=aspectStr.split(':').map(Number); return (!w||!h)?1:(w/h); }
   function sizeForAspect(aspectStr, maxDim=2048){
     const r = parseAspect(aspectStr);
-    if (r >= 1){ // landscape or square
+    if (r >= 1){
       const width = maxDim;
       const height = Math.max(64, Math.round(width / r));
       return {width, height};
-    } else { // portrait
+    } else {
       const height = maxDim;
       const width = Math.max(64, Math.round(height * r));
       return {width, height};
@@ -199,7 +204,6 @@ applyDefaultsFromURL();
 
   loadSettings();
 
-  // Style selection
   document.querySelectorAll('.style-card').forEach(card=>{
     card.addEventListener('click',()=>{
       document.querySelectorAll('.style-card').forEach(c=>c.classList.remove('selected'));
@@ -208,13 +212,11 @@ applyDefaultsFromURL();
     });
   });
 
-  // Seed toggle
   const randomSeedEl = document.getElementById('randomSeed');
   const seedEl = document.getElementById('seed');
   randomSeedEl.addEventListener('change', ()=>{ seedEl.disabled = randomSeedEl.checked; saveSettings(); });
   seedEl.disabled = randomSeedEl.checked;
 
-  // Prompt textarea UX
   const promptEl = document.getElementById('prompt');
   function autoResizeTextarea(){ promptEl.style.height='auto'; promptEl.style.height=Math.min(250, promptEl.scrollHeight)+'px'; }
   promptEl.addEventListener('input', autoResizeTextarea); setTimeout(autoResizeTextarea,0);
@@ -245,45 +247,3 @@ applyDefaultsFromURL();
   async function generateImage(){
     if (isGenerating) return;
     const rawPrompt = promptEl.value.trim();
-    if (!rawPrompt){ const temp=document.createElement('div'); temp.className='image-card'; temp.innerHTML='<div class="muted">Please enter a prompt</div>'; imagesContainer.prepend(temp); setTimeout(()=>temp.remove(),1200); return; }
-
-    isGenerating=true; generateBtn.disabled=true;
-    const card=document.createElement('div'); card.className='image-card';
-    card.innerHTML=`<div style="display:flex;align-items:center;"><div class="loader"></div><div class="muted">Generating...</div></div>`; imagesContainer.prepend(card);
-
-    // Build prompt with selected style + framing
-    const framingChoice=document.getElementById('framing').value;
-    const aspect=document.getElementById('aspect').value;
-    const enhanceOn=document.getElementById('enhance').checked;
-
-    let promptWithStyle=rawPrompt;
-    if (selectedStyle && styleTemplates[selectedStyle]) promptWithStyle += ' ' + styleTemplates[selectedStyle];
-    if (framingTemplates[framingChoice]) promptWithStyle += ' ' + framingTemplates[framingChoice];
-
-    const finalPrompt = enhanceOn ? await enhancePrompt(promptWithStyle) : promptWithStyle;
-
-    // Always compute high-res size from aspect (no UI fields)
-    const {width, height} = sizeForAspect(aspect, 2048);
-
-    const model = encodeURIComponent(document.getElementById('model').value || 'flux');
-    const seed = document.getElementById('randomSeed').checked ? randomInt(0, 4294967295) : (Number(seedEl.value) || 42);
-
-    try{
-      const url = `${baseUrl}/prompt/${encodeURIComponent(finalPrompt)}?model=${model}&width=${width}&height=${height}&seed=${seed}&nologo=true&safe=false`;
-      const res = await fetch(url); if(!res.ok) throw new Error('Network '+res.status);
-      const blob = await res.blob(); const imgUrl = URL.createObjectURL(blob);
-      const filename = `image_${width}x${height}_seed${seed}.png`;
-      card.innerHTML = `<img src="${imgUrl}" alt="generated image">`;
-      card.appendChild(makeActionsBar(imgUrl, filename, finalPrompt, seed, width, height));
-    }catch(err){
-      console.error(err); card.innerHTML = `<div class="muted" style="color:#ff6b6b;">Error generating image</div>`;
-    }finally{
-      isGenerating=false; generateBtn.disabled=false; saveSettings();
-    }
-  }
-
-  document.getElementById('generateBtn').addEventListener('click', generateImage);
-  promptEl.addEventListener('keydown', (e)=>{ if(e.key==='Enter'&&(e.ctrlKey||e.metaKey)) generateImage(); });
-</script>
-</body>
-</html>