Spaces:

ANTIMOLL
/

dert

Running

App Files Files Community

ANTIMOLL commited on May 2, 2025

Commit

91c097c

verified ·

1 Parent(s): e99d0d3

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +1400 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Dert
-emoji: 👁
 colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: dert
+emoji: 🐳
 colorFrom: blue
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1400 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ сделай сайт рабочим