Spaces:

ANTIMOLL
/

dert

Running

File size: 57,751 Bytes

91c097c

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bove AI Image Generator</title>
  <link rel="icon" type="image/x-icon" href="https://user-uploads.perchance.org/file/dbd60a6a6c167cb9bdb7b9da1c030655.png">
  <link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    :root {
      --primary-color: #794bc4;
      --secondary-color: #5e3aa8;
      --accent-color: #9c7ae6;
    }
    
    body {
      font-family: 'Oxanium', sans-serif;
      background-color: #0f0e17;
      color: #ffffff;
    }
    
    .header-image {
      position: relative;
      overflow: hidden;
    }
    
    .galaxy-menu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background: rgba(15, 14, 23, 0.95);
      backdrop-filter: blur(10px);
      padding: 1rem;
      display: none;
      flex-direction: column;
      gap: 0.5rem;
      z-index: 100;
      border-radius: 0 0 0.6rem 0.6rem;
    }
    
    .galaxy-menu.active {
      display: flex;
    }
    
    .menu-item a {
      display: block;
      padding: 0.5rem 1rem;
      color: white;
      text-decoration: none;
      transition: all 0.3s ease;
      border-radius: 0.25rem;
    }
    
    .menu-item a:hover {
      background-color: var(--primary-color);
    }
    
    .menu-toggle {
      position: absolute;
      top: 1rem;
      left: 1rem;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 101;
      transition: all 0.3s ease;
    }
    
    .menu-toggle.active {
      background-color: var(--primary-color);
    }
    
    .menu-toggle i {
      font-size: 1.25rem;
      color: white;
    }
    
    .control-panel {
      background-color: #1a1830;
      border-radius: 0.6rem;
      padding: 1.5rem;
      margin: 1rem auto;
      max-width: 1000px;
    }
    
    .input-group {
      margin-bottom: 1rem;
    }
    
    .input-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
    }
    
    .input-row {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
    
    .input-row .input-group {
      flex: 1;
      min-width: 200px;
    }
    
    textarea, input, select {
      width: 100%;
      padding: 0.75rem;
      border-radius: 0.5rem;
      border: 1px solid #2d2b4a;
      background-color: #2d2b4a;
      color: white;
      font-family: inherit;
      resize: none;
    }
    
    textarea:focus, input:focus, select:focus {
      outline: none;
      border-color: var(--accent-color);
      box-shadow: 0 0 0 2px rgba(156, 122, 230, 0.3);
    }
    
    .prompt-container {
      position: relative;
    }
    
    .enhance-button {
      position: absolute;
      right: 0.5rem;
      bottom: 0.5rem;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 0.25rem;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .enhance-button:hover {
      background-color: var(--secondary-color);
    }
    
    .generate-button {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 1.1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 1rem;
    }
    
    .generate-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(121, 75, 196, 0.3);
    }
    
    .star-icon {
      display: inline-block;
      margin: 0 0.25rem;
    }
    
    .style-images-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 1rem;
      margin-bottom: 1rem;
    }
    
    .style-image-item {
      cursor: pointer;
      text-align: center;
      transition: all 0.3s ease;
      border-radius: 0.5rem;
      padding: 0.5rem;
      background-color: #2d2b4a;
    }
    
    .style-image-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .style-image-item.selected {
      background-color: var(--primary-color);
      box-shadow: 0 0 0 2px var(--accent-color);
    }
    
    .style-image {
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: 0.25rem;
      overflow: hidden;
      margin-bottom: 0.5rem;
    }
    
    .style-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .no-style-style {
      background: linear-gradient(135deg, #2d2b4a, #1a1830);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-color);
      font-weight: bold;
    }
    
    .selected-styles-container {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    
    .style-tag {
      background-color: var(--primary-color);
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    
    .remove-icon {
      cursor: pointer;
      font-size: 0.75rem;
      margin-left: 0.25rem;
    }
    
    .results-container {
      max-width: 1000px;
      margin: 1rem auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1rem;
    }
    
    .image-card {
      position: relative;
      background-color: #1a1830;
      border-radius: 0.5rem;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .image-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .image-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .image-loading-indicator {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba(15, 14, 23, 0.8);
      color: white;
    }
    
    .image-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: var(--accent-color);
      animation: spin 1s ease-in-out infinite;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .placeholder-text {
      text-align: center;
      grid-column: 1 / -1;
      padding: 2rem;
      color: #6b6a7a;
      font-style: italic;
    }
    
    .download-all-container {
      max-width: 1000px;
      margin: 1rem auto;
      display: flex;
      justify-content: center;
    }
    
    .download-all-button {
      padding: 0.75rem 1.5rem;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .download-all-button:hover {
      background-color: var(--secondary-color);
    }
    
    .enhance-popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    
    .enhance-popup-content {
      background-color: #1a1830;
      border-radius: 0.5rem;
      padding: 1.5rem;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    }
    
    .enhance-popup h3 {
      margin-top: 0;
      margin-bottom: 1rem;
      color: var(--accent-color);
    }
    
    .enhance-popup p {
      margin-bottom: 1rem;
      color: #b8b7c5;
    }
    
    .enhance-popup textarea {
      width: 100%;
      min-height: 150px;
      margin-bottom: 1rem;
    }
    
    .enhance-popup-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
    }
    
    .enhance-popup-buttons button {
      padding: 0.5rem 1rem;
      border-radius: 0.25rem;
      border: none;
      cursor: pointer;
      font-weight: 500;
    }
    
    #cancelEnhanceBtn {
      background-color: #2d2b4a;
      color: white;
    }
    
    #submitEnhanceBtn {
      background-color: var(--primary-color);
      color: white;
    }
    
    .enhance-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    
    .enhance-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: var(--accent-color);
      animation: spin 1s ease-in-out infinite;
      margin-bottom: 1rem;
    }
    
    .fullscreen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }
    
    .fullscreen-container {
      position: relative;
      max-width: 90%;
      max-height: 90%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .fullscreen-container img {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
    }
    
    .prev-btn, .next-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      border: none;
      color: white;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 1.25rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .prev-btn {
      left: -25px;
    }
    
    .next-btn {
      right: -25px;
    }
    
    .prev-btn:disabled, .next-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    
    .fullscreen-controls {
      position: absolute;
      bottom: -60px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 1rem;
    }
    
    .fullscreen-controls button {
      padding: 0.5rem 1rem;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
    }
    
    .zip-loading-indicator {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(15, 14, 23, 0.8);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
    
    .zip-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: var(--accent-color);
      animation: spin 1s ease-in-out infinite;
      margin-bottom: 1rem;
    }
    
    .collapsible-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      padding: 0.5rem 0;
    }
    
    .toggle-icon {
      transition: transform 0.3s ease;
    }
    
    .toggle-icon.expanded {
      transform: rotate(180deg);
    }
    
    .export-button {
      padding: 0.5rem 1rem;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      margin-top: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .link-vaporwave {
      color: var(--accent-color);
      text-decoration: none;
      font-weight: bold;
    }
    
    /* Aspect ratio specific styles */
    .image-card[data-aspect-ratio="1:1"] { aspect-ratio: 1/1; }
    .image-card[data-aspect-ratio="4:3"] { aspect-ratio: 4/3; }
    .image-card[data-aspect-ratio="16:9"] { aspect-ratio: 16/9; }
    .image-card[data-aspect-ratio="21:9"] { aspect-ratio: 21/9; }
    .image-card[data-aspect-ratio="3:2"] { aspect-ratio: 3/2; }
    .image-card[data-aspect-ratio="5:4"] { aspect-ratio: 5/4; }
    .image-card[data-aspect-ratio="2:1"] { aspect-ratio: 2/1; }
    .image-card[data-aspect-ratio="16:10"] { aspect-ratio: 16/10; }
    .image-card[data-aspect-ratio="32:9"] { aspect-ratio: 32/9; }
    .image-card[data-aspect-ratio="4:1"] { aspect-ratio: 4/1; }
    .image-card[data-aspect-ratio="17:10"] { aspect-ratio: 17/10; }
    .image-card[data-aspect-ratio="3:4"] { aspect-ratio: 3/4; }
    .image-card[data-aspect-ratio="9:16"] { aspect-ratio: 9/16; }
    .image-card[data-aspect-ratio="9:21"] { aspect-ratio: 9/21; }
    .image-card[data-aspect-ratio="2:3"] { aspect-ratio: 2/3; }
    .image-card[data-aspect-ratio="4:5"] { aspect-ratio: 4/5; }
    .image-card[data-aspect-ratio="1:2"] { aspect-ratio: 1/2; }
    .image-card[data-aspect-ratio="10:16"] { aspect-ratio: 10/16; }
    .image-card[data-aspect-ratio="9:32"] { aspect-ratio: 9/32; }
    .image-card[data-aspect-ratio="1:4"] { aspect-ratio: 1/4; }
    .image-card[data-aspect-ratio="10:17"] { aspect-ratio: 10/17; }
    
    /* Adjust loading indicators for super panoramic ratios */
    .image-card[data-aspect-ratio="1:4"] .image-spinner {
      width: 25px;
      height: 25px;
      border-width: 2px;
    }
    
    .image-card[data-aspect-ratio="1:4"] .image-loading-indicator p {
      font-size: 0.8rem;
      margin-top: 5px;
    }
    
    .image-card[data-aspect-ratio="4:1"] .image-loading-indicator {
      flex-direction: row;
      gap: 10px;
    }
    
    .image-card[data-aspect-ratio="4:1"] .image-spinner {
      width: 25px;
      height: 25px;
      border-width: 2px;
    }
    
    .image-card[data-aspect-ratio="4:1"] .image-loading-indicator p {
      font-size: 0.8rem;
      margin-top: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="header-image" style="background: url(https://user-uploads.perchance.org/file/2a919818dc1782895c9d30bdecbe2765.jpg) no-repeat left center; background-size: cover; height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; font-size: 1.55em; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: auto; border-radius: 0.6rem; text-align: center; max-width: 1000px; width:100%; position: relative;">
        <!-- Galaxy themed menu button -->
        <div class="menu-toggle" id="menuToggleBtn">
          <i class="fas fa-bars"></i>
        </div>
        
        <!-- Galaxy themed expanding menu -->
        <div class="galaxy-menu" id="galaxyMenuCtn">
          <div class="menu-item"><a href="https://perchance.org/bove-ai" target="_blank">Bove AI</a></div>
          <div class="menu-item"><a href="https://perchance.org/c0d3-story-forge" target="_blank">Story Forge</a></div>
          <div class="menu-item"><a href="https://perchance.org/ai-chat" target="_blank">AI Chat</a></div>
          <div class="menu-item"><a href="https://imgupscaler.com" target="_blank">Image Upscaler</a></div>
          <div class="menu-item"><a href="https://perchance.org/bove-flux-prompt-extractor" target="_blank">Prompt Extractor</a></div>  
          <div class="menu-item"><a href="https://discord.gg/GJ3fFStWF7" target="_blank">Discord</a></div>
        </div>
      </div>
    </header>
    
    <div class="control-panel">
      <div class="input-group">
        <div class="collapsible-header" id="scratchpadHeader">
          <label for="scratchpadInput">Scratchpad</label>
          <span class="toggle-icon">▼</span>
        </div>
        <div class="collapsible-content" id="scratchpadContent" hidden>
          <textarea id="scratchpadInput" placeholder="Use this area for notes, ideas or draft prompts..."></textarea>
          <button id="exportScratchpadBtn" class="export-button">
            <span>📝 Export to Text File</span>
          </button>
        </div>
      </div>
      
      <div class="input-group">
        <label for="promptInput">Image Prompt</label>
        <div class="prompt-container">
          <textarea id="promptInput" placeholder="Describe what you want to see..."></textarea>
          <button id="enhancePromptBtn" class="enhance-button" title="Enhance prompt with AI">
            <i class="fas fa-magic"></i>
          </button>
        </div>
      </div>
      
      <div class="input-row">
        <div class="input-group">
          <label for="countInput">Number of Images</label>
          <select id="countInput">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4" selected>4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
          </select>
        </div>
        
        <div class="input-group">
          <label for="aspectRatioSelect">Aspect Ratio</label>
          <select id="aspectRatioSelect">
            <optgroup label="Square">
              <option value="1:1">1:1 (Square)</option>
            </optgroup> 
            <optgroup label="Landscape">
              <option value="4:3">4:3 (Standard)</option>
              <option value="16:9">16:9 (Widescreen)</option>
              <option value="21:9">21:9 (Ultrawide)</option>
              <option value="3:2">3:2 (Photography)</option>
              <option value="5:4">5:4 (Classic Monitor)</option>
              <option value="2:1">2:1 (Cinematic)</option>
              <option value="16:10">16:10 (Widescreen Monitor)</option>
              <option value="32:9">32:9 (Super Ultrawide)</option>
              <option value="4:1">4:1 (Super Panoramic)</option>
              <option value="17:10">17:10 (Microsoft Surface)</option>
            </optgroup>   
            <optgroup label="Portrait">
              <option value="3:4">3:4 (Standard)</option>
              <option value="9:16">9:16 (Widescreen)</option>
              <option value="9:21">9:21 (Ultrawide)</option>
              <option value="2:3">2:3 (Photography)</option>
              <option value="4:5">4:5 (Classic Monitor)</option>
              <option value="1:2">1:2 (Cinematic)</option>
              <option value="10:16">10:16 (Widescreen Monitor)</option>
              <option value="9:32">9:32 (Super Ultrawide)</option>
              <option value="1:4">1:4 (Super Panoramic)</option>
              <option value="10:17">10:17 (Microsoft Surface)</option>
            </optgroup>
          </select>
        </div>
        
        <div class="input-group">
          <label for="seedInput">Seed</label>
          <input type="text" id="seedInput" placeholder="Leave empty for random" style="padding:11px;">
        </div>
      </div>
      
      <div class="input-group">
        <div style="display: flex; justify-content: left; align-items: center; margin-bottom: 10px;">
          <label style="position:relative; top:4px;">Our Styles</label>&nbsp;&nbsp;&nbsp;
          <select id="categoryFilter" style="max-width: 120px; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.1); color: white; border: 1px solid; border-top-color: #cd30c6; border-right-color: #ae308d; border-bottom-color: #6430cd; border-left-color: #ae308d; font-size:80%;">
            <option value="All">All Categories</option>
          </select>
        </div>
        <div class="style-images-container">
          <div class="style-image-item selected" data-value="" data-cat="All, Animation, Dreamscape, Anthro, Artistic, Realistic, Semi-Realistic">
            <div class="style-image no-style-style">No Style</div>
            <span>No Style</span>
          </div>
          <div class="style-image-item" data-value="Anime Action style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/2460688e472b17a1a8cd5e8dc082e99a.jpg"></div>
            <span>Anime Action</span>
          </div>
          <div class="style-image-item" data-value="Anime City at Night style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/fcefd0d2fcb0c2aabf1ad8714faef132.jpg"></div>
            <span>Anime City at Night</span>
          </div>
          <div class="style-image-item" data-value="Anime Portrait style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/6ca8fcb9cce0308cf3333d6bca8499b2.jpg"></div>
            <span>Anime Portrait</span>
          </div>
          <div class="style-image-item" data-value="Animorphic Allure style" data-cat="All, Anthro, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/02c3ddaa6e99bb6089be3ea244c1c132.jpg"></div>
            <span>Animorphic Allure</span>
          </div>
          <div class="style-image-item" data-value="Anthromorph Portrait style" data-cat="All, Anthro, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/31fd10f35a8eda214c821c4b037a7597.jpg"></div>
            <span>Anthromorph Portrait</span>
          </div>
          <div class="style-image-item" data-value="Anthromorph style" data-cat="All, Anthro, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/88ea23045944915c1555251f654e83f5.jpg"></div>
            <span>Anthromorph</span>
          </div>
          <div class="style-image-item" data-value="Arcane Grit style" data-cat="All, Realistic, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/35e45558fe6cc6ceaa99a52cb7285a01.jpg"></div>
            <span>Arcane Grit</span>
          </div>
          <div class="style-image-item" data-value="Aurora Mountains style" data-cat="All, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/bef5c041a28d15825b34f3006d55f518.jpg"></div>
            <span>Aurora Mountains</span>
          </div>
          <div class="style-image-item" data-value="Artistic Anthro style" data-cat="All, Artistic, Anthro">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/581ad3e82643394dcf58e722bb56b42d.jpg"></div>
            <span>Artistic Anthro</span>
          </div>
          <div class="style-image-item" data-value="Beyond Ink style" data-cat="All, Animation, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/58b023a021ba0518cd2aedafa7602942.jpg"></div>
            <span>Beyond Ink</span>
          </div>
          <div class="style-image-item" data-value="Canopy Cascade style" data-cat="All, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/046e0080919d27944f063c5aae853e0a.jpg"></div>
            <span>Canopy Cascade</span>
          </div>
          <div class="style-image-item" data-value="Chara Uniform POP style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/7d5ad035e3fe06d82433b9eab3269136.jpg"></div>
            <span>Chara Uniform POP</span>
          </div>
          <div class="style-image-item" data-value="Charcoal Medium style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/5d78b377ecfa0ed716449a584f77245b.jpg"></div>
            <span>Charcoal Medium</span>
          </div>
          <div class="style-image-item" data-value="Chibi style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/f0a09cb2c7cc291302029ec9fcbf9f7f.jpg"></div>
            <span>Chibi</span>
          </div>
          <div class="style-image-item" data-value="Chromaflux Anime style" data-cat="All, Dreamscape, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/1df78dc408a8e9e4f62b25db4da95660.jpg"></div>
            <span>Chromaflux Anime</span>
          </div>
          <div class="style-image-item" data-value="Chromaflux Realism style" data-cat="All, Dreamscape, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/cd47a0638f8ba87336e3117a872ecca0.jpg"></div>
            <span>Chromaflux Realism</span>
          </div>
          <div class="style-image-item" data-value="Cinematic style" data-cat="All, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/8d140ccf6a74d8a3e22fbddecfc3e016.jpg"></div>
            <span>Cinematic</span>
          </div>
          <div class="style-image-item" data-value="Claymation 3D style" data-cat="All, Animation, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/d336745211e0ea7eb8baf877824c3106.jpg"></div>
            <span>Claymation 3D</span>
          </div>
          <div class="style-image-item" data-value="Coloring Book Lineart style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/99bd59141db05bf7ebde5723359e46c4.jpg"></div>
            <span>Coloring Book Lineart</span>
          </div>
          <div class="style-image-item" data-value="Cyberfinned style" data-cat="All, Dreamscape, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/a21efdc657ed6b2fbd0bac7abaf88f6f.jpg"></div>
            <span>Cyberfinned</span>
          </div>
          <div class="style-image-item" data-value="Disney 2D style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/76b0df2c88bdf30eb90f4da839495ae0.jpg"></div>
            <span>Disney 2D</span>
          </div>
          <div class="style-image-item" data-value="EGL Fashionista Figurina style" data-cat="All, Animation, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/1c6971df56912d1813ab8b8fc7afb0b5.jpg"></div>
            <span>EGL Fashionista Figurina</span>
          </div>
          <div class="style-image-item" data-value="Egyptian Papyrus style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/a2305619171e6ae1a602e19dfc3a5442.jpg"></div>
            <span>Egyptian Papyrus</span>
          </div>
          <div class="style-image-item" data-value="Epic Scene style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/f3d59eaf4822861b0a2b63f3c326adb0.jpg"></div>
            <span>Epic Scene</span>
          </div>
          <div class="style-image-item" data-value="Ethereal Realism style" data-cat="All, Realistic, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/024a6e9b6b391d9553e087810c99b212.jpg"></div>
            <span>Ethereal Realism</span>
          </div>
          <div class="style-image-item" data-value="Faevored style" data-cat="All, Dreamscape, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/63edd2b5c84a8dd9bb4054ddc0bf9208.jpg"></div>
            <span>Faevored</span>
          </div>
          <div class="style-image-item" data-value="Fantasy World Map style" data-cat="All, Dreamscape, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/8bb0d785951c6f21bb719a30db410285.jpg"></div>
            <span>Fantasy World Map</span>
          </div>
          <div class="style-image-item" data-value="Flat Anthro style" data-cat="All, Animation, Anthro">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/140bf7f3b5020d9e0f5dc517b4742cf4.jpg"></div>
            <span>Flat Anthro</span>
          </div>
          <div class="style-image-item" data-value="Flat Toon style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/1734e41b9bffeeedc769891d8438300e.jpg"></div>
            <span>Flat Toon</span>
          </div>
          <div class="style-image-item" data-value="Fractured Soul style" data-cat="All, Realistic, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/c32947a598e90f98295a5b068f16c675.jpg"></div>
            <span>Fractured Soul</span>
          </div>
          <div class="style-image-item" data-value="Gothic Romance style" data-cat="All, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/8971ae9dbc599f14115fc1ec0c349bc6.jpg"></div>
            <span>Gothic Romance</span>
          </div>
          <div class="style-image-item" data-value="Greyscale Banksy style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/c63b3c584073b3e86984fcda3ac1dbd7.jpg"></div>
            <span>Greyscale Banksy</span>
          </div>
          <div class="style-image-item" data-value="Grim Seduction style" data-cat="All, Realistic, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/760404de5691bddf27fe615bc2c5dd01.jpg"></div>
            <span>Grim Seduction</span>
          </div>
          <div class="style-image-item" data-value="Historical Wendigo style" data-cat="All, Animation, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/5c5cf7f6d0e8ff2f8e7c08fddf661a83.jpg"></div>
            <span>Historical Wendigo</span>
          </div>
          <div class="style-image-item" data-value="Hue POP Double style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/08ecec16af7f68d0962e8101163fa539.jpg"></div>
            <span>Hue POP Double</span>
          </div>
          <div class="style-image-item" data-value="Hue POP Single style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/5e87ad284617e5c62b9afa03a1f0720a.jpg"></div>
            <span>Hue POP Single</span>
          </div>
          <div class="style-image-item" data-value="Impending Demise style" data-cat="All, Dreamscape, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/6067695baa19ad4ccea9f38d0fc4099f.jpg"></div>
            <span>Impending Demise</span>
          </div>
          <div class="style-image-item" data-value="Inkblot style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/4e9996f22885a198a2b193425afa963d.jpg"></div>
            <span>Inkblot</span>
          </div>
          <div class="style-image-item" data-value="Isometric Diorama style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/56ea6b3e84b1e6ecb7157ab0a246c531.jpg"></div>
            <span>Isometric Diorama</span>
          </div>
          <div class="style-image-item" data-value="Lineart: Heavy Negatives style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/9dc05f20e4713dfc1ba11c581129ed0a.jpg"></div>
            <span>Lineart: Heavy Negatives</span>
          </div>
          <div class="style-image-item" data-value="Lucid Dreams style" data-cat="All, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/7ceb02e2016c0e59d020ed44de9f9c08.jpg"></div>
            <span>Lucid Dreams</span>
          </div>
          <div class="style-image-item" data-value="Luminous Forest style" data-cat="All, Dreamscape, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/275a06acec0af0e84168cbb10d03fee5.jpg"></div>
            <span>Luminous Forest</span>
          </div>
          <div class="style-image-item" data-value="Morbid Opulence style" data-cat="All, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/4400e9c7409a317918e511841fd18525.jpg"></div>
            <span>Morbid Opulence</span>
          </div>
          <div class="style-image-item" data-value="Mosaic Radiance style" data-cat="All, Artistic, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/2f6a4c609921a72ba1828e1511c3d55c.jpg"></div>
            <span>Mosaic Radiance</span>
          </div>
          <div class="style-image-item" data-value="Muted POP Realistic style" data-cat="All, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/a0489dba334f1a7ad4fdb6a046feb4b2.jpg"></div>
            <span>Muted POP Realistic</span>
          </div>
          <div class="style-image-item" data-value="Muted POP Semi-Realistic style" data-cat="All, Animation, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/eba46559ec00154ccb32eaff8d035226.jpg"></div>
            <span>Muted POP Semi-Realistic</span>
          </div>
          <div class="style-image-item" data-value="Muted POP style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/f7695157403d3bdd8bed76e48b1f078e.jpg"></div>
            <span>Muted POP</span>
          </div>
          <div class="style-image-item" data-value="Mythic Furism style" data-cat="All, Anthro, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/1c4b9db2bb09cc6eb6fd8ba9e9cfa264.jpg"></div>
            <span>Mythic Furism</span>
          </div>
          <div class="style-image-item" data-value="NecroSynth Fusion style" data-cat="All, Dreamscape, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/5bda80f5e0348bab2e42c9bd6d51883d.jpg"></div>
            <span>NecroSynth Fusion</span>
          </div>
          <div class="style-image-item" data-value="Neon Rave style" data-cat="All, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/870bc9e51dec89fc99eef24af8505175.jpg"></div>
            <span>Neon Rave</span>
          </div>
          <div class="style-image-item" data-value="Noir Film style" data-cat="All, Realistic, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/81d791657cdd0f3efef65f60950c8788.jpg"></div>
            <span>Noir Film</span>
          </div>
          <div class="style-image-item" data-value="Novel Illustration style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/fdbeb6aae89090bb90a57ba239af426b.jpg"></div>
            <span>Novel Illustration</span>
          </div>
          <div class="style-image-item" data-value="Oil Paint Portrait style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/eb22bb6a1b515db4de5155e1e679eee7.jpg"></div>
            <span>Oil Paint Portrait</span>
          </div>
          <div class="style-image-item" data-value="Oil Paint Colorism style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/f64bcec84260e4376c7a27ad5cc9569b.jpg"></div>
            <span>Oil Paint Colorism</span>
          </div>
          <div class="style-image-item" data-value="Painted Vector style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/aadf78418e2cd653362afc54ad49c13c.jpg"></div>
            <span>Painted Vector</span>
          </div>
          <div class="style-image-item" data-value="Pretty Pixels style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/43a9146e4d8cfe1c70a0d13194daa982.jpg"></div>
            <span>Pretty Pixels</span>
          </div>
          <div class="style-image-item" data-value="Prisma style" data-cat="All, Dreamscape, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/556b68a667ae1e7fbf5e635a5e0e8ea5.jpg"></div>
            <span>Prisma</span>
          </div>
          <div class="style-image-item" data-value="Royal Flush style" data-cat="All, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/b427004dfc4141a30ee0932345a7c025.jpg"></div>
            <span>Royal Flush</span>
          </div>
          <div class="style-image-item" data-value="Scribble Doodle style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/56fa1cb7995109fbe5466d1743cf8c1d.jpg"></div>
            <span>Scribble Doodle</span>
          </div>
          <div class="style-image-item" data-value="Slime Time style" data-cat="All, Artistic, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/41a594109156fa606e1fcca2d547a6d4.jpg"></div>
            <span>Slime Time</span>
          </div>
          <div class="style-image-item" data-value="Slugbox Imitation style" data-cat="All, Artistic, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/babef7b3bf431fafc302a5638711f176.jpg"></div>
            <span>Slugbox Imitation</span>
          </div>
          <div class="style-image-item" data-value="Splintered Visions style" data-cat="All, Dreamscape, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/1f94b3185727e325e53ecfb06e5b17d2.jpg"></div>
            <span>Splintered Visions</span>
          </div>
          <div class="style-image-item" data-value="Streetwild Anthro style" data-cat="All, Anthro, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/d628cdf7afd10c3abc3cb9726c840e39.jpg"></div>
            <span>Streetwild Anthro</span>
          </div>
          <div class="style-image-item" data-value="Streetwild style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/245ca4b2f48b9df6aaf30c469233a265.jpg"></div>
            <span>Streetwild</span>
          </div>
          <div class="style-image-item" data-value="Stylized Anthro style" data-cat="All, Anthro, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/b9fe88034748b62b96fca26fbb945c40.jpg"></div>
            <span>Stylized Anthro</span>
          </div>
          <div class="style-image-item" data-value="Suffering Souls style" data-cat="All, Dreamscape, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/a646219694345e5c55da901600aadc67.jpg"></div>
            <span>Suffering Souls</span>
          </div>
          <div class="style-image-item" data-value="TechnoBlossom Anime style" data-cat="All, Dreamscape, Animation">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/413bed57f177b06bee21510ac8c5c7d7.jpg"></div>
            <span>TechnoBlossom Anime</span>
          </div>
          <div class="style-image-item" data-value="TechnoBlossom style" data-cat="All, Dreamscape, Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/cc06751e2921de278c323672c4c48b69.jpg"></div>
            <span>TechnoBlossom</span>
          </div>
          <div class="style-image-item" data-value="Temple Ambience style" data-cat="All, Semi-Realistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/76b7fb24b2c1b82a80962805b5dbc14a.jpg"></div>
            <span>Temple Ambience</span>
          </div>
          <div class="style-image-item" data-value="Traditional Asian style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/a5e56c4f5afafa11a0f20e1d3f475fe9.jpg"></div>
            <span>Traditional Asian</span>
          </div>
          <div class="style-image-item" data-value="Veil of Shadows style" data-cat="All, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/ff3e0547cbcb23ef216fe9e6f60f2d30.jpg"></div>
            <span>Veil of Shadows</span>
          </div>
          <div class="style-image-item" data-value="Watercolor style" data-cat="All, Artistic">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/b7a27c314eb1c16e1c36f9acfa680c7b.jpg"></div>
            <span>Watercolor</span>
          </div>
          <div class="style-image-item" data-value="Whimsy style" data-cat="All, Artistic, Dreamscape">
            <div class="style-image"><img src="https://user-uploads.perchance.org/file/086aae9b4eef9c8dbc0f289315a85b72.jpg"></div>
            <span>Whimsy</span>
          </div>
        </div>
        <div class="selected-styles-container">
          <!-- Selected styles tags will appear here -->
        </div>
      </div>
      
      <button id="generateBtn" class="generate-button">
        <span class="star-icon">✨</span> CREATE <span class="star-icon">✨</span>
      </button>
    </div>
    
    <div id="resultsContainer" class="results-container">
      <!-- Generated images will appear here -->
      <div class="placeholder-text">Your cosmic creations will appear here.</div>
    </div>
    
    <div id="generateMoreContainer" class="download-all-container" hidden>
      <button id="generateMoreBtn" class="download-all-button">
        <i class="fas fa-plus"></i> Generate More Images
      </button>
    </div>
    
    <div id="downloadAllContainer" class="download-all-container" hidden>
      <button id="downloadAllBtn" class="download-all-button">
        <i class="fas fa-download"></i> Download All Images as ZIP
      </button>
    </div>
    
    <div id="backToTopContainer" class="download-all-container" hidden>
      <button id="backToTopBtn" class="download-all-button">
        <i class="fas fa-arrow-up"></i> Back to Top
      </button>
    </div>
  </div>
  
  <div style="width:100%; max-width: 1000px; margin:auto; text-align:center; padding:10px;"><span id="userGens"></span><p style="font-size: 70%;">[fun]</p></div>

  <script>
    // Initialize counter from localStorage
    let counter = parseInt(localStorage.getItem("counter")) || 0;
    localStorage.setItem('counter', counter);
    document.getElementById('userGens').innerHTML = `You have personally generated <strong class="link-vaporwave">${counter}</strong> images on this device.`;
    
    function refreshCount() {
      let counter = parseInt(localStorage.getItem("counter"));
      counter++;
      localStorage.setItem('counter', counter);
      document.getElementById('userGens').innerHTML = `You have generated <strong class="link-vaporwave">${counter}</strong> images on this device. Like Bove? Consider donating to help make it better!`;
    }
    
    // Array to store the order of selected styles
    let selectedStylesOrder = ["No Style"];
    
    // Function to auto-resize a textarea based on its content
    function autoResizeTextarea(textarea) {
      // Reset height to auto so we can correctly calculate the new height
      textarea.style.height = 'auto';
      // Set the height to match the scroll height (the height of the content)
      textarea.style.height = textarea.scrollHeight + 10 + 'px';
    }
    
    // Function to save form values to local storage
    function saveFormToLocalStorage() {
      // Save scratchpad content
      localStorage.scratchpadContent = document.getElementById('scratchpadInput').value;
      
      // Save image prompt
      localStorage.imagePrompt = document.getElementById('promptInput').value;
      
      // Save number of images
      localStorage.imageCount = document.getElementById('countInput').value;
      
      // Save aspect ratio
      localStorage.aspectRatio = document.getElementById('aspectRatioSelect').value;
      
      // Save seed
      localStorage.imageSeed = document.getElementById('seedInput').value;
      
      // Save selected styles and their order
      localStorage.selectedStylesOrder = JSON.stringify(selectedStylesOrder);
    }
    
    // Function to load form values from local storage
    function loadFormFromLocalStorage() {
      // Load scratchpad content if it exists
      if (localStorage.scratchpadContent) {
        document.getElementById('scratchpadInput').value = localStorage.scratchpadContent;
      }
      
      // Load image prompt if it exists
      if (localStorage.imagePrompt) {
        document.getElementById('promptInput').value = localStorage.imagePrompt;
      }
      
      // Load number of images if it exists
      if (localStorage.imageCount) {
        document.getElementById('countInput').value = localStorage.imageCount;
      }
      
      // Load aspect ratio if it exists
      if (localStorage.aspectRatio) {
        document.getElementById('aspectRatioSelect').value = localStorage.aspectRatio;
      }
      
      // Load seed if it exists
      if (localStorage.imageSeed) {
        document.getElementById('seedInput').value = localStorage.imageSeed;
      }
      
      // Load selected styles order if it exists
      if (localStorage.selectedStylesOrder) {
        try {
          selectedStylesOrder = JSON.parse(localStorage.selectedStylesOrder);
          
          // If the loaded array is empty, default to "No Style"
          if (selectedStylesOrder.length === 0) {
            selectedStylesOrder = ["No Style"];
          }
          
          // Update the UI based on loaded styles
          updateStyleSelection();
          
          // Update the selected styles tags
          renderSelectedStyleTags();
        } catch (error) {
          console.error('Error loading saved styles order:', error);
          selectedStylesOrder = ["No Style"];
          updateStyleSelection();
        }
      }
      
      // Auto-resize textareas after loading their content
      autoResizeTextarea(document.getElementById('scratchpadInput'));
      autoResizeTextarea(document.getElementById('promptInput'));
    }
    
    // Function to update the UI based on selectedStylesOrder
    function updateStyleSelection() {
      // First, remove the 'selected' class from all style items
      document.querySelectorAll('.style-image-item').forEach(item => {
        item.classList.remove('selected');
      });
      
      // Then, add the 'selected' class to items in the selectedStylesOrder
      selectedStylesOrder.forEach(styleName => {
        // Find the style item with matching span text
        const styleItems = document.querySelectorAll('.style-image-item');
        for (let item of styleItems) {
          const spanText = item.querySelector('span').textContent;
          if (spanText === styleName) {
            item.classList.add('selected');
            break;
          }
        }
      });
    }
    
    // Setup collapsible scratchpad
    const scratchpadHeader = document.getElementById('scratchpadHeader');
    const scratchpadContent = document.getElementById('scratchpadContent');
    const toggleIcon = scratchpadHeader.querySelector('.toggle-icon');

    scratchpadHeader.addEventListener('click', function() {
      scratchpadContent.hidden = !scratchpadContent.hidden;
      toggleIcon.classList.toggle('expanded');
      
      // Auto-resize scratchpad textarea when revealing it
      if (!scratchpadContent.hidden) {
        autoResizeTextarea(document.getElementById('scratchpadInput'));
      }
    });
    
    // Add event listeners for auto-resizing textareas
    document.getElementById('scratchpadInput').addEventListener('focus', () => autoResizeTextarea(document.getElementById('scratchpadInput')));
    document.getElementById('scratchpadInput').addEventListener('input', () => autoResizeTextarea(document.getElementById('scratchpadInput')));
    document.getElementById('scratchpadInput').addEventListener('change', () => autoResizeTextarea(document.getElementById('scratchpadInput')));
    
    document.getElementById('promptInput').addEventListener('focus', () => autoResizeTextarea(document.getElementById('promptInput')));
    document.getElementById('promptInput').addEventListener('input', () => autoResizeTextarea(document.getElementById('promptInput')));
    document.getElementById('promptInput').addEventListener('change', () => autoResizeTextarea(document.getElementById('promptInput')));
    
    // Aspect ratio to maximum dimensions lookup table
    // Optimized dimensions that maintain aspect ratio and use less than 1,638,401 pixels
    const aspectRatioDimensions = {
      "1:1": { width: 1280, height: 1280 },
      "16:9": { width: 1707, height: 960 },
      "9:16": { width: 960, height: 1707 },
      "4:3": { width: 1479, height: 1109 },
      "3:4": { width: 1109, height: 1479 },
      "3:2": { width: 1568, height: 1045 },
      "2:3": { width: 1045, height: 1568 },
      "21:9": { width: 1957, height: 839 },
      "9:21": { width: 839, height: 1957 },
      "5:4": { width: 1431, height: 1145 },
      "4:5": { width: 1145, height: 1431 },
      "16:10": { width: 1620, height: 1013 },
      "10:16": { width: 1013, height: 1620 },
      "6:7": { width: 1184, height: 1382 },
      "7:6": { width: 1382, height: 1184 },
      "18:9": { width: 1707, height: 853 },
      "9:18": { width: 853, height: 1707 },
      "2:1": { width: 1810, height: 905 },
      "1:2": { width: 905, height: 1810 },
      "4:1": { width: 2560, height: 640 },
      "1:4": { width: 640, height: 2560 }
    };
    
    // Add input and change event listeners to save form values
    document.getElementById('scratchpadInput').addEventListener('input', saveFormToLocalStorage);
    document.getElementById('promptInput').addEventListener('input', saveFormToLocalStorage);
    document.getElementById('countInput').addEventListener('change', saveFormToLocalStorage);
    document.getElementById('aspectRatioSelect').addEventListener('change', saveFormToLocalStorage);
    document.getElementById('seedInput').addEventListener('input', saveFormToLocalStorage);
    
    // Setup style image selection
    document.querySelectorAll('.style-image-item').forEach(item => {
      item.addEventListener('click', function() {
        const styleSpan = this.querySelector('span');
        const styleName = styleSpan.textContent;
        const isNoStyle = styleName === "No Style";
        
        if (isNoStyle) {
          // If clicking on "No Style", clear all other styles
          selectedStylesOrder = ["No Style"];
        } else {
          // If clicking on a style that's not "No Style"
          
          // Remove "No Style" from the array if it exists
          const noStyleIndex = selectedStylesOrder.indexOf("No Style");
          if (noStyleIndex > -1) {
            selectedStylesOrder.splice(noStyleIndex, 1);
          }
          
          // Check if the style is already selected
          const index = selectedStylesOrder.indexOf(styleName);
          if (index > -1) {
            // If already selected, remove it
            selectedStylesOrder.splice(index, 1);
          } else {
            // If not selected, add it to the end of the array
            selectedStylesOrder.push(styleName);
          }
          
          // If no styles are selected, revert to "No Style"
          if (selectedStylesOrder.length === 0) {
            selectedStylesOrder = ["No Style"];
          }
        }
        
        // Update the UI to reflect the new selection state
        updateStyleSelection();
        
        // Update the selected styles tags
        renderSelectedStyleTags();
        
        // Save to local storage after changing styles
        saveFormToLocalStorage();
      });
    });
    
    // Function to render the selected style tags
    function renderSelectedStyleTags() {
      const selectedStylesContainer = document.querySelector('.selected-styles-container');
      selectedStylesContainer.innerHTML = '';
      
      // Filter out "No Style" before rendering tags
      selectedStylesOrder.filter(style => style !== "No Style").forEach(style => {
        const tag = document.createElement('div');
        tag.className = 'style-tag';
        tag.innerHTML = `${style} <span class="remove-icon">✕</span>`;
        
        tag.addEventListener('click', () => {
          // Remove this style from the order array
          const index = selectedStylesOrder.indexOf(style);
          if (index > -1) {
            selectedStylesOrder.splice(index, 1);
          }
          
          // If no styles are left, revert to "No Style"
          if (selectedStylesOrder.length === 0) {
            selectedStylesOrder = ["No Style"];
          }
          
          // Update the UI
          updateStyleSelection();
          
          // Update tags
          renderSelectedStyleTags();
          
          // Save to local storage after removing a style
          saveFormToLocalStorage();
        });
        
        selectedStylesContainer.appendChild(tag);
      });
    }
    
    // Function to get all selected styles
    function getSelectedStyles() {
      return [...selectedStylesOrder]; // Return a copy to prevent unintended modifications
    }
    
    // Load saved values from local storage when page loads
    window.addEventListener('load', function() {
      loadFormFromLocalStorage();
      
      // Auto-resize textareas on page load
      autoResizeTextarea(document.getElementById('scratchpadInput'));
      autoResizeTextarea(document.getElementById('promptInput'));
      
      // Populate the category dropdown
      populateCategoryDropdown();
    });
    
    // Initial render of selected style tags
    renderSelectedStyleTags();
    
    // Export scratchpad content to text file
    document.getElementById('exportScratchpadBtn').addEventListener('click', function() {
      const scratchpadContent = document.getElementById('scratchpadInput').value;
      if (!scratchpadContent.trim()) {
        alert('Scratchpad is empty. Please add some content before exporting.');
        return;
      }
      
      // Create a blob with the text content
      const blob = new Blob([scratchpadContent], { type: 'text/plain' });
      
      // Create a temporary link element
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = `scratchpad-${new Date().toISOString().slice(0, 10)}.txt`;
      
      // Append to the document, click it, and remove it
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      
      // Clean up the URL
      URL.revokeObjectURL(a.href);
    });
    
    // Add click event to generate button
    document.getElementById('generateBtn').addEventListener('click', () => generateImages(true));
    
    // Add click event to generate more button
    document.getElementById('generateMoreBtn').addEventListener('click', () => generateImages(false));
    
    // Add click event for back to top button
    document.getElementById('backToTopBtn').addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
    
    // Extract unique categories from style items and populate dropdown
    function populateCategoryDropdown() {
      const categorySet = new Set();
      const styleItems = document.querySelectorAll('.style-image-item');
      
      // Extract all categories from data-cat attributes
      styleItems.forEach(item => {
        const categories = item.dataset.cat.split(',').map(cat => cat.trim());
        categories.forEach(cat => categorySet.add(cat));
      });
      
      // Sort categories alphabetically
      const sortedCategories = Array.from(categorySet).sort();
      
      // Add categories to dropdown
      const categoryFilter = document.getElementById('categoryFilter');
      sortedCategories.forEach(category => {
        // Skip "All" as it's already added
        if (category !== "All") {
          const option = document.createElement('option');
          option.value = category;
          option.textContent = category;
          categoryFilter.appendChild(option);
        }
      });
      
      // Add event listener to filter styles
      categoryFilter.addEventListener('
</html>