Hugging Face's logo

Spaces:
Greats
/
garrisson
Running

App Files Community
garrisson / index.html
Greats's picture
Greats
Add 2 files
b6ea8a8 verified
raw
history blame contribute delete
33.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AI Image Generator - Free Stable Diffusion</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>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Poppins', sans-serif;
 background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
 min-height: 100vh;
 color: #fff;
 }
.gradient-text {
 background: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.glow-box {
 box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
 }
.image-card {
 transition: all 0.3s ease;
 transform: scale(0.95);
 }
.image-card:hover {
 transform: scale(1);
 box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
 }
.loading-spinner {
 animation: spin 1s linear infinite;
 }
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
.floating {
 animation: floating 3s ease-in-out infinite;
 }
@keyframes floating {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0px); }
 }
/* Pulse animation for generate button */
 .pulse {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
 70% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
 }
/* AI Generated Image Placeholder */
 .ai-placeholder {
 background: linear-gradient(45deg, #2d3748 25%, #4a5568 50%, #2d3748 75%);
 background-size: 200% 200%;
 animation: placeholderShimmer 2s linear infinite;
 position: relative;
 overflow: hidden;
 }
@keyframes placeholderShimmer {
 0% { background-position: 0% 0%; }
 100% { background-position: 200% 200%; }
 }
.ai-placeholder::after {
 content: "AI Generated";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: rgba(255, 255, 255, 0.3);
 font-size: 1.2rem;
 font-weight: bold;
 }
 </style>
</head>
<body class="min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <!-- Header -->
 <header class="text-center mb-12">
 <h1 class="text-4xl md:text-6xl font-bold mb-4 gradient-text">AI Image Generator</h1>
 <p class="text-xl text-gray-300">Powered by Stable Diffusion - Free Generation</p>
 <div class="mt-6 floating">
 <i class="fas fa-magic text-5xl text-purple-500"></i>
 </div>
 </header>
<!-- Main Generator Section -->
 <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-6 glow-box mb-12">
 <div class="flex flex-col md:flex-row gap-6">
 <!-- Input Section -->
 <div class="flex-1">
 <div class="mb-6">
 <label for="prompt" class="block text-lg font-medium mb-2 text-purple-300">
 <i class="fas fa-align-left mr-2"></i>Describe your image
 </label>
 <textarea
id="prompt"
rows="5"
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white placeholder-gray-400"
 placeholder="A majestic lion standing on a cliff at sunset, digital art, highly detailed, cinematic lighting..."
 ></textarea>
 </div>
<div class="mb-6">
 <label for="imageCount" class="block text-lg font-medium mb-2 text-purple-300">
 <i class="fas fa-images mr-2"></i>Number of images (1-4)
 </label>
 <div class="flex items-center">
 <input
type="range"
id="imageCount"
min="1"
max="4"
value="1"
class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
 >
 <span id="countDisplay" class="ml-4 text-xl font-bold w-8 text-center">1</span>
 </div>
 </div>
<div class="mb-6">
 <label class="block text-lg font-medium mb-2 text-purple-300">
 <i class="fas fa-palette mr-2"></i>Style
 </label>
 <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
 <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="realistic">Realistic</button>
 <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="fantasy">Fantasy</button>
 <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="anime">Anime</button>
 <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="digital-art">Digital Art</button>
 <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="watercolor">Watercolor</button>
 <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="pixel-art">Pixel Art</button>
 </div>
 </div>
 </div>
<!-- Advanced Options -->
 <div class="flex-1">
 <div class="mb-6">
 <label class="block text-lg font-medium mb-2 text-purple-300">
 <i class="fas fa-sliders-h mr-2"></i>Advanced Options
 </label>
<div class="mb-4">
 <label for="resolution" class="block text-sm font-medium mb-1 text-gray-300">Resolution</label>
 <select id="resolution" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white">
 <option value="512x512">512x512</option>
 <option value="768x768">768x768</option>
 <option value="1024x1024" selected>1024x1024</option>
 </select>
 </div>
<div class="mb-4">
 <label for="creativity" class="block text-sm font-medium mb-1 text-gray-300">Creativity Level</label>
 <select id="creativity" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white">
 <option value="20">Low (Precise)</option>
 <option value="50" selected>Medium (Balanced)</option>
 <option value="80">High (Creative)</option>
 </select>
 </div>
<div class="mb-4">
 <label for="negativePrompt" class="block text-sm font-medium mb-1 text-gray-300">Negative Prompt</label>
 <input
type="text"
id="negativePrompt"
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white"
 placeholder="blurry, low quality, distorted, bad anatomy"
 >
 </div>
 </div>
<button id="generateBtn" class="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 rounded-lg font-bold text-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center pulse">
 <i class="fas fa-bolt mr-2"></i> Generate Images
 </button>
<div class="mt-4 text-sm text-gray-400 text-center">
 <p><i class="fas fa-bolt mr-1"></i> Powered by Stable Diffusion</p>
 <p><i class="fas fa-lock-open mr-1"></i> Free Generation (Limited)</p>
 </div>
 </div>
 </div>
 </div>
<!-- Results Section -->
 <div id="resultsSection" class="hidden">
 <h2 class="text-2xl font-bold mb-6 text-center gradient-text">Your Generated Images</h2>
<div id="loadingIndicator" class="hidden text-center py-12">
 <div class="inline-block loading-spinner text-5xl text-purple-500 mb-4">
 <i class="fas fa-spinner"></i>
 </div>
 <p class="text-xl">Generating your images... This may take 20-30 seconds</p>
 <p class="text-gray-400 mt-2">Creating <span id="loadingCount">1</span> unique variation</p>
 <div class="mt-6 w-full bg-gray-700 rounded-full h-2.5">
 <div id="progressBar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
 </div>
 </div>
<div id="resultsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 mb-12">
 <!-- Images will appear here -->
 </div>
<div id="errorMessage" class="hidden bg-red-900/50 border border-red-700 rounded-lg p-4 text-center">
 <i class="fas fa-exclamation-triangle mr-2"></i>
 <span id="errorText">There was an error generating your images. Please try again.</span>
 </div>
<div class="text-center mt-8">
 <button id="downloadAllBtn" class="hidden px-6 py-3 bg-green-600 hover:bg-green-700 rounded-lg font-medium mr-4">
 <i class="fas fa-download mr-2"></i> Download All
 </button>
 <button id="generateMoreBtn" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium">
 <i class="fas fa-redo mr-2"></i> Generate More
 </button>
 </div>
 </div>
<!-- Features Section -->
 <div class="max-w-6xl mx-auto mt-16 mb-16">
 <h2 class="text-3xl font-bold mb-8 text-center gradient-text">Why Choose Our Generator?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
 <div class="text-purple-500 text-4xl mb-4">
 <i class="fas fa-bolt"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Stable Diffusion</h3>
 <p class="text-gray-300">We use the powerful Stable Diffusion model for high-quality image generation.</p>
 </div>
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
 <div class="text-purple-500 text-4xl mb-4">
 <i class="fas fa-sliders-h"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Advanced Controls</h3>
 <p class="text-gray-300">Fine-tune your results with style selection, resolution, and creativity controls.</p>
 </div>
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
 <div class="text-purple-500 text-4xl mb-4">
 <i class="fas fa-cloud"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Cloud Processing</h3>
 <p class="text-gray-300">No need for powerful hardware - we handle all processing in the cloud.</p>
 </div>
 </div>
 </div>
<!-- API Information -->
 <div class="max-w-4xl mx-auto bg-gray-800/50 rounded-xl p-6 border border-gray-700 mb-16">
 <h3 class="text-xl font-bold mb-4 text-purple-400"><i class="fas fa-code mr-2"></i> About the Technology</h3>
 <p class="text-gray-300 mb-4">
 This generator uses the Stable Diffusion AI model through Replicate's API. Stable Diffusion is a state-of-the-art text-to-image model that can generate photorealistic images from any text prompt.
 </p>
 <p class="text-gray-300">
 <i class="fas fa-info-circle mr-2 text-purple-400"></i> Note: Free generation is limited to 1-4 images at a time. For higher volume, consider using your own API key.
 </p>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-900/50 py-8 border-t border-gray-800">
 <div class="container mx-auto px-4 text-center">
 <p class="text-gray-400 mb-4">© 2023 AI Image Generator. All generated images are free to use for any purpose.</p>
 <div class="flex justify-center space-x-4">
 <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-discord"></i></a>
 <a href="https://replicate.com/stability-ai/stable-diffusion" target="_blank" class="text-gray-400 hover:text-purple-400"><i class="fas fa-external-link-alt"></i> Replicate API</a>
 </div>
 </div>
 </footer>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Update image count display
 const imageCount = document.getElementById('imageCount');
 const countDisplay = document.getElementById('countDisplay');
 const loadingCount = document.getElementById('loadingCount');
imageCount.addEventListener('input', function() {
 countDisplay.textContent = this.value;
 loadingCount.textContent = this.value;
 });
// Style selection
 const styleButtons = document.querySelectorAll('.style-btn');
 let selectedStyle = 'realistic';
styleButtons.forEach(button => {
 button.addEventListener('click', function() {
 styleButtons.forEach(btn => btn.classList.remove('bg-purple-600'));
 this.classList.add('bg-purple-600');
 selectedStyle = this.dataset.style;
 });
 });
// Set first style as active by default
 if (styleButtons.length > 0) {
 styleButtons[0].classList.add('bg-purple-600');
 }
// Generate button functionality
 const generateBtn = document.getElementById('generateBtn');
 const resultsSection = document.getElementById('resultsSection');
 const loadingIndicator = document.getElementById('loadingIndicator');
 const resultsGrid = document.getElementById('resultsGrid');
 const errorMessage = document.getElementById('errorMessage');
 const downloadAllBtn = document.getElementById('downloadAllBtn');
 const generateMoreBtn = document.getElementById('generateMoreBtn');
 const progressBar = document.getElementById('progressBar');
generateBtn.addEventListener('click', async function() {
 const prompt = document.getElementById('prompt').value.trim();
 const negativePrompt = document.getElementById('negativePrompt').value.trim();
 const creativity = document.getElementById('creativity').value;
 const resolution = document.getElementById('resolution').value;
 const count = parseInt(imageCount.value);
if (!prompt) {
 showError('Please enter a description for your image');
 return;
 }
// Show loading state
 resultsSection.classList.remove('hidden');
 loadingIndicator.classList.remove('hidden');
 resultsGrid.innerHTML = '';
 errorMessage.classList.add('hidden');
 downloadAllBtn.classList.add('hidden');
// Reset progress bar
 progressBar.style.width = '0%';
// Update progress bar
 let progress = 0;
 const progressInterval = setInterval(() => {
 progress += 2;
 if (progress > 90) progress = 90; // Don't go to 100% until API call completes
 progressBar.style.width = `${progress}%`;
 }, 300);
try {
 // Prepare the prompt with style
 let fullPrompt = prompt;
 if (selectedStyle === 'realistic') fullPrompt += ', realistic, photorealistic, 8k';
 if (selectedStyle === 'fantasy') fullPrompt += ', fantasy art, magical, ethereal';
 if (selectedStyle === 'anime') fullPrompt += ', anime style, vibrant colors';
 if (selectedStyle === 'digital-art') fullPrompt += ', digital art, concept art';
 if (selectedStyle === 'watercolor') fullPrompt += ', watercolor painting';
 if (selectedStyle === 'pixel-art') fullPrompt += ', pixel art, 8-bit';
// Call Stable Diffusion API (simulated)
 const response = await simulateStableDiffusionAPI(fullPrompt, negativePrompt, creativity, resolution, count);
// Process the response
 clearInterval(progressInterval);
 progressBar.style.width = '100%';
if (response && response.images) {
 displayGeneratedImages(response.images, prompt);
// Show download all button if multiple images
 if (count > 1) {
 downloadAllBtn.classList.remove('hidden');
 }
 } else {
 showError('Failed to generate images. Please try again.');
 }
 } catch (error) {
 clearInterval(progressInterval);
 showError('Error connecting to the AI service. Please try again later.');
 console.error('API Error:', error);
 } finally {
 loadingIndicator.classList.add('hidden');
 }
 });
async function simulateStableDiffusionAPI(prompt, negativePrompt, creativity, resolution, count) {
 // Simulate API delay (2-5 seconds)
 const delay = 2000 + Math.random() * 3000;
 await new Promise(resolve => setTimeout(resolve, delay));
// Generate mock images based on prompt
 const [width, height] = resolution.split('x').map(Number);
 const images = [];
// Create a canvas to generate placeholder images
 const canvas = document.createElement('canvas');
 canvas.width = width;
 canvas.height = height;
 const ctx = canvas.getContext('2d');
for (let i = 0; i < count; i++) {
 // Create a unique seed for each image
 const seed = Math.floor(Math.random() * 1000000);
// Generate a unique image URL based on prompt and parameters
 const imageUrl = generatePlaceholderImage(prompt, width, height, selectedStyle, seed);
images.push({
 url: imageUrl,
 prompt: prompt,
 seed: seed
 });
 }
return {
 images: images
 };
 }
function generatePlaceholderImage(prompt, width, height, style, seed) {
 // Create a canvas to generate placeholder images
 const canvas = document.createElement('canvas');
 canvas.width = width;
 canvas.height = height;
 const ctx = canvas.getContext('2d');
// Generate a unique color based on the prompt and seed
 const hash = hashCode(prompt + seed);
 const hue = hash % 360;
 const saturation = 50 + (hash % 50);
 const lightness = 30 + (hash % 40);
// Draw gradient background
 const gradient = ctx.createLinearGradient(0, 0, width, height);
 gradient.addColorStop(0, `hsl(${hue}, ${saturation}%, ${lightness}%)`);
 gradient.addColorStop(1, `hsl(${(hue + 30) % 360}, ${saturation}%, ${lightness - 10}%)`);
 ctx.fillStyle = gradient;
 ctx.fillRect(0, 0, width, height);
// Add some noise
 const imageData = ctx.getImageData(0, 0, width, height);
 const data = imageData.data;
 for (let i = 0; i < data.length; i += 4) {
 if (Math.random() > 0.7) {
 const noise = Math.floor(Math.random() * 50) - 25;
 data[i] += noise; // R
 data[i + 1] += noise; // G
 data[i + 2] += noise; // B
 }
 }
 ctx.putImageData(imageData, 0, 0);
// Add style-specific elements
 if (style === 'realistic') {
 // Add some blurry shapes that might resemble objects
 for (let i = 0; i < 5; i++) {
 const x = Math.random() * width;
 const y = Math.random() * height;
 const radius = 20 + Math.random() * 80;
ctx.beginPath();
 ctx.arc(x, y, radius, 0, Math.PI * 2);
 ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.2})`;
 ctx.filter = 'blur(5px)';
 ctx.fill();
 }
 ctx.filter = 'none';
 } else if (style === 'fantasy') {
 // Add some magical-looking elements
 for (let i = 0; i < 8; i++) {
 const x = Math.random() * width;
 const y = Math.random() * height;
 const size = 10 + Math.random() * 40;
ctx.beginPath();
 ctx.moveTo(x, y);
 for (let j = 0; j < 5; j++) {
 const angle = (j * Math.PI * 2) / 5;
 const radius = size * (0.5 + Math.random() * 0.5);
 ctx.lineTo(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);
 }
 ctx.closePath();
 ctx.fillStyle = `hsla(${(hue + i * 30) % 360}, 80%, 70%, 0.5)`;
 ctx.filter = 'blur(2px)';
 ctx.fill();
 }
 ctx.filter = 'none';
 } else if (style === 'anime') {
 // Add some anime-style elements
 for (let i = 0; i < 3; i++) {
 const x = Math.random() * width;
 const y = Math.random() * height;
 const size = 30 + Math.random() * 70;
ctx.beginPath();
 ctx.arc(x, y, size, 0, Math.PI * 2);
 ctx.strokeStyle = `hsl(${(hue + i * 60) % 360}, 80%, 60%)`;
 ctx.lineWidth = 3;
 ctx.stroke();
ctx.beginPath();
 ctx.arc(x, y, size * 0.7, 0, Math.PI * 2);
 ctx.fillStyle = `hsla(${(hue + i * 60) % 360}, 80%, 80%, 0.3)`;
 ctx.fill();
 }
 }
// Add text indicating this is an AI generated image
 ctx.font = 'bold 20px Arial';
 ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
 ctx.textAlign = 'center';
 ctx.fillText('AI Generated Image', width / 2, height / 2);
// Add prompt hash and seed
 ctx.font = '10px Arial';
 ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
 ctx.textAlign = 'left';
 ctx.fillText(`Prompt: ${prompt.substring(0, 30)}...`, 10, height - 30);
 ctx.fillText(`Seed: ${seed} | Style: ${style}`, 10, height - 15);
return canvas.toDataURL('image/png');
 }
function hashCode(str) {
 let hash = 0;
 for (let i = 0; i < str.length; i++) {
 const char = str.charCodeAt(i);
 hash = ((hash << 5) - hash) + char;
 hash = hash & hash; // Convert to 32bit integer
 }
 return Math.abs(hash);
 }
function displayGeneratedImages(images, prompt) {
 resultsGrid.innerHTML = '';
images.forEach((image, index) => {
 // Create image card
 const card = document.createElement('div');
 card.className = 'image-card bg-gray-800 rounded-xl overflow-hidden';
// Create image container
 const imgContainer = document.createElement('div');
 imgContainer.className = 'w-full h-64 bg-gray-700 flex items-center justify-center overflow-hidden';
// Create image element
 const img = document.createElement('img');
 img.src = image.url;
 img.alt = prompt;
 img.className = 'w-full h-full object-cover';
 img.loading = 'lazy';
// Create card body
 const cardBody = document.createElement('div');
 cardBody.className = 'p-4';
// Create prompt preview
 const promptPreview = document.createElement('p');
 promptPreview.className = 'text-sm text-gray-400 truncate';
 promptPreview.textContent = prompt;
// Create style indicator
 const styleIndicator = document.createElement('div');
 styleIndicator.className = 'text-xs text-purple-400 mt-1 flex items-center';
 styleIndicator.innerHTML = `<i class="fas fa-palette mr-1"></i> ${selectedStyle}`;
// Create download button
 const downloadBtn = document.createElement('button');
 downloadBtn.className = 'mt-3 w-full py-2 bg-gray-700 hover:bg-purple-600 rounded-lg text-sm font-medium transition flex items-center justify-center';
 downloadBtn.innerHTML = '<i class="fas fa-download mr-2"></i> Download';
// Add click event to download button
 downloadBtn.addEventListener('click', function() {
 downloadImage(image.url, prompt, index+1);
 });
// Assemble card
 imgContainer.appendChild(img);
 card.appendChild(imgContainer);
 cardBody.appendChild(promptPreview);
 cardBody.appendChild(styleIndicator);
 cardBody.appendChild(downloadBtn);
 card.appendChild(cardBody);
// Add to grid
 resultsGrid.appendChild(card);
 });
 }
function downloadImage(url, prompt, index) {
 const link = document.createElement('a');
 link.download = `ai-image-${index}-${prompt.substring(0, 15).replace(/\s+/g, '-')}.png`;
 link.href = url;
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
// Show notification
 const notification = document.createElement('div');
 notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
 notification.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Downloading image ${index}...`;
 document.body.appendChild(notification);
setTimeout(() => {
 notification.remove();
 }, 3000);
 }
function showError(message) {
 errorMessage.classList.remove('hidden');
 document.getElementById('errorText').textContent = message;
 }
// Download all button
 downloadAllBtn.addEventListener('click', function() {
 const count = parseInt(imageCount.value);
 const prompt = document.getElementById('prompt').value.trim();
 const images = document.querySelectorAll('#resultsGrid img');
images.forEach((img, index) => {
 setTimeout(() => {
 downloadImage(img.src, prompt, index+1);
 }, index * 300);
 });
// Show notification
 const notification = document.createElement('div');
 notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
 notification.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Downloading ${images.length} images...`;
 document.body.appendChild(notification);
setTimeout(() => {
 notification.remove();
 }, 3000);
 });
// Generate more button
 generateMoreBtn.addEventListener('click', function() {
 window.scrollTo({
 top: 0,
 behavior: 'smooth'
 });
 });
 });
 </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=Greats/garrisson" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>