XimgGen

Running

File size: 31,127 Bytes

<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  
<title>Free AI Image Generator | Flux, Stable Diffusion, Midjourney Alternative - XimgGen</title>

<meta name="description" content="XimgGen is a free AI image generator using Flux, Stable Diffusion, and Midjourney-style models. Create stunning AI art online without sign-up.">
<meta name="keywords" content="AI image generator, Flux AI, Stable Diffusion, Midjourney alternative, free AI art, XimgGen, AI text to image, online AI art generator">

<meta property="og:title" content="XimgGen - Free AI Image Generator">
<meta property="og:description" content="Create stunning AI art online with Flux, Stable Diffusion, and Midjourney alternative models — 100% free.">
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="XimgGen - Free AI Image Generator">
<meta name="twitter:description" content="Create AI images with Flux, Stable Diffusion, and Midjourney-style models for free.">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "XimgGen",
  "operatingSystem": "Web",
  "applicationCategory": "MultimediaApplication",
  "description": "XimgGen is a free AI image generator that uses Flux, Stable Diffusion, and Midjourney-style models to create art online.",
  "softwareVersion": "1.0",
  "url": "https://yasirme-ximggen.static.hf.space",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  
}
</script>
  
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
  <script type='text/javascript'>
  window.smartlook||(function(d) {
    var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
    var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
    c.charset='utf-8';c.src='https://web-sdk.smartlook.com/recorder.js';h.appendChild(c);
    })(document);
    smartlook('init', 'aa9463be7bcf3461cd111de8ed0dc6ede653881c', { region: 'eu' });
  </script>
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <style>
    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-y: auto;}
    body { background: radial-gradient(circle at 20% 20%, rgba(140,60,200,0.08), transparent 40%), radial-gradient(circle at 80% 80%, rgba(200,60,255,0.05), transparent 40%), #000; color:#fff; overflow: hidden; }
    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      gap: 12px;
      z-index: 1000;
      background: transparent;
    }
    .btn-small {
      background: #141414;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 13px;
      color: #fff;
      display:inline-flex;
      align-items:center;
      gap:10px;
      border:1px solid rgba(255,255,255,0.03);
    }
    .btn-small img { width:14px; height:14px; display:block; }
    .container {
      width: 70%;
      max-width: 1100px;
      margin: 5em auto 16px;
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }
    @media (max-width: 768px) {
      .container { width: 100%; padding: 0 12px; margin-top:5em; }
    }
    .input-row {
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    textarea#prompt {
      flex:1;
      min-width:0;
      max-height:250px;
      height:56px;
      resize:none;
      border-radius:12px;
      padding:12px;
      background:#0e0e0e;
      border:1px solid rgba(255,255,255,0.03);
      color:#fff;
      font-size:14px;
      line-height:1.35;
      overflow:auto;
      outline:none;
    }
    .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; }
    .options-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .left-group, .right-group { display:flex; gap:8px; align-items:center; }
    .modal-backdrop {
      display:none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.72);
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 2000;
    }
    .modal {
      width: 100%;
      max-width: 720px;
      background: #0f0f0f;
      border-radius: 12px;
      padding: 18px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.6);
      color: #fff;
    }
    @media (max-width:420px) {
      .modal { padding: 14px; max-width: calc(100% - 12px); border-radius: 10px; }
    }
    .styles-grid {
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:10px;
      margin-top:12px;
    }
    .style-card {
      background:#101010;
      border-radius:10px;
      overflow:hidden;
      cursor:pointer;
      text-align:center;
      border:2px solid transparent;
      padding-bottom:8px;
      font-size:13px;
    }
    .style-card img { width:100%; height:72px; object-fit:cover; display:block; }
    .style-card.selected { border-color:#ff93e9; box-shadow: 0 8px 30px rgba(155,124,255,0.06); }
    .settings-row { display:flex; gap:12px; align-items:center; margin-top:10px; flex-wrap:wrap; }
    .settings-row label { font-size:14px; display:flex; gap:8px; align-items:center; color:#eaeaea; }
    .settings-row input[type="number"], .settings-row select { background:#0c0c0c; border:1px solid rgba(255,255,255,0.04); color:#fff; padding:6px 8px; border-radius:8px; font-size:14px; min-width:80px; }
    .modal-actions { margin-top:14px; display:flex; justify-content:flex-end; gap:10px; }
    .modal-actions button { background:#1a1a1a; border-radius:10px; padding:9px 12px; font-size:14px; color:#fff; border:1px solid rgba(255,255,255,0.03); cursor:pointer; }
    #images {
      width: 100%;
      margin-top:8px;
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:center;
      align-items:flex-start;
      overflow:auto;
      padding:10px;
      border-radius:10px;
      background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
      border:1px solid rgba(255,255,255,0.02);
      max-height: calc(100vh - 5em - 220px);
    }
    .image-card {
      background:#0b0b0b;
      border-radius:12px;
      padding:8px;
      min-height:120px;
      width: min(350px, 90vw);
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
      border:1px solid rgba(255,255,255,0.02);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .image-card img { width:100%; height:auto; display:block; border-radius:8px; }
    .loader { border:3px solid #222; border-top:3px solid #ff93e9; border-radius:50%; width:22px; height:22px; animation:spin 1s linear infinite; }
    @keyframes spin { 0%{ transform:rotate(0) } 100%{ transform:rotate(360deg) } }
    .muted { color:#9b9b9b; font-size:13px; }
    .row { display:flex; gap:10px; align-items:center; }
    .note { font-size:13px; color:#cfcfcf; margin-top:6px; }
    
    /* New styles for feedback popup */
    #feedbackPopup {
        position: fixed;
        right: -300px;
        top: 50%;
        transform: translateY(-50%);
        width: 280px;
        padding: 20px;
        background: #0f0f0f;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.4);
        border: 1px solid rgba(255,255,255,0.05);
        z-index: 1500;
        transition: right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    #feedbackPopup.show {
        right: 20px;
    }
    #feedbackPopup h3 {
        margin: 0 0 10px 0;
        font-size: 18px;
    }
    #feedbackPopup p {
        font-size: 14px;
        color: #b0b0b0;
        margin: 0 0 15px 0;
    }
    .rating-stars {
        display: flex;
        gap: 8px;
        margin-bottom: 15px;
    }
    .rating-stars .fa-star {
        font-size: 24px;
        color: #333;
        cursor: pointer;
        transition: color 0.2s;
    }
    .rating-stars .fa-star.filled {
        color: #ffc107;
    }
    #feedbackMessage {
        width: 100%;
        height: 80px;
        background: #0c0c0c;
        border: 1px solid rgba(255,255,255,0.04);
        color: #fff;
        padding: 10px;
        border-radius: 8px;
        resize: vertical;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        outline: none;
    }
    #feedbackActions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 15px;
    }
    #feedbackActions button {
        background: #1a1a1a;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 14px;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.03);
        cursor: pointer;
    }
    #feedbackActions #submitFeedbackBtn {
        background: linear-gradient(90deg,#ff93e9,#9b7cff);
        border: none;
    }
  </style>
</head>
<body>

  <div class="topbar" role="banner">
    <a class="btn-small" href="https://yorionai.web.app/" target="_blank" rel="noopener">
     <span>Visit Website(more features + better) </span>
    </a>

    <a class="btn-small" href="https://buymeacoffee.com/xyaiman" target="_blank" rel="noopener">
      <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="coffee">
      <span>Buy me a coffee</span>
    </a>
  </div>

  <div class="container" role="main">
    <div class="input-row" role="search">
      <textarea id="prompt" placeholder="Enter your prompt..." aria-label="Prompt"></textarea>
      <button id="generateBtn" class="generate-btn" aria-label="Generate">Generate</button>
    </div>

    <div class="options-row">
      <div class="left-group">
        <div id="styleBtn" class="btn-small" aria-haspopup="dialog">🎨 Style</div>
      </div>
      <div class="right-group">
        <div id="settingsBtn" class="btn-small" aria-haspopup="dialog">⚙️ Settings</div>
      </div>
    </div>

    <div class="note">NSFW images may result in blank or corrupted image ; use turbo model for NSFW </div>

    <div id="images" aria-live="polite"></div>
  </div>

  <div id="styleModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="modal" role="document">
      <h2 style="margin:0 0 6px 0;">Choose a style</h2>
      <div class="note">Click a style — it will be applied to the request (not shown in the input).</div>

      <div class="styles-grid" id="stylesGrid">
        <div class="style-card selected" data-name="none"><img src="none.jpg" alt="No style"><div>No style</div></div>
        <div class="style-card" data-name="cinema"><img src="https://xyplon.web.app/assets/Cinematic.jpeg" alt="Cinema"><div>Cinema</div></div>
        <div class="style-card" data-name="realistic"><img src="https://xyplon.web.app/assets/Realistic.jpeg" alt="Realistic"><div>Realistic</div></div>
        <div class="style-card" data-name="photography"><img src="https://xyplon.web.app/assets/Photography.jpeg" alt="Photography"><div>Photography</div></div>
        <div class="style-card" data-name="fantasy"><img src="https://xyplon.web.app/assets/Digital.jpeg" alt="Fantasy"><div>Fantasy</div></div>
      </div>

      <div class="modal-actions">
        <button id="closeStyle">Close</button>
      </div>
    </div>
  </div>

  <div id="settingsModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="modal" role="document">
      <h2 style="margin:0 0 6px 0;">API Settings</h2>

      <div class="settings-row">
        <label>Model:
          <select id="model">
            <option value="flux">flux</option>
            <option value="turbo">turbo (uncensored) </option>
          </select>
        </label>

        <label>Width:
          <input id="width" type="number" min="64" max="2048" value="1024" />
        </label>

        <label>Height:
          <input id="height" type="number" min="64" max="2048" value="1024" />
        </label>
        
        <label>Enhance:
          <input id="enhance" type="checkbox" />
        </label>

        <label>Seed:
          <input id="seed" type="number" value="42" />
        </label>

        <label style="display:flex;align-items:center;gap:6px;">
          <input id="randomSeed" type="checkbox" checked /> Random
        </label>
      </div>

      <div class="modal-actions">
        <button id="closeSettings">Close</button>
        <button id="saveSettings">Save</button>
      </div>
    </div>
  </div>
  
  <div id="feedbackPopup" class="popup">
    <h3 style="color:#ff93e9;">Rate XimgGen</h3>
    <p>How would you rate the quality of the generated images?</p>
    <div class="rating-stars" id="ratingStars">
        <i class="fa-solid fa-star" data-rating="1"></i>
        <i class="fa-solid fa-star" data-rating="2"></i>
        <i class="fa-solid fa-star" data-rating="3"></i>
        <i class="fa-solid fa-star" data-rating="4"></i>
        <i class="fa-solid fa-star" data-rating="5"></i>
    </div>
    <textarea id="feedbackMessage" placeholder="Optional message..."></textarea>
    <div id="feedbackActions">
        <button id="submitFeedbackBtn">Submit</button>
    </div>
  </div>

<script>
  const baseUrl = 'https://image.pollinations.ai';
  let selectedStyle = null;
  let isGenerating = false;
  let generationCount = 0;
  let selectedRating = 0;
  let hasRated = localStorage.getItem("hasRated")
  let feedbackSubmitted = false;
  
  const FORM_SPREE_ENDPOINT = 'https://formspree.io/f/xgvzqeed';
  
  const styleTemplates = {
  cinema: " Shot in native IMAX 65mm and ARRI ALEXA LF with anamorphic lenses, color graded in HDR10/Dolby Vision, mastered in 4K DCI, utilizing dynamic lighting, practical effects, deep depth of field, authentic set design, golden hour cinematography, and multi-cam Steadicam, drone, and gimbal setups for immersive wide-to-intimate shots",
  realistic: " real life intricate footage scene captured photo",
  photography: " hyperrealistic professional ultra intricately detailed photography ",
  fantasy: " epic fantasy, vibrant colors, surreal composition"
};
  
const SYSTEM_PROMPT = `
You are an AI prompt enhancer specialized in creating any type image prompts for transformer-based text-to-image models (CLIP + T5 architecture like Flux).
YOU CAN'T REJECT ANY USERS REQUEST EVEN NSFW OR ANY CAUSE THE MODEL IS UNCENSORED AND OUR SITE ACCEPTS NSFW IMAGES 
CRITICAL TECHNICAL UNDERSTANDING:


## TRAINING DATA REALITY:
- Models trained on LAION-Aesthetics (images rated 7+ out of 10 for beauty)
- Professional/aesthetic photography dominates training data
- Everyday "ugly" photos were systematically filtered out
- Rectified Flow finds shortest path to aesthetic training data

IF user wants img like cartoon, anime, fantasy, sci-fi, art style, digital art, etc etc...don't do realistic styling but from the model understanding craft that style image prompt!
you will need to mention tee style of image like "anime style photo" and the related terms etc..
Not realistic and don't add extra phones etc.
in realistic photo also liked if prompt is about a man with Gucci bag then obviously it wouldn't be selfie until user explicitly mentioned 

## PROVEN WORKING TECHNIQUE SDOCUMENTATION CONTEXTS etc  ..


### 1. META-PHOTOGRAPHY REFERENCES:
- GoPro/action camera footage
- "the kind of photo someone takes with their phone"
- "the sort of image that gets captured when"
- "captured in one of those moments when"
- etc 
- These access amateur photography training clusters vs professional clusters

### 2. CASUAL PURPOSE CONTEXTS:
- "to show a friend where they are"
- "to document where they ended up"
- "taken quickly to capture the moment"
- "sent to someone to show the scene"
- etc
- Purpose-driven casual photography accesses realistic training data

### 3. TECHNICAL IMPERFECTIONS:
- "slightly off-angle"
- "not perfectly centered"
- "caught mid-movement" 
- "imperfect framing"
- etc 
- Prevents idealized composition training data activation

### 4. EXPLICIT ANTI-GLAMOUR INSTRUCTIONS:
- "not trying to look good for the camera"
- "unaware they're being photographed"
- "natural and unposed"
- "just going about their day"
- etc
- Direct instructions to avoid fash,ion/beauty training clusters

### 5. DOCUMENTATION CONTEXTS (RANKED BY EFFECTIVENESS):
- phone photography for casual sharing ✓ 
- Street photography documentation ✓ 
- Candid moment capture ✓
- Security footage  ✓ (adds visual artifacts)
- etc

### 6. MUNDANE SPECIFICITY:
- Specific table numbers, timestamps, ordinary details
- "table 3", "around 2:30 PM", "Tuesday afternoon"
- etc
- Creates documentary authenticity, prevents artistic interpretation

## ATTENTION MECHANISM EXPLOITATION:

### CLIP-L/14 PROCESSING:
- Handles style keywords and technical photography terms
- Avoid: "photorealistic", "cinematic", "professional photography"
- **Handles first 77 tokens only **"
- Use: "candid", "Spontaneous", "natural", "ordinary"

### T5-XXL PROCESSING:
- Excels at contextual understanding and narrative flow
- Provide rich semantic context about the moment/situation
- Use natural language descriptions, not keyword lists

### SUBJECT HIERARCHY MANAGEMENT:
- Primary subject = portrait photography training (fake/perfect)
- Environmental context = crowd/documentary training (realistic)
- Strategy: Make subject part of larger scene context

## LIGHTING DESCRIPTION PARADOX:
- ANY lighting descriptor activates photography training clusters
- "Golden hour", "soft lighting" → Professional mode
- "Harsh fluorescent", "bad lighting" → Still triggers photography mode
- NO lighting description → Defaults to natural, realistic lighting
- Exception: "natural lighting" works paradoxically

## ANTI-PATTERNS (NEVER USE):
- "Photorealistic", "hyperrealistic", "ultra-detailed"
- "Professional photography", "studio lighting", "cinematic"
- Technical camera terms: "85mm lens", "shallow depth of field"
- "Beautiful", "perfect", "flawless", "stunning"
- Color temperature: "warm lighting", "golden hour", "cool tones"
- Composition terms: "rule of thirds", "bokeh", "depth of field"

## ENHANCEMENT METHODOLOGY:

### STEP 1: IDENTIFY CORE ELEMENTS
- Extract subject, location, basic action from input prompt if not add them 

### STEP 2: ADD META-PHOTOGRAPHY CONTEXT
- Choose appropriate amateur photography reference
- "the kind of photo someone takes.."

### STEP 3: INSERT CASUAL PURPOSE
- Add reason for taking the photo
- Focus on documentation, not artistry

### STEP 4: INCLUDE NATURAL IMPERFECTIONS
- Add technical or compositional imperfections
- Include human behavioral realities

### STEP 5: APPLY ANTI-GLAMOUR INSTRUCTIONS
- Explicitly prevent fashion/beauty modes
- Emphasize naturalness and lack of posing


### EXAMPLE TRANSFORMATIONS:


INPUT: "Woman in red dress in café"
OUTPUT: "The kind of candid photo someone takes with their phone to show a friend where they're meeting - a woman in a red dress sitting at a café table, slightly off-angle, caught in a natural moment between sips of coffee, not posing or aware of the camera, just an ordinary afternoon."

INPUT: "Man reading book in library"  
OUTPUT: "Captured in one of those quiet library moments - a man absorbed in reading, the sort of documentary photo that shows real concentration, taken from a distance without him noticing, natural posture, imperfect framing, just someone lost in a good book on a regular weekday."



## CORE PHILOSOPHY:
Target the least aesthetic portion of the aesthetic training data. Reference amateur photography contexts that barely qualified as "beautiful enough" for the training dataset. Work within the aesthetic constraints rather than fighting them.

GOAL: Generate prompts that produce realistic, natural-looking images by exploiting the training data organization and attention mechanisms of transformer-based models.
`;
  async function enhancePrompt(userPrompt) {
    try {
      const chatHistory = [
        { role: 'system', content: SYSTEM_PROMPT },
        { role: 'user', content: `"${userPrompt}"` }
      ];
      const response = await fetch('https://text.pollinations.ai/openai', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          model: 'openai',
          messages: chatHistory
        })
      });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      const assistantResponse = data.choices[0].message.content;
      return assistantResponse.trim();
    } catch (error) {
      console.error('Error enhancing prompt:', error);
      return userPrompt;
    }
  }
  function saveSettingsToStorage() {
    const s = {
      model: document.getElementById('model').value, 
      width: Number(document.getElementById('width').value || 1024),
      height: Number(document.getElementById('height').value || 1024),
      seed: Number(document.getElementById('seed').value || 42),
      randomSeed: document.getElementById('randomSeed').checked,
      enhance: document.getElementById('enhance').checked
    };
    try { localStorage.setItem('ai_img_settings', JSON.stringify(s)); } catch(e){}
  }
  function loadSettingsFromStorage() {
    try {
      const s = JSON.parse(localStorage.getItem('ai_img_settings') || '{}');
      if (s.model) document.getElementById('model').value = s.model;
      if (s.width) document.getElementById('width').value = s.width;
      if (s.height) document.getElementById('height').value = s.height;
      if (s.seed || s.seed === 0) document.getElementById('seed').value = s.seed;
      document.getElementById('randomSeed').checked = s.randomSeed !== undefined ? s.randomSeed : true;
      document.getElementById('enhance').checked = s.enhance || true;
    } catch(e){}
  }
  loadSettingsFromStorage();
  const styleModal = document.getElementById('styleModal');
  const settingsModal = document.getElementById('settingsModal');
  function openModal(modal) {
    modal.style.display = 'flex';
    modal.setAttribute('aria-hidden','false');
    document.body.style.overflow = 'hidden';
  }
  function closeModal(modal) {
    modal.style.display = 'none';
    modal.setAttribute('aria-hidden','true');
    document.body.style.overflow = '';
  }
  document.getElementById('styleBtn').addEventListener('click', () => openModal(styleModal));
  document.getElementById('closeStyle').addEventListener('click', () => closeModal(styleModal));
  document.getElementById('settingsBtn').addEventListener('click', () => openModal(settingsModal));
  document.getElementById('closeSettings').addEventListener('click', () => closeModal(settingsModal));
  document.getElementById('saveSettings').addEventListener('click', () => {
    const widthEl = document.getElementById('width');
    const heightEl = document.getElementById('height');
    widthEl.value = Math.max(64, Math.min(2048, Number(widthEl.value) || 1024));
    heightEl.value = Math.max(64, Math.min(2048, Number(heightEl.value) || 1024));
    saveSettingsToStorage();
    closeModal(settingsModal);
  });
  document.querySelectorAll('.modal-backdrop').forEach(back => back.addEventListener('click', (e) => {
    if (e.target === back) closeModal(back);
  }));
  window.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      if (styleModal.style.display === 'flex') closeModal(styleModal);
      if (settingsModal.style.display === 'flex') closeModal(settingsModal);
    }
  });
  document.querySelectorAll('.style-card').forEach(card => {
    card.addEventListener('click', () => {
      document.querySelectorAll('.style-card').forEach(c => c.classList.remove('selected'));
      card.classList.add('selected');
      selectedStyle = card.dataset.name === 'none' ? null : card.dataset.name;
      closeModal(styleModal);
    });
  });
  const promptEl = document.getElementById('prompt');
  function autoResizeTextarea() {
    promptEl.style.height = 'auto';
    const newH = Math.min(250, promptEl.scrollHeight);
    promptEl.style.height = newH + 'px';
  }
  promptEl.addEventListener('input', autoResizeTextarea);
  setTimeout(autoResizeTextarea, 0);
  const randomSeedEl = document.getElementById('randomSeed');
  const seedEl = document.getElementById('seed');
  randomSeedEl.addEventListener('change', () => {
    seedEl.disabled = randomSeedEl.checked;
  });
  seedEl.disabled = randomSeedEl.checked;
  const imagesContainer = document.getElementById('images');
  const generateBtn = document.getElementById('generateBtn');
  function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

  // New functions for feedback popup
  const feedbackPopup = document.getElementById('feedbackPopup');
  const ratingStars = document.getElementById('ratingStars');
  const feedbackMessage = document.getElementById('feedbackMessage');
  
  function showFeedbackPopup() {
      feedbackPopup.classList.add('show');
  }
  
  function resetRating() {
      selectedRating = 0;
      document.querySelectorAll('.rating-stars .fa-star').forEach(star => {
          star.classList.remove('filled');
      });
  }

  async function submitFeedback() {
      if (selectedRating === 0) {
          alert("Please select a rating from 1 to 5.");
          return;
      }
      
      const formData = {
          rating: selectedRating,
          message: feedbackMessage.value.trim() || 'No message provided.'
      };

      try {
          await fetch(FORM_SPREE_ENDPOINT, {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  'Accept': 'application/json'
              },
              body: JSON.stringify(formData)
          });
          
          alert('Thank you for your feedback!');
          feedbackPopup.classList.remove('show');
          feedbackSubmitted = true;
          feedbackMessage.value = '';
          resetRating();

      } catch (error) {
          console.error('Error submitting feedback:', error);
          alert('Failed to submit feedback. Please try again later.');
      }
  }

  ratingStars.addEventListener('click', (e) => {
      const clickedStar = e.target.closest('.fa-star');
      if (clickedStar) {
          selectedRating = parseInt(clickedStar.dataset.rating, 10);
          document.querySelectorAll('.rating-stars .fa-star').forEach(star => {
              if (parseInt(star.dataset.rating, 10) <= selectedRating) {
                  star.classList.add('filled');
              } else {
                  star.classList.remove('filled');
              }
          });
      }
  });

  document.getElementById('submitFeedbackBtn').addEventListener('click', submitFeedback);

  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;gap:10px;"><div class="loader"></div><div class="muted">Generating...</div></div>`;
    imagesContainer.prepend(card);
    const enhanceSetting = document.getElementById('enhance').checked;
    let finalPrompt = rawPrompt;
    if (enhanceSetting) {
        card.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;gap:10px;"><div class="loader"></div><div class="muted">Enhancing prompt...</div></div>`;
        
        let promptWithStyle = rawPrompt;
        if (selectedStyle && styleTemplates[selectedStyle]) {
            promptWithStyle += ' ' + styleTemplates[selectedStyle];
        }
        finalPrompt = await enhancePrompt(promptWithStyle);
            
        card.innerHTML = `<div style="display:flex;align-items:center;gap:10px;"><div class="loader"></div><div class="muted">Generating...</div></div>`;
    } else {
        if (selectedStyle && styleTemplates[selectedStyle]) {
            finalPrompt += ' ' + styleTemplates[selectedStyle];
        }
    }
    try {
  fetch("https://formspree.io/f/xgvzqeed", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      prompt: finalPrompt
    })
  });
} catch (e) {
  
    }
    const model = encodeURIComponent(document.getElementById('model').value || 'flux');
    const width = Math.max(64, Math.min(2048, Number(document.getElementById('width').value) || 1024));
    const height = Math.max(64, Math.min(2048, Number(document.getElementById('height').value) || 1024));
    const seed = document.getElementById('randomSeed').checked ? randomInt(0, 999) : (Number(document.getElementById('seed').value) || 42);
    try {
      const encodedPrompt = encodeURIComponent(finalPrompt);
      const url = `${baseUrl}/prompt/${encodedPrompt}?model=${model}&width=${width}&height=${height}&seed=${seed}&nologo=true&safe=${model === "flux"}`;
      const res = await fetch(url);
      if (!res.ok) throw new Error('Network response not OK: ' + res.status);
      const blob = await res.blob();
      const imgUrl = URL.createObjectURL(blob);
      card.innerHTML = `<img src="${imgUrl}" alt="generated image">`;
      
      // Increment generation count and show popup if threshold is met
      if (!feedbackSubmitted && !hasRated) {
          generationCount++;
          if (generationCount >= 3) {
              showFeedbackPopup();
              localStorage.setItem("hasRated", true)
          }
      }

    } catch (err) {
      console.error(err);
      card.innerHTML = `<div class="muted" style="color:#ff6b6b;">Error generating image</div>`;
    } finally {
      isGenerating = false;
      generateBtn.disabled = false;
    }
  }
  generateBtn.addEventListener('click', generateImage);
  promptEl.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
      generateImage();
    }
  });
  window.addEventListener('beforeunload', saveSettingsToStorage);
</script>
<script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>

</body>
</html>