Spaces:

Boobs00
/

inferno

Running

App Files Files Community

inferno / index.html

Boobs00

Add 3 files

0508ebd verified 12 months ago

raw

history blame contribute delete

68.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>INFERNO - Uncensored AI Image Generator</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	:root {
	--primary: #ff2d2d;
	--primary-dark: #cc0000;
	--secondary: #ff5e5e;
	--accent: #ff9a9a;
	--dark: #1a1a1a;
	--light: #f5f5f5;
	--danger: #ff3860;
	--warning: #ffdd57;
	--success: #23d160;
	}

	body {
	background-color: var(--dark);
	color: var(--light);
	font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	}

	.inferno-bg {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	}

	.model-card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	}

	.model-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(255, 45, 45, 0.3);
	border-color: var(--primary);
	}

	.model-card.selected {
	background-color: rgba(255, 45, 45, 0.1);
	border-color: var(--primary);
	}

	.tab-active {
	border-bottom: 3px solid var(--primary);
	font-weight: 700;
	color: var(--light);
	}

	.image-placeholder {
	background: linear-gradient(45deg, #2a2a2a 25%, #333 25%, #333 50%, #2a2a2a 50%, #2a2a2a 75%, #333 75%, #333 100%);
	background-size: 20px 20px;
	}

	.prompt-textarea:focus {
	box-shadow: 0 0 0 2px rgba(255, 45, 45, 0.5);
	border-color: var(--primary);
	}

	.slider-thumb::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
	border: 2px solid var(--light);
	}

	.slider-thumb::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
	border: 2px solid var(--light);
	}

	.nsfw-toggle {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 30px;
	}

	.nsfw-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	}

	.nsfw-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 30px;
	}

	.nsfw-slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
	}

	input:checked + .nsfw-slider {
	background-color: var(--danger);
	}

	input:checked + .nsfw-slider:before {
	transform: translateX(30px);
	}

	.error-toast {
	animation: slideIn 0.5s, fadeOut 0.5s 2.5s forwards;
	}

	@keyframes slideIn {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
	}

	@keyframes fadeOut {
	to { opacity: 0; }
	}

	.pagination-btn.active {
	background-color: var(--primary);
	color: white;
	}

	.loading-spinner {
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	.nsfw-badge {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 56, 96, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(255, 56, 96, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 56, 96, 0); }
	}
	</style>
	</head>
	<body class="bg-gray-900 text-gray-100">
	<!-- Error Toast Container -->
	<div id="toast-container" class="fixed bottom-4 right-4 space-y-2 z-50"></div>

	<!-- Header -->
	<header class="inferno-bg text-white py-4 shadow-lg sticky top-0 z-40">
	<div class="container mx-auto px-4">
	<div class="flex items-center justify-between">
	<div class="flex items-center space-x-3">
	<i class="fas fa-fire text-3xl"></i>
	<h1 class="text-2xl font-bold">INFERNO</h1>
	<span class="nsfw-badge bg-red-600 text-xs px-2 py-1 rounded-full ml-2">NSFW</span>
	</div>
	<div class="flex items-center space-x-4">
	<button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-red-800 transition">
	<i class="fas fa-moon"></i>
	</button>
	<div class="relative group">
	<button class="flex items-center space-x-2 bg-red-700 hover:bg-red-800 px-4 py-2 rounded-lg transition">
	<i class="fas fa-user"></i>
	<span>Account</span>
	</button>
	<div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg py-1 z-50 hidden group-hover:block">
	<a href="#" class="block px-4 py-2 hover:bg-gray-700">Profile</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700">Settings</a>
	<a href="#" class="block px-4 py-2 hover:bg-gray-700">Sign out</a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<main class="container mx-auto px-4 py-8">
	<div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
	<!-- Tabs Navigation -->
	<div class="flex border-b border-gray-700">
	<button id="multi-model-tab" class="tab-active px-6 py-4 text-white font-bold flex items-center">
	<i class="fas fa-layer-group mr-2"></i> Multi-Model Inferno
	</button>
	<button id="single-model-tab" class="px-6 py-4 text-gray-400 font-medium flex items-center hover:text-white transition">
	<i class="fas fa-cube mr-2"></i> Single Model
	</button>
	<button id="batch-tab" class="px-6 py-4 text-gray-400 font-medium flex items-center hover:text-white transition">
	<i class="fas fa-clone mr-2"></i> Batch Mode
	</button>
	<button id="settings-tab" class="px-6 py-4 text-gray-400 font-medium flex items-center ml-auto hover:text-white transition">
	<i class="fas fa-cog mr-2"></i> Settings
	</button>
	</div>

	<!-- Multi-Model Tab Content -->
	<div id="multi-model-content" class="p-6">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Left Column - Inputs -->
	<div class="lg:col-span-2 space-y-6">
	<!-- NSFW Toggle -->
	<div class="flex items-center justify-between bg-gray-700 p-4 rounded-lg">
	<div class="flex items-center space-x-2">
	<i class="fas fa-exclamation-triangle text-red-500"></i>
	<span class="font-medium">NSFW Mode</span>
	</div>
	<label class="nsfw-toggle">
	<input type="checkbox" id="nsfw-toggle" checked>
	<span class="nsfw-slider"></span>
	</label>
	</div>

	<!-- Prompt Input -->
	<div class="bg-gray-700 p-4 rounded-lg">
	<div class="flex items-center justify-between mb-2">
	<label class="block text-white font-medium">Your Raw Prompt</label>
	<button id="random-prompt" class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded transition">
	<i class="fas fa-dice mr-1"></i> Randomize
	</button>
	</div>
	<textarea id="prompt-input" class="prompt-textarea w-full h-32 px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-red-500 text-white" placeholder="Let your imagination run wild... describe exactly what you want to see, no matter how depraved or exquisite...">A cybernetic dominatrix with glowing crimson eyes and liquid metal skin stands atop a neon-lit skyscraper, her whip crackling with electricity as the city burns below, ultra-detailed, hyper-realistic, 8K</textarea>
	</div>

	<!-- Negative Prompt -->
	<div class="bg-gray-700 p-4 rounded-lg">
	<label class="block text-white font-medium mb-2">Negative Prompt</label>
	<textarea id="negative-prompt" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-red-500 text-white" placeholder="What you don't want to see...">[deformed \| disfigured], poorly drawn, [bad : wrong] anatomy, [extra \| missing \| floating \| disconnected] limb, (mutated hands and fingers), blurry, text, fuzziness, censored, low quality, artifacts</textarea>
	</div>

	<!-- Advanced Settings Accordion -->
	<div class="bg-gray-700 p-4 rounded-lg">
	<div class="flex items-center justify-between cursor-pointer" id="advanced-settings-toggle">
	<h3 class="text-white font-medium">Advanced Settings</h3>
	<i class="fas fa-chevron-down text-gray-400 transition-transform duration-300"></i>
	</div>
	<div id="advanced-settings-content" class="mt-4 hidden space-y-4">
	<!-- Dimensions -->
	<div class="grid grid-cols-2 gap-4">
	<div>
	<label class="block text-gray-300 text-sm mb-1">Width</label>
	<div class="flex items-center">
	<input type="range" min="256" max="1216" step="32" value="768" class="slider-thumb w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
	<span id="width-value" class="ml-3 text-white w-16 text-center">768</span>
	</div>
	</div>
	<div>
	<label class="block text-gray-300 text-sm mb-1">Height</label>
	<div class="flex items-center">
	<input type="range" min="256" max="1216" step="32" value="768" class="slider-thumb w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
	<span id="height-value" class="ml-3 text-white w-16 text-center">768</span>
	</div>
	</div>
	</div>

	<!-- Inference Steps and Guidance -->
	<div class="grid grid-cols-2 gap-4">
	<div>
	<label class="block text-gray-300 text-sm mb-1">Inference Steps</label>
	<div class="flex items-center">
	<input type="range" min="1" max="100" step="1" value="30" class="slider-thumb w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
	<span id="steps-value" class="ml-3 text-white w-16 text-center">30</span>
	</div>
	</div>
	<div>
	<label class="block text-gray-300 text-sm mb-1">Guidance Scale</label>
	<div class="flex items-center">
	<input type="range" min="1" max="30" step="0.1" value="7.5" class="slider-thumb w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
	<span id="cfg-value" class="ml-3 text-white w-16 text-center">7.5</span>
	</div>
	</div>
	</div>

	<!-- Seed Control -->
	<div>
	<label class="block text-gray-300 text-sm mb-1">Seed</label>
	<div class="flex items-center">
	<input type="number" id="seed-input" class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-red-500 text-white" value="-1">
	<button id="randomize-seed" class="ml-3 bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded-lg transition">
	<i class="fas fa-random mr-2"></i> Randomize
	</button>
	</div>
	</div>

	<!-- Sampler Selection -->
	<div>
	<label class="block text-gray-300 text-sm mb-1">Sampler</label>
	<select id="sampler-select" class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-red-500 text-white">
	<option value="euler_a">Euler a</option>
	<option value="euler">Euler</option>
	<option value="lms">LMS</option>
	<option value="heun">Heun</option>
	<option value="dpm2">DPM2</option>
	<option value="dpm2_a">DPM2 a</option>
	<option value="dpmpp_2s_a">DPM++ 2S a</option>
	<option value="dpmpp_2m">DPM++ 2M</option>
	<option value="dpmpp_sde">DPM++ SDE</option>
	<option value="ddim">DDIM</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Model Selection -->
	<div class="bg-gray-700 p-4 rounded-lg">
	<div class="flex items-center justify-between mb-2">
	<label class="block text-white font-medium">Select Models (Max 4)</label>
	<span id="selected-count" class="text-xs bg-red-600 px-2 py-1 rounded">4/4 selected</span>
	</div>
	<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
	<!-- Model Cards -->
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" checked data-model="sd15">
	<div>
	<h4 class="font-medium text-white">Stable Diffusion 1.5</h4>
	<p class="text-xs text-gray-400">512x512 resolution</p>
	</div>
	</div>
	</div>
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" checked data-model="sd21">
	<div>
	<h4 class="font-medium text-white">Stable Diffusion 2.1</h4>
	<p class="text-xs text-gray-400">768x768 resolution</p>
	</div>
	</div>
	</div>
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" data-model="openjourney">
	<div>
	<h4 class="font-medium text-white">OpenJourney</h4>
	<p class="text-xs text-gray-400">Artistic style</p>
	</div>
	</div>
	</div>
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" data-model="dreamlike">
	<div>
	<h4 class="font-medium text-white">Dreamlike</h4>
	<p class="text-xs text-gray-400">Photorealistic</p>
	</div>
	</div>
	</div>
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" data-model="anything">
	<div>
	<h4 class="font-medium text-white">Anything V3</h4>
	<p class="text-xs text-gray-400">Anime style</p>
	</div>
	</div>
	</div>
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" data-model="deliberate">
	<div>
	<h4 class="font-medium text-white">Deliberate</h4>
	<p class="text-xs text-gray-400">Detailed images</p>
	</div>
	</div>
	</div>
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" data-model="realistic">
	<div>
	<h4 class="font-medium text-white">Realistic Vision</h4>
	<p class="text-xs text-gray-400">Hyper-realistic</p>
	</div>
	</div>
	</div>
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" data-model="hentai">
	<div>
	<h4 class="font-medium text-white">Hentai Diffusion</h4>
	<p class="text-xs text-gray-400">NSFW content</p>
	</div>
	</div>
	</div>
	<div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
	<div class="flex items-center">
	<input type="checkbox" class="mr-2 model-checkbox" data-model="waifu">
	<div>
	<h4 class="font-medium text-white">Waifu Diffusion</h4>
	<p class="text-xs text-gray-400">Anime characters</p>
	</div>
	</div>
	</div>
	</div>
	<div class="mt-3 flex justify-between">
	<button id="random-models" class="text-red-400 hover:text-red-300 text-sm font-medium">
	<i class="fas fa-random mr-1"></i> Randomize Models
	</button>
	<button id="clear-models" class="text-gray-400 hover:text-gray-300 text-sm font-medium">
	<i class="fas fa-times mr-1"></i> Clear Selection
	</button>
	</div>
	</div>
	</div>

	<!-- Right Column - Output -->
	<div class="space-y-6">
	<!-- Generate Button -->
	<button id="generate-button" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition flex items-center justify-center">
	<i class="fas fa-fire mr-2"></i> IGNITE CREATION
	</button>

	<!-- Generation Stats -->
	<div class="bg-gray-700 p-4 rounded-lg">
	<div class="grid grid-cols-3 gap-2 text-center">
	<div>
	<div class="text-xs text-gray-400">Queue</div>
	<div id="queue-count" class="font-bold">0</div>
	</div>
	<div>
	<div class="text-xs text-gray-400">ETA</div>
	<div id="eta-time" class="font-bold">-</div>
	</div>
	<div>
	<div class="text-xs text-gray-400">Cost</div>
	<div id="generation-cost" class="font-bold">0.00</div>
	</div>
	</div>
	</div>

	<!-- Model Outputs -->
	<div class="bg-gray-700 p-4 rounded-lg">
	<h3 class="text-white font-medium mb-3">Model Outputs</h3>
	<div class="grid grid-cols-2 gap-3">
	<!-- Output Placeholders -->
	<div id="output-1" class="image-placeholder rounded-lg h-40 flex items-center justify-center relative">
	<span class="text-gray-400">Stable Diffusion 1.5</span>
	<div class="absolute bottom-2 right-2 flex space-x-1">
	<button class="download-btn hidden bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-download text-xs"></i>
	</button>
	<button class="upscale-btn hidden bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-expand text-xs"></i>
	</button>
	</div>
	</div>
	<div id="output-2" class="image-placeholder rounded-lg h-40 flex items-center justify-center relative">
	<span class="text-gray-400">Stable Diffusion 2.1</span>
	<div class="absolute bottom-2 right-2 flex space-x-1">
	<button class="download-btn hidden bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-download text-xs"></i>
	</button>
	<button class="upscale-btn hidden bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-expand text-xs"></i>
	</button>
	</div>
	</div>
	<div id="output-3" class="image-placeholder rounded-lg h-40 flex items-center justify-center relative">
	<span class="text-gray-400">Output 3</span>
	<div class="absolute bottom-2 right-2 flex space-x-1">
	<button class="download-btn hidden bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-download text-xs"></i>
	</button>
	<button class="upscale-btn hidden bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-expand text-xs"></i>
	</button>
	</div>
	</div>
	<div id="output-4" class="image-placeholder rounded-lg h-40 flex items-center justify-center relative">
	<span class="text-gray-400">Output 4</span>
	<div class="absolute bottom-2 right-2 flex space-x-1">
	<button class="download-btn hidden bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-download text-xs"></i>
	</button>
	<button class="upscale-btn hidden bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-expand text-xs"></i>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Gallery -->
	<div class="bg-gray-700 p-4 rounded-lg">
	<div class="flex items-center justify-between mb-3">
	<h3 class="text-white font-medium">Your Inferno Gallery</h3>
	<div class="flex space-x-2">
	<button id="clear-gallery" class="text-gray-400 hover:text-gray-300 text-sm font-medium">
	<i class="fas fa-trash-alt mr-1"></i> Clear
	</button>
	<button id="download-all" class="text-gray-400 hover:text-gray-300 text-sm font-medium">
	<i class="fas fa-download mr-1"></i> Download All
	</button>
	</div>
	</div>
	<div id="gallery-container" class="grid grid-cols-2 gap-2">
	<!-- Gallery Items Will Appear Here -->
	</div>
	<!-- Pagination -->
	<div id="gallery-pagination" class="mt-4 flex justify-center space-x-1 hidden">
	<button class="pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500">1</button>
	<button class="pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500">2</button>
	<button class="pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500">3</button>
	<span class="px-3 py-1">...</span>
	<button class="pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500">10</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Single Model Tab Content (Hidden by default) -->
	<div id="single-model-content" class="p-6 hidden">
	<!-- Similar structure to multi-model but optimized for single model generation -->
	<!-- Content would be similar but with batch size controls and other single-model specific features -->
	</div>

	<!-- Batch Mode Tab Content (Hidden by default) -->
	<div id="batch-content" class="p-6 hidden">
	<!-- Content for batch processing multiple prompts at once -->
	</div>

	<!-- Settings Tab Content (Hidden by default) -->
	<div id="settings-content" class="p-6 hidden">
	<!-- Expanded settings with more options -->
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-gray-800 py-6 mt-12">
	<div class="container mx-auto px-4">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="flex items-center space-x-2 mb-4 md:mb-0">
	<i class="fas fa-fire text-red-500"></i>
	<span class="font-bold">INFERNO AI</span>
	</div>
	<div class="flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-white transition">Terms</a>
	<a href="#" class="text-gray-400 hover:text-white transition">Privacy</a>
	<a href="#" class="text-gray-400 hover:text-white transition">API</a>
	<a href="#" class="text-gray-400 hover:text-white transition">Discord</a>
	<a href="#" class="text-gray-400 hover:text-white transition">GitHub</a>
	</div>
	</div>
	<div class="mt-4 text-center md:text-left text-gray-500 text-sm">
	© 2023 Inferno AI. All generated content is the sole responsibility of the user.
	</div>
	</div>
	</footer>

	<script>
	// Global state
	const state = {
	darkMode: true,
	nsfwEnabled: true,
	selectedModels: ['sd15', 'sd21'],
	generationQueue: [],
	galleryItems: [],
	currentGalleryPage: 1,
	itemsPerPage: 8,
	credits: 1000,
	generationStats: {
	totalGenerations: 0,
	totalCost: 0,
	fastestGeneration: null,
	longestGeneration: null
	}
	};

	// DOM Elements
	const elements = {
	multiModelTab: document.getElementById('multi-model-tab'),
	singleModelTab: document.getElementById('single-model-tab'),
	batchTab: document.getElementById('batch-tab'),
	settingsTab: document.getElementById('settings-tab'),
	multiModelContent: document.getElementById('multi-model-content'),
	singleModelContent: document.getElementById('single-model-content'),
	batchContent: document.getElementById('batch-content'),
	settingsContent: document.getElementById('settings-content'),
	nsfwToggle: document.getElementById('nsfw-toggle'),
	promptInput: document.getElementById('prompt-input'),
	negativePrompt: document.getElementById('negative-prompt'),
	randomPromptBtn: document.getElementById('random-prompt'),
	generateButton: document.getElementById('generate-button'),
	modelCheckboxes: document.querySelectorAll('.model-checkbox'),
	randomModelsBtn: document.getElementById('random-models'),
	clearModelsBtn: document.getElementById('clear-models'),
	selectedCount: document.getElementById('selected-count'),
	outputContainers: [
	document.getElementById('output-1'),
	document.getElementById('output-2'),
	document.getElementById('output-3'),
	document.getElementById('output-4')
	],
	galleryContainer: document.getElementById('gallery-container'),
	clearGalleryBtn: document.getElementById('clear-gallery'),
	downloadAllBtn: document.getElementById('download-all'),
	galleryPagination: document.getElementById('gallery-pagination'),
	queueCount: document.getElementById('queue-count'),
	etaTime: document.getElementById('eta-time'),
	generationCost: document.getElementById('generation-cost'),
	darkModeToggle: document.getElementById('dark-mode-toggle'),
	toastContainer: document.getElementById('toast-container'),
	widthSlider: document.querySelector('input[type="range"][id^="width"]'),
	heightSlider: document.querySelector('input[type="range"][id^="height"]'),
	stepsSlider: document.querySelector('input[type="range"][id^="steps"]'),
	cfgSlider: document.querySelector('input[type="range"][id^="cfg"]'),
	widthValue: document.getElementById('width-value'),
	heightValue: document.getElementById('height-value'),
	stepsValue: document.getElementById('steps-value'),
	cfgValue: document.getElementById('cfg-value'),
	seedInput: document.getElementById('seed-input'),
	randomizeSeed: document.getElementById('randomize-seed'),
	samplerSelect: document.getElementById('sampler-select')
	};

	// NSFW Prompts for random generation
	const nsfwPrompts = [
	"A voluptuous succubus with glowing red eyes and leathery wings seductively lounges on a throne of bones, her curvaceous form barely concealed by wisps of shadow, hyper-detailed, cinematic lighting",
	"A muscular werewolf in mid-transformation pins down a trembling victim, his claws digging into their flesh as drool drips from his fangs, ultra-realistic, dark fantasy",
	"A cybernetic dominatrix in a skin-tight latex suit wields a plasma whip, her augmented eyes scanning the neon-lit dungeon for her next plaything, 8K, hyper-detailed",
	"An elven princess bound in enchanted vines struggles against her restraints as dark magic swirls around her naked form, fantasy art, highly detailed",
	"A post-apocalyptic warrior woman with scarred skin and mechanical limbs stands atop a ruined tank, her plasma rifle glowing as mutants swarm below, sci-fi, ultra-detailed"
	];

	// SFW Prompts for random generation
	const sfwPrompts = [
	"A majestic dragon soars over a medieval castle at sunset, its scales shimmering in the golden light, fantasy art, highly detailed",
	"An astronaut floating in space gazes at Earth with wonder, the planet reflected in their visor, ultra-realistic, cinematic",
	"A cyberpunk street at night with neon signs reflecting on wet pavement, bustling with futuristic crowds, 8K, hyper-detailed",
	"A tranquil Japanese garden in autumn with a wooden bridge over a koi pond, cherry blossoms falling, peaceful atmosphere",
	"A steampunk airship navigates through clouds with intricate brass mechanisms visible, Victorian era aesthetic, detailed"
	];

	// Initialize the application
	function init() {
	setupEventListeners();
	updateSelectedCount();
	updateSliderValues();
	loadGalleryFromStorage();
	renderGallery();
	}

	// Set up all event listeners
	function setupEventListeners() {
	// Tab switching
	elements.multiModelTab.addEventListener('click', () => switchTab('multi'));
	elements.singleModelTab.addEventListener('click', () => switchTab('single'));
	elements.batchTab.addEventListener('click', () => switchTab('batch'));
	elements.settingsTab.addEventListener('click', () => switchTab('settings'));

	// NSFW toggle
	elements.nsfwToggle.addEventListener('change', toggleNSFW);

	// Prompt generation
	elements.randomPromptBtn.addEventListener('click', generateRandomPrompt);

	// Model selection
	elements.modelCheckboxes.forEach(checkbox => {
	checkbox.addEventListener('change', handleModelSelection);
	});
	elements.randomModelsBtn.addEventListener('click', randomizeModels);
	elements.clearModelsBtn.addEventListener('click', clearModelSelection);

	// Generation controls
	elements.generateButton.addEventListener('click', startGeneration);

	// Gallery controls
	elements.clearGalleryBtn.addEventListener('click', clearGallery);
	elements.downloadAllBtn.addEventListener('click', downloadAllGalleryItems);

	// Slider updates
	elements.widthSlider.addEventListener('input', () => updateSliderValue('width'));
	elements.heightSlider.addEventListener('input', () => updateSliderValue('height'));
	elements.stepsSlider.addEventListener('input', () => updateSliderValue('steps'));
	elements.cfgSlider.addEventListener('input', () => updateSliderValue('cfg'));

	// Seed control
	elements.randomizeSeed.addEventListener('click', randomizeSeed);

	// Dark mode toggle
	elements.darkModeToggle.addEventListener('click', toggleDarkMode);

	// Advanced settings toggle
	document.getElementById('advanced-settings-toggle').addEventListener('click', toggleAdvancedSettings);
	}

	// Switch between tabs
	function switchTab(tab) {
	// Hide all content
	elements.multiModelContent.classList.add('hidden');
	elements.singleModelContent.classList.add('hidden');
	elements.batchContent.classList.add('hidden');
	elements.settingsContent.classList.add('hidden');

	// Remove active class from all tabs
	elements.multiModelTab.classList.remove('tab-active');
	elements.singleModelTab.classList.remove('tab-active');
	elements.batchTab.classList.remove('tab-active');
	elements.settingsTab.classList.remove('tab-active');

	// Show selected content and mark tab as active
	switch(tab) {
	case 'multi':
	elements.multiModelContent.classList.remove('hidden');
	elements.multiModelTab.classList.add('tab-active');
	break;
	case 'single':
	elements.singleModelContent.classList.remove('hidden');
	elements.singleModelTab.classList.add('tab-active');
	break;
	case 'batch':
	elements.batchContent.classList.remove('hidden');
	elements.batchTab.classList.add('tab-active');
	break;
	case 'settings':
	elements.settingsContent.classList.remove('hidden');
	elements.settingsTab.classList.add('tab-active');
	break;
	}
	}

	// Toggle NSFW mode
	function toggleNSFW() {
	state.nsfwEnabled = elements.nsfwToggle.checked;
	showToast(state.nsfwEnabled ? 'NSFW mode activated. Let your imagination run wild.' : 'NSFW mode deactivated. Keeping it clean.', state.nsfwEnabled ? 'warning' : 'success');
	}

	// Generate a random prompt
	function generateRandomPrompt() {
	const prompts = state.nsfwEnabled ? nsfwPrompts : sfwPrompts;
	const randomPrompt = prompts[Math.floor(Math.random() * prompts.length)];
	elements.promptInput.value = randomPrompt;
	showToast('Prompt randomized. Let the chaos begin.', 'info');
	}

	// Handle model selection changes
	function handleModelSelection(e) {
	const model = e.target.dataset.model;
	const isChecked = e.target.checked;

	if (isChecked) {
	if (state.selectedModels.length >= 4) {
	e.target.checked = false;
	showToast('Maximum of 4 models can be selected at once. Remove some first.', 'error');
	return;
	}
	state.selectedModels.push(model);
	} else {
	state.selectedModels = state.selectedModels.filter(m => m !== model);
	}

	// Update card styling
	const card = e.target.closest('.model-card');
	if (isChecked) {
	card.classList.add('selected');
	} else {
	card.classList.remove('selected');
	}

	updateSelectedCount();
	}

	// Randomize selected models
	function randomizeModels() {
	// Clear current selection
	elements.modelCheckboxes.forEach(checkbox => {
	checkbox.checked = false;
	checkbox.closest('.model-card').classList.remove('selected');
	});

	// Select random models (2-4)
	const allModels = Array.from(elements.modelCheckboxes).map(cb => cb.dataset.model);
	const numModels = Math.floor(Math.random() * 3) + 2; // 2-4 models
	state.selectedModels = [];

	for (let i = 0; i < numModels; i++) {
	let randomModel;
	do {
	randomModel = allModels[Math.floor(Math.random() * allModels.length)];
	} while (state.selectedModels.includes(randomModel));

	state.selectedModels.push(randomModel);
	const checkbox = document.querySelector(`.model-checkbox[data-model="${randomModel}"]`);
	checkbox.checked = true;
	checkbox.closest('.model-card').classList.add('selected');
	}

	updateSelectedCount();
	showToast(`Randomly selected ${numModels} models. Roll the dice!`, 'info');
	}

	// Clear all model selections
	function clearModelSelection() {
	elements.modelCheckboxes.forEach(checkbox => {
	checkbox.checked = false;
	checkbox.closest('.model-card').classList.remove('selected');
	});
	state.selectedModels = [];
	updateSelectedCount();
	showToast('All models deselected. Clean slate.', 'info');
	}

	// Update the selected models counter
	function updateSelectedCount() {
	elements.selectedCount.textContent = `${state.selectedModels.length}/4 selected`;
	if (state.selectedModels.length === 4) {
	elements.selectedCount.classList.add('bg-red-600');
	} else {
	elements.selectedCount.classList.remove('bg-red-600');
	}
	}

	// Start the generation process
	function startGeneration() {
	if (state.selectedModels.length === 0) {
	showToast('Select at least one model to generate images.', 'error');
	return;
	}

	if (elements.promptInput.value.trim() === '') {
	showToast('Enter a prompt to generate images. Your imagination is the limit.', 'error');
	return;
	}

	// Disable generate button during generation
	elements.generateButton.disabled = true;
	elements.generateButton.innerHTML = '<i class="fas fa-spinner loading-spinner mr-2"></i> IGNITING...';

	// Get generation parameters
	const params = {
	prompt: elements.promptInput.value,
	negativePrompt: elements.negativePrompt.value,
	width: parseInt(elements.widthValue.textContent),
	height: parseInt(elements.heightValue.textContent),
	steps: parseInt(elements.stepsValue.textContent),
	cfg: parseFloat(elements.cfgValue.textContent),
	seed: elements.seedInput.value === '-1' ? Math.floor(Math.random() * 4294967295) : parseInt(elements.seedInput.value),
	sampler: elements.samplerSelect.value,
	nsfw: state.nsfwEnabled
	};

	// Add to queue
	state.generationQueue = [...state.selectedModels];
	updateQueueDisplay();

	// Simulate generation for each model
	state.selectedModels.forEach((model, index) => {
	setTimeout(() => {
	simulateGeneration(model, params, index);
	}, index * 2000);
	});

	// Update credits
	const cost = state.selectedModels.length * 5; // 5 credits per image
	state.credits -= cost;
	showToast(`Generation started. ${cost} credits deducted.`, 'info');
	}

	// Simulate a generation (in a real app, this would call an API)
	function simulateGeneration(model, params, index) {
	// Update queue
	state.generationQueue = state.generationQueue.filter(m => m !== model);
	updateQueueDisplay();

	// Show generating state
	const outputContainer = elements.outputContainers[index];
	outputContainer.innerHTML = `
	<div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center rounded-lg">
	<i class="fas fa-spinner loading-spinner text-red-500 text-2xl mb-2"></i>
	<span class="text-white text-sm">Generating with ${getModelName(model)}...</span>
	<span class="text-gray-400 text-xs mt-1">ETA: ${Math.floor(Math.random() * 10) + 5}s</span>
	</div>
	`;

	// Simulate generation time (2-5 seconds)
	const generationTime = Math.floor(Math.random() * 3000) + 2000;

	setTimeout(() => {
	// Randomly decide if generation fails (10% chance)
	if (Math.random() < 0.1) {
	simulateFailedGeneration(model, index);
	return;
	}

	// Successful generation
	const imageUrl = getRandomImageUrl();
	outputContainer.innerHTML = `
	<img src="${imageUrl}" class="w-full h-full object-cover rounded-lg">
	<div class="absolute bottom-2 right-2 flex space-x-1">
	<button class="download-btn bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-download text-xs"></i>
	</button>
	<button class="upscale-btn bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
	<i class="fas fa-expand text-xs"></i>
	</button>
	</div>
	<div class="absolute top-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
	${getModelName(model)}
	</div>
	`;

	// Add to gallery
	const galleryItem = {
	id: Date.now(),
	model,
	prompt: params.prompt,
	imageUrl,
	timestamp: new Date().toISOString(),
	params
	};
	state.galleryItems.unshift(galleryItem);
	saveGalleryToStorage();
	renderGallery();

	// Re-enable generate button if queue is empty
	if (state.generationQueue.length === 0) {
	elements.generateButton.disabled = false;
	elements.generateButton.innerHTML = '<i class="fas fa-fire mr-2"></i> IGNITE CREATION';
	}

	// Set up download/upscale buttons
	setupImageButtons(outputContainer, galleryItem);
	}, generationTime);
	}

	// Simulate a failed generation
	function simulateFailedGeneration(model, index) {
	const outputContainer = elements.outputContainers[index];
	outputContainer.innerHTML = `
	<div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center rounded-lg">
	<i class="fas fa-exclamation-triangle text-red-500 text-2xl mb-2"></i>
	<span class="text-white text-sm">Generation failed</span>
	<span class="text-gray-400 text-xs mt-1">${getModelName(model)}</span>
	<button class="retry-btn mt-2 text-xs bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded">
	Retry
	</button>
	</div>
	`;

	// Set up retry button
	outputContainer.querySelector('.retry-btn').addEventListener('click', () => {
	state.generationQueue.push(model);
	updateQueueDisplay();
	simulateGeneration(model, {}, index);
	});

	// Re-enable generate button if queue is empty
	if (state.generationQueue.length === 0) {
	elements.generateButton.disabled = false;
	elements.generateButton.innerHTML = '<i class="fas fa-fire mr-2"></i> IGNITE CREATION';
	}

	showToast(`Generation failed for ${getModelName(model)}. The demons resisted your call.`, 'error');
	}

	// Update the queue display
	function updateQueueDisplay() {
	elements.queueCount.textContent = state.generationQueue.length;

	if (state.generationQueue.length > 0) {
	const eta = state.generationQueue.length * 5 + Math.floor(Math.random() * 10);
	elements.etaTime.textContent = `${eta}s`;
	elements.generationCost.textContent = (state.generationQueue.length * 5).toFixed(2);
	} else {
	elements.etaTime.textContent = '-';
	elements.generationCost.textContent = '0.00';
	}
	}

	// Get model name from ID
	function getModelName(modelId) {
	const modelNames = {
	'sd15': 'Stable Diffusion 1.5',
	'sd21': 'Stable Diffusion 2.1',
	'openjourney': 'OpenJourney',
	'dreamlike': 'Dreamlike',
	'anything': 'Anything V3',
	'deliberate': 'Deliberate',
	'realistic': 'Realistic Vision',
	'hentai': 'Hentai Diffusion',
	'waifu': 'Waifu Diffusion'
	};
	return modelNames[modelId] \|\| modelId;
	}

	// Get a random image URL for simulation
	function getRandomImageUrl() {
	const randomNum = Math.floor(Math.random() * 1000);
	return `https://picsum.photos/800/800?random=${randomNum}`;
	}

	// Set up download and upscale buttons for an image
	function setupImageButtons(container, galleryItem) {
	container.querySelector('.download-btn').addEventListener('click', () => {
	downloadImage(galleryItem.imageUrl, `inferno-${galleryItem.model}-${galleryItem.id}.jpg`);
	showToast('Image downloaded. Treasure your creation.', 'success');
	});

	container.querySelector('.upscale-btn').addEventListener('click', () => {
	showToast(`Upscaling image generated with ${getModelName(galleryItem.model)}...`, 'info');
	// In a real app, this would trigger an upscale API call
	});
	}

	// Download an image
	function downloadImage(url, filename) {
	const a = document.createElement('a');
	a.href = url;
	a.download = filename;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	}

	// Load gallery from localStorage
	function loadGalleryFromStorage() {
	const savedGallery = localStorage.getItem('infernoGallery');
	if (savedGallery) {
	try {
	state.galleryItems = JSON.parse(savedGallery);
	} catch (e) {
	console.error('Failed to parse gallery data', e);
	state.galleryItems = [];
	}
	}
	}

	// Save gallery to localStorage
	function saveGalleryToStorage() {
	localStorage.setItem('infernoGallery', JSON.stringify(state.galleryItems));
	}

	// Render the gallery
	function renderGallery() {
	elements.galleryContainer.innerHTML = '';

	if (state.galleryItems.length === 0) {
	elements.galleryContainer.innerHTML = `
	<div class="col-span-2 py-8 text-center">
	<i class="fas fa-fire text-gray-600 text-3xl mb-2"></i>
	<p class="text-gray-500">Your gallery is empty. Ignite some creations!</p>
	</div>
	`;
	elements.galleryPagination.classList.add('hidden');
	return;
	}

	// Calculate pagination
	const totalPages = Math.ceil(state.galleryItems.length / state.itemsPerPage);
	const startIndex = (state.currentGalleryPage - 1) * state.itemsPerPage;
	const endIndex = Math.min(startIndex + state.itemsPerPage, state.galleryItems.length);
	const itemsToShow = state.galleryItems.slice(startIndex, endIndex);

	// Render items
	itemsToShow.forEach(item => {
	const galleryItemElement = document.createElement('div');
	galleryItemElement.className = 'bg-gray-800 border border-gray-700 rounded-lg overflow-hidden relative group';
	galleryItemElement.innerHTML = `
	<img src="${item.imageUrl}" class="w-full h-32 object-cover">
	<div class="p-2">
	<p class="text-xs text-gray-300 truncate">${item.prompt.substring(0, 40)}${item.prompt.length > 40 ? '...' : ''}</p>
	<p class="text-xs text-gray-500">${getModelName(item.model)}</p>
	</div>
	<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition flex items-center justify-center space-x-2 opacity-0 group-hover:opacity-100">
	<button class="download-btn bg-gray-800 hover:bg-gray-700 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
	<i class="fas fa-download"></i>
	</button>
	<button class="upscale-btn bg-red-600 hover:bg-red-700 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
	<i class="fas fa-expand"></i>
	</button>
	<button class="delete-btn bg-gray-800 hover:bg-red-600 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
	<i class="fas fa-trash"></i>
	</button>
	</div>
	`;
	elements.galleryContainer.appendChild(galleryItemElement);

	// Set up buttons
	galleryItemElement.querySelector('.download-btn').addEventListener('click', () => {
	downloadImage(item.imageUrl, `inferno-${item.model}-${item.id}.jpg`);
	showToast('Image downloaded. Another trophy for your collection.', 'success');
	});

	galleryItemElement.querySelector('.upscale-btn').addEventListener('click', () => {
	showToast(`Upscaling image generated with ${getModelName(item.model)}...`, 'info');
	});

	galleryItemElement.querySelector('.delete-btn').addEventListener('click', () => {
	state.galleryItems = state.galleryItems.filter(i => i.id !== item.id);
	saveGalleryToStorage();
	renderGallery();
	showToast('Image deleted. Reduced to ashes.', 'info');
	});
	});

	// Render pagination if needed
	if (totalPages > 1) {
	elements.galleryPagination.classList.remove('hidden');
	elements.galleryPagination.innerHTML = '';

	// Previous button
	if (state.currentGalleryPage > 1) {
	const prevBtn = document.createElement('button');
	prevBtn.className = 'pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500';
	prevBtn.innerHTML = '<i class="fas fa-chevron-left"></i>';
	prevBtn.addEventListener('click', () => {
	state.currentGalleryPage--;
	renderGallery();
	});
	elements.galleryPagination.appendChild(prevBtn);
	}

	// Page buttons
	const maxVisiblePages = 5;
	let startPage = Math.max(1, state.currentGalleryPage - Math.floor(maxVisiblePages / 2));
	let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

	if (endPage - startPage + 1 < maxVisiblePages) {
	startPage = Math.max(1, endPage - maxVisiblePages + 1);
	}

	if (startPage > 1) {
	const firstBtn = document.createElement('button');
	firstBtn.className = 'pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500';
	firstBtn.textContent = '1';
	firstBtn.addEventListener('click', () => {
	state.currentGalleryPage = 1;
	renderGallery();
	});
	elements.galleryPagination.appendChild(firstBtn);

	if (startPage > 2) {
	const ellipsis = document.createElement('span');
	ellipsis.className = 'px-3 py-1';
	ellipsis.textContent = '...';
	elements.galleryPagination.appendChild(ellipsis);
	}
	}

	for (let i = startPage; i <= endPage; i++) {
	const pageBtn = document.createElement('button');
	pageBtn.className = `pagination-btn px-3 py-1 rounded ${i === state.currentGalleryPage ? 'bg-red-600 text-white' : 'bg-gray-600 hover:bg-gray-500'}`;
	pageBtn.textContent = i;
	pageBtn.addEventListener('click', () => {
	state.currentGalleryPage = i;
	renderGallery();
	});
	elements.galleryPagination.appendChild(pageBtn);
	}

	if (endPage < totalPages) {
	if (endPage < totalPages - 1) {
	const ellipsis = document.createElement('span');
	ellipsis.className = 'px-3 py-1';
	ellipsis.textContent = '...';
	elements.galleryPagination.appendChild(ellipsis);
	}

	const lastBtn = document.createElement('button');
	lastBtn.className = 'pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500';
	lastBtn.textContent = totalPages;
	lastBtn.addEventListener('click', () => {
	state.currentGalleryPage = totalPages;
	renderGallery();
	});
	elements.galleryPagination.appendChild(lastBtn);
	}

	// Next button
	if (state.currentGalleryPage < totalPages) {
	const nextBtn = document.createElement('button');
	nextBtn.className = 'pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500';
	nextBtn.innerHTML = '<i class="fas fa-chevron-right"></i>';
	nextBtn.addEventListener('click', () => {
	state.currentGalleryPage++;
	renderGallery();
	});
	elements.galleryPagination.appendChild(nextBtn);
	}
	} else {
	elements.galleryPagination.classList.add('hidden');
	}
	}

	// Clear the gallery
	function clearGallery() {
	if (state.galleryItems.length === 0) return;

	if (confirm('Burn your entire gallery to ashes? This cannot be undone.')) {
	state.galleryItems = [];
	saveGalleryToStorage();
	renderGallery();
	showToast('Gallery purged. All creations reduced to dust.', 'warning');
	}
	}

	// Download all gallery items as a ZIP (simulated)
	function downloadAllGalleryItems() {
	if (state.galleryItems.length === 0) {
	showToast('Your gallery is empty. Nothing to download.', 'error');
	return;
	}

	showToast('Preparing your collection for download...', 'info');
	// In a real app, this would generate a ZIP file with all images
	setTimeout(() => {
	showToast('Download complete. Your dark creations are now yours forever.', 'success');
	}, 2000);
	}

	// Update slider value displays
	function updateSliderValues() {
	updateSliderValue('width');
	updateSliderValue('height');
	updateSliderValue('steps');
	updateSliderValue('cfg');
	}

	// Update a specific slider value display
	function updateSliderValue(type) {
	const slider = elements[`${type}Slider`];
	const valueElement = elements[`${type}Value`];
	valueElement.textContent = slider.value;
	}

	// Randomize the seed
	function randomizeSeed() {
	const newSeed = Math.floor(Math.random() * 4294967295);
	elements.seedInput.value = newSeed;
	showToast(`Seed randomized: ${newSeed}. New possibilities await.`, 'info');
	}

	// Toggle dark mode
	function toggleDarkMode() {
	state.darkMode = !state.darkMode;
	if (state.darkMode) {
	document.body.classList.add('bg-gray-900', 'text-gray-100');
	document.body.classList.remove('bg-gray-100', 'text-gray-900');
	elements.darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
	showToast('Dark mode activated. The shadows welcome you.', 'info');
	} else {
	document.body.classList.remove('bg-gray-900', 'text-gray-100');
	document.body.classList.add('bg-gray-100', 'text-gray-900');
	elements.darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
	showToast('Light mode activated. The brightness burns.', 'warning');
	}
	}

	// Toggle advanced settings
	function toggleAdvancedSettings() {
	const content = document.getElementById('advanced-settings-content');
	const icon = document.querySelector('#advanced-settings-toggle i');

	content.classList.toggle('hidden');
	icon.classList.toggle('rotate-180');
	}

	// Show a toast notification
	function showToast(message, type = 'info') {
	const toast = document.createElement('div');
	const types = {
	'info': { bg: 'bg-gray-700', icon: 'fa-info-circle' },
	'success': { bg: 'bg-green-700', icon: 'fa-check-circle' },
	'warning': { bg: 'bg-yellow-700', icon: 'fa-exclamation-circle' },
	'error': { bg: 'bg-red-700', icon: 'fa-times-circle' }
	};

	toast.className = `error-toast ${types[type].bg} text-white px-4 py-3 rounded-lg shadow-lg flex items-start max-w-md`;
	toast.innerHTML = `
	<i class="fas ${types[type].icon} mr-2 mt-0.5"></i>
	<span>${message}</span>
	`;

	elements.toastContainer.appendChild(toast);

	// Remove toast after animation
	setTimeout(() => {
	toast.remove();
	}, 3000);
	}

	// Initialize the app
	document.addEventListener('DOMContentLoaded', init);
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/inferno" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>