Spaces:

ANTIMOLL
/

dert

Running

App Files Files Community

dert / index.html

ANTIMOLL

Add 3 files

91c097c verified 9 months ago

raw

history blame contribute delete

57.8 kB

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